fix: session knex connector + editor UI improvements

client/components/editor.vue

@@ -6,25 +6,25 @@
         .subheading.grey--text {{currentPageTitle}}
         v-spacer
       template(slot='actions')
-        v-btn(
-          outline
+        v-btn.animated.fadeInDown(
+          flat
           color='green'
           @click.native.stop='save'
           :class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
           )
           v-icon(color='green', :left='$vuetify.breakpoint.lgAndUp') check
           span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ mode === 'create' ? $t('common:actions.create') : $t('common:actions.save') }}
-        v-btn(
-          outline
+        v-btn.animated.fadeInDown.wait-p1s(
+          flat
           color='blue'
           @click.native.stop='openPropsModal'
           :class='{ "is-icon": $vuetify.breakpoint.mdAndDown, "mx-0": !welcomeMode, "ml-0": welcomeMode }'
           )
           v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha
           span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }}
-        v-btn(
+        v-btn.animated.fadeInDown.wait-p2s(
           v-if='!welcomeMode'
-          outline
+          flat
           color='red'
           :class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
           @click.native.stop='exit'

client/components/editor/editor-markdown.vue

@@ -1,130 +1,134 @@
 <template lang='pug'>
   .editor-markdown
     v-toolbar.editor-markdown-toolbar(dense, color='primary', dark, flat)
-      v-tooltip(bottom, color='primary')
-        v-btn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0
-          v-icon format_bold
-        span Bold
-      v-tooltip(bottom, color='primary')
-        v-btn(icon, slot='activator', @click='toggleMarkup({ start: `*` })').mx-0
-          v-icon format_italic
-        span Italic
-      v-tooltip(bottom, color='primary')
-        v-btn(icon, slot='activator', @click='toggleMarkup({ start: `~~` })').mx-0
-          v-icon format_strikethrough
-        span Strikethrough
-      v-menu(offset-y, open-on-hover)
-        v-btn(icon, slot='activator').mx-0
-          v-icon text_fields
-        v-list.py-0
-          template(v-for='(n, idx) in 6')
-            v-list-tile(@click='setHeaderLine(n)', :key='idx')
+      v-btn.animated.fadeInLeft(v-if='isModalShown', flat, @click='closeAllModal')
+        v-icon(left) chevron_left
+        span Back
+      template(v-else)
+        v-tooltip(bottom, color='primary')
+          v-btn.animated.fadeIn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0
+            v-icon format_bold
+          span Bold
+        v-tooltip(bottom, color='primary')
+          v-btn.animated.fadeIn.wait-p1s(icon, slot='activator', @click='toggleMarkup({ start: `*` })').mx-0
+            v-icon format_italic
+          span Italic
+        v-tooltip(bottom, color='primary')
+          v-btn.animated.fadeIn.wait-p2s(icon, slot='activator', @click='toggleMarkup({ start: `~~` })').mx-0
+            v-icon format_strikethrough
+          span Strikethrough
+        v-menu(offset-y, open-on-hover)
+          v-btn.animated.fadeIn.wait-p3s(icon, slot='activator').mx-0
+            v-icon text_fields
+          v-list.py-0
+            template(v-for='(n, idx) in 6')
+              v-list-tile(@click='setHeaderLine(n)', :key='idx')
+                v-list-tile-action
+                  v-icon(:size='24 - (idx - 1) * 2') title
+                v-list-tile-title Heading {{n}}
+              v-divider(v-if='idx < 5')
+        v-tooltip(bottom, color='primary')
+          v-btn.animated.fadeIn.wait-p4s(icon, slot='activator', @click='toggleMarkup({ start: `~` })').mx-0
+            v-icon vertical_align_bottom
+          span Subscript
+        v-tooltip(bottom, color='primary')
+          v-btn.animated.fadeIn.wait-p5s(icon, slot='activator', @click='toggleMarkup({ start: `^` })').mx-0
+            v-icon vertical_align_top
+          span Superscript
+        v-menu(offset-y, open-on-hover)
+          v-btn.animated.fadeIn.wait-p6s(icon, slot='activator').mx-0
+            v-icon format_quote
+          v-list.py-0
+            v-list-tile(@click='insertBeforeEachLine({ content: `> `})')
               v-list-tile-action
-                v-icon(:size='24 - (idx - 1) * 2') title
-              v-list-tile-title Heading {{n}}
-            v-divider(v-if='idx < 5')
-      v-tooltip(bottom, color='primary')
-        v-btn(icon, slot='activator', @click='toggleMarkup({ start: `~` })').mx-0
-          v-icon vertical_align_bottom
-        span Subscript
-      v-tooltip(bottom, color='primary')
-        v-btn(icon, slot='activator', @click='toggleMarkup({ start: `^` })').mx-0
-          v-icon vertical_align_top
-        span Superscript
-      v-menu(offset-y, open-on-hover)
-        v-btn(icon, slot='activator').mx-0
-          v-icon format_quote
-        v-list.py-0
-          v-list-tile(@click='insertBeforeEachLine({ content: `> `})')
-            v-list-tile-action
-              v-icon format_quote
-            v-list-tile-title Blockquote
-          v-divider
-          v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-info}`})')
-            v-list-tile-action
-              v-icon(color='blue') format_quote
-            v-list-tile-title Info Blockquote
-          v-divider
-          v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-success}`})')
-            v-list-tile-action
-              v-icon(color='success') format_quote
-            v-list-tile-title Success Blockquote
-          v-divider
-          v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})')
-            v-list-tile-action
-              v-icon(color='warning') format_quote
-            v-list-tile-title Warning Blockquote
-          v-divider
-          v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-error}`})')
-            v-list-tile-action
-              v-icon(color='error') format_quote
-            v-list-tile-title Error Blockquote
-          v-divider
-      v-tooltip(bottom, color='primary')
-        v-btn(icon, slot='activator', @click='insertBeforeEachLine({ content: `- `})').mx-0
-          v-icon format_list_bulleted
-        span Unordered List
-      v-tooltip(bottom, color='primary')
-        v-btn(icon, slot='activator', @click='insertBeforeEachLine({ content: `1. `})').mx-0
-          v-icon format_list_numbered
-        span Ordered List
-      v-tooltip(bottom, color='primary')
-        v-btn(icon, slot='activator', @click='toggleMarkup({ start: "`" })').mx-0
-          v-icon space_bar
-        span Inline Code
-      v-tooltip(bottom, color='primary')
-        v-btn(icon, slot='activator', @click='toggleMarkup({ start: `<kbd>`, end: `</kbd>` })').mx-0
-          v-icon font_download
-        span Keyboard Key
-      v-tooltip(bottom, color='primary')
-        v-btn(icon, slot='activator', @click='insertAfter({ content: `---`, newLine: true })').mx-0
-          v-icon remove
-        span Horizontal Bar
+                v-icon format_quote
+              v-list-tile-title Blockquote
+            v-divider
+            v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-info}`})')
+              v-list-tile-action
+                v-icon(color='blue') format_quote
+              v-list-tile-title Info Blockquote
+            v-divider
+            v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-success}`})')
+              v-list-tile-action
+                v-icon(color='success') format_quote
+              v-list-tile-title Success Blockquote
+            v-divider
+            v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})')
+              v-list-tile-action
+                v-icon(color='warning') format_quote
+              v-list-tile-title Warning Blockquote
+            v-divider
+            v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-error}`})')
+              v-list-tile-action
+                v-icon(color='error') format_quote
+              v-list-tile-title Error Blockquote
+            v-divider
+        v-tooltip(bottom, color='primary')
+          v-btn.animated.fadeIn.wait-p7s(icon, slot='activator', @click='insertBeforeEachLine({ content: `- `})').mx-0
+            v-icon format_list_bulleted
+          span Unordered List
+        v-tooltip(bottom, color='primary')
+          v-btn.animated.fadeIn.wait-p8s(icon, slot='activator', @click='insertBeforeEachLine({ content: `1. `})').mx-0
+            v-icon format_list_numbered
+          span Ordered List
+        v-tooltip(bottom, color='primary')
+          v-btn.animated.fadeIn.wait-p9s(icon, slot='activator', @click='toggleMarkup({ start: "`" })').mx-0
+            v-icon space_bar
+          span Inline Code
+        v-tooltip(bottom, color='primary')
+          v-btn.animated.fadeIn.wait-p10s(icon, slot='activator', @click='toggleMarkup({ start: `<kbd>`, end: `</kbd>` })').mx-0
+            v-icon font_download
+          span Keyboard Key
+        v-tooltip(bottom, color='primary')
+          v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='insertAfter({ content: `---`, newLine: true })').mx-0
+            v-icon remove
+          span Horizontal Bar
     .editor-markdown-main
       .editor-markdown-sidebar
         v-tooltip(right, color='teal')
