diff options
| -rw-r--r-- | ext/bg/css/settings2.css | 42 | ||||
| -rw-r--r-- | ext/bg/js/settings/popup-elements.js | 47 | ||||
| -rw-r--r-- | ext/bg/settings2.html | 40 |
3 files changed, 65 insertions, 64 deletions
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css index 42201174..89359309 100644 --- a/ext/bg/css/settings2.css +++ b/ext/bg/css/settings2.css @@ -1447,18 +1447,22 @@ button.icon-button:active { background-color: var(--dim-background-color); outline: none; z-index: 100; + opacity: 1; + visibility: visible; + transition: + opacity var(--animation-duration2) ease-out, + visibility 0s linear; +} +.modal-container[hidden] { opacity: 0; visibility: hidden; - transition: opacity var(--animation-duration2) ease-in, visibility 0s linear var(--animation-duration2); + transition: + opacity var(--animation-duration2) ease-in, + visibility 0s linear var(--animation-duration2); } -.modal-container:not(.modal-container-open):not(.modal-container-opening):not(.modal-container-closing) { +.modal-container[hidden]:not(.hidden-animating) { display: none; } -.modal-container.modal-container-open { - opacity: 1; - visibility: visible; - transition: opacity var(--animation-duration2) ease-out, visibility 0s linear; -} .modal-content { max-width: 100%; max-height: 100%; @@ -1467,9 +1471,9 @@ button.icon-button:active { background-color: var(--background-color-light); flex: 0 1 auto; border-radius: 0.5em; - transform: translate(0, var(--modal-transition-offset)); + transform: translate(0, 0); transition: - transform 0s linear var(--animation-duration2), + transform var(--animation-duration2) ease-out, width var(--animation-duration2) ease-in-out, height var(--animation-duration2) ease-in-out, border-radius var(--animation-duration2) ease-in-out; @@ -1478,7 +1482,7 @@ button.icon-button:active { flex-flow: column nowrap; overflow: hidden; } -.modal-container:not(.modal-container-open) .modal-content { +.modal-container[hidden] .modal-content { pointer-events: none; } .modal-content.modal-content-small { @@ -1493,10 +1497,10 @@ button.icon-button:active { transform: translate(0, 0); border-radius: 0; } -.modal-container.modal-container-open .modal-content { - transform: translate(0, 0); +.modal-container[hidden] .modal-content { + transform: translate(0, var(--modal-transition-offset)); transition: - transform var(--animation-duration2) ease-out, + transform 0s linear var(--animation-duration2), width var(--animation-duration2) ease-in-out, height var(--animation-duration2) ease-in-out, border-radius var(--animation-duration2) ease-in-out; @@ -1756,14 +1760,18 @@ button.popup-menu-item:disabled { border-radius: var(--settings-group-border-radius) var(--settings-group-border-radius) 0 0; transform: none; opacity: 1; - transition: transform var(--animation-duration) ease-out, opacity var(--animation-duration) ease-out; + transition: + transform var(--animation-duration) ease-out, + opacity var(--animation-duration) ease-out; } -.status-footer-container:not(.status-footer-container-open) .status-footer { +.status-footer-container[hidden] .status-footer { transform: translate(0, 100%); opacity: 0; - transition: transform var(--animation-duration) ease-in, opacity var(--animation-duration) ease-in; + transition: + transform var(--animation-duration) ease-in, + opacity var(--animation-duration) ease-in; } -.status-footer-container:not(.status-footer-container-open):not(.status-footer-container-opening):not(.status-footer-container-closing) { +.status-footer-container[hidden]:not(.hidden-animating) { display: none; } .status-footer-header { diff --git a/ext/bg/js/settings/popup-elements.js b/ext/bg/js/settings/popup-elements.js index 930f02cd..21a557bb 100644 --- a/ext/bg/js/settings/popup-elements.js +++ b/ext/bg/js/settings/popup-elements.js @@ -16,13 +16,11 @@ */ class PopupElement extends EventDispatcher { - constructor({node, visibleClassName, openingClassName, closingClassName, closingAnimationDuration}) { + constructor({node, closingAnimationDuration}) { super(); this._node = node; - this._visibleClassName = visibleClassName; - this._openingClassName = openingClassName; - this._closingClassName = closingClassName; this._closingAnimationDuration = closingAnimationDuration; + this._hiddenAnimatingClass = 'hidden-animating'; this._mutationObserver = null; this._visible = false; this._closeTimer = null; @@ -33,30 +31,31 @@ class PopupElement extends EventDispatcher { } isVisible() { - return this._node.classList.contains(this._visibleClassName); + return !this._node.hidden; } setVisible(value, animate=true) { value = !!value; - const {classList} = this._node; - if (classList.contains(this._visibleClassName) === value) { return; } + if (this.isVisible() === value) { return; } if (this._closeTimer !== null) { clearTimeout(this._closeTimer); - this._completeClose(classList, true); + this._completeClose(true); } + const node = this._node; + const {classList} = node; if (value) { - if (animate) { classList.add(this._openingClassName); } - getComputedStyle(this._node).getPropertyValue('display'); // Force update of CSS display property, allowing animation - classList.add(this._visibleClassName); - if (animate) { classList.remove(this._openingClassName); } - this._node.focus(); + if (animate) { classList.add(this._hiddenAnimatingClass); } + getComputedStyle(node).getPropertyValue('display'); // Force update of CSS display property, allowing animation + classList.remove(this._hiddenAnimatingClass); + node.hidden = false; + node.focus(); } else { - if (animate) { classList.add(this._closingClassName); } - classList.remove(this._visibleClassName); + if (animate) { classList.add(this._hiddenAnimatingClass); } + node.hidden = true; if (animate) { - this._closeTimer = setTimeout(() => this._completeClose(classList, false), this._closingAnimationDuration); + this._closeTimer = setTimeout(() => this._completeClose(false), this._closingAnimationDuration); } } } @@ -64,11 +63,11 @@ class PopupElement extends EventDispatcher { on(eventName, callback) { if (eventName === 'visibilityChanged') { if (this._mutationObserver === null) { - this._visible = this._node.classList.contains(this._visibleClassName); + this._visible = this.isVisible(); this._mutationObserver = new MutationObserver(this._onMutation.bind(this)); this._mutationObserver.observe(this._node, { attributes: true, - attributeFilter: ['class'], + attributeFilter: ['hidden'], attributeOldValue: true }); } @@ -90,15 +89,15 @@ class PopupElement extends EventDispatcher { // Private _onMutation() { - const visible = this._node.classList.contains(this._visibleClassName); + const visible = this.isVisible(); if (this._visible === visible) { return; } this._visible = visible; this.trigger('visibilityChanged', {visible}); } - _completeClose(classList, reopening) { + _completeClose(reopening) { this._closeTimer = null; - classList.remove(this._closingClassName); + this._node.classList.remove(this._hiddenAnimatingClass); this.trigger('closeCompleted', {reopening}); } } @@ -107,9 +106,6 @@ class Modal extends PopupElement { constructor(node) { super({ node, - visibleClassName: 'modal-container-open', - openingClassName: 'modal-container-opening', - closingClassName: 'modal-container-closing', closingAnimationDuration: 375 // Milliseconds; includes buffer }); this._contentNode = null; @@ -170,9 +166,6 @@ class StatusFooter extends PopupElement { constructor(node) { super({ node, - visibleClassName: 'status-footer-container-open', - openingClassName: 'status-footer-container-opening', - closingClassName: 'status-footer-container-closing', closingAnimationDuration: 375 // Milliseconds; includes buffer }); this._body = node.querySelector('.status-footer'); diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html index ee2ae27e..a11383b5 100644 --- a/ext/bg/settings2.html +++ b/ext/bg/settings2.html @@ -1491,7 +1491,7 @@ </div> </div> -<div class="status-footer-container"><div class="status-footer-container2"> +<div class="status-footer-container" hidden><div class="status-footer-container2"> <div class="status-footer"> <div class="status-footer-header"><div class="status-footer-header-label">Tasks in progress:</div><a class="status-footer-header-close">Close</a></div> <div class="status-footer-item dictionary-delete-progress" hidden> @@ -1509,7 +1509,7 @@ <!-- Profile modals --> -<div id="profiles" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content"> +<div id="profiles" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content"> <div class="modal-header"> <div class="modal-title">Profiles</div> <div class="modal-header-button-container"> @@ -1537,7 +1537,7 @@ </div> </div></div> -<div id="profile-conditions" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content"> +<div id="profile-conditions" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content"> <div class="modal-header"> <div class="modal-title">Profile Conditions</div> <div class="modal-header-button-container"> @@ -1588,7 +1588,7 @@ </div> </div></div> -<div id="profile-copy" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small"> +<div id="profile-copy" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> <div class="modal-header"> <div class="modal-title">Copy Profile</div> <div class="modal-header-button-container"> @@ -1608,7 +1608,7 @@ </div> </div></div> -<div id="profile-remove" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small"> +<div id="profile-remove" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> <div class="modal-header"><div class="modal-title">Confirm Profile Deletion</div></div> <div class="modal-body"> <p> @@ -1623,7 +1623,7 @@ <!-- Dictionary modals --> -<div id="dictionaries" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content"> +<div id="dictionaries" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content"> <div class="modal-header"> <div class="modal-title">Dictionaries</div> <div class="modal-header-button-container"> @@ -1689,7 +1689,7 @@ </div> </div></div> -<div id="dictionary-confirm-delete" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small"> +<div id="dictionary-confirm-delete" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> <div class="modal-header"><div class="modal-title">Confirm Dictionary Deletion</div></div> <div class="modal-body"> <p>Are you sure you want to delete the dictionary:</p> @@ -1702,7 +1702,7 @@ </div> </div></div> -<div id="dictionary-confirm-delete-all" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small"> +<div id="dictionary-confirm-delete-all" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> <div class="modal-header"><div class="modal-title">Confirm Dictionary Deletion</div></div> <div class="modal-body"> <p>Are you sure you want to delete <strong>all dictionaries</strong>?</p> @@ -1714,7 +1714,7 @@ </div> </div></div> -<div id="secondary-search-dictionaries" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content"> +<div id="secondary-search-dictionaries" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content"> <div class="modal-header"> <div class="modal-title">Secondary Search Dictionaries</div> <div class="modal-header-button-container"> @@ -1738,7 +1738,7 @@ <!-- Custom CSS modal --> -<div id="custom-css" class="modal-container modal-container-left" tabindex="-1" role="dialog"><div class="modal-content-container1"> +<div id="custom-css" class="modal-container modal-container-left" tabindex="-1" role="dialog" hidden><div class="modal-content-container1"> <div class="modal-content-container2 modal-content-dimmer"><div class="modal-content"> <div class="modal-header"> <div class="modal-title">Custom CSS</div> @@ -1764,7 +1764,7 @@ <!-- Audio sources modal --> -<div id="audio-sources" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content"> +<div id="audio-sources" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content"> <div class="modal-header"> <div class="modal-title">Audio Sources</div> <div class="modal-header-button-container"> @@ -1859,7 +1859,7 @@ <!-- Scanning inputs modal --> -<div id="scanning-inputs" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content"> +<div id="scanning-inputs" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content"> <div class="modal-header"> <div class="modal-title">Scanning Inputs</div> <div class="modal-header-button-container"> @@ -1917,7 +1917,7 @@ <!-- Input action prevention modal --> -<div id="input-action-prevention" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small"> +<div id="input-action-prevention" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> <div class="modal-header"><div class="modal-title">Input Action Prevention</div></div> <div class="modal-body"> <strong>Prevent middle mouse button actions on:</strong> @@ -1947,7 +1947,7 @@ <!-- Anki cards modal --> -<div id="anki-cards" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content"> +<div id="anki-cards" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content"> <div class="modal-header"> <div class="modal-title">Anki Cards</div> <div class="modal-header-button-container"> @@ -2008,7 +2008,7 @@ </div> </div></div> -<div id="anki-cards-info" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-full"> +<div id="anki-cards-info" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full"> <div class="modal-header"> <div class="modal-title">Anki Card Information</div> <div class="modal-header-button-container"> @@ -2174,7 +2174,7 @@ <!-- Anki field template modals --> -<div id="anki-card-templates" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-full"> +<div id="anki-card-templates" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full"> <div class="modal-header"><div class="modal-title">Anki Card Templates</div></div> <div class="modal-body anki-card-templates-layout"> <div class="anki-card-templates-info"> @@ -2213,7 +2213,7 @@ </div> </div></div> -<div id="anki-card-templates-reset" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small"> +<div id="anki-card-templates-reset" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> <div class="modal-header"><div class="modal-title">Reset Anki Card Templates</div></div> <div class="modal-body"> <p class="danger-text"> @@ -2229,7 +2229,7 @@ <!-- Import/export modals --> -<div id="settings-import-error" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small"> +<div id="settings-import-error" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> <div class="modal-header"><div class="modal-title">Import Error</div></div> <div class="modal-body"> <p>An error occurred while trying to import the settings file:</p> @@ -2241,7 +2241,7 @@ </div> </div></div> -<div id="settings-import-warning" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small"> +<div id="settings-import-warning" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> <div class="modal-header"><div class="modal-title">Import Security Warning</div></div> <div class="modal-body"> <p> @@ -2257,7 +2257,7 @@ </div> </div></div> -<div id="settings-reset" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small"> +<div id="settings-reset" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> <div class="modal-header"><div class="modal-title">Reset Settings</div></div> <div class="modal-body"> <p class="danger-text"> |