open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add filter toolbar indicator

Browse Source
This commit is contained in:
Rob Garrison 2018-12-08 12:39:35 -06:00
parent d2930e5e66
commit 8f87494dec
3 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
manage.html
View File

@ -370,12 +370,11 @@
<div id="installed" class="manage-col-entries"> <div id="installed" class="manage-col-entries">
<header class="entry-header"> <header class="entry-header">
<div class="entry-col header-filter center-text"> <div class="entry-col header-filter center-text tt-se" i18n-data-title="bulkActionsTooltip">
<a href="#" id="toggle-actions" class="tt-se" i18n-data-title="bulkActionsTooltip"> <span></span>
<svg class="svg-icon" width="20" height="20" viewBox="0 0 14 14"> <svg class="svg-icon" width="20" height="20" viewBox="0 0 14 14">
<path d="M6.42 7.58L2.92 3.5h8.75l-3.5 4.08v4.09c-1 0-1.75-.76-1.75-1.75V7.58z"/> <path d="M6.42 7.58L2.92 3.5h8.75l-3.5 4.08v4.09c-1 0-1.75-.76-1.75-1.75V7.58z"/>
</svg> </svg>
</a>
</div> </div>
<div class="entry-col header-id"> <div class="entry-col header-id">
<a href="#" class="sortable tt-se" data-type="order" i18n-data-title="sortLabel;injection order">#<span></span></a> <a href="#" class="sortable tt-se" data-type="order" i18n-data-title="sortLabel;injection order">#<span></span></a>

12
manage/manage-actions.js
View File

@ -77,7 +77,7 @@ function initGlobalEvents() {
el.removeAttribute('open'); el.removeAttribute('open');
}); });
// Close bulk actions // Close bulk actions
$('#tools-wrapper').classList.add('hidden'); handleEvent.toggleBulkActions({hidden: true});
} else if (event.which === 32 && event.target.classList.contains('checkmate')) { } else if (event.which === 32 && event.target.classList.contains('checkmate')) {
// pressing space toggles the containing checkbox // pressing space toggles the containing checkbox
$('input[type="checkbox"]', event.target).click(); $('input[type="checkbox"]', event.target).click();
@ -129,7 +129,7 @@ Object.assign(handleEvent, {
'.update': 'update', '.update': 'update',
'.entry-delete': 'delete', '.entry-delete': 'delete',
'.entry-configure-usercss': 'config', '.entry-configure-usercss': 'config',
'#toggle-actions': 'toggleBulkActions', '.header-filter': 'toggleBulkActions',
'.sortable': 'updateSort' '.sortable': 'updateSort'
}, },
@ -190,8 +190,10 @@ Object.assign(handleEvent, {
UI.addLabels(entry); UI.addLabels(entry);
}, },
toggleBulkActions() { toggleBulkActions({hidden}) {
$('#tools-wrapper').classList.toggle('hidden'); const tools = $('#tools-wrapper');
tools.classList.toggle('hidden', hidden);
$('.header-filter').classList.toggle('active', !tools.classList.contains('hidden'));
}, },
check(event, entry) { check(event, entry) {
@ -412,7 +414,7 @@ function updateBulkFilters({target}) {
if (!installed.dataset.total) return; if (!installed.dataset.total) return;
// ignore filter checkboxes // ignore filter checkboxes
if (target.type === 'checkbox' && !target.dataset.filter) { if (target.type === 'checkbox' && !target.dataset.filter) {
$('#tools-wrapper').classList.remove('hidden'); handleEvent.toggleBulkActions({hidden: false});
const bulk = $('#toggle-all-filters'); const bulk = $('#toggle-all-filters');
const state = target.checked; const state = target.checked;
const visibleEntries = $$('.entry-filter-toggle') const visibleEntries = $$('.entry-filter-toggle')

21
manage/manage.css
View File

@ -242,6 +242,26 @@ a:hover {
content: '▾'; 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 { .entry-sort {
cursor: move; cursor: move;
} }
@ -464,6 +484,7 @@ img.target {
.targets details.applies-to-extra { .targets details.applies-to-extra {
margin-left: 4px; margin-left: 4px;
margin-top: 5px; margin-top: 5px;
cursor: pointer;
} }
details.applies-to-extra[open] { details.applies-to-extra[open] {