From b654b865c9b423d7a4b27aa19dda4b93f07f0c64 Mon Sep 17 00:00:00 2001 From: nobody Date: Sun, 28 Jun 2020 14:59:07 +0200 Subject: [PATCH] Further UI improvements --- icons/copy-dark.svg | 124 +++++++++++++++++++++++++++++++++++++ icons/copy-light.svg | 124 +++++++++++++++++++++++++++++++++++++ icons/credits | 4 ++ pages/base.css | 15 ++++- pages/options/options.css | 12 ++++ pages/options/options.html | 15 ++++- pages/options/options.js | 24 +++++++ pages/popup/popup.css | 4 +- pages/updates/updates.html | 2 +- 9 files changed, 318 insertions(+), 6 deletions(-) create mode 100644 icons/copy-dark.svg create mode 100644 icons/copy-light.svg diff --git a/icons/copy-dark.svg b/icons/copy-dark.svg new file mode 100644 index 00000000..0fae508c --- /dev/null +++ b/icons/copy-dark.svg @@ -0,0 +1,124 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/icons/copy-light.svg b/icons/copy-light.svg new file mode 100644 index 00000000..92bcbaa6 --- /dev/null +++ b/icons/copy-light.svg @@ -0,0 +1,124 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/icons/credits b/icons/credits index 9de6964a..5eec05e8 100644 --- a/icons/credits +++ b/icons/credits @@ -15,3 +15,7 @@ CC0 link-dark.svg, link-light.svg (edited) https://www.svgrepo.com/svg/35710/external CC0 + +copy-dark.svg, copy-light.svg (edited) +https://www.svgrepo.com/svg/76619/copy +CC0 diff --git a/pages/base.css b/pages/base.css index 1609877f..2e911af4 100644 --- a/pages/base.css +++ b/pages/base.css @@ -3,7 +3,7 @@ a { font-weight: bold; background: url('../../icons/link-dark.svg') no-repeat right center; background-size: 10px 10px; - padding-right:13px; + padding-right: 13px; text-decoration: underline; } @@ -27,6 +27,7 @@ a:hover { font-size: 1.3em; line-height: 2; background-color: #fff; + text-align: center; } #button-copy-rule-set:hover { @@ -34,8 +35,15 @@ a:hover { background-color: #ddd; } +#button-copy-rule-set-icon { + background: url('../../icons/copy-dark.svg') no-repeat right center; + background-size: 20px 20px; + padding-right: 23px; +} + #generated-rules { display: none; + margin-top: 20px; } /** @@ -232,4 +240,9 @@ a:hover { #button-copy-rule-set:hover { background-color: #2d2d2d; } + + #button-copy-rule-set-icon { + background: url('../../icons/copy-light.svg') no-repeat right center; + background-size: 20px 20px; + } } diff --git a/pages/options/options.css b/pages/options/options.css index 5fdabaae..b61eed52 100644 --- a/pages/options/options.css +++ b/pages/options/options.css @@ -295,6 +295,18 @@ body[dir="rtl"] .input-text { border-radius: 3px; } +.option-links { + list-style-type: disclosure-closed; +} + +.option-links-div > ul { + padding-top: 2rem; +} + +.option-links-div > ul > li { + padding-bottom: .5rem; +} + @media (prefers-color-scheme: dark) { body { background-color: #202023; diff --git a/pages/options/options.html b/pages/options/options.html index f3ae87b4..a2b70b22 100644 --- a/pages/options/options.html +++ b/pages/options/options.html @@ -141,7 +141,7 @@ - + +
+ +
diff --git a/pages/options/options.js b/pages/options/options.js index 2c44465e..b3be7a7f 100644 --- a/pages/options/options.js +++ b/pages/options/options.js @@ -82,6 +82,9 @@ options._renderOptionsPanel = function () { document.getElementById('last-mapping-update').textContent += ' ' + lastMappingUpdate; document.getElementById('negate-html-filter-list-warning').addEventListener('click', options._onClickHTMLFilterWarning); + document.getElementById('link-welcome-page').addEventListener('click', options._onClickWelcomePage); + document.getElementById('link-changelog').addEventListener('click', options._onClickChangelog); + document.getElementById('link-donate').addEventListener('click', options._onClickDonate); }; options._renderBlockMissingNotice = function () { @@ -313,6 +316,27 @@ options._onClickHTMLFilterWarning = function() { }); } +options._onClickWelcomePage = function() { + chrome.tabs.create({ + 'url': chrome.extension.getURL('pages/welcome/welcome.html'), + 'active': true + }); +} + +options._onClickDonate = function() { + chrome.tabs.create({ + 'url': chrome.extension.getURL('pages/donate/donate.html'), + 'active': true + }); +} + +options._onClickChangelog = function() { + chrome.tabs.create({ + 'url': chrome.extension.getURL('pages/updates/updates.html'), + 'active': true + }); +} + /** * Initializations */ diff --git a/pages/popup/popup.css b/pages/popup/popup.css index 7241206c..b9216c49 100644 --- a/pages/popup/popup.css +++ b/pages/popup/popup.css @@ -348,7 +348,7 @@ input:checked + .slider:before { } .label-domain { - color: #bbb; + color: #555; display: flex; font-style: italic; overflow: hidden; @@ -507,7 +507,7 @@ input:checked + .slider:before { } .label-domain { - color: #717171; + color: #aeaeae; } .panel:not(:last-child) { diff --git a/pages/updates/updates.html b/pages/updates/updates.html index 747c86e4..b7e35510 100644 --- a/pages/updates/updates.html +++ b/pages/updates/updates.html @@ -44,7 +44,7 @@
  • Added: Chart.js (JS-Bundle & CSS) v2.9.3 (reported by email)
  • Improved: Option to enable HTML-Filter by default (#33)
  • Added: Google Material Icons v3.0.1 (#41)
    • -
  • Improved: Dark-Mode (reported by email)
    • +
  • Improved: UI (reported by email)
    • Generate rule sets for uBlock or uMatrix