alex/yomichan
1
Fork 0
Code Releases Activity

Improve element hiding (#1171)

Browse Source 
* Use multi-line definition for transition

* Update how PopupElement visibility is controlled
This commit is contained in:
toasted-nutbread 2020-12-28 23:00:03 -05:00 committed by GitHub
parent cb8015faed
commit 524c0b2b20
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
ext/bg/css/settings2.css
View File

@ -1447,17 +1447,21 @@ button.icon-button:active {
background-color: var(--dim-background-color); background-color: var(--dim-background-color);
outline: none; outline: none;
z-index: 100; z-index: 100;
opacity: 0;
visibility: hidden;
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) {
display: none;
}
.modal-container.modal-container-open {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transition: opacity var(--animation-duration2) ease-out, visibility 0s linear; 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);
}
.modal-container[hidden]:not(.hidden-animating) {
display: none;
} }
.modal-content { .modal-content {
max-width: 100%; max-width: 100%;
@ -1467,9 +1471,9 @@ button.icon-button:active {
background-color: var(--background-color-light); background-color: var(--background-color-light);
flex: 0 1 auto; flex: 0 1 auto;
border-radius: 0.5em; border-radius: 0.5em;
transform: translate(0, var(--modal-transition-offset)); transform: translate(0, 0);
transition: transition:
transform 0s linear var(--animation-duration2), transform var(--animation-duration2) ease-out,
width var(--animation-duration2) ease-in-out, width var(--animation-duration2) ease-in-out,
height var(--animation-duration2) ease-in-out, height var(--animation-duration2) ease-in-out,
border-radius 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; flex-flow: column nowrap;
overflow: hidden; overflow: hidden;
} }
.modal-container:not(.modal-container-open) .modal-content { .modal-container[hidden] .modal-content {
pointer-events: none; pointer-events: none;
} }
.modal-content.modal-content-small { .modal-content.modal-content-small {
@ -1493,10 +1497,10 @@ button.icon-button:active {
transform: translate(0, 0); transform: translate(0, 0);
border-radius: 0; border-radius: 0;
} }
.modal-container.modal-container-open .modal-content { .modal-container[hidden] .modal-content {
transform: translate(0, 0); transform: translate(0, var(--modal-transition-offset));
transition: transition:
transform var(--animation-duration2) ease-out, transform 0s linear var(--animation-duration2),
width var(--animation-duration2) ease-in-out, width var(--animation-duration2) ease-in-out,
height var(--animation-duration2) ease-in-out, height var(--animation-duration2) ease-in-out,
border-radius 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; border-radius: var(--settings-group-border-radius) var(--settings-group-border-radius) 0 0;
transform: none; transform: none;
opacity: 1; 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%); transform: translate(0, 100%);
opacity: 0; 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; display: none;
} }
.status-footer-header { .status-footer-header {

47
ext/bg/js/settings/popup-elements.js
View File

@ -16,13 +16,11 @@
*/ */
class PopupElement extends EventDispatcher { class PopupElement extends EventDispatcher {
constructor({node, visibleClassName, openingClassName, closingClassName, closingAnimationDuration}) { constructor({node, closingAnimationDuration}) {
super(); super();
this._node = node; this._node = node;
this._visibleClassName = visibleClassName;
this._openingClassName = openingClassName;
this._closingClassName = closingClassName;
this._closingAnimationDuration = closingAnimationDuration; this._closingAnimationDuration = closingAnimationDuration;
this._hiddenAnimatingClass = 'hidden-animating';
this._mutationObserver = null; this._mutationObserver = null;
this._visible = false; this._visible = false;
this._closeTimer = null; this._closeTimer = null;
@ -33,30 +31,31 @@ class PopupElement extends EventDispatcher {
} }
isVisible() { isVisible() {
return this._node.classList.contains(this._visibleClassName); return !this._node.hidden;
} }
setVisible(value, animate=true) { setVisible(value, animate=true) {
value = !!value; value = !!value;
const {classList} = this._node; if (this.isVisible() === value) { return; }
if (classList.contains(this._visibleClassName) === value) { return; }
if (this._closeTimer !== null) { if (this._closeTimer !== null) {
clearTimeout(this._closeTimer); clearTimeout(this._closeTimer);
this._completeClose(classList, true); this._completeClose(true);
} }
const node = this._node;
const {classList} = node;
if (value) { if (value) {
if (animate) { classList.add(this._openingClassName); } if (animate) { classList.add(this._hiddenAnimatingClass); }
getComputedStyle(this._node).getPropertyValue('display'); // Force update of CSS display property, allowing animation getComputedStyle(node).getPropertyValue('display'); // Force update of CSS display property, allowing animation
classList.add(this._visibleClassName); classList.remove(this._hiddenAnimatingClass);
if (animate) { classList.remove(this._openingClassName); } node.hidden = false;
this._node.focus(); node.focus();
} else { } else {
if (animate) { classList.add(this._closingClassName); } if (animate) { classList.add(this._hiddenAnimatingClass); }
classList.remove(this._visibleClassName); node.hidden = true;
if (animate) { 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) { on(eventName, callback) {
if (eventName === 'visibilityChanged') { if (eventName === 'visibilityChanged') {
if (this._mutationObserver === null) { 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 = new MutationObserver(this._onMutation.bind(this));
this._mutationObserver.observe(this._node, { this._mutationObserver.observe(this._node, {
attributes: true, attributes: true,
attributeFilter: ['class'], attributeFilter: ['hidden'],
attributeOldValue: true attributeOldValue: true
}); });
} }
@ -90,15 +89,15 @@ class PopupElement extends EventDispatcher {
// Private // Private
_onMutation() { _onMutation() {
const visible = this._node.classList.contains(this._visibleClassName); const visible = this.isVisible();
if (this._visible === visible) { return; } if (this._visible === visible) { return; }
this._visible = visible; this._visible = visible;
this.trigger('visibilityChanged', {visible}); this.trigger('visibilityChanged', {visible});
} }
_completeClose(classList, reopening) { _completeClose(reopening) {
this._closeTimer = null; this._closeTimer = null;
classList.remove(this._closingClassName); this._node.classList.remove(this._hiddenAnimatingClass);
this.trigger('closeCompleted', {reopening}); this.trigger('closeCompleted', {reopening});
} }
} }
@ -107,9 +106,6 @@ class Modal extends PopupElement {
constructor(node) { constructor(node) {
super({ super({
node, node,
visibleClassName: 'modal-container-open',
openingClassName: 'modal-container-opening',
closingClassName: 'modal-container-closing',
closingAnimationDuration: 375 // Milliseconds; includes buffer closingAnimationDuration: 375 // Milliseconds; includes buffer
}); });
this._contentNode = null; this._contentNode = null;
@ -170,9 +166,6 @@ class StatusFooter extends PopupElement {
constructor(node) { constructor(node) {
super({ super({
node, node,
visibleClassName: 'status-footer-container-open',
openingClassName: 'status-footer-container-opening',
closingClassName: 'status-footer-container-closing',
closingAnimationDuration: 375 // Milliseconds; includes buffer closingAnimationDuration: 375 // Milliseconds; includes buffer
}); });
this._body = node.querySelector('.status-footer'); this._body = node.querySelector('.status-footer');

40
ext/bg/settings2.html
View File

@ -1491,7 +1491,7 @@
</div> </div>
</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">
<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-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> <div class="status-footer-item dictionary-delete-progress" hidden>
@ -1509,7 +1509,7 @@
<!-- Profile modals --> <!-- 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-header">
<div class="modal-title">Profiles</div> <div class="modal-title">Profiles</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -1537,7 +1537,7 @@
</div> </div>
</div></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-header">
<div class="modal-title">Profile Conditions</div> <div class="modal-title">Profile Conditions</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -1588,7 +1588,7 @@
</div> </div>
</div></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-header">
<div class="modal-title">Copy Profile</div> <div class="modal-title">Copy Profile</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -1608,7 +1608,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Confirm Profile Deletion</div></div>
<div class="modal-body"> <div class="modal-body">
<p> <p>
@ -1623,7 +1623,7 @@
<!-- Dictionary modals --> <!-- 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-header">
<div class="modal-title">Dictionaries</div> <div class="modal-title">Dictionaries</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -1689,7 +1689,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
<div class="modal-body"> <div class="modal-body">
<p>Are you sure you want to delete the dictionary:</p> <p>Are you sure you want to delete the dictionary:</p>
@ -1702,7 +1702,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
<div class="modal-body"> <div class="modal-body">
<p>Are you sure you want to delete <strong>all dictionaries</strong>?</p> <p>Are you sure you want to delete <strong>all dictionaries</strong>?</p>
@ -1714,7 +1714,7 @@
</div> </div>
</div></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-header">
<div class="modal-title">Secondary Search Dictionaries</div> <div class="modal-title">Secondary Search Dictionaries</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -1738,7 +1738,7 @@
<!-- Custom CSS modal --> <!-- 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-content-container2 modal-content-dimmer"><div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<div class="modal-title">Custom CSS</div> <div class="modal-title">Custom CSS</div>
@ -1764,7 +1764,7 @@
<!-- Audio sources modal --> <!-- 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-header">
<div class="modal-title">Audio Sources</div> <div class="modal-title">Audio Sources</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -1859,7 +1859,7 @@
<!-- Scanning inputs modal --> <!-- 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-header">
<div class="modal-title">Scanning Inputs</div> <div class="modal-title">Scanning Inputs</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -1917,7 +1917,7 @@
<!-- Input action prevention modal --> <!-- 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-header"><div class="modal-title">Input Action Prevention</div></div>
<div class="modal-body"> <div class="modal-body">
<strong>Prevent middle mouse button actions on:</strong> <strong>Prevent middle mouse button actions on:</strong>
@ -1947,7 +1947,7 @@
<!-- Anki cards modal --> <!-- 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-header">
<div class="modal-title">Anki Cards</div> <div class="modal-title">Anki Cards</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -2008,7 +2008,7 @@
</div> </div>
</div></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-header">
<div class="modal-title">Anki Card Information</div> <div class="modal-title">Anki Card Information</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -2174,7 +2174,7 @@
<!-- Anki field template modals --> <!-- 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-header"><div class="modal-title">Anki Card Templates</div></div>
<div class="modal-body anki-card-templates-layout"> <div class="modal-body anki-card-templates-layout">
<div class="anki-card-templates-info"> <div class="anki-card-templates-info">
@ -2213,7 +2213,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Reset Anki Card Templates</div></div>
<div class="modal-body"> <div class="modal-body">
<p class="danger-text"> <p class="danger-text">
@ -2229,7 +2229,7 @@
<!-- Import/export modals --> <!-- 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-header"><div class="modal-title">Import Error</div></div>
<div class="modal-body"> <div class="modal-body">
<p>An error occurred while trying to import the settings file:</p> <p>An error occurred while trying to import the settings file:</p>
@ -2241,7 +2241,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Import Security Warning</div></div>
<div class="modal-body"> <div class="modal-body">
<p> <p>
@ -2257,7 +2257,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Reset Settings</div></div>
<div class="modal-body"> <div class="modal-body">
<p class="danger-text"> <p class="danger-text">