Manage: Make filter & backup containers collapsible
This commit is contained in:
Rob Garrison
tophf
parent
44ce51e54f
commit
db621b8657
|
|
@ -24,6 +24,8 @@ var prefs = new function Prefs() {
|
|||
'manage.onlyLocal.invert': false, // display only externally installed styles
|
||||
'manage.onlyUsercss.invert': false, // display only non-usercss (standard) styles
|
||||
// UI element state: expanded/collapsed
|
||||
'manage.backup.expanded': true,
|
||||
'manage.filters.expanded': true,
|
||||
'manage.options.expanded': true,
|
||||
// the new compact layout doesn't look good on Android yet
|
||||
'manage.newUI': !navigator.appVersion.includes('Android'),
|
||||
|
|
|
|||
17
manage.html
17
manage.html
|
|
@ -164,11 +164,8 @@
|
|||
<div id="header">
|
||||
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
|
||||
|
||||
<fieldset>
|
||||
|
||||
<legend id="filters">
|
||||
<span i18n-text="manageFilters"></span><span id="filters-stats"></span>
|
||||
</legend>
|
||||
<details id="filters" data-pref="manage.filters.expanded">
|
||||
<summary><h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2></summary>
|
||||
|
||||
<div class="filter-selection">
|
||||
<label>
|
||||
|
|
@ -237,7 +234,7 @@
|
|||
data-filter=":not(.not-matching)"
|
||||
data-filter-hide=".not-matching">
|
||||
|
||||
</fieldset>
|
||||
</details>
|
||||
|
||||
<p class="nowrap">
|
||||
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
|
||||
|
|
@ -254,7 +251,7 @@
|
|||
<button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<p id="add-style-wrapper">
|
||||
<a href="edit.html">
|
||||
<button id="add-style-label" i18n-text="addStyleLabel"></button>
|
||||
</a>
|
||||
|
|
@ -316,14 +313,14 @@
|
|||
|
||||
</details>
|
||||
|
||||
<div id="backup">
|
||||
<h2 id="backup-title" i18n-text="backupButtons"></h2>
|
||||
<details id="backup" data-pref="manage.backup.expanded">
|
||||
<summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
|
||||
<span id="backup-message" i18n-text="backupMessage"></span>
|
||||
<p>
|
||||
<button id="file-all-styles" i18n-text="bckpInstStyles"></button>
|
||||
<button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<p id="manage-text" i18n-html="manageText"></p>
|
||||
|
||||
|
|
|
|||
|
|
@ -76,6 +76,14 @@ onDOMready().then(onBackgroundReady).then(() => {
|
|||
}
|
||||
});
|
||||
|
||||
// Adjust width after selects are visible
|
||||
prefs.subscribe(['manage.filters.expanded'], () => {
|
||||
const el = $('#filters');
|
||||
if (el.open) {
|
||||
$$('select', el).forEach(select => select.adjustWidth());
|
||||
}
|
||||
});
|
||||
|
||||
filterOnChange({forceRefilter: true});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@ select {
|
|||
|
||||
#header h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .3em;
|
||||
}
|
||||
|
||||
#header a[href^="edit"] {
|
||||
|
|
@ -259,9 +260,24 @@ select {
|
|||
}
|
||||
|
||||
/* collapsibles */
|
||||
#header details:not(#filters),
|
||||
#add-style-wrapper {
|
||||
padding-bottom: .7em;
|
||||
}
|
||||
|
||||
#add-style-wrapper,
|
||||
#options :last-child,
|
||||
#backup :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#header details:not([open]),
|
||||
#header details:not([open]) h2 {
|
||||
margin-bottom: -.25em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#header details[open] summary {
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
|
||||
#header summary {
|
||||
|
|
@ -269,7 +285,6 @@ select {
|
|||
margin-left: -13px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#header summary h2 {
|
||||
|
|
@ -321,6 +336,7 @@ select {
|
|||
|
||||
.filter-selection {
|
||||
position: relative;
|
||||
left: -9px;
|
||||
}
|
||||
|
||||
#header label {
|
||||
|
|
@ -356,6 +372,7 @@ select {
|
|||
max-width: 100%;
|
||||
padding-left: 4px;
|
||||
padding-right: 14px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.firefox .filter-selection select {
|
||||
|
|
@ -381,13 +398,13 @@ select {
|
|||
left: 16px;
|
||||
}
|
||||
|
||||
fieldset > label,
|
||||
fieldset > .filter-selection {
|
||||
#filters label,
|
||||
#filters .filter-selection {
|
||||
transition: background-color .25s;
|
||||
}
|
||||
|
||||
fieldset > label:hover,
|
||||
fieldset > .filter-selection:hover {
|
||||
#filters label:hover,
|
||||
#filters .filter-selection:hover {
|
||||
background-color: hsla(0, 0%, 50%, .2);
|
||||
}
|
||||
|
||||
|
|
@ -746,26 +763,18 @@ input[id^="manage.newUI"] {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-width: 1px;
|
||||
border-radius: 6px;
|
||||
margin: 1em 0;
|
||||
min-width: 0;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
fieldset > input,
|
||||
fieldset > label {
|
||||
#filters input,
|
||||
#filters label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#header fieldset > label {
|
||||
#filters label {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#header fieldset > label input[type="checkbox"]:not(.slider),
|
||||
#header fieldset > label input[type="checkbox"]:not(.slider):checked + .svg-icon.checked{
|
||||
#filters label input[type="checkbox"]:not(.slider),
|
||||
#filters label input[type="checkbox"]:not(.slider):checked + .svg-icon.checked{
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -773,23 +782,24 @@ fieldset > label {
|
|||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
#filters.active {
|
||||
.active #filters-stats {
|
||||
background-color: darkcyan;
|
||||
border-color: darkcyan;
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
font-weight: normal;
|
||||
padding: 2px 5px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
#filters:not(.active) #filters-stats {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#filters-stats::before {
|
||||
content: ": ";
|
||||
}
|
||||
|
||||
#search {
|
||||
width: calc(100% - 4px);
|
||||
margin: 0.25rem 4px 0;
|
||||
margin: 0.25rem 0 0;
|
||||
border-radius: 0.25rem;
|
||||
padding-left: 0.25rem;
|
||||
border-width: 1px;
|
||||
|
|
@ -1005,8 +1015,7 @@ fieldset > label {
|
|||
margin-right: 1em;
|
||||
}
|
||||
|
||||
#backup p,
|
||||
#header fieldset {
|
||||
#backup p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -1047,12 +1056,6 @@ fieldset > label {
|
|||
padding-left: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-width: none;
|
||||
margin-top: 0;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
#header h1,
|
||||
#header h2,
|
||||
#header h3,
|
||||
|
|
@ -1082,21 +1085,10 @@ fieldset > label {
|
|||
|
||||
.newUI #header > *:not(h1),
|
||||
.newUI #newUIoptions,
|
||||
#newUIoptions > *,
|
||||
fieldset label {
|
||||
#newUIoptions > * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0 0 1em;
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#header label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user