Display button improvements (#1065)

* Use hidden and disabled properties instead of custom classes

* Enable transitions on buttons

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 {
+.action-button:disabled:not([hidden]) {
-    visibility: 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)));

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-view-note" hidden 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" hidden 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-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-view-note" hidden 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-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>

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.disabled = !canAdd;
-                button.classList.remove('pending');
+                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;
     }