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

Cleanup UI

Browse Source
This commit is contained in:
Rob Garrison 2018-11-28 22:21:13 -06:00
parent 17e1860ba6
commit cf695c73d6
5 changed files with 77 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
manage.html
View File

@ -225,10 +225,50 @@
</span> </span>
</h1> </h1>
<div id="manage-bulk-actions" class="hidden"> <div id="tools-wrapper" class="hidden">
<div class="manage-row"> <div class="manage-row">
<span id="filters">
<span id="bulk-actions">
<label class="checkmate toggle-all" tabindex="0">
<input id="toggle-all-filters" type="checkbox">
<svg class="svg-icon checkbox" viewBox="0 0 14 14">
<path class="circle" d="M7 1.2a5.8 5.8 0 1 0 0 11.6A5.8 5.8 0 0 0 7 1.2zm0 10.5a4.7 4.7 0 0 1 0-9.4 4.7 4.7 0 0 1 0 9.4z"/>
<path class="checkmark" d="M9.6 4.5L5.8 8.3 4.3 6.8l-.8.8L5.8 10l4.7-4.7-.9-.8z"/>
<path class="indeterminate" d="M3.5 6.3h7v1.4h-7z"/>
</svg>
</label>
<span id="bulk-filter-count"></span>
<span i18n-text="bulkActions"></span>
<span class="select-resizer bulk-actions-select">
<select id="bulk-actions" i18n-title="manageOnlyLocalTooltip">
<option i18n-text="bulkActionsSelect" value=""></option>
<option i18n-text="enableStyleLabel" value="enable"></option>
<option i18n-text="disableStyleLabel" value="disable"></option>
<option i18n-text="exportLabel" value="export"></option>
<option i18n-text="checkForUpdate" value="update"></option>
<option i18n-text="genericResetLabel" value="reset"></option>
<option i18n-text="deleteStyleLabel" value="delete"></option>
</select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</span>
<button id="bulk-actions-apply"i18n-text="bulkActionsApply"></button>
<svg class="svg-icon busy hidden" viewBox="0 0 24 24">
<path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6 7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1 18 17c0 3.25-2.75 6-6 6zm1-9.87v7.74c1.7-.46 3-2.04 3-3.87s-1.3-3.41-3-3.87zM3.13 13c.46 1.7 2.04 3 3.87 3s3.41-1.3 3.87-3H3.13zm10-2h7.74c-.46-1.7-2.05-3-3.87-3s-3.41 1.3-3.87 3zM11 3.13C9.3 3.59 8 5.18 8 7s1.3 3.41 3 3.87V3.13z"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 0 0" dur="1s" repeatCount="indefinite"/>
</svg>
</span>
<span id="search-wrapper">
<input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
data-filter=":not(.not-matching)"
data-filter-hide=".not-matching">
<a href="#" id="search-help" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</span>
<span id="filters-wrapper">
<strong i18n-text="manageFilters"></strong> <strong i18n-text="manageFilters"></strong>
<span class="filter-selection"> <span class="filter-selection">
<label class="checkmate" tabindex="0"> <label class="checkmate" tabindex="0">
@ -287,55 +327,25 @@
</span> </span>
</span> </span>
<label id="only-updates" class="hidden checkmate" tabindex="0"> <span class="filter-selection">
<input type="checkbox" <label id="only-updates" class="hidden checkmate" tabindex="0">
data-filter=".can-update, .update-problem, .update-done" <input type="checkbox"
data-filter-hide=":not(.updatable):not(.update-done), data-filter=".can-update, .update-problem, .update-done"
.no-update:not(.update-problem), data-filter-hide=":not(.updatable):not(.update-done),
.updatable:not(.can-update):not(.update-problem):not(.update-done)"> .no-update:not(.update-problem),
<svg class="svg-icon checkbox" viewBox="0 0 24 24"> .updatable:not(.can-update):not(.update-problem):not(.update-done)">
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/> <svg class="svg-icon checkbox" viewBox="0 0 24 24">
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/> <path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
</svg> <path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
<span i18n-text="manageOnlyUpdates"></span> </svg>
</label> <span i18n-text="manageOnlyUpdates"></span>
</label>
</span>
</span> </span>
<span id="search-wrapper">
<input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
data-filter=":not(.not-matching)"
data-filter-hide=".not-matching">
<a href="#" id="search-help" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</span>
</div> </div>
<div class="manage-row">
<label class="checkmate toggle-all" tabindex="0">
<input id="toggle-all-filters" type="checkbox">
<svg class="svg-icon checkbox" viewBox="0 0 14 14">
<path class="circle" d="M7 1.2a5.8 5.8 0 1 0 0 11.6A5.8 5.8 0 0 0 7 1.2zm0 10.5a4.7 4.7 0 0 1 0-9.4 4.7 4.7 0 0 1 0 9.4z"/>
<path class="checkmark" d="M9.6 4.5L5.8 8.3 4.3 6.8l-.8.8L5.8 10l4.7-4.7-.9-.8z"/>
<path class="indeterminate" d="M3.5 6.3h7v1.4h-7z"/>
</svg>
</label>
<span id="bulk-filter-count"></span>
<span i18n-text="bulkActions"></span>
<span class="select-resizer bulk-actions-select">
<select id="bulk-actions" i18n-title="manageOnlyLocalTooltip">
<option i18n-text="bulkActionsSelect" value=""></option>
<option i18n-text="enableStyleLabel" value="enable"></option>
<option i18n-text="disableStyleLabel" value="disable"></option>
<option i18n-text="exportLabel" value="export"></option>
<option i18n-text="checkForUpdate" value="update"></option>
<option i18n-text="genericResetLabel" value="reset"></option>
<option i18n-text="deleteStyleLabel" value="delete"></option>
</select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</span>
<button id="bulk-actions-apply"i18n-text="bulkActionsApply"></button>
</div>
<div style="display: none"> <div style="display: none">
<!-- placeholders --> <!-- placeholders -->

