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() {