diff --git a/manage.html b/manage.html index 756e2c27..523b37f3 100644 --- a/manage.html +++ b/manage.html @@ -370,12 +370,11 @@
-
- - - - - +
+ + + +
# diff --git a/manage/manage-actions.js b/manage/manage-actions.js index 6a36f551..6e5f9886 100644 --- a/manage/manage-actions.js +++ b/manage/manage-actions.js @@ -77,7 +77,7 @@ function initGlobalEvents() { el.removeAttribute('open'); }); // Close bulk actions - $('#tools-wrapper').classList.add('hidden'); + handleEvent.toggleBulkActions({hidden: true}); } else if (event.which === 32 && event.target.classList.contains('checkmate')) { // pressing space toggles the containing checkbox $('input[type="checkbox"]', event.target).click(); @@ -129,7 +129,7 @@ Object.assign(handleEvent, { '.update': 'update', '.entry-delete': 'delete', '.entry-configure-usercss': 'config', - '#toggle-actions': 'toggleBulkActions', + '.header-filter': 'toggleBulkActions', '.sortable': 'updateSort' }, @@ -190,8 +190,10 @@ Object.assign(handleEvent, { UI.addLabels(entry); }, - toggleBulkActions() { - $('#tools-wrapper').classList.toggle('hidden'); + toggleBulkActions({hidden}) { + const tools = $('#tools-wrapper'); + tools.classList.toggle('hidden', hidden); + $('.header-filter').classList.toggle('active', !tools.classList.contains('hidden')); }, check(event, entry) { @@ -412,7 +414,7 @@ function updateBulkFilters({target}) { if (!installed.dataset.total) return; // ignore filter checkboxes if (target.type === 'checkbox' && !target.dataset.filter) { - $('#tools-wrapper').classList.remove('hidden'); + handleEvent.toggleBulkActions({hidden: false}); const bulk = $('#toggle-all-filters'); const state = target.checked; const visibleEntries = $$('.entry-filter-toggle') diff --git a/manage/manage.css b/manage/manage.css index 666871f9..98927a55 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -242,6 +242,26 @@ a:hover { content: '▾'; } +.header-filter span:before { + content: '►'; + color: #666; + position: relative; + left: 7px; +} + +.header-filter:hover span:before, +.header-filter:hover .svg-icon, +.header-filter.active svg { + transition: all .5s; + color: #000; + fill: #000; +} + +.header-filter.active span:before { + content: '▲'; + color: #000; +} + .entry-sort { cursor: move; } @@ -464,6 +484,7 @@ img.target { .targets details.applies-to-extra { margin-left: 4px; margin-top: 5px; + cursor: pointer; } details.applies-to-extra[open] {