feat: router load indicator + UI fixes

server/db/migrations/3.0.0.js

@@ -478,11 +478,11 @@ exports.up = async knex => {
       localeNamespaces: [],
       theme: {
         dark: false,
-        colorPrimary: '#1976d2',
+        colorPrimary: '#1976D2',
-        colorSecondary: '#02c39a',
+        colorSecondary: '#02C39A',
-        colorAccent: '#f03a47',
+        colorAccent: '#FF9800',
         colorHeader: '#000000',
-        colorSidebar: '#1976d2',
+        colorSidebar: '#1976D2',
         injectCSS: '',
         injectHead: '',
         injectBody: '',

server/models/sites.js

@@ -86,14 +86,15 @@ module.exports = class Site extends Model {
         localeNamespaces: [],
         theme: {
           dark: false,
-          colorPrimary: '#1976d2',
+          colorPrimary: '#1976D2',
-          colorSecondary: '#02c39a',
+          colorSecondary: '#02C39A',
-          colorAccent: '#f03a47',
+          colorAccent: '#FF9800',
           colorHeader: '#000000',
-          colorSidebar: '#1976d2',
+          colorSidebar: '#1976D2',
           injectCSS: '',
           injectHead: '',
           injectBody: '',
+          contentWidth: 'full',
           sidebarPosition: 'left',
           tocPosition: 'right',
           showSharingMenu: true,

ux/src/App.vue

@@ -50,6 +50,7 @@ if (typeof siteConfig !== 'undefined') {
 }
 
 router.beforeEach(async (to, from) => {
+  siteStore.routerLoading = true
   if (!siteStore.id) {
     console.info('No pre-cached site config. Loading site info...')
     await siteStore.loadSite(window.location.hostname)
@@ -62,5 +63,6 @@ router.afterEach(() => {
     state.isInitialized = true
     document.querySelector('.init-loading').remove()
   }
+  siteStore.routerLoading = false
 })
 </script>

ux/src/components/HeaderNav.vue

@@ -55,9 +55,9 @@ q-header.bg-header.text-white.site-header(
       )
       q-space
       transition(name='syncing')
-        q-spinner-rings.q-mr-sm(
+        q-spinner-rings(
           v-show='siteStore.routerLoading'
-          color='orange'
+          color='accent'
           size='34px'
         )
       q-btn.q-ml-md(
@@ -113,18 +113,5 @@ const state = reactive({
 </script>
 
 <style lang="scss">
-.syncing-enter-active {
+
-  animation: syncing-anim .1s;
-}
-.syncing-leave-active {
-  animation: syncing-anim 1s reverse;
-}
-@keyframes syncing-anim {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 </style>

ux/src/components/UserEditOverlay.vue

@@ -564,7 +564,7 @@ const localAuthId = computed(() => {
 
 const localAuth = computed({
   get () {
-    return localAuthId.value ? _get(state.user.auth, localAuthId.value, {}) : {}
+    return localAuthId.value ? state.user.auth?.[localAuthId.value] || {} : {}
   },
   set (val) {
     if (localAuthId.value) {

ux/src/css/app.scss

@@ -108,7 +108,7 @@ body::-webkit-scrollbar-thumb {
 // BUTTONS
 // ------------------------------------------------------------------
 
-#app .acrylic-btn {
+.q-btn.acrylic-btn {
   .q-focus-helper {
     background-color: currentColor;
     opacity: .1;
@@ -168,6 +168,25 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
+// ------------------------------------------------------------------
+// LOADING ANIMATIONS
+// ------------------------------------------------------------------
+
+.syncing-enter-active {
+  animation: syncing-anim .1s;
+}
+.syncing-leave-active {
+  animation: syncing-anim 1s reverse;
+}
+@keyframes syncing-anim {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 // ------------------------------------------------------------------
 // IMPORTS
 // ------------------------------------------------------------------

ux/src/layouts/AdminLayout.vue

@@ -16,10 +16,11 @@ q-layout.admin(view='hHh Lpr lff')
           )
       q-toolbar(style='height: 64px;', dark)
         q-space
-        q-spinner-tail(
+        transition(name='syncing')
-          v-show='siteStore.routerLoading'
+          q-spinner-rings(
-          color='blue'
+            v-show='siteStore.routerLoading'
-          size='sm'
+            color='accent'
+            size='34px'
           )
         q-btn.q-ml-md(flat, dense, icon='las la-times-circle', label='Exit' color='pink', to='/')
         account-menu

ux/src/pages/AdminGroups.vue

@@ -85,7 +85,7 @@ q-page.admin-groups
               q-btn.acrylic-btn(
                 flat
                 icon='las la-trash'
-                :color='props.row.isSystem ? `grey` : `accent`'
+                :color='props.row.isSystem ? `grey` : `negative`'
                 :disabled='props.row.isSystem'
                 @click='deleteGroup(props.row)'
                 )

ux/src/pages/AdminSites.vue

@@ -92,7 +92,7 @@ q-page.admin-locale
               q-btn.acrylic-btn(
                 flat
                 icon='las la-trash'
-                color='accent'
+                color='negative'
                 @click='deleteSite(site)'
                 )
 </template>

ux/src/pages/AdminSystem.vue

@@ -400,6 +400,7 @@ Total RAM: ${state.info.ramTotal}`
 
   clip.on('success', () => {
     $q.notify({
+      type: 'positive',
       message: 'Info copied successfully',
       icon: 'las la-clipboard'
     })

ux/src/pages/AdminTheme.vue

@@ -358,7 +358,7 @@ function resetColors () {
   state.config.dark = false
   state.config.colorPrimary = '#1976D2'
   state.config.colorSecondary = '#02C39A'
-  state.config.colorAccent = '#f03a47'
+  state.config.colorAccent = '#FF9800'
   state.config.colorHeader = '#000'
   state.config.colorSidebar = '#1976D2'
 }

ux/src/pages/AdminUsers.vue

@@ -99,7 +99,7 @@ q-page.admin-groups
                 v-if='!props.row.isSystem'
                 flat
                 icon='las la-trash'
-                color='accent'
+                color='negative'
                 @click='deleteUser(props.row)'
                 )
 </template>