Files
Ely-GPUI-Components/examples/docs/motion.rs
T

123 lines
4.0 KiB
Rust

use ely_gpui_component::{
Assets,
buttons::Button,
motion::{self, Entrance, Flash, Spinner, Transition},
primitives::FocusScope,
theme::{ActiveTheme, Radius, Theme},
};
use gpui::{
Animation, AnimationExt, App, AppContext, Context, FocusHandle, IntoElement, ParentElement,
Render, Styled, Window, WindowOptions, div,
};
struct Moves {
focus: FocusHandle,
shown: bool,
count: usize,
}
impl Render for Moves {
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let theme = cx.theme();
let still = theme.reduced_motion;
let (toggle, add) = (cx.entity(), cx.entity());
let dot = div()
.size_4()
.rounded(theme.radius(Radius::Xl))
.bg(theme.colors.accent);
let dot = if still {
dot.into_any_element()
} else {
dot.with_animation(
"breath",
Animation::new(motion::duration(motion::SLOW * 4, cx))
.repeat()
.with_easing(motion::ease_in_out_cubic),
|dot, t| dot.opacity(0.4 + 0.6 * (1.0 - (2.0 * t - 1.0).abs())),
)
.into_any_element()
};
FocusScope::new(&self.focus)
.root()
.size_full()
.flex()
.flex_col()
.gap_4()
.p_8()
.bg(theme.colors.bg)
.text_color(theme.colors.fg)
.child(
div()
.flex()
.gap_2()
.child(
Button::new("show", if self.shown { "Hide" } else { "Show" }).on_click(
move |_, _, cx| {
toggle.update(cx, |moves, cx| {
moves.shown = !moves.shown;
cx.notify();
})
},
),
)
.child(Button::new("add", "Add one").on_click(move |_, _, cx| {
add.update(cx, |moves, cx| {
moves.count += 1;
cx.notify();
})
}))
.child(
Button::new(
"still",
if still {
"Allow motion"
} else {
"Reduce motion"
},
)
.on_click(move |_, _, cx| {
Theme::update(cx, |theme| theme.reduced_motion = !still)
}),
),
)
.child(
Transition::new("panel", self.shown)
.entrance(Entrance::Rise)
.child("A panel that rises in and fades out."),
)
.child(
Flash::new("count", self.count)
.p_2()
.child(format!("Count: {}", self.count)),
)
.child(
div()
.flex()
.gap_4()
.child(Spinner::new("spinner"))
.child(dot),
)
}
}
fn main() {
gpui_platform::application()
.with_assets(Assets)
.run(|cx: &mut App| {
ely_gpui_component::init(cx).expect("Ely failed to start");
cx.open_window(WindowOptions::default(), |window, cx| {
cx.new(|cx| {
let focus = cx.focus_handle();
window.focus(&focus, cx);
Moves {
focus,
shown: true,
count: 0,
}
})
})
.expect("window failed to open");
cx.activate(true);
});
}