liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

misc: migrate to vuetify 2.0 (wip)

Browse Source
This commit is contained in:
Nick 2019-08-03 22:51:29 -04:00
parent c650cee441
commit 065c1bb12e
20 changed files with 312 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/client-app.js
View File

@ -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('loader', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/loader.vue'))
Vue.component('login', () => import(/* webpackPrefetch: true, webpackChunkName: "login" */ './components/login.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('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('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('page-selector', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/page-selector.vue'))
Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue')) Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
Vue.component('register', () => import(/* webpackChunkName: "register" */ './components/register.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('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('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-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')) Vue.component('nav-sidebar', () => import(/* webpackChunkName: "theme-page" */ './themes/' + process.env.CURRENT_THEME + '/components/nav-sidebar.vue'))

4
client/components/common/loader.vue
View File

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

6
client/components/common/nav-header.vue
View File

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

2
client/components/editor.vue
View File

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

133
client/components/editor/editor-markdown.vue
View File

@ -3,25 +3,28 @@
v-toolbar.editor-markdown-toolbar(dense, color='primary', dark, flat, style='overflow-x: hidden;') v-toolbar.editor-markdown-toolbar(dense, color='primary', dark, flat, style='overflow-x: hidden;')
template(v-if='isModalShown') template(v-if='isModalShown')
v-spacer v-spacer
v-btn.animated.fadeInRight(flat, @click='closeAllModal') v-btn.animated.fadeInRight(text, @click='closeAllModal')
v-icon(left) remove_circle_outline v-icon(left) mdi-arrow-left-circle
span {{$t('editor:backToEditor')}} span {{$t('editor:backToEditor')}}
template(v-else) template(v-else)
v-tooltip(bottom, color='primary') v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0 template(v-slot:activator='{ on }')
v-icon mdi-format-bold v-btn.animated.fadeIn(icon, tile, v-on='on', @click='toggleMarkup({ start: `**` })').mx-0
v-icon mdi-format-bold
span {{$t('editor:markup.bold')}} span {{$t('editor:markup.bold')}}
v-tooltip(bottom, color='primary') 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-icon mdi-format-italic 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')}} span {{$t('editor:markup.italic')}}
v-tooltip(bottom, color='primary') 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-icon mdi-format-strikethrough 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')}} span {{$t('editor:markup.strikethrough')}}
v-menu(offset-y, open-on-hover) v-menu(offset-y, open-on-hover)
template(v-slot:activator='{ on }') 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-icon mdi-format-header-pound
v-list.py-0 v-list.py-0
template(v-for='(n, idx) in 6') template(v-for='(n, idx) in 6')
@ -31,117 +34,137 @@
v-list-item-title {{$t('editor:markup.heading', { level: n })}} v-list-item-title {{$t('editor:markup.heading', { level: n })}}
v-divider(v-if='idx < 5') v-divider(v-if='idx < 5')
v-tooltip(bottom, color='primary') 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-icon mdi-format-subscript 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')}} span {{$t('editor:markup.subscript')}}
v-tooltip(bottom, color='primary') 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-icon mdi-format-superscript 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')}} span {{$t('editor:markup.superscript')}}
v-menu(offset-y, open-on-hover) v-menu(offset-y, open-on-hover)
v-btn.animated.fadeIn.wait-p6s(icon, slot='activator').mx-0 template(v-slot:activator='{ on }')
v-icon mdi-alpha-t-box-outline 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.py-0
v-list-item(@click='insertBeforeEachLine({ content: `> `})') v-list-item(@click='insertBeforeEachLine({ content: `> `})')
v-list-item-action v-list-item-action
v-icon format_quote v-icon mdi-alpha-t-box-outline
v-list-item-title {{$t('editor:markup.blockquote')}} v-list-item-title {{$t('editor:markup.blockquote')}}
v-divider v-divider
v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-info}`})') v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-info}`})')
v-list-item-action 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-list-item-title {{$t('editor:markup.blockquoteInfo')}}
v-divider v-divider
v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-success}`})') v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-success}`})')
v-list-item-action 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-list-item-title {{$t('editor:markup.blockquoteSuccess')}}
v-divider v-divider
v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})') v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})')
v-list-item-action 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-list-item-title {{$t('editor:markup.blockquoteWarning')}}
v-divider v-divider
v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-danger}`})') v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-danger}`})')
v-list-item-action 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-list-item-title {{$t('editor:markup.blockquoteError')}}
v-divider v-divider
v-tooltip(bottom, color='primary') 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-icon mdi-format-list-bulleted 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')}} span {{$t('editor:markup.unorderedList')}}
v-tooltip(bottom, color='primary') 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-icon mdi-format-list-numbered 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')}} span {{$t('editor:markup.orderedList')}}
v-tooltip(bottom, color='primary') 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-icon mdi-code-tags 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')}} span {{$t('editor:markup.inlineCode')}}
v-tooltip(bottom, color='primary') 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-icon mdi-keyboard-variant 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')}} span {{$t('editor:markup.keyboardKey')}}
v-tooltip(bottom, color='primary') 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-icon mdi-minus 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')}} span {{$t('editor:markup.horizontalBar')}}
template(v-if='$vuetify.breakpoint.mdAndUp') template(v-if='$vuetify.breakpoint.mdAndUp')
v-spacer v-spacer
v-tooltip(bottom, color='primary') 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-icon mdi-book-open-outline 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')}} span {{$t('editor:markup.togglePreviewPane')}}
.editor-markdown-main .editor-markdown-main
.editor-markdown-sidebar .editor-markdown-sidebar
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft(icon, slot='activator', dark, disabled).mx-0 template(v-slot:activator='{ on }')
v-icon mdi-link-plus v-btn.animated.fadeInLeft(icon, tile, v-on='on', dark, disabled).mx-0
v-icon mdi-link-plus
span {{$t('editor:markup.insertLink')}} span {{$t('editor:markup.insertLink')}}
v-tooltip(right, color='teal') 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-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') mdi-folder-multiple-image 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')}} span {{$t('editor:markup.insertAssets')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p2s(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0 template(v-slot:activator='{ on }')
v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-post 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')}} span {{$t('editor:markup.insertBlock')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p3s(icon, slot='activator', dark, disabled).mx-0 template(v-slot:activator='{ on }')
v-icon mdi-code-braces 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')}} span {{$t('editor:markup.insertCodeBlock')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0 template(v-slot:activator='{ on }')
v-icon mdi-library-video 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')}} span {{$t('editor:markup.insertVideoAudio')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0 template(v-slot:activator='{ on }')
v-icon mdi-chart-multiline 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')}} span {{$t('editor:markup.insertDiagram')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0 template(v-slot:activator='{ on }')
v-icon mdi-function-variant 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')}} span {{$t('editor:markup.insertMathExpression')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0 template(v-slot:activator='{ on }')
v-icon mdi-table-plus 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')}} span {{$t('editor:markup.tableHelper')}}
template(v-if='$vuetify.breakpoint.mdAndUp') template(v-if='$vuetify.breakpoint.mdAndUp')
v-spacer v-spacer
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0 template(v-slot:activator='{ on }')
v-icon mdi-overscan 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')}} span {{$t('editor:markup.distractionFreeMode')}}
v-tooltip(right, color='teal') 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-icon(:color='helpShown ? `teal` : ``') mdi-help-circle 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')}} span {{$t('editor:markup.markdownFormattingHelp')}}
.editor-markdown-editor .editor-markdown-editor
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput') codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
transition(name='editor-markdown-preview') transition(name='editor-markdown-preview')
.editor-markdown-preview(v-if='previewShown') .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') v-system-bar.editor-markdown-sysbar(dark, status, color='grey darken-3')
.caption.editor-markdown-sysbar-locale {{locale.toUpperCase()}} .caption.editor-markdown-sysbar-locale {{locale.toUpperCase()}}
@ -572,7 +595,7 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
&-content { &-content {
height: $editor-height; height: $editor-height;
overflow-y: scroll; overflow-y: scroll;
padding: 1rem 1rem 1rem 0; padding: 1rem 1rem 1rem 1rem;
width: calc(100% + 1rem + 17px); width: calc(100% + 1rem + 17px);
// -ms-overflow-style: none; // -ms-overflow-style: none;
@ -593,7 +616,7 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
color: #FFF; color: #FFF;
.v-toolbar__content { .v-toolbar__content {
padding-left: 78px; padding-left: 64px;
@include until($tablet) { @include until($tablet) {
padding-left: 8px; padding-left: 8px;

23
client/components/editor/editor-modal-editorselect.vue
View File

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

120
client/components/editor/editor-modal-media.vue
View File

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

57
client/components/editor/editor-modal-properties.vue
View File

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

8
client/components/login.vue
View File

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

37
client/components/new-page.vue Normal file
View File

@ -0,0 +1,37 @@
<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>

33
client/components/setup.vue
View File

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

30
client/components/welcome.vue Normal file
View File

@ -0,0 +1,30 @@
<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>

2
client/index-setup.js
View File

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

4
client/themes/default/components/page.vue
View File

@ -49,14 +49,14 @@
status-indicator.ml-3(negative, pulse) status-indicator.ml-3(negative, pulse)
v-divider v-divider
v-toolbar.px-2(:color='darkMode ? `grey darken-4-l3` : `grey lighten-4`', flat, :height='90') 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}} .headline.grey--text(:class='darkMode ? `text--lighten-2` : `text--darken-3`') {{title}}
.caption.grey--text.text--darken-1 {{description}} .caption.grey--text.text--darken-1 {{description}}
v-spacer v-spacer
v-divider v-divider
v-container.pl-5.pt-2(fill-height, fluid, grid-list-xl) v-container.pl-5.pt-2(fill-height, fluid, grid-list-xl)
v-layout(row) 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') v-card(v-if='toc.length')
.overline.pa-5.pb-0(:class='darkMode ? `indigo--text text--lighten-3` : `primary--text`') {{$t('common:page.toc')}} .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` : ``') v-list.pb-3(dense, nav, :class='darkMode ? `darken-3-d3` : ``')

4
client/themes/default/scss/app.scss
View File

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

6
package.json
View File

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

2
server/controllers/common.js
View File

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

13
server/views/new.pug
View File

@ -2,15 +2,4 @@ extends master.pug
block body block body
#root.is-fullscreen #root.is-fullscreen
v-app new-page(locale=locale, path=path)
.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')

10
server/views/welcome.pug
View File

@ -2,12 +2,4 @@ extends master.pug
block body block body
#root.is-fullscreen #root.is-fullscreen
v-app welcome(:locale=locale)
.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')

36
yarn.lock
View File

@ -1091,6 +1091,13 @@
dependencies: dependencies:
regenerator-runtime "^0.13.2" regenerator-runtime "^0.13.2"
"@babel/runtime@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
dependencies:
regenerator-runtime "^0.13.2"
"@babel/template@^7.0.0", "@babel/template@^7.1.0", "@babel/template@^7.2.2": "@babel/template@^7.0.0", "@babel/template@^7.1.0", "@babel/template@^7.2.2":
version "7.2.2" version "7.2.2"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
@ -1875,10 +1882,10 @@
lodash.kebabcase "^4.1.1" lodash.kebabcase "^4.1.1"
svg-tags "^1.0.0" svg-tags "^1.0.0"
"@vue/babel-preset-app@3.9.2": "@vue/babel-preset-app@3.10.0":
version "3.9.2" version "3.10.0"
resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-3.9.2.tgz#b72a9b06abbe3f8f272783be13951271277be338" resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-3.10.0.tgz#3f89d631dd0f174c8a72e769b55f081c533c4677"
integrity sha512-0suuCbu4jkVcVYBjPmuKxeDbrhwThYZHu3DUmtsVuOzFEGeXmco60VmXveniL/bnDUdZyknSuYP4FxgS34gw9w== integrity sha512-NzJLI4Qe0SYm9gVHQC9RXyP0YcPjI28TmZ0ds2RJa9NO96LXHLES2U1HqiMDN4+CVjOQFrWUNd7wWeaETRPXbg==
dependencies: dependencies:
"@babel/helper-module-imports" "^7.0.0" "@babel/helper-module-imports" "^7.0.0"
"@babel/plugin-proposal-class-properties" "^7.0.0" "@babel/plugin-proposal-class-properties" "^7.0.0"
@ -7204,12 +7211,12 @@ i18next-node-fs-backend@2.1.3:
js-yaml "3.13.1" js-yaml "3.13.1"
json5 "2.0.0" json5 "2.0.0"
i18next-xhr-backend@3.0.0: i18next-xhr-backend@3.0.1:
version "3.0.0" version "3.0.1"
resolved "https://registry.yarnpkg.com/i18next-xhr-backend/-/i18next-xhr-backend-3.0.0.tgz#75235870c920291dbfd32043505b7ede0dc87da3" resolved "https://registry.yarnpkg.com/i18next-xhr-backend/-/i18next-xhr-backend-3.0.1.tgz#0c8baf9f611c2cc9c357cda0284d38212eae6283"
integrity sha512-Pi/X91Zk2nEqdEHTV+FG6VeMHRcMcPKRsYW/A0wlaCfKsoJc3TI7A75Tqse/d5LVGN2Ymzx0FT+R+gLag9Eb2g== integrity sha512-OR+tMsmASmDU2T5AgGT58MfpA5irE941N+5/6toukJ4jGXPO1ww0wYFxtWgt0jZtLGt6wPEe/Q63TJDD0fomjw==
dependencies: dependencies:
"@babel/runtime" "^7.4.5" "@babel/runtime" "^7.5.5"
i18next@17.0.8: i18next@17.0.8:
version "17.0.8" version "17.0.8"
@ -13652,7 +13659,16 @@ terser-webpack-plugin@^1.4.1:
webpack-sources "^1.4.0" webpack-sources "^1.4.0"
worker-farm "^1.7.0" worker-farm "^1.7.0"
terser@4.1.2, terser@^4.1.2: terser@4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/terser/-/terser-4.1.3.tgz#6074fbcf3517561c3272ea885f422c7a8c32d689"
integrity sha512-on13d+cnpn5bMouZu+J8tPYQecsdRJCJuxFJ+FVoPBoLJgk5bCBkp+Uen2hWyi0KIUm6eDarnlAlH+KgIx/PuQ==
dependencies:
commander "^2.20.0"
source-map "~0.6.1"
source-map-support "~0.5.12"
terser@^4.1.2:
version "4.1.2" version "4.1.2"
resolved "https://registry.yarnpkg.com/terser/-/terser-4.1.2.tgz#b2656c8a506f7ce805a3f300a2ff48db022fa391" resolved "https://registry.yarnpkg.com/terser/-/terser-4.1.2.tgz#b2656c8a506f7ce805a3f300a2ff48db022fa391"
integrity sha512-jvNoEQSPXJdssFwqPSgWjsOrb+ELoE+ILpHPKXC83tIxOlh2U75F1KuB2luLD/3a6/7K3Vw5pDn+hvu0C4AzSw== integrity sha512-jvNoEQSPXJdssFwqPSgWjsOrb+ELoE+ILpHPKXC83tIxOlh2U75F1KuB2luLD/3a6/7K3Vw5pDn+hvu0C4AzSw==