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-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-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,18 +96,19 @@
                 width='460px'
                 :disabled='!isPublished || true'
                 )
-                v-text-field(
-                  slot='activator'
-                  :label='$t(`editor:props.publishStart`)'
-                  v-model='publishStartDate'
-                  prepend-icon='mdi-calendar-check'
-                  readonly
-                  outlined
-                  clearable
-                  :hint='$t(`editor:props.publishStartHint`)'
-                  persistent-hint
-                  :disabled='!isPublished || true'
-                  )
+                template(v-slot:activator='{ on }')
+                  v-text-field(
+                    v-on='on'
+                    :label='$t(`editor:props.publishStart`)'
+                    v-model='publishStartDate'
+                    prepend-icon='mdi-calendar-check'
+                    readonly
+                    outlined
+                    clearable
+                    :hint='$t(`editor:props.publishStartHint`)'
+                    persistent-hint
+                    :disabled='!isPublished || true'
+                    )
                 v-date-picker(
                   v-model='publishStartDate'
                   :min='(new Date()).toISOString().substring(0, 10)'
@@ -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,18 +138,19 @@
                 width='460px'
                 :disabled='!isPublished || true'
                 )
-                v-text-field(
-                  slot='activator'
-                  :label='$t(`editor:props.publishEnd`)'
-                  v-model='publishEndDate'
-                  prepend-icon='mdi-calendar-remove'
-                  readonly
-                  outlined
-                  clearable
-                  :hint='$t(`editor:props.publishEndHint`)'
-                  persistent-hint
-                  :disabled='!isPublished || true'
-                  )
+                template(v-slot:activator='{ on }')
+                  v-text-field(
+                    v-on='on'
+                    :label='$t(`editor:props.publishEnd`)'
+                    v-model='publishEndDate'
+                    prepend-icon='mdi-calendar-remove'
+                    readonly
+                    outlined
+                    clearable
+                    :hint='$t(`editor:props.publishEndHint`)'
+                    persistent-hint
+                    :disabled='!isPublished || true'
+                    )
                 v-date-picker(
                   v-model='publishEndDate'
                   :min='(new Date()).toISOString().substring(0, 10)'

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)