feat: theming resolvers + config fixes

client/components/admin.vue

@@ -7,7 +7,7 @@
           v-list-tile-avatar: v-icon dashboard
           v-list-tile-title Dashboard
         v-divider.my-2
-        v-subheader Site
+        v-subheader.pl-4 Site
         v-list-tile(to='/general')
           v-list-tile-avatar: v-icon widgets
           v-list-tile-title General
@@ -21,7 +21,7 @@
           v-list-tile-avatar: v-icon palette
           v-list-tile-title Theme
         v-divider.my-2
-        v-subheader Users
+        v-subheader.pl-4 Users
         v-list-tile(to='/groups')
           v-list-tile-avatar: v-icon people
           v-list-tile-title Groups
@@ -33,19 +33,19 @@
               v-chip(small, disabled, color='grey lighten-4')
                 .caption.grey--text 1
         v-divider.my-2
-        v-subheader Modules
+        v-subheader.pl-4 Modules
         v-list-tile(to='/auth')
           v-list-tile-avatar: v-icon lock_outline
           v-list-tile-title Authentication
-        v-list-tile(to='/rendering')
-          v-list-tile-avatar: v-icon system_update_alt
-          v-list-tile-title Content Rendering
         v-list-tile(to='/editor')
           v-list-tile-avatar: v-icon transform
           v-list-tile-title Editor
         v-list-tile(to='/logging')
           v-list-tile-avatar: v-icon graphic_eq
           v-list-tile-title Logging
+        v-list-tile(to='/rendering')
+          v-list-tile-avatar: v-icon system_update_alt
+          v-list-tile-title Rendering
         v-list-tile(to='/search')
           v-list-tile-avatar: v-icon search
           v-list-tile-title Search Engine
@@ -53,7 +53,7 @@
           v-list-tile-avatar: v-icon storage
           v-list-tile-title Storage
         v-divider.my-2
-        v-subheader System
+        v-subheader.pl-4 System
         v-list-tile(to='/api')
           v-list-tile-avatar: v-icon call_split
           v-list-tile-title API Access
@@ -96,7 +96,7 @@ import { mapState } from 'vuex'
 
 import adminStore from '@/store/admin'
 
-/* global WIKI */
+/* global WIKI, siteConfig */
 
 WIKI.$store.registerModule('admin', adminStore)
 
@@ -143,7 +143,10 @@ export default {
       set(newState) { this.$store.commit('updateNotificationState', newState) }
     }
   },
-  router
+  router,
+  mounted() {
+    this.$store.commit('admin/setThemeDarkMode', siteConfig.darkMode)
+  }
 }
 </script>
 

client/components/admin/admin-rendering.vue

@@ -2,7 +2,7 @@
   v-container(fluid, fill-height)
     v-layout(row wrap)
       v-flex(xs12)
-        .headline.primary--text Content Rendering
+        .headline.primary--text Rendering
         .subheading.grey--text Configure how content is rendered
 </template>
 

client/components/admin/admin-theme.vue

@@ -12,7 +12,14 @@
                   v-toolbar-title
                     .subheading Theme
                 v-card-text
-                  v-select(:items='themes', prepend-icon='palette', v-model='selectedTheme', label='Site Theme', persistent-hint, hint='Themes affect how content pages are displayed. Other site sections (such as the editor or admin area) are not affected.')
+                  v-select(
+                    :items='themes'
+                    prepend-icon='palette'
+                    v-model='selectedTheme'
+                    label='Site Theme'
+                    persistent-hint
+                    hint='Themes affect how content pages are displayed. Other site sections (such as the editor or admin area) are not affected.'
+                    )
                     template(slot='item', slot-scope='data')
                       v-list-tile-avatar
                         v-icon.blue--text(dark) filter_frames
@@ -20,7 +27,13 @@
                         v-list-tile-title(v-html='data.item.text')
                         v-list-tile-sub-title(v-html='data.item.author')
                   v-divider
