misc: migrate to vuetify 2.0 (wip)

client/client-app.js

@@ -157,12 +157,14 @@ Vue.component('page-source', () => import(/* webpackChunkName: "source" */ './co
 Vue.component('loader', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/loader.vue'))
 Vue.component('login', () => import(/* webpackPrefetch: true, webpackChunkName: "login" */ './components/login.vue'))
 Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue'))
+Vue.component('new-page', () => import(/* webpackChunkName: "new-page" */ './components/new-page.vue'))
 Vue.component('notify', () => import(/* webpackMode: "eager" */ './components/common/notify.vue'))
 Vue.component('page-selector', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/page-selector.vue'))
 Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
 Vue.component('register', () => import(/* webpackChunkName: "register" */ './components/register.vue'))
 Vue.component('v-card-chin', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-chin.vue'))
 Vue.component('search-results', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/search-results.vue'))
+Vue.component('welcome', () => import(/* webpackChunkName: "welcome" */ './components/welcome.vue'))
 
 Vue.component('nav-footer', () => import(/* webpackChunkName: "theme-page"  */ './themes/' + process.env.CURRENT_THEME + '/components/nav-footer.vue'))
 Vue.component('nav-sidebar', () => import(/* webpackChunkName: "theme-page" */ './themes/' + process.env.CURRENT_THEME + '/components/nav-sidebar.vue'))

client/components/common/loader.vue

 <template lang='pug'>
   v-dialog(v-model='value', persistent, max-width='350')
     v-card.loader-dialog.radius-7(:color='color', dark)
-      v-card-text.text-xs-center.py-4
+      v-card-text.text-center.py-4
         atom-spinner.is-inline(
           v-if='mode === `loading`'
           :animation-duration='1000'
@@ -9,7 +9,7 @@
           color='#FFF'
           )
         img(v-else-if='mode === `icon`', :src='`/svg/icon-` + icon + `.svg`', :alt='icon')
-        .subheading {{ title }}
+        .subtitle-1.white--text {{ title }}
         .caption {{ subtitle }}
 </template>
 

client/components/common/nav-header.vue

@@ -12,7 +12,7 @@
         solo
         flat
         hide-details
-        prepend-inner-icon='mdi-search'
+        prepend-inner-icon='mdi-magnify'
         :loading='searchIsLoading'
         @keyup.enter='searchEnter'
       )
@@ -34,7 +34,7 @@
                 v-divider.my-0
                 .overline.pa-4.grey--text {{$t('common:header.currentPage')}}
                 v-list-item.pl-4(@click='pageView', v-if='mode !== `view`')
-                  v-list-item-avatar(size='24'): v-icon(color='indigo') subject
+                  v-list-item-avatar(size='24'): v-icon(color='indigo') mdi-file-document-box-outline
                   v-list-item-title.body-2 {{$t('common:header.view')}}
                 v-list-item.pl-4(@click='pageEdit', v-if='mode !== `edit` && isAuthenticated')
                   v-list-item-avatar(size='24'): v-icon(color='indigo') mdi-file-document-edit-outline
@@ -136,7 +136,7 @@
             @click='searchToggle'
             icon
             )
-            v-icon(color='grey') search
+            v-icon(color='grey') mdi-magnify
           v-menu(offset-y, left, transition='slide-y-transition', v-if='mode === `view` && locales.length > 0')
             template(v-slot:activator='{ on: menu }')
               v-tooltip(bottom)

client/components/editor.vue

@@ -3,7 +3,7 @@
     nav-header(dense)
       template(slot='mid')
         v-spacer
-        .subheading.grey--text {{currentPageTitle}}
+        .subtitle-1.grey--text {{currentPageTitle}}
         v-spacer
       template(slot='actions')
         v-btn.animated.fadeInDown(

client/components/editor/editor-markdown.vue

@@ -3,25 +3,28 @@
     v-toolbar.editor-markdown-toolbar(dense, color='primary', dark, flat, style='overflow-x: hidden;')
       template(v-if='isModalShown')
         v-spacer
-        v-btn.animated.fadeInRight(flat, @click='closeAllModal')
-          v-icon(left) remove_circle_outline
+        v-btn.animated.fadeInRight(text, @click='closeAllModal')
+          v-icon(left) mdi-arrow-left-circle
           span {{$t('editor:backToEditor')}}
       template(v-else)
         v-tooltip(bottom, color='primary')
-          v-btn.animated.fadeIn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeIn(icon, tile, v-on='on', @click='toggleMarkup({ start: `**` })').mx-0
               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
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeIn.wait-p1s(icon, tile, v-on='on', @click='toggleMarkup({ start: `*` })').mx-0
               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
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeIn.wait-p2s(icon, tile, v-on='on', @click='toggleMarkup({ start: `~~` })').mx-0
               v-icon mdi-format-strikethrough
           span {{$t('editor:markup.strikethrough')}}
         v-menu(offset-y, open-on-hover)
           template(v-slot:activator='{ on }')
-            v-btn.animated.fadeIn.wait-p3s(icon, v-on='on').mx-0
+            v-btn.animated.fadeIn.wait-p3s(icon, tile, v-on='on').mx-0
               v-icon mdi-format-header-pound
           v-list.py-0
             template(v-for='(n, idx) in 6')
@@ -31,117 +34,137 @@
                 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
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeIn.wait-p4s(icon, tile, v-on='on', @click='toggleMarkup({ start: `~` })').mx-0
               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
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeIn.wait-p5s(icon, tile, v-on='on', @click='toggleMarkup({ start: `^` })').mx-0
               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
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeIn.wait-p6s(icon, tile, v-on='on').mx-0
               v-icon mdi-alpha-t-box-outline
           v-list.py-0
             v-list-item(@click='insertBeforeEachLine({ content: `> `})')
               v-list-item-action
-                v-icon format_quote
+                v-icon mdi-alpha-t-box-outline
               v-list-item-title {{$t('editor:markup.blockquote')}}
             v-divider
             v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-info}`})')
               v-list-item-action
-                v-icon(color='blue') format_quote
+                v-icon(color='blue') mdi-alpha-i-box-outline
               v-list-item-title {{$t('editor:markup.blockquoteInfo')}}
             v-divider
             v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-success}`})')
               v-list-item-action
-                v-icon(color='success') format_quote
+                v-icon(color='success') mdi-alpha-s-box-outline
               v-list-item-title {{$t('editor:markup.blockquoteSuccess')}}
             v-divider
             v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})')
               v-list-item-action
