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

14
popup/search-results.css
View File

@ -26,7 +26,7 @@ body.search-results-shown {
font-weight: bold; font-weight: bold;
padding: 5px; padding: 5px;
text-align: center; text-align: center;
margin: -.5rem 0 1rem; margin: -.5rem 0 9px;
} }
#search-results-list { #search-results-list {
@ -96,6 +96,17 @@ body.search-results-shown {
position: relative; 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 { .search-result:hover .search-result-actions {
opacity: 1; opacity: 1;
} }
@ -127,6 +138,7 @@ body.search-results-shown {
width: 100%; width: 100%;
line-height: 16px; line-height: 16px;
margin: 0; margin: 0;
padding-bottom: 3px;
} }
.search-result:hover .search-result-meta { .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('searchResultNoneFound') :
t('genericErrorOccurred') + '\n' + reason; t('genericErrorOccurred') + '\n' + reason;
dom.error.classList.remove('hidden'); 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) { 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); const screenshot = $('.search-result-screenshot', entry);
screenshot.onclick = entry._result.installed ? onUninstallClicked : onInstallClicked; screenshot.onclick = result.installed ? onUninstallClicked : onInstallClicked;
screenshot.title = entry._result.installed ? t('deleteStyleLabel') : t('installButton'); screenshot.title = result.installed ? t('deleteStyleLabel') : t('installButton');
const uninstallButton = $('.search-result-uninstall', entry); const uninstallButton = $('.search-result-uninstall', entry);
uninstallButton.onclick = onUninstallClicked; uninstallButton.onclick = onUninstallClicked;
@ -459,7 +474,6 @@ window.addEventListener('showStyles:done', function _() {
const installButton = $('.search-result-install', entry); const installButton = $('.search-result-install', entry);
installButton.onclick = onInstallClicked; installButton.onclick = onInstallClicked;
const result = entry._result;
if ((result.style_settings || []).length > 0) { if ((result.style_settings || []).length > 0) {
// Style has customizations // Style has customizations
installButton.classList.add('customize'); installButton.classList.add('customize');