-                  v-switch(v-model='darkMode', label='Dark Mode', color='primary', persistent-hint, hint='Not recommended for accessibility.')
+                  v-switch(
+                    v-model='darkMode'
+                    label='Dark Mode'
+                    color='primary'
+                    persistent-hint
+                    hint='Not recommended for accessibility. May not be supported by all themes.'
+                    )
                 v-card-chin
                   v-spacer
                   v-btn(color='primary', :loading='loading', @click='save')
@@ -35,20 +48,66 @@
 </template>
 
 <script>
+import _ from 'lodash'
+
+import themeSaveMutation from 'gql/admin-theme-mutation-save.gql'
+
 export default {
   data() {
     return {
+      loading: false,
       themes: [
         { text: 'Default', author: 'requarks.io', value: 'default' }
       ],
       selectedTheme: 'default',
-      darkMode: false
+      darkMode: false,
+      darkModeInitial: false
     }
   },
   watch: {
     darkMode(newValue, oldValue) {
       this.$store.commit('admin/setThemeDarkMode', newValue)
-      console.info(this.$vuetify.dark)
+    }
+  },
+  mounted() {
+    this.darkMode = this.$store.state.admin.theme.dark
+    this.darkModeInitial = this.darkMode
+  },
+  beforeDestroy() {
+    this.$store.commit('admin/setThemeDarkMode', this.darkModeInitial)
+  },
+  methods: {
+    async save () {
+      this.loading = true
+      this.$store.commit(`loadingStart`, 'admin-theme-save')
+      try {
+        const respRaw = await this.$apollo.mutate({
+          mutation: themeSaveMutation,
+          variables: {
+            theme: this.selectedTheme,
+            darkMode: this.darkMode
+          }
+        })
+        const resp = _.get(respRaw, 'data.theming.setConfig.responseResult', {})
+        if (resp.succeeded) {
+          this.darkModeInitial = this.darkMode
+          this.$store.commit('showNotification', {
+            message: 'Theme settings updated successfully.',
+            style: 'success',
+            icon: 'check'
+          })
+        } else {
+          throw new Error(resp.message)
+        }
+      } catch (err) {
+        this.$store.commit('showNotification', {
+          message: `Error: ${err.message}`,
+          style: 'error',
+          icon: 'warning'
+        })
+      }
+      this.$store.commit(`loadingStop`, 'admin-theme-save')
+      this.loading = false
     }
   }
 }

client/components/common/user-search.vue

@@ -15,12 +15,13 @@
           v-show='searchLoading'
           )
       v-card-text
-        v-text-field.blue.lighten-5(
+        v-text-field(
           solo
           flat
           label='Search Users...'
           v-model='search'
           prepend-icon='search'
+          :class='$vuetify.dark ? "grey darken-4" : "blue lighten-5"'
           color='primary'
           ref='searchIpt'
           )
@@ -35,8 +36,7 @@
               v-list-tile-action
                 v-icon(color='primary') arrow_forward
             v-divider.my-0(v-if='idx < items.length - 1')
-      v-divider.my-0
-      v-card-actions.grey.lighten-4
+      v-card-chin
         v-spacer
         v-btn(
           flat

client/components/nav-header.vue

@@ -33,7 +33,7 @@
           v-list-tile-avatar: v-icon(color='blue-grey') burst_mode
           v-list-tile-content Images & Files
     v-toolbar-title
-      span.subheading Wiki.js
+      span.subheading {{title}}
     v-spacer
     transition(name='navHeaderSearch')
       v-text-field(
@@ -87,6 +87,8 @@
 <script>
 import { mapGetters } from 'vuex'
 
+/* global siteConfig */
+
 export default {
   data() {
     return {
@@ -97,7 +99,8 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['isLoading'])
+    ...mapGetters(['isLoading']),
+    title() { return siteConfig.title }
   },
   methods: {
     searchToggle() {