Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-18 17:02:27 +02:00
Code Issues Releases Wiki Activity

More fine tuning of user interface

Browse Source 
Noteworthy:
- Make new popup panel better resize in desktop
  environment
- Fix button visuals in "My rules" pane
- Keep "Update now" button visible until update
  is completed
- Renaming CSS variables for consistency
This commit is contained in:
Raymond Hill 2020-04-24 09:33:44 -04:00
parent 201308217f
commit d2897db2b6
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
7 changed files with 66 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/css/3p-filters.css
View File

@ -12,7 +12,10 @@
top: 0; top: 0;
z-index: 10; z-index: 10;
} }
body.updating #buttonUpdate .fa-icon svg { #buttonUpdate.active {
pointer-events: none;
}
#buttonUpdate.active .fa-icon svg {
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
transform-origin: 50%; transform-origin: 50%;
} }

20
src/css/common.css
View File

@ -98,18 +98,23 @@ button.vflex {
button:hover { button:hover {
background-color: var(--button-surface-hover); background-color: var(--button-surface-hover);
} }
button.active {
background-color: var(--button-active-surface);
}
button.important { button.important {
background-color: var(--bg-button-important); background-color: var(--button-important-surface);
} }
button.important:hover { button.important:hover {
background-color: var(--bg-button-important-hover); background-color: var(--button-important-surface-hover);
} }
button.disabled, button.disabled,
button[disabled], button[disabled],
button.important.disabled, button.important.disabled,
button.important[disabled] { button.important[disabled] {
background-color: var(--bg-button-disabled); background-color: var(--button-disabled-surface);
color: var(--fg-button-disabled); color: var(--button-disabled-ink);
fill: var(--button-disabled-ink);
filter: var(--button-disabled-filter);
pointer-events: none; pointer-events: none;
} }
button.iconifiable > .fa, button.iconifiable > .fa,
@ -191,9 +196,10 @@ input[type="checkbox"] {
.disabled > .ubo-icon, .disabled > .ubo-icon,
.ubo-icon[disabled], .ubo-icon[disabled],
[disabled] > .ubo-icon { [disabled] > .ubo-icon {
color: var(--fg-button-disabled); color: var(--button-disabled-ink);
fill: var(--fg-button-disabled); fill: var(--button-disabled-ink);
stroke: var(--fg-button-disabled); filter: var(--button-disabled-filter);
stroke: var(--button-disabled-ink);
pointer-events: none; pointer-events: none;
} }
.ubo-icon > svg { .ubo-icon > svg {

16
src/css/dyna-rules.css
View File

@ -43,21 +43,23 @@ body {
#commitButton, #commitButton,
body.editing #diff #exportButton, body.editing #diff #exportButton,
body.editing #diff #importButton { body.editing #diff #importButton {
background-color: var(--bg-button-disabled); background-color: var(--button-disabled-surface);
color: var(--fg-button-disabled); color: var(--button-disabled-ink);
fill: var(--fg-button-disabled); fill: var(--button-disabled-ink);
filter: var(--button-disabled-filter);
pointer-events: none; pointer-events: none;
} }
body:not(.editing) #diff.dirty #revertButton, body:not(.editing) #diff.dirty #revertButton,
body:not(.editing) #diff.dirty #commitButton { body:not(.editing) #diff.dirty #commitButton {
background-color: var(--bg-button); background-color: var(--button-surface);
color: var(--fg-button); color: var(--button-ink);
fill: var(--fg-button); fill: var(--button-ink);
filter: none;
pointer-events: auto; pointer-events: auto;
} }
body:not(.editing) #diff.dirty #revertButton:hover, body:not(.editing) #diff.dirty #revertButton:hover,
body:not(.editing) #diff.dirty #commitButton:hover { body:not(.editing) #diff.dirty #commitButton:hover {
background-color: var(--bg-button-hover); background-color: var(--button-surface-hover);
} }
.codeMirrorContainer { .codeMirrorContainer {

7
src/css/fa-icons.css
View File

@ -18,9 +18,10 @@
.disabled > .fa-icon, .disabled > .fa-icon,
.fa-icon[disabled], .fa-icon[disabled],
[disabled] > .fa-icon { [disabled] > .fa-icon {
color: var(--fg-button-disabled); color: var(--button-disabled-ink);
fill: var(--fg-button-disabled); fill: var(--button-disabled-ink);
stroke: var(--fg-button-disabled); filter: var(--button-disabled-filter);
stroke: var(--button-disabled-ink);
pointer-events: none; pointer-events: none;
} }
.fa-icon > .fa-icon-badge, .fa-icon > .fa-icon-badge,

19
src/css/popup-fenix.css
View File

@ -63,15 +63,16 @@ hr {
margin: 0.5em 0; margin: 0.5em 0;
} }
#switch .fa-icon { #switch .fa-icon {
color: var(--fg-popup-power); color: var(--popup-power-ink);
fill: var(--fg-popup-power); fill: var(--popup-power-ink);
cursor: pointer; cursor: pointer;
font-size: 700%; font-size: 700%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#switch .fa-icon:hover { #switch .fa-icon:hover {
filter: var(--fg-popup-power-hover); color: var(--popup-power-ink-hover);
fill: var(--popup-power-ink-hover);
} }
body.off #switch .fa-icon { body.off #switch .fa-icon {
color: var(--fg-0-20); color: var(--fg-0-20);
@ -221,6 +222,7 @@ body[dir="rtl"] #tooltip {
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
text-align: right; text-align: right;
--rule-cell-width: 5em;
} }
body:not(.dfEnabled) #firewall { body:not(.dfEnabled) #firewall {
display: none; display: none;
@ -264,7 +266,7 @@ body:not(.dfEnabled) #firewall {
justify-content: flex-end; justify-content: flex-end;
padding-right: 2px; padding-right: 2px;
white-space: normal; white-space: normal;
width: calc(100% - 5em); width: calc(100% - var(--rule-cell-width));
word-break: break-word; word-break: break-word;
} }
#firewall > div.isCname > span:first-of-type { #firewall > div.isCname > span:first-of-type {
@ -282,7 +284,7 @@ body:not(.dfEnabled) #firewall {
#firewall > div > span:first-of-type ~ span { #firewall > div > span:first-of-type ~ span {
flex-shrink: 0; flex-shrink: 0;
margin-left: 1px; margin-left: 1px;
width: 5em; width: var(--rule-cell-width);
} }
#firewall > div > span:nth-of-type(2) { #firewall > div > span:nth-of-type(2) {
display: none; display: none;
@ -355,7 +357,7 @@ body:not(.dfEnabled) #firewall {
} }
body.advancedUser #firewall > div > span:first-of-type { body.advancedUser #firewall > div > span:first-of-type {
width: calc(100% - 10em); width: calc(100% - 2 * var(--rule-cell-width));
} }
body.advancedUser #firewall > div > span:nth-of-type(2) { body.advancedUser #firewall > div > span:nth-of-type(2) {
display: inline-flex; display: inline-flex;
@ -470,6 +472,7 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
/* mouse-driven devices */ /* mouse-driven devices */
:root.desktop body { :root.desktop body {
max-width: max(100vw, 800px);
overflow: auto; overflow: auto;
} }
:root.desktop #panes { :root.desktop #panes {
@ -485,7 +488,7 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
flex-grow: 1; flex-grow: 1;
line-height: 1.4; line-height: 1.4;
max-height: 540px; max-height: 540px;
min-height: 100vh; max-height: max(100vh, 600px);
min-width: 360px; min-width: 360px;
overflow-y: auto; overflow-y: auto;
width: max-content; width: max-content;
@ -494,7 +497,7 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
padding: 0.5em; padding: 0.5em;
} }
:root.desktop .tool:hover { :root.desktop .tool:hover {
background-color: var(--bg-button); background-color: var(--button-surface);
} }
:root.desktop .tool [data-i18n] { :root.desktop .tool [data-i18n] {
width: min-content; width: min-content;

21
src/css/themes/default.css
View File

@ -11,7 +11,9 @@
https://protocol.mozilla.org/fundamentals/color.html https://protocol.mozilla.org/fundamentals/color.html
*/ */
:root { :root {
--blue-10: #80ebff;
--blue-50: #0060df; --blue-50: #0060df;
--blue-60: #0250bb;
--ink-20: #312a64; --ink-20: #312a64;
--ink-50: #291d4f; --ink-50: #291d4f;
--ink-80: #20123a; --ink-80: #20123a;
@ -22,6 +24,8 @@
--light-gray-40: #cfcfd8; --light-gray-40: #cfcfd8;
--violet-70: #592acb; --violet-70: #592acb;
--violet-80: #45278d; --violet-80: #45278d;
--yellow-30: #ffd567;
--yellow-40: #ffbd4f;
--yellow-50: #ffa436; --yellow-50: #ffa436;
--yellow-60: #e27f2e; --yellow-60: #e27f2e;
--black: #000; --black: #000;
@ -64,12 +68,13 @@
--button-surface: var(--light-gray-30); --button-surface: var(--light-gray-30);
--button-ink: var(--ink-20); --button-ink: var(--ink-20);
--button-surface-hover: var(--light-gray-40); --button-surface-hover: var(--light-gray-40);
--bg-button: hsla(0, 0%, 90%, 1); --button-active-surface: var(--blue-10);
--bg-button-important: hsla(36, 100%, 85%, 1); --button-important-surface: var(--yellow-30);
--bg-button-important-hover: hsla(36, 100%, 77%, 1); --button-important-surface-hover: var(--yellow-40);
--fg-button: var(--fg-0); /* https://material.io/design/interaction/states.html#disabled */
--bg-button-disabled: hsla(0, 0%, 93%, 1); --button-disabled-filter: opacity(38%);
--fg-button-disabled: hsla(0, 0%, 60%, 1); --button-disabled-surface: var(--light-gray-30);
--button-disabled-ink: var(--ink-20);
--bg-transient-notice: hsla(60, 100%, 95%, 1); --bg-transient-notice: hsla(60, 100%, 95%, 1);
@ -99,8 +104,8 @@
--fg-tooltip: var(--ink-80); --fg-tooltip: var(--ink-80);
/* popup panel */ /* popup panel */
--fg-popup-power: var(--blue-50); --popup-power-ink: var(--blue-50);
--fg-popup-power-hover: opacity(80%); --popup-power-ink-hover: var(--blue-60);
--bg-popup-cell-1: hsla(261, 0%, 93%, 1); --bg-popup-cell-1: hsla(261, 0%, 93%, 1);
--bg-popup-cell-2: rgb(224, 224, 230); --bg-popup-cell-2: rgb(224, 224, 230);
--bg-popup-cell-label-filter: opacity(40%); --bg-popup-cell-label-filter: opacity(40%);

18
src/js/3p-filters.js
View File

@ -313,17 +313,23 @@ const renderFilterLists = function(soft) {
/******************************************************************************/ /******************************************************************************/
const renderWidgets = function() { const renderWidgets = function() {
uDom('#buttonApply').toggleClass( let cl = uDom.nodeFromId('buttonApply').classList;
cl.toggle(
'disabled', 'disabled',
filteringSettingsHash === hashFromCurrentFromSettings() filteringSettingsHash === hashFromCurrentFromSettings()
); );
uDom('#buttonPurgeAll').toggleClass( const updating = document.body.classList.contains('updating');
cl = uDom.nodeFromId('buttonUpdate').classList;
cl.toggle('active', updating);
cl.toggle(
'disabled', 'disabled',
document.querySelector('#lists .listEntry.cached:not(.obsolete)') === null updating === false &&
); document.querySelector('#lists .listEntry.obsolete:not(.toRemove) input[type="checkbox"]:checked') === null
uDom('#buttonUpdate').toggleClass( );
cl = uDom.nodeFromId('buttonPurgeAll').classList;
cl.toggle(
'disabled', 'disabled',
document.querySelector('body:not(.updating) #lists .listEntry.obsolete:not(.toRemove) input[type="checkbox"]:checked') === null updating || document.querySelector('#lists .listEntry.cached:not(.obsolete)') === null
); );
}; };