feat: core improvements + local fs provider + UI fixes

Author: NGPixel

client/app.js

@@ -110,7 +110,7 @@ Vue.prototype.Velocity = Velocity
 Vue.component('admin', () => import(/* webpackChunkName: "admin" */ './components/admin.vue'))
 Vue.component('editor', () => import(/* webpackChunkName: "editor" */ './components/editor.vue'))
 Vue.component('login', () => import(/* webpackMode: "eager" */ './components/login.vue'))
-Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/nav-header.vue'))
+Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/common/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'))

client/components/admin/admin-general.vue

@@ -13,14 +13,34 @@
                     v-toolbar-title
                       .subheading {{ $t('admin:general.siteInfo') }}
                   v-subheader General
-                  .px-3
+                  .px-3.pb-3
                     v-text-field(label='Site Title', required, :counter='50', v-model='siteTitle', prepend-icon='public')
-                  v-divider.mt-3
+                  v-divider
                   v-subheader SEO
-                  .px-3
+                  .px-3.pb-3
                     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
+                  v-subheader Analytics
+                  .px-3.pb-3
+                    v-text-field(
+                      label='Google Analytics ID'
+                      :counter='255'
+                      prepend-icon='public'
+                      persistent-hint
+                      hint='Property tracking ID for Google Analytics.'
+                      )
+                  v-divider
+                  v-subheader Footer Copyright
+                  .px-3.pb-3
+                    v-text-field(
+                      label='Company / Organization Name'
+                      :counter='255'
+                      prepend-icon='public'
+                      persistent-hint
+                      hint='Name to use when displaying copyright notice in the footer. Leave empty to hide.'
+                      )
                   v-card-chin
                     v-spacer
                     v-btn(color='primary')

client/components/admin/admin-stats.vue

@@ -4,10 +4,22 @@
       v-flex(xs12)
         .headline.primary--text Statistics
         .subheading.grey--text Useful information about your wiki
+        .pa-3
+          fingerprint-spinner(
+            :animation-duration='1500'
+            :size='128'
+            color='#e91e63'
+            )
+          .caption.pink--text.mt-3 Compiling latest data...
 </template>
 
 <script>
+import { FingerprintSpinner } from 'epic-spinners'
+
 export default {
+  components: {
+    FingerprintSpinner
+  },
   data() {
     return {}
   }

client/components/admin/admin-storage.vue

@@ -18,7 +18,6 @@
               :key='tgt.key'
               :label='tgt.title'
               color='primary'
-              :disabled='tgt.key === `local`'
               hide-details
             )
 
@@ -30,26 +29,38 @@
             template(v-else, v-for='cfg in tgt.config')
               v-select(
                 v-if='cfg.value.type === "string" && cfg.value.enum'
+                outline
+                background-color='grey lighten-2'
                 :items='cfg.value.enum'
                 :key='cfg.key'
-                :label='cfg.key | startCase'
+                :label='cfg.value.title'
                 v-model='cfg.value.value'
                 prepend-icon='settings_applications'
+                :hint='cfg.value.hint ? cfg.value.hint : ""'
+                persistent-hint
+                :class='cfg.value.hint ? "mb-2" : ""'
               )
               v-switch(
                 v-else-if='cfg.value.type === "boolean"'
                 :key='cfg.key'
-                :label='cfg.key | startCase'
+                :label='cfg.value.title'
                 v-model='cfg.value.value'
                 color='primary'
                 prepend-icon='settings_applications'
+                :hint='cfg.value.hint ? cfg.value.hint : ""'
+                persistent-hint
                 )
               v-text-field(
                 v-else
+                outline
+                background-color='grey lighten-2'
                 :key='cfg.key'
-                :label='cfg.key | startCase'
+                :label='cfg.value.title'
                 v-model='cfg.value.value'
                 prepend-icon='settings_applications'
+                :hint='cfg.value.hint ? cfg.value.hint : ""'
+                persistent-hint
+                :class='cfg.value.hint ? "mb-2" : ""'
                 )
             v-divider.mt-3
             v-subheader.pl-0 Sync Direction

client/components/admin/admin-utilities.vue

@@ -36,12 +36,18 @@
                 v-subheader Rescan Modules
                 v-card-text.pt-0.pl-4
                   .body-1 Look for new modules on disk. Existing configurations will be merged.
-                  v-btn(depressed).ml-0
-                    v-icon(left, color='grey') youtube_searched_for
-                    span Authentication
-                  v-btn(depressed).ml-0
-                    v-icon(left, color='grey') youtube_searched_for
-                    span Storage
+                  v-select.mt-3(
+                    v-model='rescanModuleType'
+                    :items='moduleTypes'
+                    label='Modules Type'
+                    outline
+                    background-color='grey lighten-1'
+                    hide-details
+                    dense
+                  )
+                  v-btn.ml-0(color='primary', depressed, dark)
+                    v-icon(left) chevron_right
+                    span Rescan
             v-flex(xs12, sm6)
               v-card
                 v-toolbar(:color='$vuetify.dark ? "" : "grey darken-3"', dark, dense, flat)