-                v-icon(color='warning') format_quote
+                v-icon(color='warning') mdi-alpha-w-box-outline
               v-list-item-title {{$t('editor:markup.blockquoteWarning')}}
             v-divider
             v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-danger}`})')
               v-list-item-action
-                v-icon(color='error') format_quote
+                v-icon(color='error') mdi-alpha-e-box-outline
               v-list-item-title {{$t('editor:markup.blockquoteError')}}
             v-divider
         v-tooltip(bottom, color='primary')
-          v-btn.animated.fadeIn.wait-p7s(icon, slot='activator', @click='insertBeforeEachLine({ content: `- `})').mx-0
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeIn.wait-p7s(icon, tile, v-on='on', @click='insertBeforeEachLine({ content: `- `})').mx-0
               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
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeIn.wait-p8s(icon, tile, v-on='on', @click='insertBeforeEachLine({ content: `1. `})').mx-0
               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
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeIn.wait-p9s(icon, tile, v-on='on', @click='toggleMarkup({ start: "`" })').mx-0
               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
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeIn.wait-p10s(icon, tile, v-on='on', @click='toggleMarkup({ start: `<kbd>`, end: `</kbd>` })').mx-0
               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
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeIn.wait-p11s(icon, tile, v-on='on', @click='insertAfter({ content: `---`, newLine: true })').mx-0
               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
+            template(v-slot:activator='{ on }')
+              v-btn.animated.fadeIn.wait-p11s(icon, tile, v-on='on', @click='previewShown = !previewShown').mx-0
                 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
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeInLeft(icon, tile, v-on='on', dark, disabled).mx-0
               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
