feat: admin dark mode

Author: NGPixel

client/app.js

@@ -80,6 +80,7 @@ Vue.component('login', () => import(/* webpackMode: "eager" */ './components/log
 Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/nav-header.vue'))
 Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
 Vue.component('setup', () => import(/* webpackChunkName: "setup" */ './components/setup.vue'))
+Vue.component('v-card-chin', () => import(/* webpackMode: "eager" */ './components/common/v-card-chin.vue'))
 
 let bootstrap = () => {
   // ====================================

client/components/admin.vue

@@ -1,77 +1,81 @@
 <template lang='pug'>
-  v-app.admin
+  v-app(:dark='darkMode').admin
     nav-header
     v-navigation-drawer.pb-0(v-model='adminDrawerShown', app, fixed, clipped, left, permanent)
       v-list(dense)
         v-list-tile.pt-2(to='/dashboard')
-          v-list-tile-action: v-icon dashboard
+          v-list-tile-avatar: v-icon dashboard
           v-list-tile-title Dashboard
         v-divider.my-2
         v-subheader Site
         v-list-tile(to='/general')
-          v-list-tile-action: v-icon widgets
+          v-list-tile-avatar: v-icon widgets
           v-list-tile-title General
         v-list-tile(to='/locale')
-          v-list-tile-action: v-icon language
+          v-list-tile-avatar: v-icon language
           v-list-tile-title Locale
         v-list-tile(to='/stats')
-          v-list-tile-action: v-icon show_chart
+          v-list-tile-avatar: v-icon show_chart
           v-list-tile-title Statistics
         v-list-tile(to='/theme')
-          v-list-tile-action: v-icon palette
+          v-list-tile-avatar: v-icon palette
           v-list-tile-title Theme
         v-divider.my-2
         v-subheader Users
         v-list-tile(to='/groups')
-          v-list-tile-action: v-icon people
+          v-list-tile-avatar: v-icon people
           v-list-tile-title Groups
         v-list-tile(to='/users')
-          v-list-tile-action: v-icon perm_identity
+          v-list-tile-avatar: v-icon perm_identity
           v-list-tile-title Users
+          v-list-tile-action
+            .justify-end
+              v-chip(small, disabled, color='grey lighten-4')
+                .caption.grey--text 1
         v-divider.my-2
         v-subheader Modules
         v-list-tile(to='/auth')
-          v-list-tile-action: v-icon lock_outline
+          v-list-tile-avatar: v-icon lock_outline
           v-list-tile-title Authentication
         v-list-tile(to='/rendering')
-          v-list-tile-action: v-icon system_update_alt
+          v-list-tile-avatar: v-icon system_update_alt
           v-list-tile-title Content Rendering
         v-list-tile(to='/editor')
-          v-list-tile-action: v-icon transform
+          v-list-tile-avatar: v-icon transform
           v-list-tile-title Editor
         v-list-tile(to='/logging')
-          v-list-tile-action: v-icon graphic_eq
+          v-list-tile-avatar: v-icon graphic_eq
           v-list-tile-title Logging
         v-list-tile(to='/search')
-          v-list-tile-action: v-icon search
+          v-list-tile-avatar: v-icon search
           v-list-tile-title Search Engine
         v-list-tile(to='/storage')
-          v-list-tile-action: v-icon storage
+          v-list-tile-avatar: v-icon storage
           v-list-tile-title Storage
         v-divider.my-2
         v-subheader System
         v-list-tile(to='/api')
-          v-list-tile-action: v-icon call_split
+          v-list-tile-avatar: v-icon call_split
           v-list-tile-title API Access
         v-list-tile(to='/system')
-          v-list-tile-action: v-icon tune
+          v-list-tile-avatar: v-icon tune
           v-list-tile-title System Info
         v-list-tile(to='/utilities')
-          v-list-tile-action: v-icon build
+          v-list-tile-avatar: v-icon build
           v-list-tile-title Utilities
         v-list-tile(to='/dev')
-          v-list-tile-action: v-icon weekend
+          v-list-tile-avatar: v-icon weekend
           v-list-tile-title Developer Tools
         v-divider.my-2
         v-list-tile(to='/contribute')
-          v-list-tile-action: v-icon favorite
+          v-list-tile-avatar: v-icon favorite
           v-list-tile-title Contribute to Wiki.js
 
     v-content
       transition(name='admin-router')
         router-view
 
-    v-footer.py-2.justify-center(app, absolute, color='grey lighten-3', inset, height='auto')
+    v-footer.py-2.justify-center(app, absolute, :color='darkMode ? "" : "grey lighten-3"', inset, height='auto')
       .caption.grey--text.text--darken-1 Powered by Wiki.js
 
     v-snackbar(
@@ -90,6 +94,12 @@
 import VueRouter from 'vue-router'
 import { mapState } from 'vuex'
 
+import adminStore from '@/store/admin'
+
+/* global WIKI */
+
+WIKI.$store.registerModule('admin', adminStore)
+
 const router = new VueRouter({
   mode: 'history',
   base: '/a',
@@ -113,7 +123,7 @@ const router = new VueRouter({
     { path: '/system', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-system.vue') },
     { path: '/utilities', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-utilities.vue') },
     { path: '/dev', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-dev.vue') },
-    { path: '/contribute', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-contribute.vue') }
+    { path: '/contribute', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-contribute.vue') }
   ]
 })
 
@@ -124,7 +134,10 @@ export default {
     }
   },
   computed: {
-    ...mapState(['notification']),
+    ...mapState({
+      notification: state => state.notification,
+      darkMode: state => state.admin.theme.dark
+    }),
     notificationState: {
       get() { return this.notification.isActive },
       set(newState) { this.$store.commit('updateNotificationState', newState) }

client/components/admin/admin-api.vue

@@ -1,6 +1,6 @@
 <template lang='pug'>
   v-card(flat)
-    v-card(flat, color='grey lighten-5').pa-3.pt-4
+    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
       .headline.blue--text.text--darken-2 API
       .subheading.grey--text Manage keys to access the API
     v-card

client/components/admin/admin-auth.vue

@@ -1,9 +1,9 @@
 <template lang='pug'>
-  v-card(tile, color='grey lighten-5')
+  v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
     .pa-3.pt-4
       .headline.primary--text Authentication
       .subheading.grey--text Configure the authentication settings of your wiki
-    v-tabs(color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows)
+    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
       v-tab(key='settings'): v-icon settings
       v-tab(v-for='strategy in activeStrategies', :key='strategy.key') {{ strategy.title }}
 
@@ -41,8 +41,7 @@
             v-text-field.ml-3(label='Limit to specific email domains', prepend-icon='mail_outline')
             v-text-field.ml-3(label='Assign to group', prepend-icon='people')
 
-    v-divider.my-0
-    v-card-actions.grey.lighten-4
+    v-card-chin
       v-btn(color='primary')
         v-icon(left) chevron_right
         span Save

client/components/admin/admin-contribute.vue

@@ -1,33 +1,31 @@
 <template lang='pug'>
   v-card(flat)
-    v-card(color='grey lighten-5')
-      .pa-3.pt-4
-        .headline.primary--text Contribute
-        .subheading.grey--text Help support Wiki.js development and operations
-
-      v-card.pa-3
-        .body-1.pl-3 Wiki.js is a #[strong free and open-source software] brought to you with #[v-icon(color='red') favorite] by #[a(href='https://requarks.io', target='_blank') requarks.io] and #[a(href='https://github.com/Requarks/wiki/graphs/contributors', target='_blank') contributors].
-        .body-1.pt-3.pl-3 We need your help to keep improving the software and run the various associated services (e.g. hosting and networking).
-        v-divider
-        v-subheader Fund our work
-        .body-1.pl-3 Wiki.js is part of the Open Collective initiative. You can contribute financially by making a monthly or one-time donation:
-        v-card-actions.mt-3.ml-2
-          v-btn(depressed, color='primary', href='https://opencollective.com/wikijs')
-            v-icon(left) local_atm
-            | Make a donation
-        v-divider
-        v-subheader Contribute
-        .body-1.pl-3
-          ul
-            li Submit an idea or vote on a proposed one on the #[a(href='https://requests.requarks.io/wiki', target='_blank') feature requests board].
-            li Found a bug? Submit an issue on #[a(href='https://github.com/Requarks/wiki/issues', target='_blank') Github].
-            li Help translate Wiki.js in your language. Let us know on #[a(href='https://gitter.im/Requarks/wiki', target='_blank') Gitter].
-        v-divider
-        v-subheader Spread the word
-        .body-1.pl-3
-          ul
-            li Talk to your friends and colleagues about how awesome Wiki.js is!
-            li Follow us on #[a(href='https://twitter.com/requarks', target='_blank') Twitter].
+    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
+      .headline.primary--text Contribute
+      .subheading.grey--text Help support Wiki.js development and operations
+    v-card.pa-3
+      .body-1.pl-3 Wiki.js is a #[strong free and open-source software] brought to you with #[v-icon(color='red') favorite] by #[a(href='https://requarks.io', target='_blank') requarks.io] and #[a(href='https://github.com/Requarks/wiki/graphs/contributors', target='_blank') contributors].
+      .body-1.pt-3.pl-3 We need your help to keep improving the software and run the various associated services (e.g. hosting and networking).
+      v-divider
+      v-subheader Fund our work
+      .body-1.pl-3 Wiki.js is part of the Open Collective initiative. You can contribute financially by making a monthly or one-time donation:
+      v-card-actions.mt-3.ml-2
+        v-btn(depressed, color='primary', href='https://opencollective.com/wikijs')
+          v-icon(left) local_atm
+          | Make a donation
+      v-divider
+      v-subheader Contribute
+      .body-1.pl-3
+        ul
+          li Submit an idea or vote on a proposed one on the #[a(href='https://requests.requarks.io/wiki', target='_blank') feature requests board].
+          li Found a bug? Submit an issue on #[a(href='https://github.com/Requarks/wiki/issues', target='_blank') Github].
+          li Help translate Wiki.js in your language. Let us know on #[a(href='https://gitter.im/Requarks/wiki', target='_blank') Gitter].
+      v-divider
+      v-subheader Spread the word
+      .body-1.pl-3
+        ul
+          li Talk to your friends and colleagues about how awesome Wiki.js is!
+          li Follow us on #[a(href='https://twitter.com/requarks', target='_blank') Twitter].
 
 </template>
 

client/components/admin/admin-dev.vue

@@ -1,18 +1,24 @@
 <template lang='pug'>
-  v-card(flat)
-    v-card(color='grey lighten-5')
-      .pa-3.pt-4
-        .headline.primary--text Developer Tools
-        .subheading.grey--text ¯\_(ツ)_/¯
-      v-tabs(v-model='selectedTab', color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows, @input='tabChanged')
-        v-tab(key='0') Graph API Playground
-        v-tab(key='1') Graph API Map
-      v-tabs-items(v-model='selectedTab')
-        v-tab-item(key='0', :transition='false', :reverse-transition='false')
-          #graphiql
+  div
+    v-card(flat, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
+      .headline.primary--text Developer Tools
+      .subheading.grey--text ¯\_(ツ)_/¯
+    v-tabs(
+      v-model='selectedTab'
+      :color='$vuetify.dark ? "primary" : "grey lighten-4"'
+      fixed-tabs
+      :slider-color='$vuetify.dark ? "white" : "primary"'
+      show-arrows
+      @input='tabChanged'
+      )
+      v-tab(key='0') Graph API Playground
+      v-tab(key='1') Graph API Map
+    v-tabs-items(v-model='selectedTab')
+      v-tab-item(key='0', :transition='false', :reverse-transition='false')
+        #graphiql
 
-        v-tab-item(key='1', :transition='false', :reverse-transition='false')
-          #voyager
+      v-tab-item(key='1', :transition='false', :reverse-transition='false')
+        #voyager
 
 </template>
 

client/components/admin/admin-editor.vue

@@ -1,29 +1,28 @@
 <template lang='pug'>
   v-card(flat)
-    v-card(color='grey lighten-5')
-      .pa-3.pt-4
-        .headline.primary--text Editor
-        .subheading.grey--text Configure the content editor
-      v-tabs(color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows)
-        v-tab(key='settings'): v-icon settings
-        v-tab(key='code') Markdown
+    v-card(flat, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
+      .headline.primary--text Editor
+      .subheading.grey--text Configure the content editor
+    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
+      v-tab(key='settings'): v-icon settings
+      v-tab(key='code') Markdown
 
-        v-tab-item(key='settings', :transition='false', :reverse-transition='false')
-          v-card.pa-3
-            v-form
-              v-radio-group(v-model='selectedEditor')
-                v-radio(v-for='(editor, n) in editors', :key='n', :label='editor.text', :value='editor.value', color='primary')
-              v-divider
-              v-btn(color='primary')
-                v-icon(left) chevron_right
-                | Set Editor
-              v-btn(icon)
-                v-icon.grey--text refresh
-        v-tab-item(key='code', :transition='false', :reverse-transition='false')
-          v-card.pa-3
-            v-form
-              v-subheader Editor Configuration
-              .body-1 This editor has no configuration options you can modify.
+      v-tab-item(key='settings', :transition='false', :reverse-transition='false')
+        v-card.pa-3
+          v-form
+            v-radio-group(v-model='selectedEditor')
+              v-radio(v-for='(editor, n) in editors', :key='n', :label='editor.text', :value='editor.value', color='primary')
+            v-divider
+            v-btn(color='primary')
+              v-icon(left) chevron_right
+              | Set Editor
+            v-btn(icon)
+              v-icon.grey--text refresh
+      v-tab-item(key='code', :transition='false', :reverse-transition='false')
+        v-card.pa-3
+          v-form
+            v-subheader Editor Configuration
+            .body-1 This editor has no configuration options you can modify.
 
 </template>
 

client/components/admin/admin-general.vue

@@ -21,8 +21,7 @@
                     v-text-field(label='Site Description', :counter='255', prepend-icon='public')
                     v-text-field(label='Site Keywords', :counter='255', prepend-icon='public')
                     v-select(label='Meta Robots', chips, tags, :items='metaRobots', v-model='metaRobotsSelection', prepend-icon='public')
-                  v-divider.my-0
-                  v-card-actions.grey.lighten-4
+                  v-card-chin
                     v-spacer
                     v-btn(color='primary')
                       v-icon(left) chevron_right

client/components/admin/admin-groups-edit.vue

@@ -1,10 +1,10 @@
 <template lang='pug'>
   v-card
-    v-card(flat, color='grey lighten-5').pa-3.pt-4
+    v-card(flat, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
       .headline.blue--text.text--darken-2 Edit Group
       .subheading.grey--text {{name}}
       v-btn(color='primary', fab, absolute, bottom, right, small, to='/groups'): v-icon arrow_upward
-    v-tabs(v-model='tab', color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows)
+    v-tabs(v-model='tab', :color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
       v-tab(key='properties') Properties
       v-tab(key='rights') Permissions
       v-tab(key='users') Users

client/components/admin/admin-groups.vue

@@ -1,6 +1,6 @@
 <template lang='pug'>
   v-card(flat)
-    v-card(flat, color='grey lighten-5').pa-3.pt-4
+    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
       .headline.blue--text.text--darken-2 Groups
       .subheading.grey--text Manage groups and their permissions
     v-card

client/components/admin/admin-locale.vue

@@ -39,8 +39,7 @@
                     persistent-hint
                     :hint='namespacing ? "Automatically download updates to all namespaced locales enabled below." : "Automatically download updates to this locale as they become available."'
                   )
-                v-divider.my-0
-                v-card-actions.grey.lighten-4
+                v-card-chin
                   v-spacer
                   v-btn(color='primary', :loading='loading', @click='save')
                     v-icon(left) chevron_right
@@ -92,8 +91,7 @@
                           v-list-tile-sub-title(v-html='data.item.nativeName')
                         v-list-tile-action
                           v-checkbox(:input-value='data.tile.props.value', color='primary', value)
-                v-divider.my-0
-                v-card-actions.grey.lighten-4
+                v-card-chin
                   v-spacer
                   v-btn(color='primary', :loading='loading', @click='save')
                     v-icon(left) chevron_right