diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 32ce97df..338f4bcb 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -336,7 +336,11 @@ }, "exportLabel": { "message": "Export", - "description": "Label for the button to export a style ('edit' page) or all styles ('manage' page)" + "description": "Label for the button to export a style ('edit' page) or bulk styles ('manage' page)" + }, + "exportAllLabel": { + "message": "Export All", + "description": "Label for the button to export all styles ('manage' page)" }, "externalFeedback": { "message": "Feedback", diff --git a/manage.html b/manage.html index 5d2508c1..9b77106c 100644 --- a/manage.html +++ b/manage.html @@ -243,16 +243,6 @@ -
- - - -
- - -
-
- + + + + + + + +
+ + + +
+ + +
+
+ +
+ + + +
+ + +
+
+ diff --git a/manage/bulk-actions.js b/manage/bulk-actions.js index ead18516..eb490992 100644 --- a/manage/bulk-actions.js +++ b/manage/bulk-actions.js @@ -11,6 +11,14 @@ const bulk = { $('#bulk-actions-apply').onclick = bulk.handleApply; }, + // Update all button in header + updateAll: () => { + const toggle = $('#toggle-all-filters'); + toggle.checked = false; // ensure click will check all styles + toggle.click(); + checkUpdateBulk(); + }, + checkApply: () => { const checkedEntries = $$('.entry-filter-toggle').filter(entry => entry.checked); if (checkedEntries.length > 0 && $('#bulk-actions-select').value !== '') { diff --git a/manage/manage-actions.js b/manage/manage-actions.js index b86e1db4..cb58dfd8 100644 --- a/manage/manage-actions.js +++ b/manage/manage-actions.js @@ -71,6 +71,12 @@ function initGlobalEvents() { openURL({url: URLS.configureCommands}); }; + $('#update-all').onclick = event => { + event.preventDefault(); + handleEvent.toggleBulkActions({hidden: false}); + bulk.updateAll(); + } + $$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external)); document.addEventListener('visibilitychange', onVisibilityChange); diff --git a/manage/manage.css b/manage/manage.css index 7d19995b..7f64692a 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -9,6 +9,7 @@ --header-bg-color: #333; --header-text-color: #ddd; + --header-text-hover-color: hsla(180, 100%, 20%, 1); --header-icon-color: #888; --header-icon-hover-color: hsla(180, 99%, 58%, 1); @@ -152,7 +153,7 @@ a:hover { #main-header a:hover, #main-actions a:hover svg, -#manage-backups:hover svg { +.manage-backups:hover svg { color: var(--header-icon-hover-color); fill: var(--header-icon-hover-color); } @@ -795,11 +796,11 @@ details.applies-to-extra[open] { } /* export/import buttons */ -#manage-backups { +.manage-backups { position: relative; } -#manage-backups .dropdown { +.manage-backups .dropdown { display: none; position: absolute; background-color: #f9f9f9; @@ -808,7 +809,7 @@ details.applies-to-extra[open] { z-index: 101; } -#manage-backups .dropdown a { +.manage-backups .dropdown a { color: black; padding: 8px; font-size: 12px; @@ -816,12 +817,13 @@ details.applies-to-extra[open] { display: block; } -#manage-backups .dropdown a:hover { +#main-header .manage-backups .dropdown a:hover { /* background-color: #f2f2f2 */ - background-color: #e9e9e9 + background-color: #e9e9e9; + color: var(--header-text-hover-color); } -#manage-backups:hover .dropdown { +.manage-backups:hover .dropdown { display: block; right: -20px; top: 99%; @@ -899,11 +901,11 @@ details.applies-to-extra[open] { width: 100%; height: auto; } - #manage-backups { + .manage-backups { display: inline-block; vertical-align: center; } - #manage-backups:hover .dropdown { + .manage-backups:hover .dropdown { display: block; left: -20px; right: auto;