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

fix: editor media modal - dark

Browse Source
This commit is contained in:
Nick 2019-06-01 01:34:16 -04:00
parent eb77059ec6
commit 4c34ce7aff
2 changed files with 42 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,17 +3,18 @@
v-container.pa-3(grid-list-lg, fluid) v-container.pa-3(grid-list-lg, fluid)
v-layout(row, wrap) v-layout(row, wrap)
v-flex(xs12, xl9) v-flex(xs12, xl9)
v-card.radius-7.animated.fadeInLeft.wait-p1s(light) v-card.radius-7.animated.fadeInLeft.wait-p1s(:light='!$vuetify.dark', :dark='$vuetify.dark')
v-card-text v-card-text
.d-flex .d-flex
v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44') v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat, height='44')
.body-2.teal--text Assets .body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') Assets
v-btn.ml-3.my-0.radius-7(outline, large, color='teal', icon, @click='refresh') v-spacer
v-icon cached v-btn(flat, icon, @click='refresh')
v-icon cached
v-dialog(v-model='newFolderDialog', max-width='550') v-dialog(v-model='newFolderDialog', max-width='550')
v-btn.my-0.mr-0.radius-7(outline, large, color='teal', :icon='$vuetify.breakpoint.xsOnly', slot='activator') v-btn.my-0.mr-0.radius-7(outline, large, color='teal', :icon='$vuetify.breakpoint.xsOnly', slot='activator')
v-icon(:left='$vuetify.breakpoint.mdAndUp') add v-icon(:left='$vuetify.breakpoint.mdAndUp') add
span.hidden-sm-and-down New Folder span.hidden-sm-and-down(:class='$vuetify.dark ? `teal--text text--lighten-3` : ``') New Folder
v-card.wiki-form v-card.wiki-form
.dialog-header.is-short New Folder .dialog-header.is-short New Folder
v-card-text v-card-text
@ -33,13 +34,20 @@
v-spacer v-spacer
v-btn(flat, @click='newFolderDialog = false') Cancel v-btn(flat, @click='newFolderDialog = false') Cancel
v-btn(color='primary', @click='createFolder', :disabled='!isFolderNameValid', :loading='newFolderLoading') Create v-btn(color='primary', @click='createFolder', :disabled='!isFolderNameValid', :loading='newFolderLoading') Create
v-toolbar(flat, dense, :color='$vuetify.dark ? `grey darken-3` : `white`')
template(v-if='folderTree.length > 0')
.body-2
span.mr-1 /
template(v-for='folder of folderTree')
span(:key='folder.id') {{folder.name}}
span.mx-1 /
.body-2(v-else) / #[em root]
template(v-if='folders.length > 0 || currentFolderId > 0') template(v-if='folders.length > 0 || currentFolderId > 0')
.pt-2 v-btn.is-icon.mx-1(:color='$vuetify.dark ? `grey lighten-1` : `grey darken-2`', outline, :dark='currentFolderId > 0', @click='upFolder()', :disabled='currentFolderId === 0')
v-btn.is-icon.mx-1(color='grey darken-2', outline, :dark='currentFolderId > 0', @click='upFolder()', :disabled='currentFolderId === 0') v-icon keyboard_arrow_up
v-icon keyboard_arrow_up v-btn.btn-normalcase.mx-1(v-for='folder of folders', :key='folder.id', depressed, color='grey darken-2', dark, @click='downFolder(folder)')
v-btn.btn-normalcase.mx-1(v-for='folder of folders', :key='folder.id', depressed, color='grey darken-2', dark, @click='downFolder(folder)') v-icon(left) folder
v-icon(left) folder span {{ folder.name }}
span {{ folder.name }}
v-divider.mt-2 v-divider.mt-2
v-data-table( v-data-table(
:items='assets' :items='assets'
@ -54,7 +62,7 @@
tr.is-clickable( tr.is-clickable(
@click.left='currentFileId = props.item.id' @click.left='currentFileId = props.item.id'
@click.right.prevent='' @click.right.prevent=''
:class='currentFileId === props.item.id ? `teal lighten-5` : ``' :class='currentFileId === props.item.id ? ($vuetify.dark ? `grey darken-3-d5` : `teal lighten-5`) : ``'
) )
td.text-xs-right(v-if='$vuetify.breakpoint.smAndUp') {{ props.item.id }} td.text-xs-right(v-if='$vuetify.breakpoint.smAndUp') {{ props.item.id }}
td td
@ -110,31 +118,22 @@
.text-xs-center.py-2(v-if='this.pageTotal > 1') .text-xs-center.py-2(v-if='this.pageTotal > 1')
v-pagination(v-model='pagination.page', :length='pageTotal') v-pagination(v-model='pagination.page', :length='pageTotal')
.d-flex.mt-3 .d-flex.mt-3
v-toolbar.radius-7(flat, color='grey lighten-4', dense, height='44') v-toolbar.radius-7(flat, :color='$vuetify.dark ? `grey darken-2` : `grey lighten-4`', dense, height='44')
template(v-if='folderTree.length > 0') .body-1(:class='$vuetify.dark ? `grey--text text--lighten-1` : `grey--text text--darken-1`') {{assets.length}} files
.body-2
span.mr-1 /
template(v-for='folder of folderTree')
span(:key='folder.id') {{folder.name}}
span.mx-1 /
.body-2(v-else) / #[em root]
template(v-if='$vuetify.breakpoint.smAndUp')
v-spacer
.body-1.grey--text.text--darken-1 {{assets.length}} files
v-btn.ml-3.mr-0.my-0.radius-7(color='teal', large, @click='insert', :disabled='!currentFileId', :dark='currentFileId !== null') v-btn.ml-3.mr-0.my-0.radius-7(color='teal', large, @click='insert', :disabled='!currentFileId', :dark='currentFileId !== null')
v-icon(left) save_alt v-icon(left) save_alt
span Insert span Insert
v-flex(xs12, xl3) v-flex(xs12, xl3)
v-card.radius-7.animated.fadeInRight.wait-p3s(light) v-card.radius-7.animated.fadeInRight.wait-p3s(:light='!$vuetify.dark', :dark='$vuetify.dark')
v-card-text v-card-text
.d-flex .d-flex
v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44') v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat, height='44')
v-icon.mr-3(color='teal') cloud_upload v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') cloud_upload
.body-2.teal--text Upload Assets .body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') Upload Assets
v-btn.my-0.ml-3.mr-0.radius-7(outline, large, color='teal', @click='browse', v-if='$vuetify.breakpoint.mdAndUp') v-btn.my-0.ml-3.mr-0.radius-7(outline, large, color='teal', @click='browse', v-if='$vuetify.breakpoint.mdAndUp')
v-icon(left) touch_app v-icon(left) touch_app
span Browse span(:class='$vuetify.dark ? `teal--text text--lighten-3` : ``') Browse
file-pond.mt-3( file-pond.mt-3(
name='mediaUpload' name='mediaUpload'
ref='pond' ref='pond'
@ -153,11 +152,11 @@
v-spacer v-spacer
v-btn(color='teal', dark, @click='upload') Upload v-btn(color='teal', dark, @click='upload') Upload
v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light) v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(:light='!$vuetify.dark', :dark='$vuetify.dark')
v-card-text.pb-0 v-card-text.pb-0
v-toolbar.radius-7(color='teal lighten-5', dense, flat) v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat)
v-icon.mr-3(color='teal') cloud_download v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') cloud_download
.body-2.teal--text Fetch Remote Image .body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') Fetch Remote Image
v-spacer v-spacer
v-chip(label, color='white', small).teal--text coming soon v-chip(label, color='white', small).teal--text coming soon
v-text-field.mt-3( v-text-field.mt-3(
@ -173,11 +172,11 @@
v-spacer v-spacer
v-btn(color='teal', disabled) Fetch v-btn(color='teal', disabled) Fetch
v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light) v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(:light='!$vuetify.dark', :dark='$vuetify.dark')
v-card-text.pb-0 v-card-text.pb-0
v-toolbar.radius-7(color='teal lighten-5', dense, flat) v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat)
v-icon.mr-3(color='teal') format_align_left v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') format_align_left
.body-2.teal--text Image Alignment .body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') Image Alignment
v-select.mt-3( v-select.mt-3(
v-model='imageAlignment' v-model='imageAlignment'
:items='imageAlignments' :items='imageAlignments'
@ -303,7 +302,7 @@ export default {
this.$vuetify.breakpoint.lgAndUp && { text: 'Type', value: 'ext', width: 50 }, this.$vuetify.breakpoint.lgAndUp && { text: 'Type', value: 'ext', width: 50 },
this.$vuetify.breakpoint.mdAndUp && { text: 'File Size', value: 'fileSize', width: 110 }, this.$vuetify.breakpoint.mdAndUp && { text: 'File Size', value: 'fileSize', width: 110 },
this.$vuetify.breakpoint.mdAndUp && { text: 'Added', value: 'createdAt', width: 175 }, this.$vuetify.breakpoint.mdAndUp && { text: 'Added', value: 'createdAt', width: 175 },
this.$vuetify.breakpoint.smAndUp && { text: 'Actions', value: '', width: 40, sortable: false, align:'right' } this.$vuetify.breakpoint.smAndUp && { text: 'Actions', value: '', width: 40, sortable: false, align: 'right' }
]) ])
}, },
isFolderNameValid() { isFolderNameValid() {
@ -350,10 +349,10 @@ export default {
async refresh() { async refresh() {
await this.$apollo.queries.assets.refetch() await this.$apollo.queries.assets.refetch()
this.$store.commit('showNotification', { this.$store.commit('showNotification', {
message: 'List of assets refreshed successfully.', message: 'List of assets refreshed successfully.',
style: 'success', style: 'success',
icon: 'check' icon: 'check'
}) })
}, },
insert () { insert () {
const asset = _.find(this.assets, ['id', this.currentFileId]) const asset = _.find(this.assets, ['id', this.currentFileId])

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

@ -224,7 +224,7 @@ export default {
}, },
watch: { watch: {
value(newValue, oldValue) { value(newValue, oldValue) {
if(newValue) { if (newValue) {
_.delay(() => { _.delay(() => {
this.$refs.iptTitle.focus() this.$refs.iptTitle.focus()
// this.$tours['editorPropertiesTour'].start() // this.$tours['editorPropertiesTour'].start()