manage: update state tooltips; add filter option
* update state is shown in tooltips that fade out in 10 sec except for .update-problem and .can-update * when updates are found a filtering option is revealed; when it's checked only entries with updates are shown; when all updates are installed the option automatically hides
This commit is contained in:
tophf
parent
311d036dee
commit
2a7231a887
|
|
@ -282,6 +282,10 @@
|
|||
"message": "Only edited styles",
|
||||
"description": "Checkbox to show only locally edited styles"
|
||||
},
|
||||
"manageOnlyUpdates": {
|
||||
"message": "Only with updates",
|
||||
"description": "Checkbox to show only styles that have updates after check-all-styles-for-updates was performed"
|
||||
},
|
||||
"manageNewUI": {
|
||||
"message": "New manage UI layout",
|
||||
"description": "Label for the checkbox that toggles the new UI on manage page"
|
||||
|
|
|
|||
43
manage.css
43
manage.css
|
|
@ -215,7 +215,7 @@ summary {
|
|||
width: 60px;
|
||||
height: 20px;
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.newUI .actions > * {
|
||||
|
|
@ -244,10 +244,44 @@ summary {
|
|||
display: inline;
|
||||
}
|
||||
|
||||
.newUI .can-update .update,
|
||||
.newUI .no-update.update-problem .check-update {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.update-problem .check-update svg {
|
||||
fill: darkred;
|
||||
}
|
||||
|
||||
.updater-icons > :not(.check-update):after {
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
margin-top: 18px;
|
||||
margin-left: -36px;
|
||||
padding: 1ex 1.5ex;
|
||||
border: 1px solid #ded597;
|
||||
background-color: #fffbd6;
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 3px 10px rgba(0,0,0,.25);
|
||||
font-size: 90%;
|
||||
animation: fadeout 10s;
|
||||
animation-fill-mode: both;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.update-problem .check-update:after {
|
||||
background-color: red;
|
||||
border: 1px solid #d40000;
|
||||
color: white;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.can-update .update:after {
|
||||
background-color: #c0fff0;
|
||||
border: 1px solid #89cac9;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.newUI .applies-to {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
|
|
@ -400,8 +434,13 @@ fieldset {
|
|||
margin: 1em 0;
|
||||
}
|
||||
|
||||
fieldset > * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.enabled-only > .disabled,
|
||||
.edited-only > .updatable {
|
||||
.edited-only > .updatable,
|
||||
.updates-only > .entry:not(.can-update) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
13
manage.html
13
manage.html
|
|
@ -129,17 +129,10 @@
|
|||
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
|
||||
<fieldset>
|
||||
<legend id="filters" i18n-text="manageFilters"></legend>
|
||||
<div>
|
||||
<input id="manage.onlyEnabled" type="checkbox">
|
||||
<label id="manage.onlyEnabled-label" for="manage.onlyEnabled" i18n-text="manageOnlyEnabled"></label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="manage.onlyEdited" type="checkbox">
|
||||
<label id="manage.onlyEdited-label" for="manage.onlyEdited" i18n-text="manageOnlyEdited"></label>
|
||||
</div>
|
||||
<div>
|
||||
<label><input id="manage.onlyEnabled" type="checkbox"><span i18n-text="manageOnlyEnabled"></span></label>
|
||||
<label><input id="manage.onlyEdited" type="checkbox"><span i18n-text="manageOnlyEdited"></span></label>
|
||||
<label id="onlyUpdates" class="hidden"><input type="checkbox"><span i18n-text="manageOnlyUpdates"></span></label>
|
||||
<input id="search" type="search" i18n-placeholder="searchStyles">
|
||||
</div>
|
||||
</fieldset>
|
||||
<p>
|
||||
<button id="check-all-updates" i18n-text="checkAllUpdates"></button>
|
||||
|
|
|
|||
39
manage.js
39
manage.js
|
|
@ -70,6 +70,7 @@ function initGlobalEvents() {
|
|||
for (const [className, checkbox] of [
|
||||
['enabled-only', $('#manage.onlyEnabled')],
|
||||
['edited-only', $('#manage.onlyEdited')],
|
||||
['updates-only', $('#onlyUpdates input')],
|
||||
]) {
|
||||
// will be triggered by setupLivePrefs immediately
|
||||
checkbox.onchange = () => installed.classList.toggle(className, checkbox.checked);
|
||||
|
|
@ -269,8 +270,7 @@ Object.assign(handleEvent, {
|
|||
},
|
||||
|
||||
toggle(event, entry) {
|
||||
enableStyle(entry.styleId, this.matches('.enable') || this.checked)
|
||||
.then(handleUpdate);
|
||||
enableStyle(entry.styleId, this.matches('.enable') || this.checked);
|
||||
},
|
||||
|
||||
check(event, entry) {
|
||||
|
|
@ -336,6 +336,7 @@ function handleUpdate(style, {reason, quiet} = {}) {
|
|||
element.classList.add('update-done');
|
||||
element.classList.remove('can-update', 'updatable');
|
||||
$('.update-note', element).innerHTML = t('updateCompleted');
|
||||
renderUpdatesOnlyFilter();
|
||||
}
|
||||
}
|
||||
installed.insertBefore(element, findNextElement(style));
|
||||
|
|
@ -398,6 +399,8 @@ function applyUpdateAll() {
|
|||
button.scrollIntoView(false);
|
||||
button.click();
|
||||
});
|
||||
|
||||
renderUpdatesOnlyFilter({show: false});
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -410,7 +413,7 @@ function checkUpdateAll() {
|
|||
btnApply.classList.add('hidden');
|
||||
noUpdates.classList.add('hidden');
|
||||
|
||||
Promise.all($$('.updatable').map(checkUpdate))
|
||||
Promise.all($$('.updatable:not(.can-update)').map(checkUpdate))
|
||||
.then(updatables => {
|
||||
btnCheck.disabled = false;
|
||||
const numUpdatable = updatables.filter(u => u).length;
|
||||
|
|
@ -418,6 +421,7 @@ function checkUpdateAll() {
|
|||
btnApply.classList.remove('hidden');
|
||||
btnApply.originalLabel = btnApply.originalLabel || btnApply.textContent;
|
||||
btnApply.textContent = btnApply.originalLabel + ` (${numUpdatable})`;
|
||||
renderUpdatesOnlyFilter({check: true});
|
||||
} else {
|
||||
noUpdates.classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
|
|
@ -436,7 +440,7 @@ function checkUpdateAll() {
|
|||
function checkUpdate(element) {
|
||||
$('.update-note', element).innerHTML = t('checkingForUpdate');
|
||||
$('.check-update', element).title = '';
|
||||
element.classList.remove('checking-update', 'no-update', 'can-update', 'update-problem');
|
||||
element.classList.remove('checking-update', 'no-update', 'update-problem');
|
||||
element.classList.add('checking-update');
|
||||
return new Updater(element).run(); // eslint-disable-line no-use-before-define
|
||||
}
|
||||
|
|
@ -506,6 +510,7 @@ class Updater {
|
|||
this.element.classList.add('can-update');
|
||||
this.element.updatedCode = json;
|
||||
$('.update-note', this.element).innerHTML = '';
|
||||
$('#onlyUpdates').classList.remove('hidden');
|
||||
} else {
|
||||
this.element.classList.add('no-update');
|
||||
this.element.classList.toggle('update-problem', Boolean(message));
|
||||
|
|
@ -513,6 +518,10 @@ class Updater {
|
|||
if (newUI.enabled) {
|
||||
$('.check-update', this.element).title = message;
|
||||
}
|
||||
// don't hide if check-all is running
|
||||
if (!$('#check-all-updates').disabled) {
|
||||
$('#onlyUpdates').classList.toggle('hidden', !$('.can-update'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -537,6 +546,28 @@ class Updater {
|
|||
}
|
||||
|
||||
|
||||
function renderUpdatesOnlyFilter({show, check} = {}) {
|
||||
const numUpdatable = $$('.can-update').length;
|
||||
const canUpdate = numUpdatable > 0;
|
||||
const checkbox = $('#onlyUpdates input');
|
||||
show = show !== undefined ? show : canUpdate;
|
||||
check = check !== undefined ? show && check : checkbox.checked && canUpdate;
|
||||
|
||||
$('#onlyUpdates').classList.toggle('hidden', !show);
|
||||
checkbox.checked = check;
|
||||
checkbox.dispatchEvent(new Event('change'));
|
||||
|
||||
const btnApply = $('#apply-all-updates');
|
||||
if (!btnApply.matches('.hidden')) {
|
||||
if (canUpdate) {
|
||||
btnApply.textContent = btnApply.originalLabel + ` (${numUpdatable})`;
|
||||
} else {
|
||||
btnApply.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function searchStyles({immediately, container}) {
|
||||
const query = $('#search').value.toLocaleLowerCase();
|
||||
if (query == (searchStyles.lastQuery || '') && !immediately && !container) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user