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

show "click to uninstall" overlay, hide install/delete buttons

Browse Source
This commit is contained in:
tophf 2017-12-19 05:30:40 +03:00
parent 80926c8d7e
commit 78080df6fd
4 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_locales/en/messages.json
View File

@ -103,6 +103,10 @@
"updateCheckHistory": { "updateCheckHistory": {
"message": "History of update checks" "message": "History of update checks"
}, },
"clickToUninstall": {
"message": "Click to uninstall",
"description": "Label for the overlay on a style thumbnail when installed via inline search in the popup"
},
"configureStyle": { "configureStyle": {
"message": "Configure", "message": "Configure",
"description": "Label for the button to configure usercss userstyle" "description": "Label for the button to configure usercss userstyle"

2
popup.html
View File

@ -88,8 +88,8 @@
<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-status"></div>
<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>
<button class="search-result-uninstall hidden" i18n-text="deleteStyleLabel"></button> <button class="search-result-uninstall hidden" i18n-text="deleteStyleLabel"></button>

17
popup/search-results.css
View File

@ -103,24 +103,33 @@ body.search-results-shown {
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;
position: absolute; position: absolute;
background-color: rgba(0, 128, 0, 0.76); background-color: hsla(180, 100%, 27%, .75);
color: #fff; color: #fff;
transition: background-color .5s;
pointer-events: none;
} }
.search-result:hover .search-result-actions { .search-result-screenshot:hover ~ .search-result-status {
opacity: 1; background-color: hsla(180, 100%, 27%, 1);
} }
.search-result-actions { .search-result-actions {
bottom: 20px; bottom: 20px;
text-align: center; text-align: center;
z-index: 10; z-index: 10;
opacity: 0;
position: absolute; position: absolute;
width: 100%; width: 100%;
}
.search-result:not([data-installed]) .search-result-actions {
opacity: 0;
transition: opacity .5s; transition: opacity .5s;
} }
.search-result:not([data-installed]):hover .search-result-actions {
opacity: 1;
}
#search-results .search-result-actions button { #search-results .search-result-actions button {
background-color: #fff; background-color: #fff;
box-shadow: 2px 2px 20px #000; box-shadow: 2px 2px 20px #000;

7
popup/search-results.js
View File

@ -498,7 +498,7 @@ window.addEventListener('showStyles:done', function _() {
if (result.installed && !('installed' in entry.dataset)) { if (result.installed && !('installed' in entry.dataset)) {
entry.dataset.installed = ''; entry.dataset.installed = '';
$('.search-result-status', entry).textContent = t('installButtonInstalled'); $('.search-result-status', entry).textContent = t('clickToUninstall');
} else if (!result.installed && 'installed' in entry.dataset) { } else if (!result.installed && 'installed' in entry.dataset) {
delete entry.dataset.installed; delete entry.dataset.installed;
$('.search-result-status', entry).textContent = ''; $('.search-result-status', entry).textContent = '';
@ -506,7 +506,7 @@ window.addEventListener('showStyles:done', function _() {
const screenshot = $('.search-result-screenshot', entry); const screenshot = $('.search-result-screenshot', entry);
screenshot.onclick = result.installed ? onUninstallClicked : onInstallClicked; screenshot.onclick = result.installed ? onUninstallClicked : onInstallClicked;
screenshot.title = result.installed ? t('deleteStyleLabel') : t('installButton'); screenshot.title = result.installed ? '' : t('installButton');
const uninstallButton = $('.search-result-uninstall', entry); const uninstallButton = $('.search-result-uninstall', entry);
uninstallButton.onclick = onUninstallClicked; uninstallButton.onclick = onUninstallClicked;
@ -528,9 +528,6 @@ window.addEventListener('showStyles:done', function _() {
handleEvent.openURLandHide.call(this, event); handleEvent.openURLandHide.call(this, event);
}; };
} }
//installButton.classList.toggle('hidden', Boolean(result.installed));
uninstallButton.classList.toggle('hidden', !result.installed);
} }
function onUninstallClicked(event) { function onUninstallClicked(event) {