From 60bb2a0d5cad0f5921e1c8e780118471b69e0ec1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Felix=20H=C3=A4usler?= Date: Fri, 1 Nov 2019 17:32:15 +0100 Subject: [PATCH 1/2] Improve image picker UX --- src/muya/lib/ui/imageSelector/index.js | 81 +++++++++++++------ .../components/editorWithTabs/editor.vue | 2 +- 2 files changed, 58 insertions(+), 25 deletions(-) diff --git a/src/muya/lib/ui/imageSelector/index.js b/src/muya/lib/ui/imageSelector/index.js index 5e1e0229..789b9dc3 100644 --- a/src/muya/lib/ui/imageSelector/index.js +++ b/src/muya/lib/ui/imageSelector/index.js @@ -12,7 +12,7 @@ class ImageSelector extends BaseFloat { constructor (muya, options) { const name = 'ag-image-selector' - const { accessKey } = options + const { unsplashAccessKey } = options options = Object.assign(options, { placement: 'bottom-center', modifiers: { @@ -26,9 +26,13 @@ class ImageSelector extends BaseFloat { this.renderArray = [] this.oldVnode = null this.imageInfo = null - this.unsplash = new Unsplash({ - accessKey - }) + if (!unsplashAccessKey) { + this.unsplash = null + } else { + this.unsplash = new Unsplash({ + accessKey: unsplashAccessKey + }) + } this.photoList = [] this.loading = false this.tab = 'link' // select or link @@ -56,22 +60,27 @@ class ImageSelector extends BaseFloat { } Object.assign(this.state, imageInfo.token.attrs) - // load latest unsplash photos. - this.loading = true - this.unsplash.photos.listPhotos(1, 40, 'latest') - .then(toJson) - .then(json => { - this.loading = false - if (Array.isArray(json)) { - this.photoList = json - if (this.tab === 'unsplash') { - this.render() + + if (this.unsplash) { + // Load latest unsplash photos. + this.loading = true + this.unsplash.photos.listPhotos(1, 40, 'latest') + .then(toJson) + .then(json => { + this.loading = false + if (Array.isArray(json)) { + this.photoList = json + if (this.tab === 'unsplash') { + this.render() + } } - } - }) + }) + } + this.imageInfo = imageInfo this.show(reference, cb) this.render() + // Auto focus and select all content of the `src.input` element. const input = this.imageSelectorContainer.querySelector('input.src') if (input) { @@ -85,6 +94,10 @@ class ImageSelector extends BaseFloat { } searchPhotos = (keyword) => { + if (!this.unsplash) { + return + } + this.loading = true this.photoList = [] this.unsplash.search.photos(keyword, 1, 40) @@ -253,11 +266,15 @@ class ImageSelector extends BaseFloat { }, { label: 'Embed link', value: 'link' - }, { - label: 'Unsplash', - value: 'unsplash' }] + if (this.unsplash) { + tabs.push({ + label: 'Unsplash', + value: 'unsplash' + }) + } + const children = tabs.map(tab => { const itemSelector = this.tab === tab.value ? 'li.active' : 'li' return h(itemSelector, h('span', { @@ -285,7 +302,11 @@ class ImageSelector extends BaseFloat { } } }, 'Choose an Image'), - h('span.description', 'Choose image from you computer.') + h('span.description', { + props: { + style: 'user-select: none;' + } + }, 'Choose image from your computer.') ] } else if (tab === 'link') { const altInput = h('input.alt', { @@ -355,14 +376,18 @@ class ImageSelector extends BaseFloat { } }, 'Embed Image') const bottomDes = h('span.description', [ - h('span', 'Paste web image or local image path, '), + h('span', { + props: { + style: 'user-select: none;' + } + }, 'Paste web image or local image path. Use '), h('a', { on: { click: event => { this.toggleMode() } } - }, `${isFullMode ? 'simple mode' : 'full mode'}`) + }, `${isFullMode ? 'simple mode' : 'full mode'}.`) ]) bodyContent = [inputWrapper, embedButton, bottomDes] } else { @@ -386,7 +411,11 @@ class ImageSelector extends BaseFloat { const loadingCom = h('div.ag-plugin-loading') bodyContent.push(loadingCom) } else if (this.photoList.length === 0) { - const noDataCom = h('div.no-data', 'No result...') + const noDataCom = h('div.no-data', { + props: { + style: 'user-select: none;' + } + }, 'No result...') bodyContent.push(noDataCom) } else { const photos = this.photoList.map(photo => { @@ -429,7 +458,11 @@ class ImageSelector extends BaseFloat { return h('div.photo', [imageWrapper, desCom]) }) const photoWrapper = h('div.photos-wrapper', photos) - const moreCom = h('div.more', 'Search for more photos...') + const moreCom = h('div.more', { + props: { + style: 'user-select: none;' + } + }, 'Search for more photos...') bodyContent.push(photoWrapper, moreCom) } } diff --git a/src/renderer/components/editorWithTabs/editor.vue b/src/renderer/components/editorWithTabs/editor.vue index fa432767..328e0105 100644 --- a/src/renderer/components/editorWithTabs/editor.vue +++ b/src/renderer/components/editorWithTabs/editor.vue @@ -460,7 +460,7 @@ export default { Muya.use(EmojiPicker) Muya.use(ImagePathPicker) Muya.use(ImageSelector, { - accessKey: process.env.UNSPLASH_ACCESS_KEY, + unsplashAccessKey: process.env.UNSPLASH_ACCESS_KEY, photoCreatorClick: this.photoCreatorClick }) Muya.use(Transformer) From be64ab6d4bcf0304612dd9a31001adba39319f5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Felix=20H=C3=A4usler?= Date: Sat, 2 Nov 2019 15:01:28 +0100 Subject: [PATCH 2/2] Adjust style --- src/muya/lib/ui/imageSelector/index.css | 3 +++ src/muya/lib/ui/imageSelector/index.js | 24 ++++-------------------- src/muya/themes/default.css | 1 - 3 files changed, 7 insertions(+), 21 deletions(-) diff --git a/src/muya/lib/ui/imageSelector/index.css b/src/muya/lib/ui/imageSelector/index.css index f73df562..d3afbaf9 100644 --- a/src/muya/lib/ui/imageSelector/index.css +++ b/src/muya/lib/ui/imageSelector/index.css @@ -108,6 +108,7 @@ text-align: center; display: block; color: var(--editorColor30); + user-select: none; } .ag-image-selector span.description a { @@ -154,6 +155,7 @@ text-align: center; font-size: 14px; color: var(--editorColor); + user-select: none; } .ag-image-selector .more { @@ -161,6 +163,7 @@ color: var(--editorColor); text-align: center; margin-bottom: 20px; + user-select: none; } .ag-image-selector .photo { diff --git a/src/muya/lib/ui/imageSelector/index.js b/src/muya/lib/ui/imageSelector/index.js index 789b9dc3..e11f9592 100644 --- a/src/muya/lib/ui/imageSelector/index.js +++ b/src/muya/lib/ui/imageSelector/index.js @@ -302,11 +302,7 @@ class ImageSelector extends BaseFloat { } } }, 'Choose an Image'), - h('span.description', { - props: { - style: 'user-select: none;' - } - }, 'Choose image from your computer.') + h('span.description', 'Choose image from your computer.') ] } else if (tab === 'link') { const altInput = h('input.alt', { @@ -376,11 +372,7 @@ class ImageSelector extends BaseFloat { } }, 'Embed Image') const bottomDes = h('span.description', [ - h('span', { - props: { - style: 'user-select: none;' - } - }, 'Paste web image or local image path. Use '), + h('span', 'Paste web image or local image path. Use '), h('a', { on: { click: event => { @@ -411,11 +403,7 @@ class ImageSelector extends BaseFloat { const loadingCom = h('div.ag-plugin-loading') bodyContent.push(loadingCom) } else if (this.photoList.length === 0) { - const noDataCom = h('div.no-data', { - props: { - style: 'user-select: none;' - } - }, 'No result...') + const noDataCom = h('div.no-data', 'No result...') bodyContent.push(noDataCom) } else { const photos = this.photoList.map(photo => { @@ -458,11 +446,7 @@ class ImageSelector extends BaseFloat { return h('div.photo', [imageWrapper, desCom]) }) const photoWrapper = h('div.photos-wrapper', photos) - const moreCom = h('div.more', { - props: { - style: 'user-select: none;' - } - }, 'Search for more photos...') + const moreCom = h('div.more', 'Search for more photos...') bodyContent.push(photoWrapper, moreCom) } } diff --git a/src/muya/themes/default.css b/src/muya/themes/default.css index 18945cdd..60a25652 100644 --- a/src/muya/themes/default.css +++ b/src/muya/themes/default.css @@ -640,7 +640,6 @@ kbd { border-left-color: transparent; border-right-color: transparent; } - } /* end not print */ @media print {