nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

popupwindow: allow different anims for show/hide

Browse source
This commit is contained in:
2 * r + 2 * t 2025-01-14 13:38:03 +11:00
parent 452cb2d488
commit 824ebda7c8
3 changed files with 30 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
scss/_lib.scss
View file

@ -27,6 +27,14 @@ $scale: 0.068rem;
}
}
@mixin element-decel {
transition: 200ms cubic-bezier(0, 0.55, 0.45, 1);
@mixin element-decel($duration: 200ms) {
transition: $duration cubic-bezier(0, 0.55, 0.45, 1);
}
@mixin overshot {
transition-timing-function: cubic-bezier(0.05, 0.9, 0.1, 1.1);
}
@mixin ease-in-out {
transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
}

8
scss/launcher.scss
View file

@ -2,6 +2,14 @@
@use "lib";
@use "font";
.launcher-wrapper {
@include lib.ease-in-out;
&.visible {
@include lib.overshot;
}
}
.launcher {
@include lib.rounded(10);
@include lib.border(scheme.$overlay0, 0.2);

18
utils/widgets.tsx
View file

@ -58,7 +58,8 @@ export enum TransitionType {
@register()
export class PopupWindow extends Widget.Window {
readonly transitionType: TransitionType;
readonly transitionDuration: number;
readonly transitionInDuration: number;
readonly transitionOutDuration: number;
readonly transitionAmount: number;
readonly #content: Widget.Box;
@ -77,7 +78,8 @@ export class PopupWindow extends Widget.Window {
constructor(
props: Widget.WindowProps & {
transitionType?: TransitionType;
transitionDuration?: number;
transitionInDuration?: number;
transitionOutDuration?: number;
transitionAmount?: number;
}
) {
@ -87,7 +89,8 @@ export class PopupWindow extends Widget.Window {
halign = Gtk.Align.START,
valign = Gtk.Align.START,
transitionType = TransitionType.FADE,
transitionDuration = 200,
transitionInDuration = 300,
transitionOutDuration = 200,
transitionAmount = 0.2,
...sProps
} = props;
@ -106,7 +109,8 @@ export class PopupWindow extends Widget.Window {
super(sProps);
this.transitionType = transitionType;
this.transitionDuration = transitionDuration;
this.transitionInDuration = transitionInDuration;
this.transitionOutDuration = transitionOutDuration;
this.transitionAmount = transitionAmount;
// Wrapper box for animations
@ -123,7 +127,7 @@ export class PopupWindow extends Widget.Window {
#getTransitionCss(visible: boolean) {
return (
`transition-duration: ${this.transitionDuration}ms;` +
`transition-duration: ${visible ? this.transitionInDuration : this.transitionOutDuration}ms;` +
(visible
? "opacity: 1;" + this.transitionType.replaceAll("${width}", "0").replaceAll("${height}", "0")
: "opacity: 0;" +
@ -138,6 +142,7 @@ export class PopupWindow extends Widget.Window {
this.notify("real-visible");
super.show();
this.#content.toggleClassName("visible", true);
this.#content.css = this.#getTransitionCss(true);
}
@ -145,8 +150,9 @@ export class PopupWindow extends Widget.Window {
this.#visible = false;
this.notify("real-visible");
this.#content.toggleClassName("visible", false);
this.#content.css = this.#getTransitionCss(false);
timeout(this.transitionDuration, () => !this.#visible && super.hide());
timeout(this.transitionOutDuration, () => !this.#visible && super.hide());
}
toggle() {