From e9075e24e16e64b2116f66dab9cf59cb7ee01361 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Wed, 18 Nov 2020 20:06:02 -0500 Subject: Update progress indicator styles (#1042) --- ext/bg/search.html | 3 +- ext/fg/float.html | 3 +- ext/mixed/css/display.css | 85 +++++++++++++++++++++++++++++++++++++++++++++++ ext/mixed/js/display.js | 21 ++++++++++-- 4 files changed, 105 insertions(+), 7 deletions(-) (limited to 'ext') diff --git a/ext/bg/search.html b/ext/bg/search.html index 959979d9..7ba479ba 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -17,6 +17,7 @@

@@ -46,8 +47,6 @@

- -

diff --git a/ext/fg/float.html b/ext/fg/float.html index 174cfe42..0ee8fd7d 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -17,12 +17,11 @@

- -

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index 09fc5703..24d143fc 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -45,6 +45,12 @@ --sidebar-button-icon-size-no-units: 16; --sidebar-button-icon-size: calc(1em * (var(--sidebar-button-icon-size-no-units) / var(--font-size-no-units))); + --progress-bar-height-no-units: 4; + --progress-bar-height: calc(1em * (var(--progress-bar-height-no-units) / var(--font-size-no-units))); + --progress-bar-active-transition-duration: 0.125s; + --progress-bar-active-transition-start-delay: 0.0625s; + --progress-bar-animation-duration: 2s; + /* Colors */ --background-color: #ffffff; --glossary-image-background-color: #eeeeee; @@ -88,6 +94,9 @@ --scrollbar-thumb-color: #c1c1c1; --scrollbar-track-color: #f1f1f1; + + --progress-bar-track-color: #cccccc; + --progress-bar-indicator-color: #0275d8; } :root[data-yomichan-theme=dark] { /* Colors */ @@ -133,6 +142,9 @@ --scrollbar-thumb-color: #444444; --scrollbar-track-color: #2f2f2f; + + --progress-bar-track-color: #3a3a3a; + --progress-bar-indicator-color: #0275d8; } @@ -1004,3 +1016,76 @@ button.action-button { .kanji-glossary { color: var(--dark-text-color); } + + +/* Progress bar */ +@keyframes progress-bar-indeterminant1a { + 0% { left: 0; } + 25% { left: 0; } + 75% { left: 100%; } + 100% { left: 100%; } +} +@keyframes progress-bar-indeterminant1b { + 0% { right: 100%; } + 50% { right: 0; } + 100% { right: 0; } +} +@keyframes progress-bar-indeterminant2a { + 0% { left: 0; } + 25% { left: 0; } + 100% { left: 100%; } +} +@keyframes progress-bar-indeterminant2b { + 0% { right: 100%; } + 75% { right: 0; } + 100% { right: 0; } +} +.progress-bar-indeterminant { + display: block; + width: 100%; + height: 0; + background-color: var(--progress-bar-indicator-color); + position: relative; + transition: + height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-duration), + background-color var(--progress-bar-active-transition-duration) linear; +} +.progress-bar-indeterminant[data-active=true] { + height: var(--progress-bar-height); + background-color: var(--progress-bar-track-color); + transition: + height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-start-delay), + background-color 0s linear; +} +.progress-bar-indeterminant[hidden]:not([data-active=true]) { + display: none; +} +.progress-bar-indeterminant::before, +.progress-bar-indeterminant::after { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 100%; + background-color: var(--progress-bar-indicator-color); + animation: none; +} +.progress-bar-indeterminant:not([hidden])::before { + animation: + progress-bar-indeterminant1a var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay), + progress-bar-indeterminant1b var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay); +} +.progress-bar-indeterminant:not([hidden])::after { + animation: + progress-bar-indeterminant2a var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration)), + progress-bar-indeterminant2b var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration)); +} +.top-progress-bar-container { + position: sticky; + top: 0; + height: 0; + pointer-events: none; + z-index: 10; +} diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index cdff9389..7068d424 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -34,7 +34,6 @@ class Display extends EventDispatcher { constructor() { super(); - this._spinner = document.querySelector('#spinner'); this._container = document.querySelector('#definitions'); this._definitions = []; this._optionsContext = {depth: 0, url: window.location.href}; @@ -69,6 +68,8 @@ class Display extends EventDispatcher { this._defaultTitleMaxLength = 1000; this._fullQuery = ''; this._documentUtil = new DocumentUtil(); + this._progressIndicator = document.querySelector('#progress-indicator'); + this._progressIndicatorTimer = null; this._progressIndicatorVisible = new DynamicProperty(false); this._queryParserVisible = false; this._queryParserVisibleOverride = null; @@ -563,8 +564,22 @@ class Display extends EventDispatcher { } _onProgressIndicatorVisibleChanged({value}) { - if (this._spinner === null) { return; } - this._spinner.hidden = !value; + if (this._progressIndicatorTimer !== null) { + clearTimeout(this._progressIndicatorTimer); + this._progressIndicatorTimer = null; + } + + if (value) { + this._progressIndicator.hidden = false; + getComputedStyle(this._progressIndicator).getPropertyValue('display'); // Force update of CSS display property, allowing animation + this._progressIndicator.dataset.active = 'true'; + } else { + this._progressIndicator.dataset.active = 'false'; + this._progressIndicatorTimer = setTimeout(() => { + this._progressIndicator.hidden = true; + this._progressIndicatorTimer = null; + }, 250); + } } _onWindowFocus() { -- cgit v1.2.3