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": {
"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": {
"message": "Configure",
"description": "Label for the button to configure usercss userstyle"

2
popup.html
View File

@ -88,8 +88,8 @@
<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-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>

17
popup/search-results.css
View File

@ -103,24 +103,33 @@ body.search-results-shown {
line-height: 18px;
text-align: center;
position: absolute;
background-color: rgba(0, 128, 0, 0.76);
background-color: hsla(180, 100%, 27%, .75);
color: #fff;
transition: background-color .5s;
pointer-events: none;
}
.search-result:hover .search-result-actions {
opacity: 1;
.search-result-screenshot:hover ~ .search-result-status {
background-color: hsla(180, 100%, 27%, 1);
}
.search-result-actions {
bottom: 20px;
text-align: center;
z-index: 10;
opacity: 0;
position: absolute;
width: 100%;
}
.search-result:not([data-installed]) .search-result-actions {
opacity: 0;
transition: opacity .5s;
}
.search-result:not([data-installed]):hover .search-result-actions {
opacity: 1;
}
#search-results .search-result-actions button {
background-color: #fff;
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)) {
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) {
delete entry.dataset.installed;
$('.search-result-status', entry).textContent = '';
@ -506,7 +506,7 @@ window.addEventListener('showStyles:done', function _() {
const screenshot = $('.search-result-screenshot', entry);
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);
uninstallButton.onclick = onUninstallClicked;
@ -528,9 +528,6 @@ window.addEventListener('showStyles:done', function _() {
handleEvent.openURLandHide.call(this, event);
};
}
//installButton.classList.toggle('hidden', Boolean(result.installed));
uninstallButton.classList.toggle('hidden', !result.installed);
}
function onUninstallClicked(event) {