fix: UI improvements

client/components/admin/admin-auth.vue

@@ -6,7 +6,7 @@
           img(src='/svg/icon-unlock.svg', alt='Authentication', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Authentication
-            .subheading.grey--text Configure the authentication settings of your wiki
+            .subheading.grey--text Configure the authentication settings of your wiki #[v-chip(label, color='primary', small).white--text coming soon]
           v-spacer
           v-btn(outline, color='grey', @click='refresh', large)
             v-icon refresh

client/components/admin/admin-dashboard.vue

@@ -3,12 +3,12 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-browse-page.svg', alt='Dashboard', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-browse-page.svg', alt='Dashboard', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text {{ $t('admin:dashboard.title') }}
-            .subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
+            .headline.primary--text.animated.fadeInLeft {{ $t('admin:dashboard.title') }}
+            .subheading.grey--text.animated.fadeInLeft.wait-p2s {{ $t('admin:dashboard.subtitle') }}
       v-flex(xs12 md6 lg4 xl3 d-flex)
-        v-card.primary.dashboard-card(dark)
+        v-card.primary.dashboard-card.animated.fadeInUp(dark)
           v-card-text
             v-icon.dashboard-icon insert_drive_file
             .subheading Pages
@@ -19,7 +19,7 @@
               easing='easeOutQuint'
               )
       v-flex(xs12 md6 lg4 xl3 d-flex)
-        v-card.indigo.lighten-1.dashboard-card(dark)
+        v-card.indigo.lighten-1.dashboard-card.animated.fadeInUp.wait-p2s(dark)
           v-card-text
             v-icon.dashboard-icon person
             .subheading Users
@@ -30,7 +30,7 @@
               easing='easeOutQuint'
               )
       v-flex(xs12 md6 lg4 xl3 d-flex)
-        v-card.indigo.lighten-2.dashboard-card(dark)
+        v-card.indigo.lighten-2.dashboard-card.animated.fadeInUp.wait-p4s(dark)
           v-card-text
             v-icon.dashboard-icon people
             .subheading Groups
@@ -41,7 +41,7 @@
               easing='easeOutQuint'
               )
       v-flex(xs12 md6 lg12 xl3 d-flex)
