diff --git a/_locales/en/messages.json b/_locales/en/messages.json index c2ec7d38..9df5f5e6 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -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" diff --git a/manage.css b/manage.css index c0a96fae..cd7ddd08 100644 --- a/manage.css +++ b/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; } diff --git a/manage.html b/manage.html index 8eb30b92..5257442f 100644 --- a/manage.html +++ b/manage.html @@ -129,17 +129,10 @@

-
- - -
-
- - -
-
- -
+ + + +

diff --git a/manage.js b/manage.js index b3f4fb0c..bd3befed 100644 --- a/manage.js +++ b/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) {