aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/mixed/css/display.css32
-rw-r--r--ext/mixed/display-templates.html10
-rw-r--r--ext/mixed/js/display.js13
3 files changed, 37 insertions, 18 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index e84d74c5..f9d5c25e 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -60,6 +60,8 @@
--expression-space-size: 0.5em;
+ --animation-duration: 0.125s;
+
/* Colors */
--background-color: #ffffff;
--glossary-image-background-color: #eeeeee;
@@ -420,17 +422,33 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
/* Action buttons */
-.action-button.disabled {
+.action-button {
+ display: block;
+ opacity: 1;
+ transition:
+ opacity var(--animation-duration) linear,
+ visibility 0s linear 0s,
+ filter var(--animation-duration) linear,
+ -webkit-filter var(--animation-duration) linear;
+}
+.action-button[hidden] {
+ display: block;
+ visibility: hidden;
+ opacity: 0;
+ transition:
+ opacity var(--animation-duration) linear,
+ visibility 0s linear var(--animation-duration),
+ filter var(--animation-duration) linear,
+ -webkit-filter var(--animation-duration) linear;
+}
+.action-button:disabled {
pointer-events: none;
cursor: default;
-}
-.action-button.disabled::before {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
- opacity: 0.25;
}
-.action-button.pending {
- visibility: hidden;
+.action-button:disabled:not([hidden]) {
+ opacity: 0.25;
}
.actions {
display: flex;
@@ -453,7 +471,7 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
button.action-button {
cursor: pointer;
}
-.action-button[data-icon]::before {
+.action-button::before {
content: "";
width: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));
height: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index 3b8d97a2..2e2cc32c 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -7,9 +7,9 @@
<div class="entry-header2">
<div class="entry-header3">
<div class="actions">
- <button class="action-button action-view-note pending disabled" data-icon="view-note" title="View added note (Alt + V)"></button>
- <button class="action-button action-add-note pending disabled" data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression (Alt + E)"></button>
- <button class="action-button action-add-note pending disabled" data-icon="add-term-kana" data-mode="term-kana" title="Add reading (Alt + R)"></button>
+ <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note (Alt + V)"></button>
+ <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression (Alt + E)"></button>
+ <button class="action-button action-add-note" hidden disabled data-icon="add-term-kana" data-mode="term-kana" title="Add reading (Alt + R)"></button>
<button class="action-button action-play-audio" data-icon="play-audio" title="Play audio (Alt + P)"></button>
</div>
<div class="term-expression-list"></div>
@@ -60,8 +60,8 @@
<div class="entry-header2">
<div class="entry-header3">
<div class="actions">
- <button class="action-button action-view-note pending disabled" data-icon="view-note" title="View added note (Alt + V)"></button>
- <button class="action-button action-add-note pending disabled" data-icon="add-term-kanji" data-mode="kanji" title="Add Kanji (Alt + K)"></button>
+ <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note (Alt + V)"></button>
+ <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="kanji" title="Add Kanji (Alt + K)"></button>
</div>
<div class="kanji-glyph source-text"></div>
</div>
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 2f24d7bd..807f585a 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -1051,8 +1051,8 @@ class Display extends EventDispatcher {
if (Array.isArray(noteIds) && noteIds.length > 0) {
noteId = noteIds[0];
}
- button.classList.toggle('disabled', !canAdd);
- button.classList.remove('pending');
+ button.disabled = !canAdd;
+ button.hidden = false;
}
if (noteId !== null) {
this._viewerButtonShow(i, noteId);
@@ -1115,14 +1115,14 @@ class Display extends EventDispatcher {
if (index < 0 || index >= this._definitions.length) { return; }
const button = this._adderButtonFind(index, mode);
- if (button !== null && !button.classList.contains('disabled')) {
+ if (button !== null && !button.disabled) {
this._noteAdd(this._definitions[index], mode);
}
}
_noteTryView() {
const button = this._viewerButtonFind(this._index);
- if (button !== null && !button.classList.contains('disabled')) {
+ if (button !== null && !button.disabled) {
api.noteView(button.dataset.noteId);
}
}
@@ -1136,7 +1136,7 @@ class Display extends EventDispatcher {
const index = this._definitions.indexOf(definition);
const adderButton = this._adderButtonFind(index, mode);
if (adderButton !== null) {
- adderButton.classList.add('disabled');
+ adderButton.disabled = true;
}
this._viewerButtonShow(index, noteId);
} else {
@@ -1271,7 +1271,8 @@ class Display extends EventDispatcher {
if (viewerButton === null) {
return;
}
- viewerButton.classList.remove('pending', 'disabled');
+ viewerButton.disabled = false;
+ viewerButton.hidden = false;
viewerButton.dataset.noteId = noteId;
}