-        v-card.dashboard-card(
+        v-card.dashboard-card.animated.fadeInUp.wait-p6s(
           :class='isLatestVersion ? "teal lighten-2" : "red lighten-2"'
           dark
           )

client/components/admin/admin-editor.vue

@@ -6,7 +6,7 @@
           img(src='/svg/icon-web-design.svg', alt='Editor', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Editor
-            .subheading.grey--text Configure the content editors
+            .subheading.grey--text Configure the content editors #[v-chip(label, color='primary', small).white--text coming soon]
           v-spacer
           v-btn(outline, color='grey', @click='refresh', large)
             v-icon refresh

client/components/admin/admin-mail.vue

@@ -127,7 +127,7 @@
 
 <script>
 import _ from 'lodash'
-import { get, sync } from 'vuex-pathify'
+import { get } from 'vuex-pathify'
 import mailConfigQuery from 'gql/admin/mail/mail-query-config.gql'
 import mailUpdateConfigMutation from 'gql/admin/mail/mail-mutation-save-config.gql'
 

client/components/admin/admin-search.vue

@@ -3,22 +3,22 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-search.svg', alt='Search Engine', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-search.svg', alt='Search Engine', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text Search Engine
-            .subheading.grey--text Configure the search capabilities of your wiki
+            .headline.primary--text.animated.fadeInLeft Search Engine
+            .subheading.grey--text.animated.fadeInLeft.wait-p2s Configure the search capabilities of your wiki
           v-spacer
-          v-btn(outline, color='grey', @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large)
             v-icon refresh
-          v-btn(color='black', dark, large, depressed, @click='rebuild')
+          v-btn.animated.fadeInDown.wait-p1s(color='black', dark, large, depressed, @click='rebuild')
             v-icon(left) cached
             span Rebuild Index
-          v-btn(color='success', @click='save', depressed, large)
+          v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
             v-icon(left) check
             span {{$t('common:actions.apply')}}
 
       v-flex(lg3, xs12)
-        v-card
+        v-card.animated.fadeInUp
           v-toolbar(flat, color='primary', dark, dense)
             .subheading Search Engine
           v-card-text
@@ -34,7 +34,7 @@
               )
 
       v-flex(lg9, xs12)
-        v-card.wiki-form
+        v-card.wiki-form.animated.fadeInUp.wait-p2s
           v-toolbar(color='primary', dense, flat, dark)
             .subheading {{engine.title}}
           v-card-text

client/components/admin/admin-system.vue

@@ -3,14 +3,14 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-tune.svg', alt='System Info', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-tune.svg', alt='System Info', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text {{ $t('admin:system.title') }}
-            .subheading.grey--text {{ $t('admin:system.subtitle') }}
+            .headline.primary--text.animated.fadeInLeft {{ $t('admin:system.title') }}
+            .subheading.grey--text.animated.fadeInLeft.wait-p2s {{ $t('admin:system.subtitle') }}
         v-layout.mt-3(row wrap)
           v-flex(lg6 xs12)
-            v-card
-              v-btn(fab, absolute, right, top, small, light, @click='refresh'): v-icon refresh
+            v-card.animated.fadeInUp
+              v-btn.animated.fadeInLeft.wait-p2s(fab, absolute, right, top, small, light, @click='refresh'): v-icon refresh
               v-list(two-line, dense)
                 v-subheader Wiki.js
                 v-list-tile(avatar)
@@ -70,7 +70,7 @@
                     v-list-tile-sub-title {{ info.configFile }}
 
           v-flex(lg6 xs12)
-            v-card.pb-3
+            v-card.pb-3.animated.fadeInUp.wait-p4s
               v-list(dense)
                 v-subheader Node.js
                 v-list-tile(avatar)

client/components/admin/admin-theme.vue

@@ -3,18 +3,18 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-paint-palette.svg', alt='Theme', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-paint-palette.svg', alt='Theme', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text Theme
-            .subheading.grey--text Modify the look & feel of your wiki
+            .headline.primary--text.animated.fadeInLeft Theme
+            .subheading.grey--text.animated.fadeInLeft.wait-p2s Modify the look & feel of your wiki
           v-spacer
-          v-btn(color='success', depressed, @click='save', large, :loading='loading')
+          v-btn.animated.fadeInRight(color='success', depressed, @click='save', large, :loading='loading')
             v-icon(left) check
             span {{$t('common:actions.apply')}}
         v-form.pt-3
           v-layout(row wrap)
             v-flex(lg6 xs12)
-              v-card.wiki-form
+              v-card.wiki-form.animated.fadeInUp
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
                     .subheading Theme
@@ -43,7 +43,7 @@
                     persistent-hint
                     hint='Not recommended for accessibility. May not be supported by all themes.'
                     )
-              v-card.wiki-form.mt-3
+              v-card.wiki-form.mt-3.animated.fadeInUp.wait-p2s
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
                     .subheading Code Injection
@@ -79,7 +79,7 @@
                     auto-grow
                     )
             v-flex(lg6 xs12)
-              v-card
+              v-card.animated.fadeInUp.wait-p2s
                 v-toolbar(color='teal', dark, dense, flat)
                   v-toolbar-title
                     .subheading Download Themes

client/components/common/nav-header.vue

@@ -100,15 +100,17 @@
               v-toolbar(flat, color='grey darken-4', dense)
                 v-icon.mr-2 search
                 v-subheader.pl-0 Advanced Search
