summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-18 20:06:02 -0500
committerGitHub <noreply@github.com>2020-11-18 20:06:02 -0500
commite9075e24e16e64b2116f66dab9cf59cb7ee01361 (patch)
tree5fb11a9eb4d38afd4130d4ca6f7f1bd4708637a2
parenta48ac37815016c820b2b2a7e79788fed07ae191f (diff)
Update progress indicator styles (#1042)
Diffstat
-rw-r--r--ext/bg/search.html3
-rw-r--r--ext/fg/float.html3
-rw-r--r--ext/mixed/css/display.css85
-rw-r--r--ext/mixed/js/display.js21
4 files changed, 105 insertions, 7 deletions
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 @@
<body>
<div class="content scrollbar" id="content"><div class="content-body" id="content-body">
+ <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
<div class="content-body-inner">
<span tabindex="-1" id="content-scroll-focus"></span>
@@ -46,8 +47,6 @@
</div>
</div>
- <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
-
<div class="scan-disable" id="query-parser-container">
<div id="query-parser-content"></div>
</div>
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 @@
<div class="content-outer">
<div class="content scrollbar" id="content"><div class="content-body" id="content-body">
+ <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
<div class="content-body-inner">
<span tabindex="-1" id="content-scroll-focus"></span>
- <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
-
<div class="scan-disable" id="query-parser-container" hidden>
<div class="search-option" id="query-parser-mode-container" hidden>
<select id="query-parser-mode-select"></select>
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() {