open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

show action hints on preview-less search results

Browse Source 
...and use CSS to control visibility of action buttons
This commit is contained in:
tophf 2021-08-13 12:29:53 +03:00
parent 54427c498d
commit 9da021b461
3 changed files with 53 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
popup.html
View File

@ -104,9 +104,9 @@
<img class="search-result-screenshot" i18n-title="installButton">
<div class="search-result-status"></div>
<div class="search-result-actions">
<button class="search-result-install hidden" i18n-text="installButton"></button>
<button class="search-result-uninstall hidden" i18n-text="deleteStyleLabel"></button>
<button class="search-result-customize hidden" i18n-text="configureStyle"></button>
<button class="search-result-install" i18n-text="installButton"></button>
<button class="search-result-uninstall" i18n-text="deleteStyleLabel"></button>
<button class="search-result-customize" i18n-text="configureStyle"></button>
</div>
<dl class="search-result-meta">
<div data-type="author">

21
popup/search.css
View File

@ -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);

61
popup/search.js
View File

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