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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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)

2
client/components/editor.vue
View File

@@ -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(

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;')
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;

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

@@ -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

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')
.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([

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

@@ -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)'

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) {{ $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
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-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
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>