diff --git a/manage.html b/manage.html
index 2c78bc49..9953aabc 100644
--- a/manage.html
+++ b/manage.html
@@ -225,10 +225,50 @@
-
+
-
-
-
-
-
-
-
-
-
-
diff --git a/manage/filters.js b/manage/filters.js
index e22a4472..a4072d96 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -111,7 +111,7 @@ function init() {
if (!filtersSelector.hide) {
return;
}
- for (const el of $$('#manage-bulk-actions [data-filter]')) {
+ for (const el of $$('#tools-wrapper [data-filter]')) {
let value;
if (el.type === 'checkbox' && el.checked) {
value = el.checked = false;
@@ -142,7 +142,7 @@ function filterOnChange({target: el, forceRefilter}) {
}
el.lastValue = value;
}
- const enabledFilters = $$('#manage-bulk-actions [data-filter]').filter(el => getValue(el));
+ const enabledFilters = $$('#tools-wrapper [data-filter]').filter(el => getValue(el));
const buildFilter = hide =>
(hide ? '' : '.entry.hidden') +
[...enabledFilters.map(el =>
diff --git a/manage/incremental-search.js b/manage/incremental-search.js
index 67dfcb77..799d430d 100644
--- a/manage/incremental-search.js
+++ b/manage/incremental-search.js
@@ -83,7 +83,7 @@ onDOMready().then(() => {
// focus search field on "/" key
if (key === '/' || !key && k === 191 && !event.shiftKey) {
event.preventDefault();
- $('#manage-bulk-actions').classList.remove('hidden');
+ $('#tools-wrapper').classList.remove('hidden');
$('#search').focus();
return;
}
diff --git a/manage/manage-actions.js b/manage/manage-actions.js
index 942fd64c..0d9cfb17 100644
--- a/manage/manage-actions.js
+++ b/manage/manage-actions.js
@@ -79,7 +79,7 @@ function initGlobalEvents() {
el.removeAttribute('open');
});
// Close bulk actions
- $('#manage-bulk-actions').classList.add('hidden');
+ $('#tools-wrapper').classList.add('hidden');
} else if (event.which === 32 && event.target.classList.contains('checkmate')) {
// pressing space toggles the containing checkbox
$('input[type="checkbox"]', event.target).click();
@@ -191,7 +191,7 @@ Object.assign(handleEvent, {
},
toggleBulkActions() {
- $('#manage-bulk-actions').classList.toggle('hidden');
+ $('#tools-wrapper').classList.toggle('hidden');
},
check(event, entry) {
@@ -426,7 +426,7 @@ function updateBulkFilters({target}) {
if (!installed.dataset.total) return;
// ignore filter checkboxes
if (target.type === 'checkbox' && !target.dataset.filter) {
- $('#manage-bulk-actions').classList.remove('hidden');
+ $('#tools-wrapper').classList.remove('hidden');
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 405e4314..c96c8370 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -2,7 +2,7 @@
--icon-size: 20px;
--narrow-column: 60px;
--header-height: 40px;
- --bulk-action-height: 60px;
+ --toolbar-height: 35px;
--entry-header-height: 25px;
--onoffswitch-width: 60px;
}
@@ -251,15 +251,16 @@ body.dragging .entry:not(.dragging) .entry-name:before {
margin-left: 2px;
border-radius: 4px;
font-size: .8em;
+ text-transform: lowercase;
}
-.entry-label.usercss {
+.entry-label[data-label="usercss"] {
background-color: hsla(180, 100%, 20%, 1);
color: white;
text-transform: lowercase;
}
-.entry-label.disabled {
+.entry-label[data-label="disabled"] {
background: rgba(128, 128, 128, .2);
color: #222;
}
@@ -509,25 +510,25 @@ details.applies-to-extra[open] {
}
/* bulk actions */
-#manage-bulk-actions {
+#tools-wrapper {
background: #ddd;
width: 100vw;
position: fixed;
top: var(--header-height);
left: 0;
- height: var(--bulk-action-height);
+ height: var(--toolbar-height);
padding: 4px 16px;
z-index: 100;
}
-#manage-bulk-actions:not(.hidden) + #installed {
- margin-top: calc(var(--header-height) + var(--bulk-action-height) + var(--entry-header-height));
+#tools-wrapper:not(.hidden) + #installed {
+ margin-top: calc(var(--header-height) + var(--toolbar-height) + var(--entry-header-height));
}
-#manage-bulk-actions:not(.hidden) + #installed .entry-header {
- top: calc(var(--header-height) + var(--bulk-action-height));
+#tools-wrapper:not(.hidden) + #installed .entry-header {
+ top: calc(var(--header-height) + var(--toolbar-height));
}
-#manage-bulk-actions .select-resizer {
+#tools-wrapper .select-resizer {
background: #fff;
}
@@ -535,9 +536,10 @@ details.applies-to-extra[open] {
padding: 2px 10px;
display: flex;
align-items: center;
+ justify-content: space-between;
}
-#filters,
+#filters-wrapper,
#bulk-filter-count {
margin-right: 20px;
}
@@ -572,25 +574,9 @@ details.applies-to-extra[open] {
}
-#filters > label {
+#filters-wrapper filter-selection {
display: flex;
align-items: center;
- left: -9px;
- padding: 2px 0 2px 24px;
-}
-
-#filters > label input[type="checkbox"]:not(.slider),
-#filters > label input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
- top: 2px;
- left: 8px;
-}
-
-#filters > label:hover {
- background-color: hsla(0, 0%, 50%, .4);
-}
-
-#filters {
- border: 1px solid transparent;
}
.active #filters-stats,