Skip to content

Commit ae47544

Browse files
gorhillgorhill
committed
[mv3] Re-work dashboard: move list of rulesets in its own pane
Related issue: uBlockOrigin/uBOL-home#229 Add "Filter lists" pane in dashboard The DNR API now supports enabling 50 static rulesets put of a maximum of 100 (instead of 10 out of 50 originally). Thus given the potentially growing number of static rulesets, the available stock rulesets has been moved to its own pane, with the following improvements: - Support sublists - Support search Aditionally, "RU AdList: Counter" has been added as a stock ruleset. Other changes: - Do not re-evaluate regexes which failed validation - Better reduce `removeparam` rules
1 parent b4a5b41 commit ae47544

File tree

9 files changed

+566
-412
lines changed

9 files changed

+566
-412
lines changed

‎platform/mv3/extension/css/dashboard.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
}
3434

3535
body[data-pane="settings"] #dashboard-nav .tabButton[data-pane="settings"],
36+
body[data-pane="rulesets"] #dashboard-nav .tabButton[data-pane="rulesets"],
3637
body[data-pane="about"] #dashboard-nav .tabButton[data-pane="about"] {
3738
background-color: var(--dashboard-tab-active-surface);
3839
border-bottom: 3px solid var(--dashboard-tab-active-ink);
@@ -44,6 +45,7 @@ body > section {
4445
display: none;
4546
}
4647
body[data-pane="settings"] > section[data-pane="settings"],
48+
body[data-pane="rulesets"] > section[data-pane="rulesets"],
4749
body[data-pane="about"] > section[data-pane="about"] {
4850
display: block;
4951
}

‎platform/mv3/extension/css/settings.css

Lines changed: 56 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -79,92 +79,101 @@ h3[data-i18n="filteringMode0Name"]::first-letter {
7979
}
8080

