alex/yomichan
1
Fork 0
Code Releases Activity

Update progress indicator styles (#1042)

Browse Source
This commit is contained in:
toasted-nutbread 2020-11-18 20:06:02 -05:00 committed by GitHub
parent a48ac37815
commit e9075e24e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 105 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ext/bg/search.html
View File

@ -17,6 +17,7 @@
<body> <body>
<div class="content scrollbar" id="content"><div class="content-body" id="content-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"> <div class="content-body-inner">
<span tabindex="-1" id="content-scroll-focus"></span> <span tabindex="-1" id="content-scroll-focus"></span>
@ -46,8 +47,6 @@
</div> </div>
</div> </div>
<div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
<div class="scan-disable" id="query-parser-container"> <div class="scan-disable" id="query-parser-container">
<div id="query-parser-content"></div> <div id="query-parser-content"></div>
</div> </div>

3
ext/fg/float.html
View File

@ -17,12 +17,11 @@
<div class="content-outer"> <div class="content-outer">
<div class="content scrollbar" id="content"><div class="content-body" id="content-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"> <div class="content-body-inner">
<span tabindex="-1" id="content-scroll-focus"></span> <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="scan-disable" id="query-parser-container" hidden>
<div class="search-option" id="query-parser-mode-container" hidden> <div class="search-option" id="query-parser-mode-container" hidden>
<select id="query-parser-mode-select"></select> <select id="query-parser-mode-select"></select>

85
ext/mixed/css/display.css
View File

@ -45,6 +45,12 @@
--sidebar-button-icon-size-no-units: 16; --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))); --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 */ /* Colors */
--background-color: #ffffff; --background-color: #ffffff;
--glossary-image-background-color: #eeeeee; --glossary-image-background-color: #eeeeee;
@ -88,6 +94,9 @@
--scrollbar-thumb-color: #c1c1c1; --scrollbar-thumb-color: #c1c1c1;
--scrollbar-track-color: #f1f1f1; --scrollbar-track-color: #f1f1f1;
--progress-bar-track-color: #cccccc;
--progress-bar-indicator-color: #0275d8;
} }
:root[data-yomichan-theme=dark] { :root[data-yomichan-theme=dark] {
/* Colors */ /* Colors */
@ -133,6 +142,9 @@
--scrollbar-thumb-color: #444444; --scrollbar-thumb-color: #444444;
--scrollbar-track-color: #2f2f2f; --scrollbar-track-color: #2f2f2f;
--progress-bar-track-color: #3a3a3a;
--progress-bar-indicator-color: #0275d8;
} }
@ -1004,3 +1016,76 @@ button.action-button {
.kanji-glossary { .kanji-glossary {
color: var(--dark-text-color); 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;
}

21
ext/mixed/js/display.js
View File

@ -34,7 +34,6 @@
class Display extends EventDispatcher { class Display extends EventDispatcher {
constructor() { constructor() {
super(); super();
this._spinner = document.querySelector('#spinner');
this._container = document.querySelector('#definitions'); this._container = document.querySelector('#definitions');
this._definitions = []; this._definitions = [];
this._optionsContext = {depth: 0, url: window.location.href}; this._optionsContext = {depth: 0, url: window.location.href};
@ -69,6 +68,8 @@ class Display extends EventDispatcher {
this._defaultTitleMaxLength = 1000; this._defaultTitleMaxLength = 1000;
this._fullQuery = ''; this._fullQuery = '';
this._documentUtil = new DocumentUtil(); this._documentUtil = new DocumentUtil();
this._progressIndicator = document.querySelector('#progress-indicator');
this._progressIndicatorTimer = null;
this._progressIndicatorVisible = new DynamicProperty(false); this._progressIndicatorVisible = new DynamicProperty(false);
this._queryParserVisible = false; this._queryParserVisible = false;
this._queryParserVisibleOverride = null; this._queryParserVisibleOverride = null;
@ -563,8 +564,22 @@ class Display extends EventDispatcher {
} }
_onProgressIndicatorVisibleChanged({value}) { _onProgressIndicatorVisibleChanged({value}) {
if (this._spinner === null) { return; } if (this._progressIndicatorTimer !== null) {
this._spinner.hidden = !value; 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() { _onWindowFocus() {