aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--ext/bg/js/settings/modal.js27
1 files changed, 25 insertions, 2 deletions
diff --git a/ext/bg/js/settings/modal.js b/ext/bg/js/settings/modal.js
index 55f73406..0cba167d 100644
--- a/ext/bg/js/settings/modal.js
+++ b/ext/bg/js/settings/modal.js
@@ -23,6 +23,10 @@ class Modal extends EventDispatcher {
this._mutationObserver = null;
this._visible = false;
this._visibleClassName = 'modal-container-open';
+ this._openingClassName = 'modal-container-opening';
+ this._closingClassName = 'modal-container-closing';
+ this._closingAnimationDuration = 375; // Milliseconds; includes buffer
+ this._closeTimer = null;
}
get node() {
@@ -44,8 +48,27 @@ class Modal extends EventDispatcher {
} else {
const {classList} = this._node;
if (classList.contains(this._visibleClassName) === value) { return; }
- classList.toggle(this._visibleClassName, value);
- if (value) { this._node.focus(); }
+
+ if (this._closeTimer !== null) {
+ clearTimeout(this._closeTimer);
+ this._closeTimer = null;
+ }
+
+ if (value) {
+ classList.add(this._openingClassName);
+ getComputedStyle(this._node).getPropertyValue('display'); // Force update of CSS display property, allowing animation
+ classList.add(this._visibleClassName);
+ classList.remove(this._closingClassName);
+ classList.remove(this._openingClassName);
+ this._node.focus();
+ } else {
+ classList.add(this._closingClassName);
+ classList.remove(this._visibleClassName);
+ this._closeTimer = setTimeout(() => {
+ this._closeTimer = null;
+ classList.remove(this._closingClassName);
+ }, this._closingAnimationDuration);
+ }
}
}