misc: migrate to vuetify 2.0 (wip)
This commit is contained in:
Nick
parent
c650cee441
commit
065c1bb12e
@ -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'))
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<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>
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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
|
||||
v-icon mdi-format-bold
|
||||
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
|
||||
v-icon mdi-format-italic
|
||||
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
|
||||
v-icon mdi-format-strikethrough
|
||||
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
|
||||
v-icon mdi-format-subscript
|
||||
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
|
||||
v-icon mdi-format-superscript
|
||||
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
|
||||
v-icon mdi-alpha-t-box-outline
|
||||
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
|
||||
v-icon mdi-format-list-bulleted
|
||||
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
|
||||
v-icon mdi-format-list-numbered
|
||||
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
|
||||
v-icon mdi-code-tags
|
||||
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
|
||||
v-icon mdi-keyboard-variant
|
||||
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
|
||||
v-icon mdi-minus
|
||||
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
|
||||
v-icon mdi-book-open-outline
|
||||
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
|
||||
v-icon mdi-link-plus
|
||||
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
|
||||
v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') mdi-folder-multiple-image
|
||||
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
|
||||
v-icon mdi-code-braces
|
||||
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
|
||||
v-icon mdi-library-video
|
||||
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
|
||||
v-icon mdi-chart-multiline
|
||||
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
|
||||
v-icon mdi-function-variant
|
||||
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
|
||||
v-icon mdi-table-plus
|
||||
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
|
||||
v-icon(:color='helpShown ? `teal` : ``') mdi-help-circle
|
||||
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;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<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
|
||||
|
||||
@ -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
|
||||
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')}}
|
||||
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
|
||||
.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([
|
||||
|
||||
@ -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)'
|
||||
|
||||
@ -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")'
|
||||
|
||||
37
client/components/new-page.vue
Normal file
37
client/components/new-page.vue
Normal 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>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
30
client/components/welcome.vue
Normal file
30
client/components/welcome.vue
Normal 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,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')
|
||||
|
||||
@ -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` : ``')
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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' })
|
||||
}
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
36
yarn.lock
36
yarn.lock
@ -1091,6 +1091,13 @@
|
||||
dependencies:
|
||||
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":
|
||||
version "7.2.2"
|
||||
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
|
||||
@ -1875,10 +1882,10 @@
|
||||
lodash.kebabcase "^4.1.1"
|
||||
svg-tags "^1.0.0"
|
||||
|
||||
"@vue/babel-preset-app@3.9.2":
|
||||
version "3.9.2"
|
||||
resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-3.9.2.tgz#b72a9b06abbe3f8f272783be13951271277be338"
|
||||
integrity sha512-0suuCbu4jkVcVYBjPmuKxeDbrhwThYZHu3DUmtsVuOzFEGeXmco60VmXveniL/bnDUdZyknSuYP4FxgS34gw9w==
|
||||
"@vue/babel-preset-app@3.10.0":
|
||||
version "3.10.0"
|
||||
resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-3.10.0.tgz#3f89d631dd0f174c8a72e769b55f081c533c4677"
|
||||
integrity sha512-NzJLI4Qe0SYm9gVHQC9RXyP0YcPjI28TmZ0ds2RJa9NO96LXHLES2U1HqiMDN4+CVjOQFrWUNd7wWeaETRPXbg==
|
||||
dependencies:
|
||||
"@babel/helper-module-imports" "^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"
|
||||
json5 "2.0.0"
|
||||
|
||||
i18next-xhr-backend@3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/i18next-xhr-backend/-/i18next-xhr-backend-3.0.0.tgz#75235870c920291dbfd32043505b7ede0dc87da3"
|
||||
integrity sha512-Pi/X91Zk2nEqdEHTV+FG6VeMHRcMcPKRsYW/A0wlaCfKsoJc3TI7A75Tqse/d5LVGN2Ymzx0FT+R+gLag9Eb2g==
|
||||
i18next-xhr-backend@3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/i18next-xhr-backend/-/i18next-xhr-backend-3.0.1.tgz#0c8baf9f611c2cc9c357cda0284d38212eae6283"
|
||||
integrity sha512-OR+tMsmASmDU2T5AgGT58MfpA5irE941N+5/6toukJ4jGXPO1ww0wYFxtWgt0jZtLGt6wPEe/Q63TJDD0fomjw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.5"
|
||||
"@babel/runtime" "^7.5.5"
|
||||
|
||||
i18next@17.0.8:
|
||||
version "17.0.8"
|
||||
@ -13652,7 +13659,16 @@ terser-webpack-plugin@^1.4.1:
|
||||
webpack-sources "^1.4.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"
|
||||
resolved "https://registry.yarnpkg.com/terser/-/terser-4.1.2.tgz#b2656c8a506f7ce805a3f300a2ff48db022fa391"
|
||||
integrity sha512-jvNoEQSPXJdssFwqPSgWjsOrb+ELoE+ILpHPKXC83tIxOlh2U75F1KuB2luLD/3a6/7K3Vw5pDn+hvu0C4AzSw==
|
||||
|
||||
Loading…
Reference in New Issue
Block a user