IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 10:20:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: call discourseLater on menu animations (#24168)

Browse Source 
* UX: add discourseLater call to add breathing room for animation

Allow for smoother animations on lower end devices.
Create time between render and animations.

extend panel width targets by 20 px to account for shadows as well
This commit is contained in:
Jeff Wong 2023-10-30 18:43:20 -07:00 committed by GitHub
parent 360289e108
commit 974c508cc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/discourse/app/components/site-header.js
View File

@ -9,6 +9,7 @@ import SwipeEvents from "discourse/lib/swipe-events";
import Docking from "discourse/mixins/docking";
import RerenderOnDoNotDisturbChange from "discourse/mixins/rerender-on-do-not-disturb-change";
import { isTesting } from "discourse-common/config/environment";
import discourseLater from "discourse-common/lib/later";
import { bind, observes } from "discourse-common/utils/decorators";
const SiteHeaderComponent = MountWidget.extend(
@ -23,7 +24,7 @@ const SiteHeaderComponent = MountWidget.extend(
_topic: null,
_itsatrap: null,
_applicationElement: null,
_PANEL_WIDTH: 320,
_PANEL_WIDTH: 340,
_swipeEvents: null,
@observes(
@ -387,7 +388,14 @@ const SiteHeaderComponent = MountWidget.extend(
headerCloak.animate([{ opacity: 0 }], { fill: "forwards" });
headerCloak.style.display = "block";
animationFinished.then(() => this._animateOpening(panel));
animationFinished.then(() => {
if (isTesting()) {
this._animateOpening(panel);
} else {
discourseLater(() => this._animateOpening(panel));
}
});
}
this._animate = false;

26
app/assets/javascripts/discourse/app/widgets/header.js
View File

@ -11,8 +11,10 @@ import { scrollTop } from "discourse/mixins/scroll-top";
import { avatarImg } from "discourse/widgets/post";
import RenderGlimmer from "discourse/widgets/render-glimmer";
import { createWidget } from "discourse/widgets/widget";
import { isTesting } from "discourse-common/config/environment";
import getURL from "discourse-common/lib/get-url";
import { iconNode } from "discourse-common/lib/icon-library";
import discourseLater from "discourse-common/lib/later";
import I18n from "discourse-i18n";
const SEARCH_BUTTON_ID = "search-button";
@ -358,15 +360,21 @@ createWidget("revamped-hamburger-menu-wrapper", {
const headerCloak = document.querySelector(".header-cloak");
const finishPosition =
document.querySelector("html").classList["direction"] === "rtl"
? "320px"
: "-320px";
? "340px"
: "-340px";
panel
.animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
duration: 200,
fill: "forwards",
easing: "ease-in",
})
.finished.then(() => this.sendWidgetAction("toggleHamburger"));
.finished.then(() => {
if (isTesting()) {
this.sendWidgetAction("toggleHamburger");
} else {
discourseLater(() => this.sendWidgetAction("toggleHamburger"));
}
});
headerCloak.animate([{ opacity: 0 }], {
duration: 200,
fill: "forwards",
@ -409,15 +417,21 @@ createWidget("revamped-user-menu-wrapper", {
const headerCloak = document.querySelector(".header-cloak");
const finishPosition =
document.querySelector("html").classList["direction"] === "rtl"
? "-320px"
: "320px";
? "-340px"
: "340px";
panel
.animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
duration: 200,
fill: "forwards",
easing: "ease-in",
})
.finished.then(() => this.closeUserMenu());
.finished.then(() => {
if (isTesting) {
this.closeUserMenu();
} else {
discourseLater(() => this.closeUserMenu());
}
});
headerCloak.animate([{ opacity: 0 }], {
duration: 200,
fill: "forwards",