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

fix: UI improvements

Browse Source
This commit is contained in:
Nick
2019-08-25 14:23:56 -04:00
parent 7f67c72757
commit 10e19700e5
16 changed files with 125 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/admin/admin-system.vue
View File

@@ -28,7 +28,7 @@
v-list-item-action
v-list-item-action-text {{ $t('admin:system.published') }} {{ info.latestVersionReleaseDate | moment('from') }}
v-divider.mt-3
v-card.mt-4.animated.fadeInUp.wait-p2s
v-subheader {{ $t('admin:system.hostInfo') }}
v-list(two-line, dense)
v-list-item

13
client/components/common/duration-picker.vue
View File

@@ -7,42 +7,47 @@
flat
reverse
v-model='minutes'
style='flex: 1 1 70px;'
)
.body-2.mx-3 {{$t('common:duration.minutes')}}
v-divider.mr-3()
v-divider.mr-3
v-text-field(
solo
hide-details
flat
reverse
v-model='hours'
style='flex: 1 1 70px;'
)
.body-2.mx-3 {{$t('common:duration.hours')}}
v-divider.mr-3()
v-divider.mr-3
v-text-field(
solo
hide-details
flat
reverse
v-model='days'
style='flex: 1 1 70px;'
)
.body-2.mx-3 {{$t('common:duration.days')}}
v-divider.mr-3()
v-divider.mr-3
v-text-field(
solo
hide-details
flat
reverse
v-model='months'
style='flex: 1 1 70px;'
)
.body-2.mx-3 {{$t('common:duration.months')}}
v-divider.mr-3()
v-divider.mr-3
v-text-field(
solo
hide-details
flat
reverse
v-model='years'
style='flex: 1 1 70px;'
)
.body-2.mx-3 {{$t('common:duration.years')}}
</template>

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

@@ -81,50 +81,50 @@
@keyup.down='searchMove(`down`)'
@keyup.up='searchMove(`up`)'
)
v-menu(
v-model='searchAdvMenuShown'
left
offset-y
min-width='450'
:close-on-content-click='false'
nudge-bottom='7'
nudge-right='5'
v-if='searchIsShown'
)
template(v-slot:activator='{ on }')
v-btn.nav-header-search-adv(icon, color='grey darken-2', v-on='on')
v-icon(color='white') mdi-chevron-down
v-card.radius-0(dark)
v-toolbar(flat, color='grey darken-4', dense)
v-icon.mr-2 mdi-feature-search-outline
v-subheader.pl-0 Advanced Search
v-spacer
v-chip(label, small, color='primary') Coming soon
v-card-text.pa-4
v-checkbox.mt-0(
label='Restrict to current language'
color='white'
v-model='searchRestrictLocale'
hide-details
)
v-checkbox(
label='Search below current path only'
color='white'
v-model='searchRestrictPath'
hide-details
)
v-divider
v-card-actions.grey.darken-3-d4
v-container.pa-0(grid-list-md)
v-layout(row)
v-flex(xs6)
v-btn(depressed, color='grey darken-3', block)
v-icon(left) mdi-chevron-right
span Save as defaults
v-flex(xs6)
v-btn(depressed, color='grey darken-3', block)
v-icon(left) mdi-cached
span Reset
//- v-menu(
//- v-model='searchAdvMenuShown'
//- left
//- offset-y
//- min-width='450'
//- :close-on-content-click='false'
//- nudge-bottom='7'
//- nudge-right='5'
//- v-if='searchIsShown'
//- )
//- template(v-slot:activator='{ on }')
//- v-btn.nav-header-search-adv(icon, color='grey darken-2', v-on='on')
//- v-icon(color='white') mdi-chevron-down
//- v-card.radius-0(dark)
//- v-toolbar(flat, color='grey darken-4', dense)
//- v-icon.mr-2 mdi-feature-search-outline
//- v-subheader.pl-0 Advanced Search
//- v-spacer
//- v-chip(label, small, color='primary') Coming soon
//- v-card-text.pa-4
//- v-checkbox.mt-0(
//- label='Restrict to current language'
//- color='white'
//- v-model='searchRestrictLocale'
//- hide-details
//- )
//- v-checkbox(
//- label='Search below current path only'
//- color='white'
//- v-model='searchRestrictPath'
//- hide-details
//- )
//- v-divider
//- v-card-actions.grey.darken-3-d4
//- v-container.pa-0(grid-list-md)
//- v-layout(row)
//- v-flex(xs6)
//- v-btn(depressed, color='grey darken-3', block)
//- v-icon(left) mdi-chevron-right
//- span Save as defaults
//- v-flex(xs6)
//- v-btn(depressed, color='grey darken-3', block)
//- v-icon(left) mdi-cached
//- span Reset
v-flex(xs6, md4)
v-toolbar.nav-header-inner.pr-4(color='black', dark, flat)
v-spacer

