From 4c34ce7aff3047b922a87d1d70e215cf4274a5b2 Mon Sep 17 00:00:00 2001 From: Nick Date: Sat, 1 Jun 2019 01:34:16 -0400 Subject: [PATCH] fix: editor media modal - dark --- .../components/editor/editor-modal-media.vue | 83 +++++++++---------- .../editor/editor-modal-properties.vue | 2 +- 2 files changed, 42 insertions(+), 43 deletions(-) diff --git a/client/components/editor/editor-modal-media.vue b/client/components/editor/editor-modal-media.vue index 33c4986a..4b8ab276 100644 --- a/client/components/editor/editor-modal-media.vue +++ b/client/components/editor/editor-modal-media.vue @@ -3,17 +3,18 @@ v-container.pa-3(grid-list-lg, fluid) v-layout(row, wrap) 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 .d-flex - v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44') - .body-2.teal--text Assets - v-btn.ml-3.my-0.radius-7(outline, large, color='teal', icon, @click='refresh') - v-icon cached + v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat, height='44') + .body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') Assets + v-spacer + v-btn(flat, icon, @click='refresh') + v-icon cached 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-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 .dialog-header.is-short New Folder v-card-text @@ -33,13 +34,20 @@ v-spacer v-btn(flat, @click='newFolderDialog = false') Cancel 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') - .pt-2 - 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-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-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.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-divider.mt-2 v-data-table( :items='assets' @@ -54,7 +62,7 @@ tr.is-clickable( @click.left='currentFileId = props.item.id' @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 @@ -110,31 +118,22 @@ .text-xs-center.py-2(v-if='this.pageTotal > 1') v-pagination(v-model='pagination.page', :length='pageTotal') .d-flex.mt-3 - v-toolbar.radius-7(flat, color='grey lighten-4', dense, height='44') - 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='$vuetify.breakpoint.smAndUp') - v-spacer - .body-1.grey--text.text--darken-1 {{assets.length}} files + 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`') {{assets.length}} files 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 span Insert 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 .d-flex - v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44') - v-icon.mr-3(color='teal') cloud_upload - .body-2.teal--text Upload Assets + 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 + .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-icon(left) touch_app - span Browse + span(:class='$vuetify.dark ? `teal--text text--lighten-3` : ``') Browse file-pond.mt-3( name='mediaUpload' ref='pond' @@ -153,11 +152,11 @@ v-spacer 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-toolbar.radius-7(color='teal lighten-5', dense, flat) - v-icon.mr-3(color='teal') cloud_download - .body-2.teal--text Fetch Remote Image + v-toolbar.radius-7(:color='$vuetify.dark ? `teal` : `teal lighten-5`', dense, flat) + v-icon.mr-3(:color='$vuetify.dark ? `white` : `teal`') cloud_download + .body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') Fetch Remote Image v-spacer v-chip(label, color='white', small).teal--text coming soon v-text-field.mt-3( @@ -173,11 +172,11 @@ v-spacer 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-toolbar.radius-7(color='teal lighten-5', dense, flat) - v-icon.mr-3(color='teal') format_align_left - .body-2.teal--text Image Alignment + 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 + .body-2(:class='$vuetify.dark ? `white--text` : `teal--text`') Image Alignment v-select.mt-3( v-model='imageAlignment' :items='imageAlignments' @@ -303,7 +302,7 @@ export default { 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: '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() { @@ -350,10 +349,10 @@ export default { async refresh() { await this.$apollo.queries.assets.refetch() this.$store.commit('showNotification', { - message: 'List of assets refreshed successfully.', - style: 'success', - icon: 'check' - }) + message: 'List of assets refreshed successfully.', + style: 'success', + icon: 'check' + }) }, insert () { const asset = _.find(this.assets, ['id', this.currentFileId]) diff --git a/client/components/editor/editor-modal-properties.vue b/client/components/editor/editor-modal-properties.vue index 2814bb9c..dc892073 100644 --- a/client/components/editor/editor-modal-properties.vue +++ b/client/components/editor/editor-modal-properties.vue @@ -224,7 +224,7 @@ export default { }, watch: { value(newValue, oldValue) { - if(newValue) { + if (newValue) { _.delay(() => { this.$refs.iptTitle.focus() // this.$tours['editorPropertiesTour'].start()