+          template(v-slot:activator='{ on }')
+            v-btn.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')
-          v-btn.animated.fadeInLeft.wait-p2s(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
-            v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-post
+          template(v-slot:activator='{ on }')
+            v-btn.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
+              v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-view-dashboard-outline
           span {{$t('editor:markup.insertBlock')}}
         v-tooltip(right, color='teal')
-          v-btn.animated.fadeInLeft.wait-p3s(icon, slot='activator', dark, disabled).mx-0
+          template(v-slot:activator='{ on }')
+            v-btn.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')
-          v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0
+          template(v-slot:activator='{ on }')
+            v-btn.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')
-          v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0
+          template(v-slot:activator='{ on }')
+            v-btn.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')
-          v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0
+          template(v-slot:activator='{ on }')
+            v-btn.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')
-          v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0
+          template(v-slot:activator='{ on }')
+            v-btn.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')
-            v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
-              v-icon mdi-overscan
+            template(v-slot:activator='{ on }')
+              v-btn.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')
-            v-btn.animated.fadeInLeft.wait-p9s(icon, slot='activator', dark, @click='toggleHelp').mx-0
+            template(v-slot:activator='{ on }')
+              v-btn.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
         codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
       transition(name='editor-markdown-preview')
         .editor-markdown-preview(v-if='previewShown')
-          .editor-markdown-preview-content.contents(ref='editorPreview', v-html='previewHTML')
+          .editor-markdown-preview-content.contents
+            div(ref='editorPreview', v-html='previewHTML')
 
     v-system-bar.editor-markdown-sysbar(dark, status, color='grey darken-3')
       .caption.editor-markdown-sysbar-locale {{locale.toUpperCase()}}
@@ -572,7 +595,7 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
     &-content {
       height: $editor-height;
       overflow-y: scroll;
-      padding: 1rem 1rem 1rem 0;
+      padding: 1rem 1rem 1rem 1rem;
       width: calc(100% + 1rem + 17px);
       // -ms-overflow-style: none;
 
@@ -593,7 +616,7 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
     color: #FFF;
 
     .v-toolbar__content {
-      padding-left: 78px;
+      padding-left: 64px;
 
       @include until($tablet) {
         padding-left: 8px;

client/components/editor/editor-modal-editorselect.vue

 <template lang='pug'>
   v-dialog(v-model='isShown', persistent, max-width='700')
     v-card.radius-7(color='blue darken-3', dark)
-      v-card-text.text-xs-center.py-4
-        .subheading {{$t('editor:select.title')}}
+      v-card-text.text-center.py-4
+        .subtitle-1.white--text {{$t('editor:select.title')}}
         v-container(grid-list-lg, fluid)
           v-layout(row, wrap, justify-center)
             v-flex(xs4)
@@ -10,8 +10,9 @@
                 hover
                 light
                 ripple
+                disabled
                 )
-                v-card-text.text-xs-center(@click='selectEditor("api")')
+                v-card-text.text-center(@click='selectEditor("api")')
                   img(src='/svg/icon-rest-api.svg', alt='API', style='width: 36px;')
                   .body-2.mt-2.grey--text.text--darken-2 API Docs
                   .caption.grey--text.text--darken-1 REST / GraphQL
@@ -20,8 +21,9 @@
                 hover
                 light
                 ripple
+                disabled
                 )
-                v-card-text.text-xs-center(@click='selectEditor("code")')
+                v-card-text.text-center(@click='selectEditor("code")')
                   img(src='/svg/icon-source-code.svg', alt='Code', style='width: 36px;')
                   .body-2.mt-2.grey--text.text--darken-2 Code
                   .caption.grey--text.text--darken-1 Raw HTML
@@ -31,17 +33,18 @@
                 light
                 ripple
                 )
-                v-card-text.text-xs-center(@click='selectEditor("markdown")')
+                v-card-text.text-center(@click='selectEditor("markdown")')
                   img(src='/svg/icon-markdown.svg', alt='Markdown', style='width: 36px;')
-                  .body-2.mt-2 Markdown
+                  .primary--text.body-2.mt-2 Markdown
                   .caption.grey--text Default
             v-flex(xs4)
               v-card.radius-7.grey(
                 hover
                 light
                 ripple
+                disabled
                 )
-                v-card-text.text-xs-center(@click='selectEditor("tabular")')
+                v-card-text.text-center(@click='selectEditor("tabular")')
                   img(src='/svg/icon-table.svg', alt='Tabular', style='width: 36px;')
                   .body-2.grey--text.mt-2.text--darken-2 Tabular
                   .caption.grey--text.text--darken-1 Excel-like
@@ -50,8 +53,9 @@
                 hover
                 light
                 ripple
+                disabled
                 )
-                v-card-text.text-xs-center(@click='selectEditor("wysiwyg")')
+                v-card-text.text-center(@click='selectEditor("wysiwyg")')
                   img(src='/svg/icon-open-in-browser.svg', alt='Visual Builder', style='width: 36px;')
                   .body-2.mt-2.grey--text.text--darken-2 Visual Builder
                   .caption.grey--text.text--darken-1 Drag-n-drop
@@ -60,8 +64,9 @@
                 hover
                 light
                 ripple
+                disabled
                 )
-                v-card-text.text-xs-center(@click='selectEditor("wikitext")')
+                v-card-text.text-center(@click='selectEditor("wikitext")')
                   img(src='/svg/icon-news.svg', alt='WikiText', style='width: 36px;')
                   .body-2.grey--text.mt-2.text--darken-2 WikiText
                   .caption.grey--text.text--darken-1 MediaWiki Format

client/components/editor/editor-modal-media.vue

@@ -9,19 +9,19 @@
                 v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat, height='44')
                   .body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') {{$t('editor:assets.title')}}
                   v-spacer
-                  v-btn(flat, icon, @click='refresh')
-                    v-icon(:color='$vuetify.dark ? `white` : `teal`') refresh
+                  v-btn(flat, icon, @click='refresh', tile, small)
+                    v-icon(:color='$vuetify.dark ? `white` : `teal`') mdi-refresh
                 v-dialog(v-model='newFolderDialog', max-width='550')
-                  v-btn.ml-3.my-0.mr-0.radius-7(outline, large, color='teal', :icon='$vuetify.breakpoint.xsOnly', slot='activator')
-                    v-icon(:left='$vuetify.breakpoint.mdAndUp') add
+                  template(v-slot:activator='{ on }')
+                    v-btn.ml-3.my-0.mr-0.radius-7(outlined, large, color='teal', :icon='$vuetify.breakpoint.xsOnly', v-on='on')
+                      v-icon(:left='$vuetify.breakpoint.mdAndUp') mdi-plus
                       span.hidden-sm-and-down(:class='$vuetify.dark ? `teal--text text--lighten-3` : ``') {{$t('editor:assets.newFolder')}}