2
client/components/common/page-delete.vue
View File

@@ -1,6 +1,6 @@
<template lang='pug'>
v-dialog(v-model='isShown', max-width='550', persistent)
v-card.wiki-form
v-card
.dialog-header.is-short.is-red
v-icon.mr-2(color='white') mdi-file-document-box-remove-outline
span {{$t('common:page.delete')}}

6
client/components/common/search-results.vue
View File

@@ -45,9 +45,9 @@
v-list-item-title(v-html='term')
v-divider(v-if='idx < suggestions.length - 1')
.text-xs-center.pt-5(v-if='search.length > 1')
v-btn.mx-2(outlined, color='orange', @click='search = ``', v-if='results.length > 0')
v-icon(left) mdi-content-save
span {{$t('common:header.searchCopyLink')}}
//- v-btn.mx-2(outlined, color='orange', @click='search = ``', v-if='results.length > 0')
//- v-icon(left) mdi-content-save
//- span {{$t('common:header.searchCopyLink')}}
v-btn.mx-2(outlined, color='pink', @click='search = ``')
v-icon(left) mdi-close
span {{$t('common:header.searchClose')}}

1
client/components/editor.vue
View File

@@ -214,6 +214,7 @@ export default {
})
this.$store.set('editor/id', _.get(resp, 'page.id'))
this.$store.set('editor/mode', 'update')
this.exitConfirmed = true
window.location.assign(`/${this.$store.get('page/locale')}/${this.$store.get('page/path')}`)
} else {
throw new Error(_.get(resp, 'responseResult.message'))

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

@@ -114,49 +114,49 @@
span {{$t('editor:markup.insertLink')}}
v-tooltip(right, color='teal')
template(v-slot:activator='{ on }')
v-btn.animated.fadeInLeft.wait-p1s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalMedia`)').mx-0
v-btn.mt-3.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')
template(v-slot:activator='{ on }')
v-btn.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
v-btn.mt-3.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalBlocks`)', disabled).mx-0
v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-view-dashboard-outline
span {{$t('editor:markup.insertBlock')}}
v-tooltip(right, color='teal')
template(v-slot:activator='{ on }')
v-btn.animated.fadeInLeft.wait-p3s(icon, tile, v-on='on', dark, disabled).mx-0
v-btn.mt-3.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')
template(v-slot:activator='{ on }')
v-btn.animated.fadeInLeft.wait-p4s(icon, tile, v-on='on', dark, disabled).mx-0
v-btn.mt-3.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')
template(v-slot:activator='{ on }')
v-btn.animated.fadeInLeft.wait-p5s(icon, tile, v-on='on', dark, disabled).mx-0
v-btn.mt-3.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')
template(v-slot:activator='{ on }')
v-btn.animated.fadeInLeft.wait-p6s(icon, tile, v-on='on', dark, disabled).mx-0
v-btn.mt-3.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')
template(v-slot:activator='{ on }')
v-btn.animated.fadeInLeft.wait-p7s(icon, tile, v-on='on', dark, disabled).mx-0
v-btn.mt-3.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')
template(v-slot:activator='{ on }')
v-btn.animated.fadeInLeft.wait-p8s(icon, tile, v-on='on', dark, @click='toggleFullscreen').mx-0
v-btn.mt-3.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')
template(v-slot:activator='{ on }')
v-btn.animated.fadeInLeft.wait-p9s(icon, tile, v-on='on', dark, @click='toggleHelp').mx-0
v-btn.mt-3.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
@@ -384,7 +384,7 @@ export default {
}, 500),
onCmPaste (cm, ev) {
const clipItems = (ev.clipboardData || ev.originalEvent.clipboardData).items
for (const clipItem of clipItems) {
for (let clipItem of clipItems) {
if (_.startsWith(clipItem.type, 'image/')) {
const file = clipItem.getAsFile()
const reader = new FileReader()

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

@@ -9,7 +9,7 @@
v-toolbar.radius-7(:color='$vuetify.theme.dark ? `teal` : `teal lighten-5`', dense, flat, height='44')
.body-2(:class='$vuetify.theme.dark ? `white--text` : `teal--text`') {{$t('editor:assets.title')}}
v-spacer
v-btn(flat, icon, @click='refresh', tile, small)
v-btn(text, icon, @click='refresh')
v-icon(:color='$vuetify.theme.dark ? `white` : `teal`') mdi-refresh
v-dialog(v-model='newFolderDialog', max-width='550')
template(v-slot:activator='{ on }')
@@ -18,7 +18,7 @@
span.hidden-sm-and-down(:class='$vuetify.theme.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-card-text.pt-5
v-text-field.md2(
outlined
prepend-icon='mdi-folder-outline'
@@ -48,7 +48,7 @@
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) mdi-folder
span.caption {{ folder.name }}
span.caption(style='text-transform: none;') {{ folder.name }}
v-divider.mt-2
v-data-table(
:items='assets'
@@ -186,14 +186,14 @@
//- RENAME DIALOG
v-dialog(v-model='renameDialog', max-width='550', persistent)
v-card.wiki-form
v-card
.dialog-header.is-short.is-orange
v-icon.mr-2(color='white') keyboard
v-icon.mr-2(color='white') mdi-keyboard
span {{$t('editor:assets.renameAsset')}}
v-card-text
v-card-text.pt-5
.body-2 {{$t('editor:assets.renameAssetSubtitle')}}
v-text-field(
outline
outlined
single-line
:counter='255'
v-model='renameAssetName'
@@ -202,24 +202,24 @@
)
v-card-chin
v-spacer
v-btn(flat, @click='renameDialog = false', :disabled='renameAssetLoading') {{$t('common:actions.cancel')}}
v-btn(color='orange darken-3', @click='renameAsset', :loading='renameAssetLoading').white--text {{$t('common:actions.rename')}}
v-btn(text, @click='renameDialog = false', :disabled='renameAssetLoading') {{$t('common:actions.cancel')}}
v-btn.px-3(color='orange darken-3', @click='renameAsset', :loading='renameAssetLoading').white--text {{$t('common:actions.rename')}}
//- DELETE DIALOG
v-dialog(v-model='deleteDialog', max-width='550', persistent)
v-card.wiki-form
v-card
.dialog-header.is-short.is-red
v-icon.mr-2(color='white') highlight_off
v-icon.mr-2(color='white') mdi-trash-can-outline
span {{$t('editor:assets.deleteAsset')}}
v-card-text
v-card-text.pt-5
.body-2 {{$t('editor:assets.deleteAssetConfirm')}}
.body-2.red--text.text--darken-2 {{currentAsset.filename}}?
.caption.mt-3 {{$t('editor:assets.deleteAssetWarn')}}
v-card-chin
v-spacer
v-btn(flat, @click='deleteDialog = false', :disabled='deleteAssetLoading') {{$t('common:actions.cancel')}}
v-btn(color='red darken-2', @click='deleteAsset', :loading='deleteAssetLoading').white--text {{$t('common:actions.delete')}}
v-btn(text, @click='deleteDialog = false', :disabled='deleteAssetLoading') {{$t('common:actions.cancel')}}
v-btn.px-3(color='red darken-2', @click='deleteAsset', :loading='deleteAssetLoading').white--text {{$t('common:actions.delete')}}
</template>
<script>

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

@@ -16,8 +16,8 @@
)
v-icon(left) mdi-check
span {{ $t('common:actions.ok') }}
v-card.wiki-form(tile)
v-card-text
v-card(tile)
v-card-text.pt-5
.overline.pb-5 {{$t('editor:props.pageInfo')}}
v-text-field(
ref='iptTitle'
@@ -35,7 +35,7 @@
:hint='$t(`editor:props.shortDescriptionHint`)'
)
v-divider
v-card-text.grey(:class='darkMode ? `darken-3-d3` : `lighten-5`')
v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
.overline.pb-5 {{$t('editor:props.pathCategorization')}}
v-container.pa-0(fluid, grid-list-lg)
v-layout(row, wrap)
@@ -73,7 +73,7 @@
disabled
)
v-divider
v-card-text.pb-5.grey(:class='darkMode ? `darken-3-d5` : `lighten-4`')
v-card-text.py-5.grey(:class='darkMode ? `darken-3-d5` : `lighten-4`')
.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)

30
client/components/history.vue
View File

@@ -36,12 +36,14 @@
v-if='diffSource === ph.versionId'
small
color='pink'
label
)
.caption.white--text Source
v-chip.ml-0.mr-3(
v-if='diffTarget === ph.versionId'
small
color='pink'
label
)
.caption.white--text Target
.caption(v-if='ph.actionType === `edit`') Edited by #[strong {{ ph.authorName }}]
@@ -49,32 +51,28 @@
.caption(v-else-if='ph.actionType === `initial`') Created by #[strong {{ ph.authorName }}]
.caption(v-else) Unknown Action by #[strong {{ ph.authorName }}]
v-spacer
.caption {{ ph.createdAt | moment('calendar') }}
.caption.mr-3 {{ ph.createdAt | moment('calendar') }}
v-menu(offset-x, left)
v-btn(icon, slot='activator'): v-icon more_horiz
v-list(dense).history-promptmenu
template(v-slot:activator='{ on }')
v-btn.mr-0(icon, v-on='on', small, tile): v-icon mdi-dots-horizontal
v-list(dense, nav).history-promptmenu
v-list-item(@click='setDiffTarget(ph.versionId)')
v-list-item-avatar: v-icon call_made
v-list-item-avatar(size='24'): v-icon mdi-call-received
v-list-item-title Set as Differencing Target
v-divider
v-list-item(@click='setDiffSource(ph.versionId)')
v-list-item-avatar: v-icon call_received
v-list-item-avatar(size='24'): v-icon mdi-call-made
v-list-item-title Set as Differencing Source
v-divider
v-list-item
v-list-item-avatar: v-icon code
v-list-item-avatar(size='24'): v-icon mdi-code-tags
v-list-item-title View Source
v-divider
v-list-item
v-list-item-avatar: v-icon cloud_download
v-list-item-avatar(size='24'): v-icon mdi-cloud-download-outline
v-list-item-title Download Version
v-divider
v-list-item
v-list-item-avatar: v-icon restore
v-list-item-avatar(size='24'): v-icon mdi-history
v-list-item-title Restore
v-divider
v-list-item
v-list-item-avatar: v-icon call_split
v-list-item-avatar(size='24'): v-icon mdi-source-branch
v-list-item-title Branch off from here
v-btn.ma-0.radius-7(
@@ -223,11 +221,11 @@ export default {
trailIcon(actionType) {
switch (actionType) {
case 'edit':
return 'edit'
return 'mdi-pencil'
case 'move':
return 'forward'
case 'initial':
return 'add'
return 'mdi-plus'
default:
return 'warning'
}