From 52246a5250c76eb6a290d59be5af9803be8fef24 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Wed, 3 Oct 2018 10:01:41 -0400 Subject: [PATCH] convert popup panel icons (https://github.com/uBlockOrigin/uMatrix-issues/issues/68) --- src/css/common.css | 28 --------- src/css/fa-icons.css | 72 ++++++++++++++++++++++ src/css/logger-ui.css | 25 +++++--- src/css/popup.css | 78 +++++++++++------------- src/img/fontawesome/fontawesome-defs.svg | 29 ++++++--- src/js/fa-icons.js | 46 ++++++++++++++ src/js/logger-ui.js | 2 +- src/js/popup.js | 8 +-- src/logger-ui.html | 28 +++++---- src/popup.html | 24 ++++---- 10 files changed, 224 insertions(+), 116 deletions(-) create mode 100644 src/css/fa-icons.css create mode 100644 src/js/fa-icons.js diff --git a/src/css/common.css b/src/css/common.css index 94ea627..ce51448 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -30,34 +30,6 @@ vertical-align: baseline; display: inline-block; } -.fa-icon { - align-self: center; - background-color: transparent; - border: border: 1px solid transparent; - display: inline-block; - height: 1.2em; - overflow: visible; - vertical-align: middle; - width: 1.2em; - } -.fa-icon:hover { - background-color: #eee; - } -.fa-icon.disabled { - fill: #888; - opacity: 0.4; - stroke: #fff; - pointer-events: none; - } -.fa-icon > .badge { - font-family: sans-serif; - font-size: 80%; - pointer-events: none; - transform: translate(100%, 110%); - } -.fa-icon.disabled > .badge { - display: none; - } body { font-size: 14px; diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css new file mode 100644 index 0000000..f56bb6a --- /dev/null +++ b/src/css/fa-icons.css @@ -0,0 +1,72 @@ +.fa-icon { + align-items: center; + background-color: transparent; + border: 0; + display: inline-flex; + justify-content: flex-start; + margin: 0; + padding: 0.1em; + position: relative; + } +.fa-icon:hover { + background-color: #eee; + } +.fa-icon > * { + pointer-events: none; + } +.fa-icon.disabled { + color: #888; + fill: #888; + opacity: 0.25; + stroke: #888; + pointer-events: none; + } +.fa-icon > .fa-icon-badge, +.fa-icon.disabled > .fa-icon-badge { + display: none; + } +.fa-icon.fa-icon-badged > .fa-icon-badge { + background-color: rgba(255, 255, 255, 0.7); + border-radius: 3px; + bottom: 1px; + display: inline-block; + font-family: sans-serif; + font-size: 40%; + position: absolute; + right: 1px; + } +.fa-icon.disabled > .fa-icon-badge { + display: none; + } + +.fa-icon > svg { + height: 1em; + } +.fa-icon_puzzle-piece, +.fa-icon_reply-all { + width: calc(1em * 576 / 512); + } +.fa-icon_download, +.fa-icon_eraser, +.fa-icon_filter, +.fa-icon_list-alt, +.fa-icon_power-off, +.fa-icon_reply, +.fa-icon_sync-alt, +.fa-icon_th, +.fa-icon_th-list { + width: calc(1em * 512 / 512); + } +.fa-icon_lock { + width: calc(1em * 448 / 512); + } +.fa-icon_times { + width: calc(1em * 352 / 512); + } +.fa-icon_angle-up, +.fa-icon_angle-double-up { + width: calc(1em * 320 / 512); + } +.fa-icon_ellipsis-v { + width: calc(1em * 192 / 512); + } diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index 4bf33ee..d49c03e 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -11,9 +11,8 @@ body { } .fa-icon { cursor: pointer; - height: 1.5em; - padding: 0.5em 1em; - width: 1.5em; + font-size: 150%; + padding: 0.4em 0.6em; } #toolbar { background-color: white; @@ -88,14 +87,15 @@ body.popupPanelOn #popupPanelContainer { display: none; } -#popupPanelButton > use { - transform: scaleY(0.4); +#popupPanelButton use { + transform: scale(1, 0.4); } -body.popupPanelOn #popupPanelButton > use { - transform: scaleY(1); +body.popupPanelOn #popupPanelButton use { + transform: scale(1, 1); } -body.compactView #compactViewToggler { - transform: rotateZ(180deg); +body.compactView #compactViewToggler use { + transform: scale(1, -1); + transform-origin: center; } #filterButton { opacity: 0.25; @@ -254,15 +254,20 @@ body.compactView #content tr:not(.vExpanded) td { flex-direction: column; justify-content: space-around; margin-left: 0.5em; + padding: 0.2em; + } +.ruleEditorToolbar .fa-icon { + padding: 0.4em; } .fa-icon.scopeRel { + color: #24c; fill: #24c; } body[data-scope="*"] .fa-icon.scopeRel { + color: #000; fill: #000; } - .ruleWidgets { display: flex; flex-direction: column; diff --git a/src/css/popup.css b/src/css/popup.css index 207f167..6efc6a9 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -58,16 +58,6 @@ a { position: relative; text-align: center; } -#gotoDashboard > span:last-of-type { - opacity: 0.5; - position: absolute; - } -body[dir="ltr"] #gotoDashboard > span:last-of-type { - left: 3px; - } -body[dir="rtl"] #gotoDashboard > span:last-of-type { - right: 3px; - } .paneHead { background-color: white; @@ -107,6 +97,18 @@ body[dir="rtl"] #gotoDashboard > span:last-of-type { padding: 0; } +.toolbar .fa-icon { + cursor: pointer; + font-size: 150%; + padding: 0.3em 0.4em; + } +.toolbar .fa-icon.scopeRel { + fill: #24c; + } +body[data-scope="*"] .toolbar .fa-icon.scopeRel { + fill: #000; +} + body .toolbar button { background-color: white; border: 0; @@ -128,6 +130,7 @@ body .toolbar button.fa { } #mtxSwitch_matrix-off.switchTrue { color: #a00; + fill: #a00; } #mtxSwitches > li { @@ -274,9 +277,11 @@ button.disabled > span.badge { } .recipe > div > span { color: #888; + fill: #888; } .recipe > div > span:hover { color: #000; + fill: #000; } .recipe .expander { display: inline-block; @@ -300,14 +305,12 @@ button.disabled > span.badge { .recipe .committer { cursor: pointer; display: none; - font-size: 120%; - padding: 0.4em; + font-size: 100%; text-align: center; - width: 1em; } .recipe.mustImport .importer, .recipe.mustCommit:not(.mustImport) .committer { - display: inline; + display: inline-block; } .recipe:hover { background-color: #eef; @@ -588,38 +591,31 @@ body.colorblind .rw .matCell.t2 #blacklist:hover { background-color: transparent; } #domainOnly { - margin: 0; - border: 1px solid gray; - border-radius: 3px; - padding: 0 1px; - position: absolute; - font-size: 1.1em; - left: 20%; - bottom: -20%; - display: none; - color: black; + align-items: center; background-color: white; - opacity: 0.25; - z-index: 10000; + border: 1px solid #ccc; + border-radius: 3px; + bottom: -20%; + color: black; cursor: pointer; + display: none; + fill: black; + font-size: 100%; + left: 20%; + margin: 0; + opacity: 0.25; + padding: 3px; + position: absolute; + z-index: 10000; } -.matSection #domainOnly .fa:before { - content: '\f106'; - } -.matSection.collapsed #domainOnly .fa:before { - content: '\f107'; - } -.matSection.collapsible .matRow.l1 .matCell:nth-of-type(1):hover #domainOnly { - display: block; - } -#matHead #domainOnly .fa:before { - content: '\f106'; - } -#matHead.collapsed #domainOnly .fa:before { - content: '\f107'; +.matSection.collapsed #domainOnly, +#matHead.collapsed #domainOnly { + transform: rotate(0.5turn); + transform-origin: center; } +.matSection.collapsible .matRow.l1 .matCell:nth-of-type(1):hover #domainOnly, #matHead.collapsible .matRow .matCell:nth-of-type(1):hover #domainOnly { - display: block; + display: inline-flex; } #domainOnly:hover { opacity: 1; diff --git a/src/img/fontawesome/fontawesome-defs.svg b/src/img/fontawesome/fontawesome-defs.svg index c418d62..47ceae4 100644 --- a/src/img/fontawesome/fontawesome-defs.svg +++ b/src/img/fontawesome/fontawesome-defs.svg @@ -4,13 +4,26 @@ License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL --> - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/src/js/fa-icons.js b/src/js/fa-icons.js new file mode 100644 index 0000000..dde6f94 --- /dev/null +++ b/src/js/fa-icons.js @@ -0,0 +1,46 @@ +/******************************************************************************* + + uMatrix - a browser extension to black/white list requests. + Copyright (C) 2018-present Raymond Hill + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with this program. If not, see {http://www.gnu.org/licenses/}. + + Home: https://github.com/gorhill/uMatrix +*/ + +'use strict'; + +/******************************************************************************/ + +(function() { + let icons = document.querySelectorAll('.fa-icon'); + for ( let icon of icons ) { + if ( icon.childElementCount !== 0 ) { continue; } + let name = icon.textContent; + let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.classList.add('fa-icon_' + name); + let use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); + let href = '/img/fontawesome/fontawesome-defs.svg#' + name; + use.setAttribute('href', href); + use.setAttribute('xlink:href', href); + svg.appendChild(use); + icon.textContent = ''; + icon.appendChild(svg); + if ( icon.classList.contains('fa-icon-badged') ) { + let badge = document.createElement('span'); + badge.className = 'fa-icon-badge'; + icon.appendChild(badge); + } + } +})(); diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js index 3ee8613..10ed0f9 100644 --- a/src/js/logger-ui.js +++ b/src/js/logger-ui.js @@ -989,7 +989,7 @@ var ruleEditor = (function() { } let dirty = diffCount !== 0; ruleEditorNode - .querySelector('#matrixPersistButton .badge') + .querySelector('#matrixPersistButton .fa-icon-badge') .textContent = dirty ? diffCount : ''; ruleEditorNode .querySelector('#matrixRevertButton') diff --git a/src/js/popup.js b/src/js/popup.js index 7899303..1829450 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -1139,9 +1139,9 @@ function updateMatrixSwitches() { 'relevant', matrixSnapshot.hasNoscriptTags ); - uDom.nodeFromSelector('#buttonMtxSwitches span.badge').textContent = + uDom.nodeFromSelector('#buttonMtxSwitches .fa-icon-badge').textContent = count.toLocaleString(); - uDom.nodeFromSelector('#mtxSwitch_matrix-off span.badge').textContent = + uDom.nodeFromSelector('#mtxSwitch_matrix-off .fa-icon-badge').textContent = matrixSnapshot.blockedCount.toLocaleString(); document.body.classList.toggle('powerOff', switches['matrix-off']); } @@ -1169,7 +1169,7 @@ function updatePersistButton() { .filter(function(){return this.nodeType===3;}) .first() .text(diffCount > 0 ? '\uf13e' : '\uf023'); - button.descendants('span.badge').text(diffCount > 0 ? diffCount : ''); + button.descendants('.fa-icon-badge').text(diffCount > 0 ? diffCount : ''); var disabled = diffCount === 0; button.toggleClass('disabled', disabled); uDom('#buttonRevertScope').toggleClass('disabled', disabled); @@ -1307,7 +1307,7 @@ let recipeManager = (function() { return; } button.classList.remove('disabled'); - button.querySelector('span.badge').textContent = recipes.length; + button.querySelector('.fa-icon-badge').textContent = recipes.length; }; let desHostnames = []; diff --git a/src/logger-ui.html b/src/logger-ui.html index d98c1c2..27b6b19 100644 --- a/src/logger-ui.html +++ b/src/logger-ui.html @@ -3,10 +3,11 @@ - - - - + + + + + @@ -17,14 +18,14 @@