-                  v-card.wiki-form
-                    .dialog-header.is-short {{$t('editor:assets.newFolder')}}
+                  v-card
+                    .dialog-header.is-short.subtitle-1 {{$t('editor:assets.newFolder')}}
                     v-card-text
                       v-text-field.md2(
-                        outline
-                        background-color='grey lighten-3'
-                        prepend-icon='folder'
+                        outlined
+                        prepend-icon='mdi-folder-outline'
                         v-model='newFolderName'
                         :label='$t(`editor:assets.folderName`)'
                         counter='255'
@@ -33,8 +33,8 @@
                         a(place='namingRules', href='https://docs-beta.requarks.io/guide/assets#naming-restrictions', target='_blank') {{$t('editor:assets.folderNameNamingRulesLink')}}
                     v-card-chin
                       v-spacer
-                      v-btn(flat, @click='newFolderDialog = false') {{$t('common:actions.cancel')}}
-                      v-btn(color='primary', @click='createFolder', :disabled='!isFolderNameValid', :loading='newFolderLoading') {{$t('common:actions.create')}}
+                      v-btn(text, @click='newFolderDialog = false') {{$t('common:actions.cancel')}}
+                      v-btn.px-3(color='primary', @click='createFolder', :disabled='!isFolderNameValid', :loading='newFolderLoading') {{$t('common:actions.create')}}
               v-toolbar(flat, dense, :color='$vuetify.dark ? `grey darken-3` : `white`')
                 template(v-if='folderTree.length > 0')
                   .body-2
@@ -44,22 +44,23 @@
                       span.mx-1 /
                 .body-2(v-else) / #[em root]
               template(v-if='folders.length > 0 || currentFolderId > 0')
-                v-btn.is-icon.mx-1(:color='$vuetify.dark ? `grey lighten-1` : `grey darken-2`', outline, :dark='currentFolderId > 0', @click='upFolder()', :disabled='currentFolderId === 0')
-                  v-icon keyboard_arrow_up
+                v-btn.is-icon.mx-1(:color='$vuetify.dark ? `grey lighten-1` : `grey darken-2`', outlined, :dark='currentFolderId > 0', @click='upFolder()', :disabled='currentFolderId === 0')
+                  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) folder
-                  span {{ folder.name }}
+                  v-icon(left) mdi-folder
+                  span.caption {{ folder.name }}
                 v-divider.mt-2
               v-data-table(
                 :items='assets'
                 :headers='headers'
-                :pagination.sync='pagination'
-                :rows-per-page-items='[15]'
+                :page.sync='pagination'
+                :items-per-page='15'
                 :loading='loading'
                 must-sort,
-                hide-actions
+                hide-default-footer,
+                dense
               )