+                v-spacer
+                v-chip(label, small, color='primary') Coming soon
               v-card-text.pa-4
                 v-checkbox.mt-0(
-                  label='Restrict to Current Language'
+                  label='Restrict to current language'
                   color='white'
                   v-model='searchRestrictLocale'
                   hide-details
                 )
                 v-checkbox(
-                  label='Restrict to Below Current Path'
+                  label='Search below current path only'
                   color='white'
                   v-model='searchRestrictPath'
                   hide-details

client/components/editor/editor-markdown.vue

@@ -60,15 +60,15 @@
           .editor-markdown-preview-title(@click='previewShown = false') Preview
           .editor-markdown-preview-content.contents(ref='editorPreview', v-html='previewHTML')
 
-      v-speed-dial.editor-markdown-insert(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', fixed, bottom, :right='!previewShown || $vuetify.breakpoint.smAndDown')
-        v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
-          v-icon add_circle
-          v-icon close
-        v-btn(color='teal', fab, dark): v-icon image
-        v-btn(color='pink', fab, dark): v-icon insert_drive_file
-        v-btn(color='red', fab, dark): v-icon play_circle_outline
-        v-btn(color='purple', fab, dark): v-icon multiline_chart
-        v-btn(color='indigo', fab, dark): v-icon functions
+      //- v-speed-dial.editor-markdown-insert(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', fixed, bottom, :right='!previewShown || $vuetify.breakpoint.smAndDown')
+      //-   v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
+      //-     v-icon add_circle
+      //-     v-icon close
+      //-   v-btn(color='teal', fab, dark): v-icon image
+      //-   v-btn(color='pink', fab, dark): v-icon insert_drive_file
+      //-   v-btn(color='red', fab, dark): v-icon play_circle_outline
+      //-   v-btn(color='purple', fab, dark): v-icon multiline_chart
+      //-   v-btn(color='indigo', fab, dark): v-icon functions
 </template>
 
 <script>
@@ -229,10 +229,10 @@ export default {
      * Update toolbar state
      */
     toolbarSync(cm) {
-      const pos = cm.getCursor('start')
-      const token = cm.getTokenAt(pos)
+      // const pos = cm.getCursor('start')
+      // const token = cm.getTokenAt(pos)
 
-      if (!token.type) { return }
+      // if (!token.type) { return }
 
       // console.info(token)
     },

client/scss/app.scss

@@ -2,9 +2,10 @@
 
 @import "base/base";
 @import "base/icons";
+@import "base/animation";
 
-@import "../libs/animate/animate";
-@import '~vue2-animate/src/sass/vue2-animate';
+// @import "../libs/animate/animate";
+// @import '~vue2-animate/src/sass/vue2-animate';
 @import '~vuescroll/dist/vuescroll.css';
 @import '~diff2html/dist/diff2html.min.css';
 

client/scss/base/animation.scss

@@ -0,0 +1,12 @@
+$use-fade: true;
+$use-zoom: true;
+$use-bounce: true;
+
+@import "~animate-sass/animate";
+
+
+@for $i from 1 to 9 {
+  .wait-p#{$i}s {
+    animation-delay: $i * .1s !important;
+  }
+}

package.json

@@ -137,8 +137,8 @@
     "pem-jwk": "2.0.0",
     "pg": "7.8.0",
     "pg-hstore": "2.3.2",
-    "pg-tsquery": "8.0.3",
     "pg-query-stream": "2.0.0",
+    "pg-tsquery": "8.0.3",
     "pm2": "3.2.9",
     "pug": "2.0.3",
     "qr-image": "3.2.0",
@@ -178,6 +178,7 @@
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.1",
     "@panter/vue-i18next": "0.15.0",
+    "animate-sass": "0.8.2",
     "animated-number-vue": "0.1.4",
     "apollo-cache-inmemory": "1.4.2",
     "apollo-client": "2.4.12",

yarn.lock

@@ -1514,6 +1514,11 @@ amp@0.3.1, amp@~0.3.1:
   resolved "https://registry.yarnpkg.com/amp/-/amp-0.3.1.tgz#6adf8d58a74f361e82c1fa8d389c079e139fc47d"
   integrity sha1-at+NWKdPNh6CwfqNOJwHnhOfxH0=
 
+animate-sass@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/animate-sass/-/animate-sass-0.8.2.tgz#fbfa76e049177d217a50b0f99c8ee77af490b7d9"
+  integrity sha512-6sZ34dusqb1HdZLNpJUNaZc0CuuLgFI8SqlyaxbSSKE9zqfoNtOeO3IpVUCqvaSm/oMNH1VlEAsJlppjg+idKQ==
+
 animated-number-vue@0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/animated-number-vue/-/animated-number-vue-0.1.4.tgz#d60447582e5375ac006137f41c40fdddac76171e"