diff --git a/popup.html b/popup.html index d90375fd..b22cab7c 100644 --- a/popup.html +++ b/popup.html @@ -88,6 +88,7 @@
+
@@ -215,9 +216,9 @@
+ diff --git a/popup/search-results.css b/popup/search-results.css index 0e1f4403..f77ed449 100755 --- a/popup/search-results.css +++ b/popup/search-results.css @@ -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 { diff --git a/popup/search-results.js b/popup/search-results.js index ed6353a7..4b0b0212 100755 --- a/popup/search-results.js +++ b/popup/search-results.js @@ -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');