-                template(slot='items', slot-scope='props')
+                template(slot='item', slot-scope='props')
                   tr.is-clickable(
                     @click.left='currentFileId = props.item.id'
                     @click.right.prevent=''
@@ -75,54 +76,49 @@
                     td(v-if='$vuetify.breakpoint.mdAndUp') {{ props.item.fileSize | prettyBytes }}
                     td(v-if='$vuetify.breakpoint.mdAndUp') {{ props.item.createdAt | moment('from') }}
                     td(v-if='$vuetify.breakpoint.smAndUp')
-                      v-menu(offset-x)
-                        v-btn.ma-0(icon, slot='activator')
-                          v-icon(color='grey darken-2') more_horiz
-                        v-list.py-0(style='border-top: 5px solid #444;')
+                      v-menu(offset-x, min-width='200')
+                        template(v-slot:activator='{ on }')
+                          v-btn(icon, v-on='on', tile, small)
+                            v-icon(color='grey darken-2') mdi-dots-horizontal
+                        v-list(nav, style='border-top: 5px solid #444;')
                           v-list-item(@click='', disabled)
-                            v-list-item-avatar
-                              v-icon(color='teal') short_text
+                            v-list-item-avatar(size='24')
+                              v-icon(color='teal') mdi-text-short
                             v-list-item-content {{$t('common:actions.properties')}}
-                          v-divider
                           template(v-if='props.item.kind === `IMAGE`')
                             v-list-item(@click='previewDialog = true', disabled)
-                              v-list-item-avatar
-                                v-icon(color='green') image_search
+                              v-list-item-avatar(size='24')
+                                v-icon(color='green') mdi-image-search-outline
                               v-list-item-content {{$t('common:actions.preview')}}
-                            v-divider
                             v-list-item(@click='', disabled)
-                              v-list-item-avatar
-                                v-icon(color='indigo') crop_rotate
+                              v-list-item-avatar(size='24')
+                                v-icon(color='indigo') mdi-crop-rotate
                               v-list-item-content {{$t('common:actions.edit')}}
-                            v-divider
                             v-list-item(@click='', disabled)
-                              v-list-item-avatar
-                                v-icon(color='purple') offline_bolt
+                              v-list-item-avatar(size='24')
+                                v-icon(color='purple') mdi-flash-circle
                               v-list-item-content {{$t('common:actions.optimize')}}
-                            v-divider
                           v-list-item(@click='openRenameDialog')
-                            v-list-item-avatar
-                              v-icon(color='orange') keyboard
+                            v-list-item-avatar(size='24')
+                              v-icon(color='orange') mdi-keyboard-outline
                             v-list-item-content {{$t('common:actions.rename')}}
-                          v-divider
                           v-list-item(@click='', disabled)
-                            v-list-item-avatar
-                              v-icon(color='blue') forward
+                            v-list-item-avatar(size='24')
+                              v-icon(color='blue') mdi-file-move
                             v-list-item-content {{$t('common:actions.move')}}
-                          v-divider
                           v-list-item(@click='deleteDialog = true')
-                            v-list-item-avatar
-                              v-icon(color='red') delete
+                            v-list-item-avatar(size='24')
+                              v-icon(color='red') mdi-file-hidden
                             v-list-item-content {{$t('common:actions.delete')}}
                 template(slot='no-data')
-                  v-alert.mt-3.radius-7(icon='folder_open', :value='true', outline, color='teal') {{$t('editor:assets.folderEmpty')}}
+                  v-alert.mt-3.radius-7(icon='mdi-folder-open-outline', :value='true', outlined, color='teal') {{$t('editor:assets.folderEmpty')}}
               .text-xs-center.py-2(v-if='this.pageTotal > 1')
-                v-pagination(v-model='pagination.page', :length='pageTotal')
+                v-pagination(v-model='pagination', :length='pageTotal', color='teal')
               .d-flex.mt-3
                 v-toolbar.radius-7(flat, :color='$vuetify.dark ? `grey darken-2` : `grey lighten-4`', dense, height='44')
-                  .body-1(:class='$vuetify.dark ? `grey--text text--lighten-1` : `grey--text text--darken-1`') {{$t('editor:assets.fileCount', { count: assets.length })}}
+                  .body-2(:class='$vuetify.dark ? `grey--text text--lighten-1` : `grey--text text--darken-1`') {{$t('editor:assets.fileCount', { count: assets.length })}}
                 v-btn.ml-3.mr-0.my-0.radius-7(color='teal', large, @click='insert', :disabled='!currentFileId', :dark='currentFileId !== null')
-                  v-icon(left) save_alt
+                  v-icon(left) mdi-playlist-plus
                   span {{$t('common:actions.insert')}}
 
         v-flex(xs12, lg3)
@@ -130,10 +126,10 @@
             v-card-text
               .d-flex
                 v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat, height='44')
-                  v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') cloud_upload
+                  v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') mdi-cloud-upload
                   .body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') {{$t('editor:assets.uploadAssets')}}
-                v-btn.my-0.ml-3.mr-0.radius-7(outline, large, color='teal', @click='browse', v-if='$vuetify.breakpoint.mdAndUp')
-                  v-icon(left) touch_app
+                v-btn.my-0.ml-3.mr-0.radius-7(outlined, large, color='teal', @click='browse', v-if='$vuetify.breakpoint.mdAndUp')
+                  v-icon(left) mdi-library-plus
                   span(:class='$vuetify.dark ? `teal--text text--lighten-3` : ``') {{$t('common:actions.browse')}}
               file-pond.mt-3(
                 name='mediaUpload'
@@ -151,39 +147,39 @@
             v-card-actions.pa-3
               .caption.grey--text.text-darken-2 Max 10 files, 5 MB each
               v-spacer
-              v-btn(color='teal', dark, @click='upload') {{$t('common:actions.upload')}}
+              v-btn.px-4(color='teal', dark, @click='upload') {{$t('common:actions.upload')}}
 
           v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(:light='!$vuetify.dark', :dark='$vuetify.dark')
             v-card-text.pb-0
               v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat)
-                v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') cloud_download
+                v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') mdi-cloud-download
                 .body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') {{$t('editor:assets.fetchImage')}}
                 v-spacer
                 v-chip(label, color='white', small).teal--text coming soon
               v-text-field.mt-3(
                 v-model='remoteImageUrl'
-                outline
+                outlined
+                color='teal'
                 single-line
-                background-color='grey lighten-2'
                 placeholder='https://example.com/image.jpg'
               )
             v-divider
             v-card-actions.pa-3
               .caption.grey--text.text-darken-2 Max 5 MB
               v-spacer
-              v-btn(color='teal', disabled) {{$t('common:actions.fetch')}}
+              v-btn.px-4(color='teal', disabled) {{$t('common:actions.fetch')}}
 
           v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(:light='!$vuetify.dark', :dark='$vuetify.dark')
             v-card-text.pb-0
               v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat)
-                v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') format_align_left
+                v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') mdi-format-align-top
                 .body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') {{$t('editor:assets.imageAlign')}}
               v-select.mt-3(
                 v-model='imageAlignment'
                 :items='imageAlignments'
-                outline
+                outlined
                 single-line
-                background-color='grey lighten-2'
+                color='teal'
                 placeholder='None'
               )
 
