diff --git a/dev.code-workspace b/dev.code-workspace
index b155abd3..6cc26106 100644
--- a/dev.code-workspace
+++ b/dev.code-workspace
@@ -13,6 +13,7 @@
"i18n-ally.localesPaths": [
"src/i18n",
"src/i18n/locales"
- ]
+ ],
+ "i18n-ally.keystyle": "nested"
}
}
diff --git a/ux/src/components/SiteCreateDialog.vue b/ux/src/components/SiteCreateDialog.vue
index 754bcb78..c6cedb75 100644
--- a/ux/src/components/SiteCreateDialog.vue
+++ b/ux/src/components/SiteCreateDialog.vue
@@ -1,24 +1,24 @@
-q-dialog(ref='dialog', @hide='onDialogHide')
+q-dialog(ref='dialogRef', @hide='onDialogHide')
q-card(style='min-width: 450px;')
q-card-section.card-header
q-icon(name='img:/_assets/icons/fluent-plus-plus.svg', left, size='sm')
- span {{$t(`admin.sites.new`)}}
+ span {{t(`admin.sites.new`)}}
q-form.q-py-sm(ref='createSiteForm')
q-item
blueprint-icon(icon='home')
q-item-section
q-input(
outlined
- v-model='siteName'
+ v-model='state.siteName'
dense
:rules=`[
- val => val.length > 0 || $t('admin.sites.nameMissing'),
- val => /^[^<>"]+$/.test(val) || $t('admin.sites.nameInvalidChars')
+ val => val.length > 0 || t('admin.sites.nameMissing'),
+ val => /^[^<>"]+$/.test(val) || t('admin.sites.nameInvalidChars')
]`
hide-bottom-space
- :label='$t(`common.field.name`)'
- :aria-label='$t(`common.field.name`)'
+ :label='t(`common.field.name`)'
+ :aria-label='t(`common.field.name`)'
lazy-rules='ondemand'
autofocus
)
@@ -27,107 +27,121 @@ q-dialog(ref='dialog', @hide='onDialogHide')
q-item-section
q-input(
outlined
- v-model='siteHostname'
+ v-model='state.siteHostname'
dense
:rules=`[
- val => val.length > 0 || $t('admin.sites.hostnameMissing'),
- val => /^(\\*)|([a-z0-9\-.:]+)$/.test(val) || $t('admin.sites.hostnameInvalidChars')
+ val => val.length > 0 || t('admin.sites.hostnameMissing'),
+ val => /^(\\*)|([a-z0-9\-.:]+)$/.test(val) || t('admin.sites.hostnameInvalidChars')
]`
- :hint='$t(`admin.sites.hostnameHint`)'
+ :hint='t(`admin.sites.hostnameHint`)'
hide-bottom-space
- :label='$t(`admin.sites.hostname`)'
- :aria-label='$t(`admin.sites.hostname`)'
+ :label='t(`admin.sites.hostname`)'
+ :aria-label='t(`admin.sites.hostname`)'
lazy-rules='ondemand'
)
q-card-actions.card-actions
q-space
q-btn.acrylic-btn(
flat
- :label='$t(`common.actions.cancel`)'
+ :label='t(`common.actions.cancel`)'
color='grey'
padding='xs md'
- @click='hide'
+ @click='onDialogCancel'
)
q-btn(
unelevated
- :label='$t(`common.actions.create`)'
+ :label='t(`common.actions.create`)'
color='primary'
padding='xs md'
@click='create'
- :loading='isLoading'
+ :loading='state.isLoading'
)
-
diff --git a/ux/src/css/app.scss b/ux/src/css/app.scss
index 2aa51b83..4a64c8c9 100644
--- a/ux/src/css/app.scss
+++ b/ux/src/css/app.scss
@@ -138,6 +138,45 @@ body.desktop .acrylic-btn {
}
}
+// ------------------------------------------------------------------
+// DIALOGS
+// ------------------------------------------------------------------
+
+.card-header {
+ display: flex;
+ align-items: center;
+ font-weight: 500;
+ font-size: .9rem;
+ background-color: $dark-3;
+ background-image: radial-gradient(at bottom right, $dark-3, $dark-5);
+ color: #FFF;
+
+ @at-root .body--light & {
+ border-bottom: 1px solid $dark-3;
+ box-shadow: 0 1px 0 0 $dark-6;
+ }
+ @at-root .body--dark & {
+ border-bottom: 1px solid #000;
+ box-shadow: 0 1px 0 0 lighten($dark-3, 2%);
+ }
+}
+
+.card-actions {
+ @at-root .body--light & {
+ background-color: #FAFAFA;
+ background-image: linear-gradient(to bottom, #FCFCFC, #F0F0F0);
+ color: $dark-3;
+ border-top: 1px solid #EEE;
+ box-shadow: inset 0 1px 0 0 #FFF;
+ }
+ @at-root .body--dark & {
+ background-color: $dark-3;
+ background-image: radial-gradient(at top left, $dark-3, $dark-5);
+ border-top: 1px solid #000;
+ box-shadow: 0 -1px 0 0 lighten($dark-3, 2%);
+ }
+}
+
// ------------------------------------------------------------------
// IMPORTS
// ------------------------------------------------------------------
diff --git a/ux/src/layouts/AdminLayout.vue b/ux/src/layouts/AdminLayout.vue
index 61439fe4..006619e2 100644
--- a/ux/src/layouts/AdminLayout.vue
+++ b/ux/src/layouts/AdminLayout.vue
@@ -167,8 +167,7 @@ q-layout.admin(view='hHh Lpr lff')
q-item-section {{ t('admin.dev.flags.title') }}
q-page-container.admin-container
router-view(v-slot='{ Component }')
- transition(name='fade')
- component(:is='Component')
+ component(:is='Component')
q-dialog.admin-overlay(
v-model='overlayIsShown'
persistent
diff --git a/ux/src/pages/AdminSites.vue b/ux/src/pages/AdminSites.vue
index 63370e03..1cb43c5d 100644
--- a/ux/src/pages/AdminSites.vue
+++ b/ux/src/pages/AdminSites.vue
@@ -4,8 +4,8 @@ q-page.admin-locale
.col-auto
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-change-theme.svg')
.col.q-pl-md
- .text-h5.text-primary.animated.fadeInLeft {{ $t('admin.sites.title') }}
- .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ $t('admin.sites.subtitle') }}
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.sites.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.sites.subtitle') }}
.col-auto
q-btn.q-mr-sm.acrylic-btn(
icon='las la-question-circle'
@@ -16,7 +16,7 @@ q-page.admin-locale
target='_blank'
)
q-btn.q-mr-sm.acrylic-btn(
- icon='las la-redo-alt'
+ icon='fa-solid fa-rotate'
flat
color='secondary'
@click='refresh'
@@ -24,7 +24,7 @@ q-page.admin-locale
q-btn(
unelevated
icon='las la-plus'
- :label='$t(`admin.sites.new`)'
+ :label='t(`admin.sites.new`)'
color='primary'
@click='createSite'
)
@@ -34,7 +34,7 @@ q-page.admin-locale
q-card.shadow-1
q-list(separator)
q-item(
- v-for='site of sites'
+ v-for='site of adminStore.sites'
:key='site.id'
)
q-item-section(side)
@@ -75,8 +75,8 @@ q-page.admin-locale
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
- :label='$t(`admin.sites.isActive`)'
- :aria-label='$t(`admin.sites.isActive`)'
+ :label='t(`admin.sites.isActive`)'
+ :aria-label='t(`admin.sites.isActive`)'
@update:model-value ='(val) => { toggleSiteState(site, val) }'
)
q-separator.q-ml-md(vertical)
@@ -86,7 +86,7 @@ q-page.admin-locale
@click='editSite(site)'
icon='las la-pen'
color='indigo'
- :label='$t(`common.actions.edit`)'
+ :label='t(`common.actions.edit`)'
no-caps
)
q-btn.acrylic-btn(
@@ -97,82 +97,89 @@ q-page.admin-locale
)
-