@@ -58,50 +64,50 @@
                     .subheading Graph Endpoint
                 v-card-text
                   .body-1 The Graph API Endpoint from which remote resources like locales, themes and plugins are fetched.
-                  .caption Do not change unless you know what you're doing!
-                  v-text-field.my-2.grey.lighten-3(solo, flat, label='Graph Endpoint', value='https://graph.requarks.io')
+                  .caption.red--text Do not change unless you know what you're doing!
+                  v-text-field.my-2(outline, hide-details, background-color='grey lighten-1', label='Graph Endpoint', value='https://graph.requarks.io')
                   v-btn.ml-0(color='primary', depressed, dark)
                     v-icon(left) chevron_right
                     span Save
 
       v-tab-item(key='telemetry', :transition='false', :reverse-transition='false')
-        v-card.pa-3
+        v-card
           v-form
-            v-subheader What is telemetry?
-            .body-1.pl-3 Telemetry allows the developers of Wiki.js to improve the software by collecting basic anonymized data about its usage and the host info. #[br] This is entirely optional and #[strong absolutely no] private data (such as content or personal data) is collected.
-            .body-1.pt-3.pl-3 For maximum privacy, a random client ID is generated every time Wiki.js is started. This ID is used to group requests together while keeping complete anonymity.
-            v-divider
-            v-subheader What is collected?
-            .body-1.pl-3 When telemetry is enabled, only the following data is transmitted:
-            v-list(dense)
-              v-list-tile
-                v-list-tile-avatar: v-icon info_outline
-                v-list-tile-content: v-list-tile-title.caption Version of Wiki.js installed
-              v-list-tile
-                v-list-tile-avatar: v-icon info_outline
-                v-list-tile-content: v-list-tile-title.caption Basic OS information (version, CPU cores, RAM available)
-              v-list-tile
-                v-list-tile-avatar: v-icon info_outline
-                v-list-tile-content: v-list-tile-title.caption Crash debug data
-              v-list-tile
-                v-list-tile-avatar: v-icon info_outline
-                v-list-tile-content: v-list-tile-title.caption Setup analytics (step reached)
-            .body-2.pl-3
-            v-divider
-            v-subheader Settings
-            .pl-3
-              v-switch(
-                v-model='telemetry',
-                label='Enable Telemetry',
-                :value='true',
-                color='primary',
-                hint='Allow Wiki.js to transmit telemetry data.',
-                persistent-hint
-              )
-              .subheading.mt-3.grey--text.text--darken-1 Client ID
-              .body-1 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-            v-divider
-            v-card-actions
+            v-card-text
+              v-subheader What is telemetry?
+              .body-1.pl-3 Telemetry allows the developers of Wiki.js to improve the software by collecting basic anonymized data about its usage and the host info. #[br] This is entirely optional and #[strong absolutely no] private data (such as content or personal data) is collected.
+              .body-1.pt-3.pl-3 For maximum privacy, a random client ID is generated every time Wiki.js is started. This ID is used to group requests together while keeping complete anonymity.
+              v-divider.my-3
+              v-subheader What is collected?
+              .body-1.pl-3 When telemetry is enabled, only the following data is transmitted:
+              v-list(dense)
+                v-list-tile
+                  v-list-tile-avatar: v-icon info_outline
+                  v-list-tile-content: v-list-tile-title.caption Version of Wiki.js installed
+                v-list-tile
+                  v-list-tile-avatar: v-icon info_outline
+                  v-list-tile-content: v-list-tile-title.caption Basic OS information (version, CPU cores, RAM available)
+                v-list-tile
+                  v-list-tile-avatar: v-icon info_outline
+                  v-list-tile-content: v-list-tile-title.caption Crash debug data
+                v-list-tile
+                  v-list-tile-avatar: v-icon info_outline
+                  v-list-tile-content: v-list-tile-title.caption Setup analytics (step reached)
+              .body-2.pl-3
+              v-divider.my-3
+              v-subheader Settings
+              .pl-3
+                v-switch.mt-0(
+                  v-model='telemetry',
+                  label='Enable Telemetry',
+                  :value='true',
+                  color='primary',
+                  hint='Allow Wiki.js to transmit telemetry data.',
+                  persistent-hint
+                )
+                .subheading.mt-3.grey--text.text--darken-1 Client ID
+                .body-1 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+            v-card-chin
               v-btn(color='primary')
                 v-icon(left) chevron_right
                 | Save Changes