-          v-btn(icon, slot='activator', dark, disabled).mx-0
+          v-btn.animated.fadeInLeft(icon, slot='activator', dark, disabled).mx-0
             v-icon link
           span Insert Link
         v-tooltip(right, color='teal')
-          v-btn(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
+          v-btn.animated.fadeInLeft.wait-p1s(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
             v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') image
           span Insert Image
         v-tooltip(right, color='teal')
-          v-btn(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
+          v-btn.animated.fadeInLeft.wait-p2s(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
             v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') dashboard
           span Insert Block
         v-tooltip(right, color='teal')
-          v-btn(icon, slot='activator', dark, disabled).mx-0
+          v-btn.animated.fadeInLeft.wait-p3s(icon, slot='activator', dark, disabled).mx-0
             v-icon insert_drive_file
           span Insert File
         v-tooltip(right, color='teal')
-          v-btn(icon, slot='activator', dark, disabled).mx-0
+          v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0
             v-icon code
           span Insert Code Block
         v-tooltip(right, color='teal')
-          v-btn(icon, slot='activator', dark, disabled).mx-0
+          v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0
             v-icon play_circle_outline
           span Insert Video / Audio
         v-tooltip(right, color='teal')
-          v-btn(icon, slot='activator', dark, disabled).mx-0
+          v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0
             v-icon multiline_chart
           span Insert Diagram
         v-tooltip(right, color='teal')
-          v-btn(icon, slot='activator', dark, disabled).mx-0
+          v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0
             v-icon functions
           span Insert Math Expression
         v-tooltip(right, color='teal')
-          v-btn(icon, slot='activator', dark, disabled).mx-0
+          v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, disabled).mx-0
             v-icon border_outer
           span Table Helper
         v-spacer
         v-tooltip(right, color='teal')
-          v-btn(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
+          v-btn.animated.fadeInLeft.wait-p9s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
             v-icon crop_free
           span Distraction Free Mode
         v-tooltip(right, color='teal')
-          v-btn(icon, slot='activator', dark, @click='toggleHelp').mx-0
+          v-btn.animated.fadeInLeft.wait-p10s(icon, slot='activator', dark, @click='toggleHelp').mx-0
             v-icon(:color='helpShown ? `teal` : ``') help
           span Markdown Formatting Help
       .editor-markdown-editor
@@ -275,6 +279,9 @@ export default {
     isMobile() {
       return this.$vuetify.breakpoint.smAndDown
     },
+    isModalShown() {
+      return this.helpShown || this.activeModal !== ''
+    },
     locale: get('page/locale'),
     path: get('page/path'),
     activeModal: sync('editor/activeModal')
@@ -282,6 +289,11 @@ export default {
   methods: {
     toggleModal(key) {
       this.activeModal = (this.activeModal === key) ? '' : key
+      this.helpShown = false
+    },
+    closeAllModal() {
+      this.activeModal = ''
+      this.helpShown = false
     },
     onCmReady(cm) {
       const keyBindings = {
@@ -438,6 +450,7 @@ export default {
     }, 500),
     toggleHelp () {
       this.helpShown = !this.helpShown
+      this.activeModal = ''
     },
     toggleFullscreen () {
       this.cm.setOption('fullScreen', true)