further fine tune "Filter lists" pane (b60c06f3)

This commit is contained in:
Raymond Hill 2018-04-09 15:45:25 -04:00
parent 26c2320e46
commit 47598d4499
No known key found for this signature in database
GPG key ID: 25E1490B761470C2
3 changed files with 42 additions and 39 deletions

View file

@ -36,81 +36,79 @@ body.hideUnused #listsOfBlockedHostsPrompt:before {
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
} }
#lists > .groupEntry .geDetails { .groupEntry .geDetails {
cursor: pointer; cursor: pointer;
} }
#lists > .groupEntry .geDetails:before { .groupEntry:not([data-groupkey="user"]) .geDetails:before {
color: #888; color: #888;
content: '\2212 '; content: '\2212 ';
} }
#lists > .groupEntry.hideUnused .geDetails:before { .groupEntry.hideUnused:not([data-groupkey="user"]) .geDetails:before {
content: '+ '; content: '+ ';
} }
#lists > .groupEntry .geName { .groupEntry .geName {
pointer-events: none; pointer-events: none;
} }
#lists > .groupEntry .geCount { .groupEntry .geCount {
font-size: 90%; font-size: 90%;
pointer-events: none; pointer-events: none;
} }
#lists > .groupEntry > ul { .groupEntry > ul {
margin: 0.25em 0 0 0; margin: 0.25em 0 0 0;
padding-left: 1em; padding-left: 1em;
} }
li.listEntry { .listEntry {
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
padding: 0.2em 0; padding: 0.2em 0;
white-space: nowrap; white-space: nowrap;
} }
body[dir="rtl"] li.listEntry { .groupEntry:not([data-groupkey="user"]) .listEntry.unused {
}
li.listEntry.unused {
display: none; display: none;
} }
li.listEntry > * { .listEntry > * {
margin-right: 0.5em; margin-right: 0.5em;
unicode-bidi: embed; unicode-bidi: embed;
} }
li.listEntry.toRemove > input[type="checkbox"] { .listEntry.toRemove > input[type="checkbox"] {
visibility: hidden; visibility: hidden;
} }
li.listEntry.toRemove > a.content { .listEntry.toRemove > a.content {
text-decoration: line-through; text-decoration: line-through;
} }
li.listEntry > .fa { .listEntry > .fa {
color: inherit; color: inherit;
display: none; display: none;
font-size: 110%; font-size: 110%;
opacity: 0.5; opacity: 0.5;
vertical-align: baseline; vertical-align: baseline;
} }
li.listEntry > a.towiki { .listEntry > a.towiki {
display: inline-block; display: inline-block;
} }
li.listEntry > a.fa:hover { .listEntry > a.fa:hover {
opacity: 1; opacity: 1;
} }
li.listEntry.support > a.support { .listEntry.support > a.support {
display: inline-block; display: inline-block;
} }
li.listEntry > a.remove, .listEntry > a.remove,
li.listEntry > a.remove:visited { .listEntry > a.remove:visited {
color: darkred; color: darkred;
} }
li.listEntry.external > a.remove { .listEntry.external > a.remove {
display: inline-block; display: inline-block;
} }
li.listEntry.mustread > a.mustread { .listEntry.mustread > a.mustread {
display: inline-block; display: inline-block;
} }
li.listEntry.mustread > a.mustread:hover { .listEntry.mustread > a.mustread:hover {
color: mediumblue; color: mediumblue;
} }
li.listEntry > .counts { .listEntry > .counts {
display: none; display: none;
font-size: smaller; font-size: smaller;
} }
li.listEntry > input[type="checkbox"]:checked ~ .counts { .listEntry > input[type="checkbox"]:checked ~ .counts {
display: inline; display: inline;
} }
.dim { .dim {
@ -129,46 +127,46 @@ body[dir=rtl] #buttonApply {
#buttonApply.disabled { #buttonApply.disabled {
display: none; display: none;
} }
li.listEntry span.status { .listEntry span.status {
color: #444; color: #444;
cursor: default; cursor: default;
display: none; display: none;
} }
li.listEntry span.status:hover { .listEntry span.status:hover {
opacity: 1; opacity: 1;
} }
li.listEntry span.unsecure { .listEntry span.unsecure {
color: darkred; color: darkred;
} }
li.listEntry.unsecure > input[type="checkbox"]:checked ~ span.unsecure { .listEntry.unsecure > input[type="checkbox"]:checked ~ span.unsecure {
display: inline-block; display: inline-block;
} }
li.listEntry span.failed { .listEntry span.failed {
color: darkred; color: darkred;
} }
li.listEntry.failed span.failed { .listEntry.failed span.failed {
display: inline-block; display: inline-block;
} }
li.listEntry span.cache { .listEntry span.cache {
cursor: pointer; cursor: pointer;
} }
li.listEntry.cached:not(.obsolete) > input[type="checkbox"]:checked ~ span.cache { .listEntry.cached:not(.obsolete) > input[type="checkbox"]:checked ~ span.cache {
display: inline-block; display: inline-block;
} }
li.listEntry span.obsolete { .listEntry span.obsolete {
color: hsl(36, 100%, 40%); color: hsl(36, 100%, 40%);
} }
body:not(.updating) li.listEntry.obsolete > input[type="checkbox"]:checked ~ span.obsolete { body:not(.updating) .listEntry.obsolete > input[type="checkbox"]:checked ~ span.obsolete {
display: inline-block; display: inline-block;
} }
li.listEntry span.updating { .listEntry span.updating {
transform-origin: 50% 46%; transform-origin: 50% 46%;
} }
body.updating li.listEntry.obsolete > input[type="checkbox"]:checked ~ span.updating { body.updating .listEntry.obsolete > input[type="checkbox"]:checked ~ span.updating {
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
display: inline-block; display: inline-block;
} }
li.listEntry.toImport > input[type="checkbox"] ~ textarea { .listEntry.toImport > input[type="checkbox"] ~ textarea {
border: 1px solid #ccc; border: 1px solid #ccc;
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
@ -180,6 +178,6 @@ li.listEntry.toImport > input[type="checkbox"] ~ textarea {
white-space: pre; white-space: pre;
width: calc(100% - 4em); width: calc(100% - 4em);
} }
li.listEntry.toImport > input[type="checkbox"]:checked ~ textarea { .listEntry.toImport > input[type="checkbox"]:checked ~ textarea {
visibility: visible; visibility: visible;
} }

View file

@ -234,6 +234,10 @@ var renderFilterLists = function(soft) {
// Before all, set context vars // Before all, set context vars
listDetails = details; listDetails = details;
// "My filters" will now sit in its own group. The following code
// ensures smooth transition.
listDetails.available['user-filters'].group = 'user';
// Incremental rendering: this will allow us to easily discard unused // Incremental rendering: this will allow us to easily discard unused
// DOM list entries. // DOM list entries.
uDom('#lists .listEntries .listEntry[data-listkey]').addClass('discard'); uDom('#lists .listEntries .listEntry[data-listkey]').addClass('discard');
@ -246,6 +250,7 @@ var renderFilterLists = function(soft) {
groups = groupsFromLists(details.available), groups = groupsFromLists(details.available),
liGroup, i, groupKey, liGroup, i, groupKey,
groupKeys = [ groupKeys = [
'user',
'default', 'default',
'ads', 'ads',
'privacy', 'privacy',

View file

@ -450,7 +450,7 @@
// User filter list. // User filter list.
newAvailableLists[this.userFiltersPath] = { newAvailableLists[this.userFiltersPath] = {
group: 'default', group: 'user',
title: vAPI.i18n('1pPageName') title: vAPI.i18n('1pPageName')
}; };