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

show 'Style installed' in search result after inline install

Browse Source
This commit is contained in:
tophf 2017-12-11 22:26:33 +03:00
parent 866f54c307
commit 23733bd9fe
3 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
popup.html
View File

@ -88,6 +88,7 @@
<div class="search-result">
<a class="search-result-title"><span></span></a>
<div class="search-result-info">
<div class="search-result-status"></div>
<img class="search-result-screenshot" i18n-title="installButton">
<div class="search-result-actions">
<button class="search-result-install hidden" i18n-text="installButton"></button>
@ -215,9 +216,9 @@
</div>
</div>
<div id="search-results-error" class="hidden"></div>
<div id="search-results" class="hidden">
<div class="search-results-nav" data-type="top"></div>
<div id="search-results-error" class="hidden"></div>
<div id="search-results-list"></div>
<div class="search-results-nav" data-type="bottom"></div>
</div>

14
popup/search-results.css
View File

@ -26,7 +26,7 @@ body.search-results-shown {
font-weight: bold;
padding: 5px;
text-align: center;
margin: -.5rem 0 1rem;
margin: -.5rem 0 9px;
}
#search-results-list {
@ -96,6 +96,17 @@ body.search-results-shown {
position: relative;
}
.search-result[data-installed] .search-result-status {
top: 0;
left: 0;
right: 0;
line-height: 18px;
text-align: center;
position: absolute;
background-color: rgba(0, 128, 0, 0.76);
color: #fff;
}
.search-result:hover .search-result-actions {
opacity: 1;
}
@ -127,6 +138,7 @@ body.search-results-shown {
width: 100%;
line-height: 16px;
margin: 0;
padding-bottom: 3px;
}
.search-result:hover .search-result-meta {

20
popup/search-results.js
View File

@ -182,6 +182,11 @@ window.addEventListener('showStyles:done', function _() {
t('searchResultNoneFound') :
t('genericErrorOccurred') + '\n' + reason;
dom.error.classList.remove('hidden');
dom.container.classList.toggle('hidden', !processedResults.length);
document.body.classList.toggle('search-results-shown', processedResults.length > 0);
if (dom.error.getBoundingClientRect().bottom > window.innerHeight) {
dom.error.scrollIntoView();
}
}
/**
@ -449,9 +454,19 @@ window.addEventListener('showStyles:done', function _() {
}
function renderActionButtons(entry) {
const result = entry._result;
if (result.installed && !('installed' in entry.dataset)) {
entry.dataset.installed = '';
$('.search-result-status', entry).textContent = t('installButtonInstalled');
} else if (!result.installed && 'installed' in entry.dataset) {
delete entry.dataset.installed;
$('.search-result-status', entry).textContent = '';
}
const screenshot = $('.search-result-screenshot', entry);
screenshot.onclick = entry._result.installed ? onUninstallClicked : onInstallClicked;
screenshot.title = entry._result.installed ? t('deleteStyleLabel') : t('installButton');
screenshot.onclick = result.installed ? onUninstallClicked : onInstallClicked;
screenshot.title = result.installed ? t('deleteStyleLabel') : t('installButton');
const uninstallButton = $('.search-result-uninstall', entry);
uninstallButton.onclick = onUninstallClicked;
@ -459,7 +474,6 @@ window.addEventListener('showStyles:done', function _() {
const installButton = $('.search-result-install', entry);
installButton.onclick = onInstallClicked;
const result = entry._result;
if ((result.style_settings || []).length > 0) {
// Style has customizations
installButton.classList.add('customize');