misc: migrate to vuetify 2.0 (wip)

2019-08-03 04:48:55 +00:00
parent eccf1a1b19
commit 27e0a37dbe
47 changed files with 737 additions and 609 deletions
--- a/client/components/editor/editor-markdown.vue
+++ b/client/components/editor/editor-markdown.vue
@@ -9,37 +9,38 @@
      template(v-else)
        v-tooltip(bottom, color='primary')
          v-btn.animated.fadeIn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0
-            v-icon format_bold
+            v-icon mdi-format-bold
          span {{$t('editor:markup.bold')}}
        v-tooltip(bottom, color='primary')
          v-btn.animated.fadeIn.wait-p1s(icon, slot='activator', @click='toggleMarkup({ start: `*` })').mx-0
-            v-icon format_italic
+            v-icon mdi-format-italic
          span {{$t('editor:markup.italic')}}
        v-tooltip(bottom, color='primary')
          v-btn.animated.fadeIn.wait-p2s(icon, slot='activator', @click='toggleMarkup({ start: `~~` })').mx-0
-            v-icon format_strikethrough
+            v-icon mdi-format-strikethrough
          span {{$t('editor:markup.strikethrough')}}
        v-menu(offset-y, open-on-hover)
-          v-btn.animated.fadeIn.wait-p3s(icon, slot='activator').mx-0
-            v-icon text_fields
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeIn.wait-p3s(icon, v-on='on').mx-0
+              v-icon mdi-format-header-pound
          v-list.py-0
            template(v-for='(n, idx) in 6')
              v-list-item(@click='setHeaderLine(n)', :key='idx')
                v-list-item-action
