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 { @mixin element-decel($duration: 200ms) {
transition: 200ms cubic-bezier(0, 0.55, 0.45, 1); 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 "lib";
@use "font"; @use "font";
.launcher-wrapper {
@include lib.ease-in-out;
&.visible {
@include lib.overshot;
}
}
.launcher { .launcher {
@include lib.rounded(10); @include lib.rounded(10);
@include lib.border(scheme.$overlay0, 0.2); @include lib.border(scheme.$overlay0, 0.2);

18
utils/widgets.tsx
View file

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