4
manage/filters.js
View File

@ -111,7 +111,7 @@ function init() {
if (!filtersSelector.hide) { if (!filtersSelector.hide) {
return; return;
} }
for (const el of $$('#manage-bulk-actions [data-filter]')) { for (const el of $$('#tools-wrapper [data-filter]')) {
let value; let value;
if (el.type === 'checkbox' && el.checked) { if (el.type === 'checkbox' && el.checked) {
value = el.checked = false; value = el.checked = false;
@ -142,7 +142,7 @@ function filterOnChange({target: el, forceRefilter}) {
} }
el.lastValue = value; 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 => const buildFilter = hide =>
(hide ? '' : '.entry.hidden') + (hide ? '' : '.entry.hidden') +
[...enabledFilters.map(el => [...enabledFilters.map(el =>

2
manage/incremental-search.js
View File

@ -83,7 +83,7 @@ onDOMready().then(() => {
// focus search field on "/" key // focus search field on "/" key
if (key === '/' || !key && k === 191 && !event.shiftKey) { if (key === '/' || !key && k === 191 && !event.shiftKey) {
event.preventDefault(); event.preventDefault();
$('#manage-bulk-actions').classList.remove('hidden'); $('#tools-wrapper').classList.remove('hidden');
$('#search').focus(); $('#search').focus();
return; return;
} }

6
manage/manage-actions.js
View File

@ -79,7 +79,7 @@ function initGlobalEvents() {
el.removeAttribute('open'); el.removeAttribute('open');
}); });
// Close bulk actions // Close bulk actions
$('#manage-bulk-actions').classList.add('hidden'); $('#tools-wrapper').classList.add('hidden');
} 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();
@ -191,7 +191,7 @@ Object.assign(handleEvent, {
}, },
toggleBulkActions() { toggleBulkActions() {
$('#manage-bulk-actions').classList.toggle('hidden'); $('#tools-wrapper').classList.toggle('hidden');
}, },
check(event, entry) { check(event, entry) {
@ -426,7 +426,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) {
$('#manage-bulk-actions').classList.remove('hidden'); $('#tools-wrapper').classList.remove('hidden');
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')

42
manage/manage.css
View File

@ -2,7 +2,7 @@
--icon-size: 20px; --icon-size: 20px;
--narrow-column: 60px; --narrow-column: 60px;
--header-height: 40px; --header-height: 40px;
--bulk-action-height: 60px; --toolbar-height: 35px;
--entry-header-height: 25px; --entry-header-height: 25px;
--onoffswitch-width: 60px; --onoffswitch-width: 60px;
} }
@ -251,15 +251,16 @@ body.dragging .entry:not(.dragging) .entry-name:before {
margin-left: 2px; margin-left: 2px;
border-radius: 4px; border-radius: 4px;
font-size: .8em; font-size: .8em;
text-transform: lowercase;
} }
.entry-label.usercss { .entry-label[data-label="usercss"] {
background-color: hsla(180, 100%, 20%, 1); background-color: hsla(180, 100%, 20%, 1);
color: white; color: white;
text-transform: lowercase; text-transform: lowercase;
} }
.entry-label.disabled { .entry-label[data-label="disabled"] {
background: rgba(128, 128, 128, .2); background: rgba(128, 128, 128, .2);
color: #222; color: #222;
} }
@ -509,25 +510,25 @@ details.applies-to-extra[open] {
} }
/* bulk actions */ /* bulk actions */
#manage-bulk-actions { #tools-wrapper {
background: #ddd; background: #ddd;
width: 100vw; width: 100vw;
position: fixed; position: fixed;
top: var(--header-height); top: var(--header-height);
left: 0; left: 0;
height: var(--bulk-action-height); height: var(--toolbar-height);
padding: 4px 16px; padding: 4px 16px;
z-index: 100; z-index: 100;
} }
#manage-bulk-actions:not(.hidden) + #installed { #tools-wrapper:not(.hidden) + #installed {
margin-top: calc(var(--header-height) + var(--bulk-action-height) + var(--entry-header-height)); margin-top: calc(var(--header-height) + var(--toolbar-height) + var(--entry-header-height));
} }
#manage-bulk-actions:not(.hidden) + #installed .entry-header { #tools-wrapper:not(.hidden) + #installed .entry-header {
top: calc(var(--header-height) + var(--bulk-action-height)); top: calc(var(--header-height) + var(--toolbar-height));
} }
#manage-bulk-actions .select-resizer { #tools-wrapper .select-resizer {
background: #fff; background: #fff;
} }
@ -535,9 +536,10 @@ details.applies-to-extra[open] {
padding: 2px 10px; padding: 2px 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
} }
#filters, #filters-wrapper,
#bulk-filter-count { #bulk-filter-count {
margin-right: 20px; margin-right: 20px;
} }
@ -572,25 +574,9 @@ details.applies-to-extra[open] {
} }
#filters > label { #filters-wrapper filter-selection {
display: flex; display: flex;
align-items: center; 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, .active #filters-stats,