-                  v-icon(:size='24 - (idx - 1) * 2') title
+                  v-icon(:size='24 - (idx - 1) * 2') mdi-format-header-{{n}}
                v-list-item-title {{$t('editor:markup.heading', { level: 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
+            v-icon mdi-format-subscript
          span {{$t('editor:markup.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
+            v-icon mdi-format-superscript
          span {{$t('editor:markup.superscript')}}
        v-menu(offset-y, open-on-hover)
          v-btn.animated.fadeIn.wait-p6s(icon, slot='activator').mx-0
-            v-icon format_quote
+            v-icon mdi-alpha-t-box-outline
          v-list.py-0
            v-list-item(@click='insertBeforeEachLine({ content: `> `})')
              v-list-item-action
@@ -68,73 +69,73 @@
            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
+            v-icon mdi-format-list-bulleted
          span {{$t('editor:markup.unorderedList')}}
        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
+            v-icon mdi-format-list-numbered
          span {{$t('editor:markup.orderedList')}}
        v-tooltip(bottom, color='primary')
          v-btn.animated.fadeIn.wait-p9s(icon, slot='activator', @click='toggleMarkup({ start: "`" })').mx-0
-            v-icon space_bar
+            v-icon mdi-code-tags
          span {{$t('editor:markup.inlineCode')}}
        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
+            v-icon mdi-keyboard-variant
          span {{$t('editor:markup.keyboardKey')}}
        v-tooltip(bottom, color='primary')
          v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='insertAfter({ content: `---`, newLine: true })').mx-0
-            v-icon remove
+            v-icon mdi-minus
          span {{$t('editor:markup.horizontalBar')}}
        template(v-if='$vuetify.breakpoint.mdAndUp')
          v-spacer
          v-tooltip(bottom, color='primary')
            v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='previewShown = !previewShown').mx-0
-              v-icon flip
+              v-icon mdi-book-open-outline
            span {{$t('editor:markup.togglePreviewPane')}}
    .editor-markdown-main
      .editor-markdown-sidebar
        v-tooltip(right, color='teal')
          v-btn.animated.fadeInLeft(icon, slot='activator', dark, disabled).mx-0
-            v-icon link
+            v-icon mdi-link-plus
          span {{$t('editor:markup.insertLink')}}
        v-tooltip(right, color='teal')
          v-btn.animated.fadeInLeft.wait-p1s(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
-            v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') burst_mode
+            v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') mdi-folder-multiple-image
          span {{$t('editor:markup.insertAssets')}}
        v-tooltip(right, color='teal')
          v-btn.animated.fadeInLeft.wait-p2s(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
-            v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') dashboard
+            v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-post
          span {{$t('editor:markup.insertBlock')}}
        v-tooltip(right, color='teal')
          v-btn.animated.fadeInLeft.wait-p3s(icon, slot='activator', dark, disabled).mx-0
-            v-icon code
+            v-icon mdi-code-braces
          span {{$t('editor:markup.insertCodeBlock')}}
        v-tooltip(right, color='teal')
          v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0
-            v-icon play_circle_outline
+            v-icon mdi-library-video
          span {{$t('editor:markup.insertVideoAudio')}}
        v-tooltip(right, color='teal')
          v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0
-            v-icon multiline_chart
+            v-icon mdi-chart-multiline
          span {{$t('editor:markup.insertDiagram')}}
        v-tooltip(right, color='teal')
          v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0
-            v-icon functions
+            v-icon mdi-function-variant
          span {{$t('editor:markup.insertMathExpression')}}
        v-tooltip(right, color='teal')
          v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0
-            v-icon border_outer
+            v-icon mdi-table-plus
          span {{$t('editor:markup.tableHelper')}}
        template(v-if='$vuetify.breakpoint.mdAndUp')
          v-spacer
          v-tooltip(right, color='teal')
            v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
-              v-icon crop_free
+              v-icon mdi-overscan
            span {{$t('editor:markup.distractionFreeMode')}}
          v-tooltip(right, color='teal')
            v-btn.animated.fadeInLeft.wait-p9s(icon, slot='activator', dark, @click='toggleHelp').mx-0
-              v-icon(:color='helpShown ? `teal` : ``') help
+              v-icon(:color='helpShown ? `teal` : ``') mdi-help-circle
            span {{$t('editor:markup.markdownFormattingHelp')}}
      .editor-markdown-editor
        codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
--- a/client/components/editor/editor-modal-properties.vue
+++ b/client/components/editor/editor-modal-properties.vue
@@ -7,30 +7,28 @@
    :fullscreen='$vuetify.breakpoint.smAndDown'
    )
    .dialog-header
-      v-icon(color='white') sort_by_alpha
-      .subheading.white--text.ml-2 {{$t('editor:props.pageProperties')}}
+      v-icon(color='white') mdi-tag-text-outline
+      .subheading.white--text.ml-3 {{$t('editor:props.pageProperties')}}
      v-spacer
      v-btn.mx-0(
-        outline
+        outlined
        dark
        @click.native='close'
        )
-        v-icon(left) check
+        v-icon(left) mdi-check
        span {{ $t('common:actions.ok') }}
    v-card.wiki-form(tile)
      v-card-text
-        v-subheader.pl-0 {{$t('editor:props.pageInfo')}}
+        .overline.pb-5 {{$t('editor:props.pageInfo')}}
        v-text-field(
          ref='iptTitle'
-          outline
-          background-color='grey lighten-2'
+          outlined
          :label='$t(`editor:props.title`)'
          counter='255'
          v-model='title'
          )
        v-text-field(
-          outline
-          background-color='grey lighten-2'
+          outlined
          :label='$t(`editor:props.shortDescription`)'
          counter='255'
          v-model='description'
@@ -39,13 +37,12 @@
          )
      v-divider
      v-card-text.grey(:class='darkMode ? `darken-3-d3` : `lighten-5`')
-        v-subheader.pl-0 {{$t('editor:props.pathCategorization')}}
+        .overline.pb-5 {{$t('editor:props.pathCategorization')}}
        v-container.pa-0(fluid, grid-list-lg)
          v-layout(row, wrap)
            v-flex(xs12, md2)
              v-select(
-                outline
-                background-color='grey lighten-2'
+                outlined
                :label='$t(`editor:props.locale`)'
                suffix='/'
                :items='namespaces'
@@ -55,10 +52,9 @@
              )
            v-flex(xs12, md10)
              v-text-field(
-                outline
-                background-color='grey lighten-2'
+                outlined
                :label='$t(`editor:props.path`)'
-                append-icon='folder'
+                append-icon='mdi-folder-search'
                v-model='path'
                :hint='$t(`editor:props.pathHint`)'
                persistent-hint
@@ -66,11 +62,10 @@
                :disabled='mode !== "create"'
                )
        v-combobox(
-          background-color='grey lighten-2'
          chips
          deletable-chips
          :label='$t(`editor:props.tags`)'
-          outline
+          outlined
          multiple
          v-model='tags'
          single-line
@@ -80,7 +75,7 @@
          )
      v-divider
      v-card-text.pb-5.grey(:class='darkMode ? `darken-3-d5` : `lighten-4`')
-        v-subheader.pl-0 {{$t('editor:props.publishState')}} #[v-chip.ml-3(label, color='grey', small, outline).white--text coming soon]
+        .overline.pb-5 {{$t('editor:props.publishState')}} #[v-chip.ml-3(label, color='grey', small, outline).white--text coming soon]
        v-container.pa-0(fluid, grid-list-lg)
          v-layout(row, wrap)
            v-flex(xs12, md4)
@@ -107,10 +102,9 @@
                  slot='activator'
                  :label='$t(`editor:props.publishStart`)'
                  v-model='publishStartDate'
-                  prepend-icon='event'
+                  prepend-icon='mdi-calendar-check'
                  readonly
-                  outline
-                  background-color='grey lighten-2'
+                  outlined
                  clearable
                  :hint='$t(`editor:props.publishStartHint`)'
                  persistent-hint
@@ -150,10 +144,9 @@
                  slot='activator'
                  :label='$t(`editor:props.publishEnd`)'
                  v-model='publishEndDate'
-                  prepend-icon='event'
+                  prepend-icon='mdi-calendar-remove'
                  readonly
-                  outline
-                  background-color='grey lighten-2'
+                  outlined
                  clearable
                  :hint='$t(`editor:props.publishEndHint`)'
                  persistent-hint