@@ -117,13 +123,13 @@
           v-btn.ml-3.mt-3(depressed, dark, color='grey darken-2', href='https://github.com/Requarks/wiki/issues', target='_blank')
             icon-github-circle.mr-3(fillColor='#FFFFFF')
             span Submit an issue
-          v-divider
+          v-divider.my-3
           v-subheader Suggest a New Feature / Enhancement
           .body-1.pl-3 Have an idea for a new feature or something that could be improved?
           v-btn.ml-3.mt-3(depressed, dark, color='indigo', href='https://requests.requarks.io/wiki', target='_blank')
             v-icon(left) lightbulb_outline
             span Submit an idea
-          v-divider
+          v-divider.my-3
           v-subheader Questions / Comments
           .body-1.pl-3 Join our gitter channel. We are very active and friendly!
           v-btn.ml-3.mt-3(depressed, dark, color='pink', href='https://gitter.im/Requarks/wiki', target='_blank')
@@ -144,6 +150,15 @@ export default {
   data() {
     return {
       tab: '0',
+      moduleTypes: [
+        { text: 'Authentication', value: 'authentication' },
+        { text: 'Editor', value: 'editor' },
+        { text: 'Logging', value: 'logging' },
+        { text: 'Rendering', value: 'renderer' },
+        { text: 'Search Engine', value: 'search' },
+        { text: 'Storage', value: 'storage' }
+      ],
+      rescanModuleType: 'authentication',
       telemetry: true
     }
   },

client/components/nav-header.vue renamed to client/components/common/nav-header.vue

@@ -1,5 +1,5 @@
 <template lang='pug'>
-  v-toolbar(color='black', dark, app, clipped-left, fixed, flat, dense)
+  v-toolbar(color='black', dark, app, clipped-left, fixed, flat, :dense='dense')
     v-menu(open-on-hover, offset-y, bottom, left, nudge-top='-18', min-width='250')
       v-toolbar-side-icon(slot='activator')
         v-icon view_module
@@ -41,15 +41,15 @@
         v-if='searchIsShown',
         v-model='search',
         clearable,
-        color='blue',
+        color='white',
         label='Search...',
         single-line,
+        solo
+        flat
         hide-details,
-        append-icon='search',
-        :append-icon-cb='searchEnter',
+        prepend-inner-icon='search',
         :loading='searchIsLoading',
-        @keyup.enter='searchEnter',
-        @keyup.esc='searchToggle'
+        @keyup.enter='searchEnter'
       )
         v-progress-linear(
           indeterminate,
@@ -58,11 +58,9 @@
           color='blue'
         )
     v-spacer
-    v-progress-circular.mr-3(indeterminate, color='blue', :size='22', :width='2' v-show='isLoading')
+    .navHeaderLoading.mr-3
+      v-progress-circular(indeterminate, color='blue', :size='22', :width='2' v-show='isLoading')
     slot(name='actions')
-    transition(name='navHeaderSearch')
-      v-btn(icon, @click='searchToggle', v-if='!searchIsShown')
-        v-icon(color='grey') search
     v-btn(icon, href='/a')
       v-icon(color='grey') settings
     v-menu(offset-y, min-width='300')
@@ -90,28 +88,34 @@ import { mapGetters } from 'vuex'
 /* global siteConfig */
 
 export default {
+  props: {
+    dense: {
+      type: Boolean,
+      default: false
+    },
+    hideSearch: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       menuIsShown: true,
       searchIsLoading: false,
-      searchIsShown: false,
+      searchIsShown: true,
       search: ''
     }
   },
   computed: {
     ...mapGetters(['isLoading']),
     title() { return siteConfig.title }
   },
+  created() {
+    if (this.hideSearch || this.dense) {
+      this.searchIsShown = false
+    }
+  },
   methods: {
-    searchToggle() {
-      this.searchIsLoading = false
-      this.searchIsShown = !this.searchIsShown
-      if (this.searchIsShown) {
-        this.$nextTick(() => {
-          this.$refs.searchField.focus()
-        })
-      }
-    },
     searchEnter() {
       this.searchIsLoading = true
     }
@@ -130,7 +134,10 @@ export default {
   }
   &-enter, &-leave-to {
     opacity: 0;
-    transform: translateY(-25px);
+    transform: scale(.7, .7);
   }
 }
+.navHeaderLoading { // To avoid search bar jumping
+  width: 22px;
+}
 </style>

client/components/editor.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .editor
-    nav-header
+    nav-header(dense)
       template(slot='actions')
         v-btn(outline, color='green', @click.native.stop='save')
           v-icon(color='green', left) check