8181
#lists {
82-
margin: 0.5em 0 0 0;
83-
padding: 0;
82+
padding-block-end: 8rem;
8483
}
85-
.groupEntry:not([data-groupkey="user"]) .geDetails::before {
86-
color: var(--ink-3);
87-
content: '\2212';
88-
font-family: monospace;
89-
font-size: large;
90-
margin-inline-end: 0.25em;
91-
-webkit-margin-end: 0.25em;
92-
}
93-
.groupEntry.hideUnused:not([data-groupkey="user"]) .geDetails::before {
94-
content: '+';
84+
.listEntry {
85+
display: flex;
86+
flex-direction: column;
9587
}
96-
.groupEntry {
97-
margin: 0.5em 0;
88+
.listEntry[data-nodeid] > .detailbar .listExpander {
89+
cursor: pointer;
90+
top: 2px;
9891
}
99-
.groupEntry .geDetails {
92+
.listEntry[data-role="rootnode"] > .detailbar,
93+
.listEntry[data-nodeid] > .detailbar .count {
10094
cursor: pointer;
10195
}
102-
.groupEntry .geName {
96+
.listEntry[data-role="rootnode"] > .detailbar > *:not(.listExpander) {
10397
pointer-events: none;
10498
}
105-
.groupEntry .geCount {
99+
.listEntry .detailbar .count {
100+
align-self: flex-end;
106101
color: var(--ink-3);
107-
font-size: 90%;
102+
font-size: small;
108103
pointer-events: none;
109104
}
110105
.listEntries {
111-
margin-inline-start: 0.6em;
112-
-webkit-margin-start: 0.6em;
106+
display: flex;
107+
flex-direction: column;
108+
}
109+
.listEntry:not([data-role="rootnode"]) > .listEntries {
110+
margin-inline-start: var(--checkbox-size);
113111
}
114-
.groupEntry:not([data-groupkey="user"]) .listEntry:not(.isDefault).unused {
112+
.listEntry.hideUnused > .listEntries > .listEntry:not(.isDefault):has(> .detailbar input:not(:checked)) {
115113
display: none;
116114
}
117-
118115
.listEntry.fromAdmin:has(input[disabled]:not(:checked)) {
119116
display: none;
120117
}
121118
.listEntry > * {
122-
margin-left: 0;
123-
margin-right: 0;
124119
unicode-bidi: embed;
125120
}
121+
.listEntry h3 {
122+
display: inline-block;
123+
margin: 0;
124+
}
125+
.listEntry > .detailbar {
126+
align-items: center;
127+
display: inline-flex;
128+
margin: calc(var(--default-gap-xsmall) / 2 + var(--default-gap-xxsmall) / 2) 0;
129+
white-space: nowrap;
130+
}
131+
.listEntry > .detailbar > *:not(:first-child) {
132+
margin-inline-start: var(--default-gap-xxsmall);
133+
}
134+
.listEntry[data-nodeid="default"] > .detailbar > .listExpander {
135+
display: none;
136+
}
137+
.listEntry > .detailbar > .listExpander svg {
138+
transform: rotate(180deg);
139+
transform-origin: 50%;
140+
}
141+
.listEntry.hideUnused > .detailbar > .listExpander svg {
142+
transform: rotate(90deg);
143+
}
126144
.listEntry .checkbox:has(input[disabled]),
127145
.listEntry .checkbox:has(input[disabled]) ~ span {
128146
filter: var(--checkbox-disabled-filter);
129147
}
130-
.listEntry .listname {
131-
white-space: nowrap;
132-
}
133148
.listEntry a,
134149
.listEntry .fa-icon {
135150
color: var(--info0-ink);
136151
fill: var(--info0-ink);
137-
display: none;
138152
font-size: 120%;
139-
margin: 0 0.2em 0 0;
140153
}
141154
.listEntry .fa-icon:hover {
142155
transform: scale(1.25);
143156
}
144-
.listEntry .content {
145-
display: inline-flex;
146-
}
147-
.listEntry a.towiki {
148-
display: inline-flex;
149-
}
150-
.listEntry.support a.support {
151-
display: inline-flex;
152-
}
153-
.listEntry.mustread a.mustread {
154-
color: var(--info1-ink);
155-
fill: var(--info1-ink);
156-
display: inline-flex;
157-
}
158-
.listEntry .status {
159-
cursor: default;
157+
.listEntry .iconbar a.support[href="#"] {
160158
display: none;
161-
}
159+
}
162160

163-
body.noMoreRuleset .listEntry:not(.checked) {
161+
body.noMoreRuleset .listEntry:has(> .detailbar input:not(:checked)) {
164162
opacity: 0.5;
165163
pointer-events: none;
166164
}
167165

166+
#lists.searchMode > .listEntries .listEntries,
167+
#lists.searchMode > .listEntries .listEntry.searchMatch {
168+
display: flex !important;
169+
}
170+
#lists.searchMode > .listEntries .listEntry {
171+
display: none;
172+
}
173+
#lists.searchMode > .listEntries .listExpander {
174+
visibility: hidden;
175+
}
176+
168177
/* touch-screen devices */
169178
:root.mobile .listEntry .fa-icon {
170179
font-size: 120%;

‎platform/mv3/extension/dashboard.html

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<div id="dashboard-nav">
2222
<span class="logo"><img data-i18n-title="extName" src="img/ublock.svg" alt="uBO Lite"></span><!--
2323
--><button class="tabButton" type="button" data-pane="settings" data-i18n="settingsPageName" tabindex="0"></button><!--
24+
--><button class="tabButton" type="button" data-pane="rulesets" data-i18n="aboutFilterLists" tabindex="0"></button><!--
2425
--><button class="tabButton" type="button" data-pane="about" data-i18n="aboutPageName" tabindex="0"></button>
2526
</div>
2627
<!-- -------- -->
@@ -95,29 +96,14 @@ <h3 data-i18n="filteringMode0Name"></h3>
9596
<p><textarea id="trustedSites" spellcheck="false" placeholder="noFilteringModePlaceholder"></textarea>
9697
</p>
9798
</div>
98-
99+
</section>
100+
<!-- -------- -->
101+
<section data-pane="rulesets">
99102
<div>
100-
<h3 data-i18n="aboutFilterLists"></h3>
101-
<div>
102-
<p id="listsOfBlockedHostsPrompt"></p>
103-
</div>
104-
<div>
105-
<div id="lists"></div>
106-
</div>
107-
</div>
108-
109-
<div id="templates">
110-
<div class="groupEntry">
111-
<div class="geDetails"><span class="geName"></span> <span class="geCount"></span></div>
112-
<div class="listEntries"></div>
113-
</div>
114-
<div class="li listEntry">
115-
<label><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span class="listname forinput"></span> <span class="iconbar"><!--
116-
--><a class="fa-icon support" href="#" target="_blank">home</a><!--
117-
--><a class="fa-icon mustread" href="#" target="_blank">info-circle</a><!--
118-
--></span></span></label>
119-
</div>
103+
<p id="listsOfBlockedHostsPrompt"></p>
120104
</div>
105+
<div class="searchfield"><input type="search" spellcheck="false" placeholder="" /><span class="fa-icon">search</span></div>
106+
<div id="lists"></div>
121107
</section>
122108
<!-- -------- -->
123109
<section data-pane="about">
@@ -146,6 +132,32 @@ <h3 data-i18n="aboutFilterLists"></h3>
146132
</div>
147133
</section>
148134
<!-- -------- -->
135+
<div id="templates">
136+
<div class="listEntries"></div>
137+
<div class="listEntry" data-role="leaf">
138+
<span class="detailbar">
139+
<label><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span class="listname forinput"></span>
140+
</label>
141+
<span class="iconbar"><!--
142+
--><a class="fa-icon support" href="#" target="_blank">home</a>
143+
</span>
144+
</span>
145+
</div>
146+
<div class="listEntry expandable" data-role="node">
147+
<span class="detailbar">
148+
<label><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span class="listname forinput"></span></label>
149+
<span class="count"></span>
150+
<span class="fa-icon listExpander">angle-up</span>
151+
</span>
152+
</div>
153+
<div class="listEntry expandable" data-role="rootnode">
154+
<span class="detailbar">
155+
<h3 class="listname"></h3>
156+
<span class="count"></span>
157+
<span class="fa-icon listExpander">angle-up</span>
158+
</span>
159+
</div>
160+
</div>
149161
<script src="js/theme.js" type="module"></script>
150162
<script src="js/fa-icons.js" type="module"></script>
151163
<script src="js/i18n.js" type="module"></script>

0 commit comments

Comments
 (0)