reya/coop
1
0
Fork 0
Code Issues Pull Requests 1 Releases 3 Activity

chore: migrate to gpui-base #51

Merged
reya merged 10 commits from gpui-base into master 2026-09-17 11:50:15 +00:00
Conversation 0 Commits 10 Files Changed 69
+92 -191
1 changed files with 92 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3949644597 - Show all commits
crates/ui/src/switch.rs
+92 -191
View File
@@ -1,19 +1,19 @@
use std::cell::RefCell;
use std::rc::Rc; use std::rc::Rc;
use instant::Duration; use std::time::Duration;
use gpui::prelude::FluentBuilder as _; use gpui::prelude::FluentBuilder as _;
use gpui::{ use gpui::{
Animation, AnimationExt as _, AnyElement, App, Element, ElementId, GlobalElementId, App, ElementId, IntoElement, ParentElement as _, RenderOnce, SharedString, Styled as _, Window,
InteractiveElement, IntoElement, LayoutId, ParentElement as _, SharedString, Styled as _, div, px, white,
Window, div, px, white,
}; };
use gpui_base::{Spring, Switch as BaseSwitch, SwitchThumb, SwitchTrack, spring};
use theme::{ActiveTheme, Side}; use theme::{ActiveTheme, Side};
use crate::{Disableable, Sizable, Size}; use crate::{Disableable, Sizable, Size};
type OnClick = Option<Rc<dyn Fn(&bool, &mut Window, &mut App)>>; type OnClick = Option<Rc<dyn Fn(&bool, &mut Window, &mut App)>>;
#[derive(IntoElement)]
pub struct Switch { pub struct Switch {
id: ElementId, id: ElementId,
checked: bool, checked: bool,
@@ -84,204 +84,105 @@ impl Disableable for Switch {
} }
} }
impl IntoElement for Switch { impl RenderOnce for Switch {
type Element = Self; fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
let checked = self.checked;
let on_click = self.on_click.clone();
fn into_element(self) -> Self::Element { let (bg, toggle_bg) = match checked {
self true => (cx.theme().element_background, white()),
} false => (cx.theme().elevated_surface_background, white()),
} };
#[derive(Default)] let (bg, toggle_bg) = match self.disabled {
pub struct SwitchState { true => (bg.opacity(0.3), toggle_bg.opacity(0.8)),
prev_checked: Rc<RefCell<Option<bool>>>, false => (bg, toggle_bg),
} };
impl Element for Switch { let (bg_width, bg_height) = match self.size {
type PrepaintState = (); Size::XSmall | Size::Small => (px(28.), px(16.)),
type RequestLayoutState = AnyElement; _ => (px(36.), px(20.)),
};
fn id(&self) -> Option<ElementId> { let bar_width = match self.size {
Some(self.id.clone()) Size::XSmall | Size::Small => px(12.),
} _ => px(16.),
};
fn source_location(&self) -> Option<&'static std::panic::Location<'static>> { let inset = px(2.);
None
}
fn request_layout( let thumb_left = spring(
&mut self, (self.id.clone(), "thumb"),
global_id: Option<&GlobalElementId>, if checked {
_: Option<&gpui::InspectorElementId>, bg_width - bar_width - inset * 2.
window: &mut Window, } else {
cx: &mut App, px(0.)
) -> (LayoutId, Self::RequestLayoutState) { },
window.with_element_state::<SwitchState, _>(global_id.unwrap(), move |state, window| { Spring::new(Duration::from_secs_f64(0.15)),
let state = state.unwrap_or_default(); window,
cx,
);
let theme = cx.theme(); let accessibility_label = self.label.clone();
let checked = self.checked; let label = self.label;
let on_click = self.on_click.clone();
let (bg, toggle_bg) = match self.checked { div().child(
true => (theme.element_background, white()), BaseSwitch::new(self.id.clone())
false => (theme.elevated_surface_background, white()), .checked(checked)
}; .disabled(self.disabled)
.when_some(accessibility_label, |this, label| {
let (bg, toggle_bg) = match self.disabled { this.accessibility_label(label)
true => (bg.opacity(0.3), toggle_bg.opacity(0.8)), })
false => (bg, toggle_bg), .when_some(on_click, |this, on_click| {
}; this.on_change(move |next, _event, window, cx| on_click(&next, window, cx))
})
let (bg_width, bg_height) = match self.size { .when(self.label_side.is_left(), |this| this.flex_row_reverse())
Size::XSmall | Size::Small => (px(28.), px(16.)),
_ => (px(36.), px(20.)),
};
let bar_width = match self.size {
Size::XSmall | Size::Small => px(12.),
_ => px(16.),
};
let inset = px(2.);
let mut element = div()
.child( .child(
div() div()
.id(self.id.clone()) .w_full()
.when(self.label_side.is_left(), |this| this.flex_row_reverse()) .flex()
.child( .justify_between()
div() .items_center()
.w_full() .gap_4()
.flex() .when_some(label, |this, label| {
.justify_between() // Label
.items_center() this.child(div().text_sm().text_color(cx.theme().text).child(label))
.gap_4()
.when_some(self.label.clone(), |this, label| {
// Label
this.child(
div().text_sm().text_color(cx.theme().text).child(label),
)
})
.child(
// Switch Bar
div()
.id(self.id.clone())
.flex_shrink_0()
.w(bg_width)
.h(bg_height)
.rounded(bg_height / 2.)
.flex()
.items_center()
.border(inset)
.border_color(theme.border_transparent)
.bg(bg)
.when(!self.disabled, |this| this.cursor_pointer())
.child(
// Switch Toggle
div()
.rounded_full()
.when(cx.theme().shadow, |this| this.shadow_sm())
.bg(toggle_bg)
.size(bar_width)
.map(|this| {
let prev_checked = state.prev_checked.clone();
if !self.disabled
&& prev_checked
.borrow()
.is_some_and(|prev| prev != checked)
{
let dur = Duration::from_secs_f64(0.15);
cx.spawn(async move |cx| {
cx.background_executor()
.timer(dur)
.await;
*prev_checked.borrow_mut() =
Some(checked);
})
.detach();
this.with_animation(
ElementId::NamedInteger(
"move".into(),
checked as u64,
),
Animation::new(dur),
move |this, delta| {
let max_x = bg_width
- bar_width
- inset * 2;
let x = if checked {
max_x * delta
} else {
max_x - max_x * delta
};
this.left(x)
},
)
.into_any_element()
} else {
let max_x =
bg_width - bar_width - inset * 2;
let x =
if checked { max_x } else { px(0.) };
this.left(x).into_any_element()
}
}),
),
),
)
.when_some(self.description.clone(), |this, description| {
this.child(
div()
.pr_3()
.text_xs()
.text_color(cx.theme().text_muted)
.child(description),
)
}) })
.when_some( .child(
on_click // Switch Bar
.as_ref() SwitchTrack::new((self.id.clone(), "track"))
.map(|c| c.clone()) .checked(checked)
.filter(|_| !self.disabled), .disabled(self.disabled)
|this, on_click| { .flex_shrink_0()
let prev_checked = state.prev_checked.clone(); .w(bg_width)
this.on_mouse_down(gpui::MouseButton::Left, move |_, window, cx| { .h(bg_height)
cx.stop_propagation(); .rounded(bg_height / 2.)
*prev_checked.borrow_mut() = Some(checked); .flex()
on_click(&!checked, window, cx); .items_center()
}) .border(inset)
}, .border_color(cx.theme().border_transparent)
.bg(bg)
.when(!self.disabled, |this| this.cursor_pointer())
.child(
// Switch Toggle
SwitchThumb::new(checked)
.rounded_full()
.when(cx.theme().shadow, |this| this.shadow_sm())
.bg(toggle_bg)
.size(bar_width)
.left(thumb_left),
),
), ),
) )
.into_any_element(); .when_some(self.description.clone(), |this, description| {
this.child(
((element.request_layout(window, cx), element), state) div()
}) .pr_3()
} .text_xs()
.text_color(cx.theme().text_muted)
fn prepaint( .child(description),
&mut self, )
_: Option<&gpui::GlobalElementId>, }),
_: Option<&gpui::InspectorElementId>, )
_: gpui::Bounds<gpui::Pixels>,
element: &mut Self::RequestLayoutState,
window: &mut Window,
cx: &mut App,
) {
element.prepaint(window, cx);
}
fn paint(
&mut self,
_: Option<&gpui::GlobalElementId>,
_: Option<&gpui::InspectorElementId>,
_: gpui::Bounds<gpui::Pixels>,
element: &mut Self::RequestLayoutState,
_: &mut Self::PrepaintState,
window: &mut Window,
cx: &mut App,
) {
element.paint(window, cx)
} }
} }