@@ -257,7 +253,7 @@ export default {
       folders: [],
       files: [],
       assets: [],
-      pagination: {},
+      pagination: 1,
       remoteImageUrl: '',
       imageAlignments: [
         { text: 'None', value: '' },
@@ -289,11 +285,11 @@ export default {
     currentFolderId: sync('editor/media@currentFolderId'),
     currentFileId: sync('editor/media@currentFileId'),
     pageTotal () {
-      if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
+      if (!this.assets) {
         return 0
       }
 
-      return Math.ceil(this.assets.length / this.pagination.rowsPerPage)
+      return Math.ceil(this.assets.length / 15)
     },
     headers() {
       return _.compact([

client/components/editor/editor-modal-properties.vue

@@ -2,13 +2,12 @@
   v-dialog(
     v-model='isShown'
     persistent
-    lazy
     width='1100'
     :fullscreen='$vuetify.breakpoint.smAndDown'
     )
     .dialog-header
       v-icon(color='white') mdi-tag-text-outline
-      .subheading.white--text.ml-3 {{$t('editor:props.pageProperties')}}
+      .subtitle-1.white--text.ml-3 {{$t('editor:props.pageProperties')}}
       v-spacer
       v-btn.mx-0(
         outlined
@@ -75,7 +74,7 @@
           )
       v-divider
       v-card-text.pb-5.grey(:class='darkMode ? `darken-3-d5` : `lighten-4`')
-        .overline.pb-5 {{$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, outlined).white--text coming soon]
         v-container.pa-0(fluid, grid-list-lg)
           v-layout(row, wrap)
             v-flex(xs12, md4)
@@ -90,7 +89,6 @@
             v-flex(xs12, md4)
               v-dialog(
                 ref='menuPublishStart'
-                lazy
                 :close-on-content-click='false'
                 v-model='isPublishStartShown'
                 :return-value.sync='publishStartDate'
@@ -98,8 +96,9 @@
                 width='460px'
                 :disabled='!isPublished || true'
                 )
+                template(v-slot:activator='{ on }')
                   v-text-field(
-                  slot='activator'
+                    v-on='on'
                     :label='$t(`editor:props.publishStart`)'
                     v-model='publishStartDate'
                     prepend-icon='mdi-calendar-check'
@@ -132,7 +131,6 @@
             v-flex(xs12, md4)
               v-dialog(
                 ref='menuPublishEnd'
-                lazy
                 :close-on-content-click='false'
                 v-model='isPublishEndShown'
                 :return-value.sync='publishEndDate'
@@ -140,8 +138,9 @@
                 width='460px'
                 :disabled='!isPublished || true'
                 )
+                template(v-slot:activator='{ on }')
                   v-text-field(
-                  slot='activator'
+                    v-on='on'
                     :label='$t(`editor:props.publishEnd`)'
                     v-model='publishEndDate'
                     prepend-icon='mdi-calendar-remove'

client/components/login.vue

@@ -18,13 +18,13 @@
                   .subheading(v-else-if='selectedStrategy.key !== "local"') {{ $t('auth:loginUsingStrategy', { strategy: selectedStrategy.title, interpolation: { escapeValue: false } }) }}
                   .subheading(v-else) {{ $t('auth:loginRequired') }}
                   v-spacer
-                v-card-text.text-xs-center
+                v-card-text.text-center
                   h1.display-1.primary--text.py-2 {{ siteTitle }}
                   template(v-if='screen === "login"')
                     v-text-field.md2.mt-3(
                       solo
                       flat
-                      prepend-icon='email'
+                      prepend-icon='mdi-clipboard-account'
                       background-color='grey lighten-4'
                       hide-details
                       ref='iptEmail'
@@ -34,12 +34,12 @@
                     v-text-field.md2.mt-2(
                       solo
                       flat
-                      prepend-icon='vpn_key'
+                      prepend-icon='mdi-textbox-password'
                       background-color='grey lighten-4'
                       hide-details
                       ref='iptPassword'
                       v-model='password'
-                      :append-icon='hidePassword ? "visibility" : "visibility_off"'
+                      :append-icon='hidePassword ? "mdi-eye-off" : "mdi-eye"'
                       @click:append='() => (hidePassword = !hidePassword)'
                       :type='hidePassword ? "password" : "text"'
                       :placeholder='$t("auth:fields.password")'

client/components/new-page.vue

+<template lang='pug'>
+  v-app
+    .newpage
+      .newpage-content
+        img.animated.fadeIn(src='/svg/icon-delete-file.svg', alt='Not Found')
+        .headline {{ $t('newpage.title') }}
+        .subtitle-1.mt-3 {{ $t('newpage.subtitle') }}
+        v-btn.mt-5(:href='`/e/` + locale + `/` + path', x-large)
+          v-icon(left) mdi-plus
+          span {{ $t('newpage.create') }}
+        v-btn.mt-5(color='purple lighten-3', href='javascript:window.history.go(-1);', outlined)
+          v-icon(left) mdi-arrow-left
+          span {{ $t('newpage.goback') }}
+</template>
+
+<script>
+
+export default {
+  props: {
+    locale: {
+      type: String,
+      default: 'en'
+    },
+    path: {
+      type: String,
+      default: 'home'
+    }
+  },
+  data() {
+    return { }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>

client/components/setup.vue

@@ -5,20 +5,21 @@
         v-layout
           v-flex(xs12, lg6, offset-lg3)
             v-card.radius-7
-              .text-xs-center
+              .text-center
                 img.setup-logo(src='/svg/logo-wikijs.svg', alt='Wiki.js Logo')
-              v-alert(color='indigo lighten-5', icon='open_in_browser', :value='true')
+              v-alert(tile, color='indigo lighten-5', :value='true')
+                v-icon.mr-3(color='indigo') mdi-package-variant
                 span.indigo--text You are about to install Wiki.js #[strong {{wikiVersion}}].
               v-card-text
-                .body-2.pl-3 Create Administrator Account
+                .overline.pl-3 Create Administrator Account
                 v-container.pa-3(grid-list-xl)
                   v-layout(row, wrap)
                     v-flex(xs12)
                       v-text-field(
-                        outline
+                        outlined
                         v-model='conf.adminEmail',
                         label='Administrator Email',
-                        hint='The email address of the administrator account',
+                        hint='The email address of the administrator account.',
                         persistent-hint
                         v-validate='{ required: true, email: true }',
                         data-vv-name='adminEmail',
@@ -29,12 +30,12 @@
                       )
                     v-flex(xs6)
                       v-text-field(
-                        outline
+                        outlined
                         ref='adminPassword',
                         counter='255'
                         v-model='conf.adminPassword',
                         label='Password',
-                        :append-icon="pwdMode ? 'visibility' : 'visibility_off'"
+                        :append-icon="pwdMode ? 'mdi-eye-off' : 'mdi-eye'"
                         @click:append="() => (pwdMode = !pwdMode)"
                         :type="pwdMode ? 'password' : 'text'"
                         hint='At least 8 characters long.',
@@ -47,12 +48,12 @@
                       )
                     v-flex(xs6)
                       v-text-field(
-                        outline
+                        outlined
                         ref='adminPasswordConfirm',
                         counter='255'
                         v-model='conf.adminPasswordConfirm',
                         label='Confirm Password',
-                        :append-icon="pwdConfirmMode ? 'visibility' : 'visibility_off'"
+                        :append-icon="pwdConfirmMode ? 'mdi-eye-off' : 'mdi-eye'"
                         @click:append="() => (pwdConfirmMode = !pwdConfirmMode)"
                         :type="pwdConfirmMode ? 'password' : 'text'"
                         hint='Verify your password again.',
@@ -75,13 +76,13 @@
               v-alert(:value='error', type='error', icon='warning') {{ errorMessage }}
               v-divider.mt-3(v-if='!error')
               v-card-actions
-                v-btn(color='primary', @click='install', :disabled='loading', large, flat, block)
+                v-btn(color='primary', @click='install', :disabled='loading', x-large, flat, block)
+                  v-icon(left) mdi-check
                   span Install
-                  v-icon(right) arrow_forward
 
     v-dialog(v-model='loading', width='450', persistent)
       v-card(color='primary', dark).radius-7
-        v-card-text.text-xs-center.py-5
+        v-card-text.text-center.py-5
           .py-3(style='width: 64px; display:inline-block;')
             breeding-rhombus-spinner(
               :animation-duration='2000'
@@ -89,10 +90,10 @@
               color='#FFF'
               )
           template(v-if='!success')
-            .subheading Finalizing your installation...
+            .subtitle-1.white--text Finalizing your installation...
             .caption Just a moment
           template(v-else)
-            .subheading Installation complete!
+            .subtitle-1.white--text Installation complete!
             .caption Redirecting...
 </template>
 
@@ -169,9 +170,9 @@ export default {
 
 <style lang='scss'>
 .setup {
-  .application--wrap {
+  .v-application--wrap {
     padding-top: 10vh;
-    background-color: mc('grey', '900');
+    background-color: darken(mc('grey', '900'), 5%);
     background-image: url(/svg/motif-circuit.svg) !important;
     background-repeat: repeat;
   }

client/components/welcome.vue

+<template lang='pug'>
+  v-app
+    .onboarding
+      .onboarding-content
+        img.animated.fadeIn(src='/svg/logo-wikijs.svg', alt='Wiki.js')
+        .headline.animated.fadeInUp {{ $t('welcome.title') }}
+        .subtitle-1.mt-3.animated.fadeInUp.wait-p1s {{ $t('welcome.subtitle') }}
+        v-btn.mt-5.animated.fadeInUp.wait-p2s(color='primary', :href='`/e/` + locale + `/home`', x-large)
+          v-icon(left) mdi-plus
+          span {{ $t('welcome.createhome') }}
+</template>
+
+<script>
+
+export default {
+  props: {
+    locale: {
+      type: String,
+      default: 'en'
+    }
+  },
+  data() {
+    return { }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>

client/index-setup.js

@@ -2,6 +2,8 @@ require('core-js/stable')
 require('regenerator-runtime/runtime')
 
 require('./scss/app.scss')
+require('@mdi/font/css/materialdesignicons.css')
+
 require('./helpers/compatibility.js')
 
 require('./client-setup.js')

client/themes/default/components/page.vue

@@ -49,14 +49,14 @@
             status-indicator.ml-3(negative, pulse)
         v-divider
       v-toolbar.px-2(:color='darkMode ? `grey darken-4-l3` : `grey lighten-4`', flat, :height='90')
-        div
+        div(style='padding-left: 376px;')
           .headline.grey--text(:class='darkMode ? `text--lighten-2` : `text--darken-3`') {{title}}
           .caption.grey--text.text--darken-1 {{description}}
         v-spacer
       v-divider
       v-container.pl-5.pt-2(fill-height, fluid, grid-list-xl)
         v-layout(row)
-          v-flex.page-col-sd(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp')
+          v-flex.page-col-sd(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp', style='margin-top: -90px;')
             v-card(v-if='toc.length')
               .overline.pa-5.pb-0(:class='darkMode ? `indigo--text text--lighten-3` : `primary--text`') {{$t('common:page.toc')}}
               v-list.pb-3(dense, nav, :class='darkMode ? `darken-3-d3` : ``')

client/themes/default/scss/app.scss

@@ -566,9 +566,9 @@
     }
     &.align-abstopright {
       position: absolute;
-      top: calc(-90px + 1rem);
+      top: -90px;
       right: 1rem;
-      height: calc(90px - 2rem);
+      height: calc(90px - 32px);
       width: auto;
     }
     &.decor-shadow {

package.json

@@ -181,7 +181,7 @@
     "@babel/preset-env": "^7.5.4",
     "@mdi/font": "3.8.95",
     "@panter/vue-i18next": "0.15.1",
-    "@vue/babel-preset-app": "3.9.2",
+    "@vue/babel-preset-app": "3.10.0",
     "animate-sass": "0.8.2",
     "animated-number-vue": "1.0.0",
     "apollo-cache-inmemory": "1.6.2",
@@ -234,7 +234,7 @@
     "html-webpack-pug-plugin": "2.0.0",
     "i18next-chained-backend": "2.0.0",
     "i18next-localstorage-backend": "3.0.0",
-    "i18next-xhr-backend": "3.0.0",
+    "i18next-xhr-backend": "3.0.1",
     "ignore-loader": "0.1.2",
     "js-cookie": "2.2.0",
     "mini-css-extract-plugin": "0.8.0",
@@ -262,7 +262,7 @@
     "script-ext-html-webpack-plugin": "2.1.4",
     "simple-progress-webpack-plugin": "1.1.2",
     "style-loader": "0.23.1",
-    "terser": "4.1.2",
+    "terser": "4.1.3",
     "twemoji-awesome": "1.0.6",
     "url-loader": "2.1.0",
     "vee-validate": "2.2.13",

server/controllers/common.js

@@ -219,7 +219,7 @@ router.get('/*', async (req, res, next) => {
       } else {
         _.set(res.locals, 'pageMeta.title', 'Page Not Found')
         if (WIKI.auth.checkAccess(req.user, ['write:pages'], pageArgs)) {
-          res.status(404).render('new', { pagePath: req.path })
+          res.status(404).render('new', { path: pageArgs.path, locale: pageArgs.locale })
         } else {
           res.status(404).render('notfound', { action: 'view' })
         }

server/views/new.pug

@@ -2,15 +2,4 @@ extends master.pug
 
 block body
   #root.is-fullscreen
-    v-app
-      .newpage
-        .newpage-content
-          img.animated.fadeIn(src='/svg/icon-delete-file.svg', alt='Not Found')
-          .headline= t('newpage.title')
-          .subheading.mt-3= t('newpage.subtitle')
-          v-btn.mt-5(href='/e' + pagePath, large)
-            v-icon(left) add
-            span= t('newpage.create')
-          v-btn.mt-2(color='purple lighten-3', href='javascript:window.history.go(-1);', large, outline)
-            v-icon(left) arrow_back
-            span= t('newpage.goback')
+    new-page(locale=locale, path=path)

server/views/welcome.pug

@@ -2,12 +2,4 @@ extends master.pug
 
 block body
   #root.is-fullscreen
-    v-app
-      .onboarding
-        .onboarding-content
-          img.animated.fadeIn(src='/svg/logo-wikijs.svg', alt='Wiki.js')
-          .headline= t('welcome.title')
-          .subheading.mt-3= t('welcome.subtitle')
-          v-btn.mt-5(color='primary', href='/e/' + locale + '/home', large)
-            v-icon(left) add
-            span= t('welcome.createhome')
+    welcome(:locale=locale)