From 4b6703114c3fedaaf24cc7a376d885e22dfdc4f3 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Mon, 8 Feb 2021 17:52:46 -0500 Subject: Improve dictionaries not enabled badges (#1349) * Improve badges on the settings page * Add badges on the context page --- ext/bg/context.html | 13 +++++- ext/bg/css/context.css | 105 +++++++++++++++++++++++++++++++++++++++++++++- ext/bg/css/settings2.css | 45 ++++++++++++-------- ext/bg/js/context-main.js | 21 ++++++++++ ext/bg/settings2.html | 9 +++- 5 files changed, 171 insertions(+), 22 deletions(-) diff --git a/ext/bg/context.html b/ext/bg/context.html index afd89207..76e4db2a 100644 --- a/ext/bg/context.html +++ b/ext/bg/context.html @@ -30,7 +30,12 @@ - + + + @@ -42,7 +47,11 @@ Enable content scanning - Settings + + Settings + + + Search diff --git a/ext/bg/css/context.css b/ext/bg/css/context.css index 773f79c6..447c5066 100644 --- a/ext/bg/css/context.css +++ b/ext/bg/css/context.css @@ -15,6 +15,13 @@ * along with this program. If not, see . */ +:root { + --badge-size: 16px; + + --warning-color: #96751c; + --warning-color-light: #edc75e; +} + body { padding: 10px; margin: 0; @@ -50,8 +57,34 @@ label { } +/* Icons */ +.icon { + --icon-image: none; + --icon-size: contain; + + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center center; + -webkit-mask-mode: alpha; + -webkit-mask-size: var(--icon-size); + -webkit-mask-image: var(--icon-image); + mask-repeat: no-repeat; + mask-position: center center; + mask-mode: alpha; + mask-size: var(--icon-size); + mask-image: var(--icon-image); +} +.icon[data-icon=profile] { --icon-image: url(/mixed/img/profile.svg); } +.icon[data-icon=cog] { --icon-image: url(/mixed/img/cog.svg); } +.icon[data-icon=magnifying-glass] { --icon-image: url(/mixed/img/magnifying-glass.svg); } +.icon[data-icon=exclamation-point-short] { --icon-image: url(/mixed/img/exclamation-point-short.svg); } +.icon[data-icon=question-mark-circle] { --icon-image: url(/mixed/img/question-mark-circle.svg); } + + +/* Page-specific styles */ .link-group { - display: block; + display: flex; + flex-flow: row nowrap; + align-items: center; line-height: 1.5em; margin: 0 -10px; padding: 0.5em 10px; @@ -102,6 +135,9 @@ label { .link-group-label { vertical-align: middle; } +.link-group-badge { + margin-left: 0.5em; +} /* Toggle */ .toggle>input[type=checkbox] { @@ -235,6 +271,7 @@ body[data-loaded=true] .toggle-group { margin: 0; padding: 2px 3px; cursor: pointer; + position: relative; } .nav-button+.nav-button { margin-left: -1px; @@ -337,3 +374,69 @@ select.profile-select { font-style: normal; background-color: initial; } + +.nav-button-warning-badge { + pointer-events: none; + width: 12px; + height: 6px; + position: absolute; + right: calc(50% - 6px); + top: -8px; + z-index: 1; +} +.nav-button-warning-badge-inner, +.nav-button-warning-badge-outer { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: #edc75e; + + --icon-image: url(/mixed/img/material-down-arrow.svg); + --icon-size: contain; + + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center center; + -webkit-mask-mode: alpha; + -webkit-mask-size: var(--icon-size); + -webkit-mask-image: var(--icon-image); + mask-repeat: no-repeat; + mask-position: center center; + mask-mode: alpha; + mask-size: var(--icon-size); + mask-image: var(--icon-image); +} +.nav-button-warning-badge-inner { + margin: 1px 2px; +} +.nav-button-warning-badge-outer { + animation: nav-button-warning-badge-animation ease-in-out 2s alternate infinite; +} +@keyframes nav-button-warning-badge-animation { + 0% { opacity: 1; background-color: #edc75e; } + 100% { opacity: 1; background-color: #333333; } +} + +.warning-badge { + position: relative; + width: var(--badge-size); + height: var(--badge-size); + margin: 0; + padding: 0; + background-color: var(--warning-color-light); + border-radius: 50%; + box-shadow: var(--shadow-vertical); +} +.warning-badge:not([hidden]) { + display: block; +} +.warning-badge>.icon { + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: var(--warning-color); +} diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css index 53278951..725804c3 100644 --- a/ext/bg/css/settings2.css +++ b/ext/bg/css/settings2.css @@ -54,6 +54,7 @@ --modal-width-small: 400px; --modal-height-small: 200px; --modal-transition-offset: -64px; + --badge-size: 16px; --link-color: var(--accent-color); --link-color-hover: var(--accent-color-dark); @@ -62,7 +63,7 @@ --outline-item-background-color: rgba(13, 13, 13, 0); --outline-item-background-color-hover: rgba(13, 13, 13, 0.15); --warning-color: #96751c; - --warning-color-light: hsl(44, 80%, 65%); + --warning-color-light: #edc75e; --dim-background-color: rgba(0, 0, 0, 0.5); --content-dimmer-color: rgba(0, 0, 0, 0.1); @@ -421,26 +422,10 @@ a.heading-link-light { position: absolute; right: calc(var(--outline-item-icon-size) * -0.125); top: calc(var(--outline-item-icon-size) * -0.125); - width: calc(var(--outline-item-icon-size) * 0.5); - height: calc(var(--outline-item-icon-size) * 0.5); - margin: 0; - padding: 0; - background-color: var(--warning-color-light); - border-radius: calc(var(--outline-item-icon-size) * 0.5); - box-shadow: var(--shadow-vertical); } .outline-item-left-warning-badge:not([hidden]) { display: block; } -.outline-item-left-warning-badge>.icon { - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - background-color: var(--warning-color); -} .outline-item-label { white-space: nowrap; padding-left: var(--padding); @@ -1970,6 +1955,29 @@ input.sentence-termination-character-input2 { top: calc(1em * (3 / var(--font-size-no-units))); } +.warning-badge { + position: relative; + width: var(--badge-size); + height: var(--badge-size); + margin: 0; + padding: 0; + background-color: var(--warning-color-light); + border-radius: 50%; + box-shadow: var(--shadow-vertical); +} +.warning-badge:not([hidden]) { + display: block; +} +.warning-badge>.icon { + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: var(--warning-color); +} + /* Generic layouts */ .margin-above { @@ -2016,6 +2024,9 @@ input.sentence-termination-character-input2 { flex-flow: row wrap; align-items: center; } +.flex-margin-left { + margin-left: 0.5em; +} .flex-column-nowrap { display: flex; diff --git a/ext/bg/js/context-main.js b/ext/bg/js/context-main.js index 65853514..e9833687 100644 --- a/ext/bg/js/context-main.js +++ b/ext/bg/js/context-main.js @@ -100,6 +100,7 @@ class DisplayController { toggle.checked = extensionEnabled; toggle.addEventListener('change', onToggleChanged, false); } + this._updateDictionariesEnabledWarnings(options); } async _setupHotkeys() { @@ -150,6 +151,26 @@ class DisplayController { }] ); } + + async _updateDictionariesEnabledWarnings(options) { + const noDictionariesEnabledWarnings = document.querySelectorAll('.no-dictionaries-enabled-warning'); + const dictionaries = await api.getDictionaryInfo(); + + let enabledCount = 0; + for (const {title} of dictionaries) { + if ( + Object.prototype.hasOwnProperty.call(options.dictionaries, title) && + options.dictionaries[title].enabled + ) { + ++enabledCount; + } + } + + const hasEnabledDictionary = (enabledCount > 0); + for (const node of noDictionariesEnabledWarnings) { + node.hidden = hasEnabledDictionary; + } + } } (async () => { diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html index 5dd85dd2..341d7f21 100644 --- a/ext/bg/settings2.html +++ b/ext/bg/settings2.html @@ -22,7 +22,7 @@
Profile - Dictionaries + Dictionaries General Scanning Popup @@ -125,7 +125,12 @@
-
Configure installed and enabled dictionaries…
+
+
+
Configure installed and enabled dictionaries…
+ +
+
-- cgit v1.2.3