From 9da021b46189249b4e3b9390a1edb25176f65b6e Mon Sep 17 00:00:00 2001 From: tophf Date: Fri, 13 Aug 2021 12:29:53 +0300 Subject: [PATCH] show action hints on preview-less search results ...and use CSS to control visibility of action buttons --- popup.html | 6 ++--- popup/search.css | 21 +++++++++++++---- popup/search.js | 61 ++++++++++++++++++++++++++---------------------- 3 files changed, 53 insertions(+), 35 deletions(-) diff --git a/popup.html b/popup.html index 31f99be9..f8ef4983 100644 --- a/popup.html +++ b/popup.html @@ -104,9 +104,9 @@
- - - + + +
diff --git a/popup/search.css b/popup/search.css index dba75ef3..da637ad8 100644 --- a/popup/search.css +++ b/popup/search.css @@ -102,7 +102,7 @@ body.search-results-shown { position: relative; } -.search-result[data-installed] .search-result-status { +.search-result .search-result-status { top: 0; left: 0; right: 0; @@ -114,9 +114,16 @@ body.search-results-shown { transition: background-color .5s; pointer-events: none; } - +.search-result[data-no-image] .search-result-status { + line-height: 140px; +} +.search-result[data-no-image]:not([data-installed]) .search-result-status { + background-color: rgba(128, 128, 128, .1); + color: currentColor; +} .search-result-screenshot:hover ~ .search-result-status { background-color: hsla(180, 100%, 27%, 1); + color: #fff; } .search-result-actions { @@ -131,16 +138,22 @@ body.search-results-shown { opacity: 0; transition: opacity .5s; } - .search-result:not([data-installed]):hover .search-result-actions { opacity: 1; } - .search-result-actions button { box-shadow: 2px 2px 20px #000; white-space: nowrap; margin: 3px; } +.search-result[data-no-image] .search-result-actions button { + box-shadow: none; +} +.search-result-install, +.search-result-uninstall, +.search-result:not([data-customizable]) .search-result-customize { + display: none; +} .search-result-meta { background-color: hsla(0, 0%, 93%, 0.75); diff --git a/popup/search.js b/popup/search.js index bdbeb636..fc492830 100644 --- a/popup/search.js +++ b/popup/search.js @@ -1,4 +1,4 @@ -/* global $ $$ $create $remove showSpinner */// dom.js +/* global $ $$ $create $remove showSpinner toggleDataset */// dom.js /* global $entry tabURL */// popup.js /* global API */// msg.js /* global Events */ @@ -292,19 +292,22 @@ t.breakWord(name.length < 300 ? name : name.slice(0, 300) + '...'); // screenshot const elShot = $('.search-result-screenshot', entry); + let shotSrc; if (isUsw) { - elShot.src = !/^https?:/i.test(shot) ? BLANK_PIXEL : - imgType !== '.jpg' ? shot.replace(/\.jpg$/, imgType) : - shot; + shotSrc = /^https?:/i.test(shot) && shot.replace(/\.jpg$/, imgType); } else { - const auto = URLS.uso + `auto_style_screenshots/${id}${USO_AUTO_PIC_SUFFIX}`; - Object.assign(elShot, { - src: shot && !shot.endsWith(USO_AUTO_PIC_SUFFIX) - ? `${shotArchived ? URLS.usoArchiveRaw[0] : URLS.uso + 'style_'}screenshots/${shot}` - : auto, - _src: auto, - onerror: fixScreenshot, - }); + elShot._src = URLS.uso + `auto_style_screenshots/${id}${USO_AUTO_PIC_SUFFIX}`; + shotSrc = shot && !shot.endsWith(USO_AUTO_PIC_SUFFIX) + ? `${shotArchived ? URLS.usoArchiveRaw[0] : URLS.uso + 'style_'}screenshots/${shot}` + : elShot._src; + } + if (shotSrc) { + elShot._entry = entry; + elShot.src = shotSrc; + elShot.onerror = fixScreenshot; + } else { + elShot.src = BLANK_PIXEL; + entry.dataset.noImage = ''; } // author Object.assign($('[data-type="author"] a', entry), { @@ -350,8 +353,10 @@ this.src = _src; delete this._src; } else { - this.src = BLANK_PIXEL; this.onerror = null; + this.src = BLANK_PIXEL; + this._entry.dataset.noImage = ''; + renderActionButtons(this._entry); } } @@ -366,14 +371,10 @@ result.installedStyleId = installedId; } const isInstalled = result.installed; - if (isInstalled && !('installed' in entry.dataset)) { - entry.dataset.installed = ''; - $('.search-result-status', entry).textContent = t('clickToUninstall'); - } else if (!isInstalled && 'installed' in entry.dataset) { - delete entry.dataset.installed; - $('.search-result-status', entry).textContent = ''; - hide('.search-result-customize', entry); - } + const status = $('.search-result-status', entry).textContent = + isInstalled ? t('clickToUninstall') : + entry.dataset.noImage != null ? t('installButton') : + ''; const notMatching = installedId > 0 && !$entry(installedId); if (notMatching !== entry.classList.contains('not-matching')) { entry.classList.toggle('not-matching'); @@ -385,10 +386,12 @@ } Object.assign($('.search-result-screenshot', entry), { onclick: isInstalled ? uninstall : install, - title: isInstalled ? '' : t('installButton'), + title: status ? '' : t('installButton'), }); $('.search-result-uninstall', entry).onclick = uninstall; $('.search-result-install', entry).onclick = install; + $('.search-result-customize', entry).onclick = configure; + toggleDataset(entry, 'installed', isInstalled); } function renderFullInfo(entry, style) { @@ -402,12 +405,14 @@ textContent: description, title: description, }); - // config button - if (vars) { - const btn = $('.search-result-customize', entry); - btn.onclick = () => $('.configure', $entry(style)).click(); - show(btn); - } + toggleDataset(entry, 'customizable', vars); + } + + /** @this HTMLButtonElement */ + function configure() { + const el = $entry(this.closest('.search-result')._result.installedStyleId); + const btn = el && $('.configure', el); + if (btn) btn.click(); } async function install() {