fix: UI improvements

2019-08-25 14:23:56 -04:00
parent 7f67c72757
commit 10e19700e5
16 changed files with 125 additions and 158 deletions
--- a/client/components/editor/editor-markdown.vue
+++ b/client/components/editor/editor-markdown.vue
@@ -114,49 +114,49 @@
          span {{$t('editor:markup.insertLink')}}
        v-tooltip(right, color='teal')
          template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p1s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalMedia`)').mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p1s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalMedia`)').mx-0
              v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') mdi-folder-multiple-image
          span {{$t('editor:markup.insertAssets')}}
        v-tooltip(right, color='teal')
          template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalBlocks`)', disabled).mx-0
              v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-view-dashboard-outline
          span {{$t('editor:markup.insertBlock')}}
        v-tooltip(right, color='teal')
          template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p3s(icon, tile, v-on='on', dark, disabled).mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p3s(icon, tile, v-on='on', dark, disabled).mx-0
              v-icon mdi-code-braces
          span {{$t('editor:markup.insertCodeBlock')}}
        v-tooltip(right, color='teal')
          template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p4s(icon, tile, v-on='on', dark, disabled).mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p4s(icon, tile, v-on='on', dark, disabled).mx-0
              v-icon mdi-library-video
          span {{$t('editor:markup.insertVideoAudio')}}
        v-tooltip(right, color='teal')
          template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p5s(icon, tile, v-on='on', dark, disabled).mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p5s(icon, tile, v-on='on', dark, disabled).mx-0
              v-icon mdi-chart-multiline
          span {{$t('editor:markup.insertDiagram')}}
        v-tooltip(right, color='teal')
          template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p6s(icon, tile, v-on='on', dark, disabled).mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p6s(icon, tile, v-on='on', dark, disabled).mx-0
              v-icon mdi-function-variant
          span {{$t('editor:markup.insertMathExpression')}}
        v-tooltip(right, color='teal')
          template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p7s(icon, tile, v-on='on', dark, disabled).mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p7s(icon, tile, v-on='on', dark, disabled).mx-0
              v-icon mdi-table-plus
          span {{$t('editor:markup.tableHelper')}}
        template(v-if='$vuetify.breakpoint.mdAndUp')
          v-spacer
          v-tooltip(right, color='teal')
            template(v-slot:activator='{ on }')
-              v-btn.animated.fadeInLeft.wait-p8s(icon, tile, v-on='on', dark, @click='toggleFullscreen').mx-0
+              v-btn.mt-3.animated.fadeInLeft.wait-p8s(icon, tile, v-on='on', dark, @click='toggleFullscreen').mx-0
                v-icon mdi-arrow-expand-all
            span {{$t('editor:markup.distractionFreeMode')}}
          v-tooltip(right, color='teal')
            template(v-slot:activator='{ on }')
-              v-btn.animated.fadeInLeft.wait-p9s(icon, tile, v-on='on', dark, @click='toggleHelp').mx-0
+              v-btn.mt-3.animated.fadeInLeft.wait-p9s(icon, tile, v-on='on', dark, @click='toggleHelp').mx-0
                v-icon(:color='helpShown ? `teal` : ``') mdi-help-circle
            span {{$t('editor:markup.markdownFormattingHelp')}}
      .editor-markdown-editor
@@ -384,7 +384,7 @@ export default {
    }, 500),
    onCmPaste (cm, ev) {
      const clipItems = (ev.clipboardData || ev.originalEvent.clipboardData).items
-      for (const clipItem of clipItems) {
+      for (let clipItem of clipItems) {
        if (_.startsWith(clipItem.type, 'image/')) {
          const file = clipItem.getAsFile()
          const reader = new FileReader()
--- a/client/components/editor/editor-modal-media.vue
+++ b/client/components/editor/editor-modal-media.vue
@@ -9,7 +9,7 @@
                v-toolbar.radius-7(:color='$vuetify.theme.dark ? `teal` : `teal lighten-5`', dense, flat, height='44')
                  .body-2(:class='$vuetify.theme.dark ? `white--text` : `teal--text`') {{$t('editor:assets.title')}}
                  v-spacer
-                  v-btn(flat, icon, @click='refresh', tile, small)
+                  v-btn(text, icon, @click='refresh')
                    v-icon(:color='$vuetify.theme.dark ? `white` : `teal`') mdi-refresh
                v-dialog(v-model='newFolderDialog', max-width='550')
                  template(v-slot:activator='{ on }')
@@ -18,7 +18,7 @@
                      span.hidden-sm-and-down(:class='$vuetify.theme.dark ? `teal--text text--lighten-3` : ``') {{$t('editor:assets.newFolder')}}
                  v-card
                    .dialog-header.is-short.subtitle-1 {{$t('editor:assets.newFolder')}}
-                    v-card-text
+                    v-card-text.pt-5
                      v-text-field.md2(
                        outlined
                        prepend-icon='mdi-folder-outline'
@@ -48,7 +48,7 @@
                  v-icon mdi-folder-upload
                v-btn.btn-normalcase.mx-1(v-for='folder of folders', :key='folder.id', depressed,  color='grey darken-2', dark, @click='downFolder(folder)')
                  v-icon(left) mdi-folder
-                  span.caption {{ folder.name }}
+                  span.caption(style='text-transform: none;') {{ folder.name }}
                v-divider.mt-2
              v-data-table(
                :items='assets'
@@ -186,14 +186,14 @@
    //- RENAME DIALOG

    v-dialog(v-model='renameDialog', max-width='550', persistent)
-      v-card.wiki-form
+      v-card
        .dialog-header.is-short.is-orange
-          v-icon.mr-2(color='white') keyboard
+          v-icon.mr-2(color='white') mdi-keyboard
          span {{$t('editor:assets.renameAsset')}}
-        v-card-text
+        v-card-text.pt-5
          .body-2 {{$t('editor:assets.renameAssetSubtitle')}}
          v-text-field(
-            outline
+            outlined
            single-line
            :counter='255'
            v-model='renameAssetName'
@@ -202,24 +202,24 @@
          )
        v-card-chin
          v-spacer
-          v-btn(flat, @click='renameDialog = false', :disabled='renameAssetLoading') {{$t('common:actions.cancel')}}
-          v-btn(color='orange darken-3', @click='renameAsset', :loading='renameAssetLoading').white--text {{$t('common:actions.rename')}}
+          v-btn(text, @click='renameDialog = false', :disabled='renameAssetLoading') {{$t('common:actions.cancel')}}
+          v-btn.px-3(color='orange darken-3', @click='renameAsset', :loading='renameAssetLoading').white--text {{$t('common:actions.rename')}}

    //- DELETE DIALOG

    v-dialog(v-model='deleteDialog', max-width='550', persistent)
-      v-card.wiki-form
+      v-card
        .dialog-header.is-short.is-red
-          v-icon.mr-2(color='white') highlight_off
+          v-icon.mr-2(color='white') mdi-trash-can-outline
          span {{$t('editor:assets.deleteAsset')}}
-        v-card-text
+        v-card-text.pt-5
          .body-2 {{$t('editor:assets.deleteAssetConfirm')}}
          .body-2.red--text.text--darken-2 {{currentAsset.filename}}?
          .caption.mt-3 {{$t('editor:assets.deleteAssetWarn')}}
        v-card-chin
          v-spacer
-          v-btn(flat, @click='deleteDialog = false', :disabled='deleteAssetLoading') {{$t('common:actions.cancel')}}
-          v-btn(color='red darken-2', @click='deleteAsset', :loading='deleteAssetLoading').white--text {{$t('common:actions.delete')}}
+          v-btn(text, @click='deleteDialog = false', :disabled='deleteAssetLoading') {{$t('common:actions.cancel')}}
+          v-btn.px-3(color='red darken-2', @click='deleteAsset', :loading='deleteAssetLoading').white--text {{$t('common:actions.delete')}}
 </template>

 <script>
--- a/client/components/editor/editor-modal-properties.vue
+++ b/client/components/editor/editor-modal-properties.vue
@@ -16,8 +16,8 @@
        )
        v-icon(left) mdi-check
        span {{ $t('common:actions.ok') }}
-    v-card.wiki-form(tile)
-      v-card-text
+    v-card(tile)
+      v-card-text.pt-5
        .overline.pb-5 {{$t('editor:props.pageInfo')}}
        v-text-field(
          ref='iptTitle'
@@ -35,7 +35,7 @@
          :hint='$t(`editor:props.shortDescriptionHint`)'
          )
      v-divider
-      v-card-text.grey(:class='darkMode ? `darken-3-d3` : `lighten-5`')
+      v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
        .overline.pb-5 {{$t('editor:props.pathCategorization')}}
        v-container.pa-0(fluid, grid-list-lg)
          v-layout(row, wrap)
@@ -73,7 +73,7 @@
          disabled
          )
      v-divider
-      v-card-text.pb-5.grey(:class='darkMode ? `darken-3-d5` : `lighten-4`')
+      v-card-text.py-5.grey(:class='darkMode ? `darken-3-d5` : `lighten-4`')
        .overline.pb-5 {{$t('editor:props.publishState')}} #[v-chip.ml-3(label, color='grey', small, outlined).white--text coming soon]
        v-container.pa-0(fluid, grid-list-lg)
          v-layout(row, wrap)