Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into project-panel-context-menu

Browse source
This commit is contained in:
Max Brunsfeld 2023-11-29 09:44:48 -08:00
commit dbfc7d3555
64 changed files with 4038 additions and 2696 deletions
Download patch file Download diff file Expand all files Collapse all files

5
crates/ui2/src/clickable.rs Normal file
View file

@ -0,0 +1,5 @@
use gpui::{ClickEvent, WindowContext};
pub trait Clickable {
fn on_click(self, handler: impl Fn(&ClickEvent, &mut WindowContext) + 'static) -> Self;
}

4
crates/ui2/src/components.rs
View file

@ -1,12 +1,12 @@
mod avatar;
mod button;
mod button2;
mod checkbox;
mod context_menu;
mod disclosure;
mod divider;
mod icon;
mod icon_button;
mod input;
mod keybinding;
mod label;
mod list;
@ -21,13 +21,13 @@ mod stories;
pub use avatar::*;
pub use button::*;
pub use button2::*;
pub use checkbox::*;
pub use context_menu::*;
pub use disclosure::*;
pub use divider::*;
pub use icon::*;
pub use icon_button::*;
pub use input::*;
pub use keybinding::*;
pub use label::*;
pub use list::*;

15
crates/ui2/src/components/button.rs
View file

@ -1,9 +1,7 @@
use std::rc::Rc;
use gpui::{
DefiniteLength, Div, Hsla, IntoElement, MouseButton, MouseDownEvent,
StatefulInteractiveElement, WindowContext,
ClickEvent, DefiniteLength, Div, Hsla, IntoElement, StatefulInteractiveElement, WindowContext,
};
use std::rc::Rc;
use crate::prelude::*;
use crate::{h_stack, Color, Icon, IconButton, IconElement, Label, LineHeightStyle};
@ -67,7 +65,7 @@ impl ButtonVariant {
#[derive(IntoElement)]
pub struct Button {
disabled: bool,
click_handler: Option<Rc<dyn Fn(&MouseDownEvent, &mut WindowContext)>>,
click_handler: Option<Rc<dyn Fn(&ClickEvent, &mut WindowContext)>>,
icon: Option<Icon>,
icon_position: Option<IconPosition>,
label: SharedString,
@ -118,7 +116,7 @@ impl RenderOnce for Button {
}
if let Some(click_handler) = self.click_handler.clone() {
button = button.on_mouse_down(MouseButton::Left, move |event, cx| {
button = button.on_click(move |event, cx| {
click_handler(event, cx);
});
}
@ -168,10 +166,7 @@ impl Button {
self
}
pub fn on_click(
mut self,
handler: impl Fn(&MouseDownEvent, &mut WindowContext) + 'static,
) -> Self {
pub fn on_click(mut self, handler: impl Fn(&ClickEvent, &mut WindowContext) + 'static) -> Self {
self.click_handler = Some(Rc::new(handler));
self
}

413
crates/ui2/src/components/button2.rs Normal file
View file

@ -0,0 +1,413 @@
use gpui::{
rems, AnyElement, AnyView, ClickEvent, Div, Hsla, IntoElement, Rems, Stateful,
StatefulInteractiveElement, WindowContext,
};
use smallvec::SmallVec;
use crate::{h_stack, prelude::*};
// 🚧 Heavily WIP 🚧
// #[derive(Default, PartialEq, Clone, Copy)]
// pub enum ButtonType2 {
// #[default]
// DefaultButton,
// IconButton,
// ButtonLike,
// SplitButton,
// ToggleButton,
// }
#[derive(Default, PartialEq, Clone, Copy)]
pub enum IconPosition2 {
#[default]
Before,
After,
}
#[derive(Default, PartialEq, Clone, Copy)]
pub enum ButtonStyle2 {
#[default]
Filled,
// Tinted,
Subtle,
Transparent,
}
#[derive(Debug, Clone, Copy)]
pub struct ButtonStyle {
pub background: Hsla,
pub border_color: Hsla,
pub label_color: Hsla,
pub icon_color: Hsla,
}
impl ButtonStyle2 {
pub fn enabled(self, cx: &mut WindowContext) -> ButtonStyle {
match self {
ButtonStyle2::Filled => ButtonStyle {
background: cx.theme().colors().element_background,
border_color: gpui::transparent_black(),
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
ButtonStyle2::Subtle => ButtonStyle {
background: cx.theme().colors().ghost_element_background,
border_color: gpui::transparent_black(),
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
ButtonStyle2::Transparent => ButtonStyle {
background: gpui::transparent_black(),
border_color: gpui::transparent_black(),
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
}
}
pub fn hovered(self, cx: &mut WindowContext) -> ButtonStyle {
match self {
ButtonStyle2::Filled => ButtonStyle {
background: cx.theme().colors().element_hover,
border_color: gpui::transparent_black(),
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
ButtonStyle2::Subtle => ButtonStyle {
background: cx.theme().colors().ghost_element_hover,
border_color: gpui::transparent_black(),
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
ButtonStyle2::Transparent => ButtonStyle {
background: gpui::transparent_black(),
border_color: gpui::transparent_black(),
// TODO: These are not great
label_color: Color::Muted.color(cx),
// TODO: These are not great
icon_color: Color::Muted.color(cx),
},
}
}
pub fn active(self, cx: &mut WindowContext) -> ButtonStyle {
match self {
ButtonStyle2::Filled => ButtonStyle {
background: cx.theme().colors().element_active,
border_color: gpui::transparent_black(),
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
ButtonStyle2::Subtle => ButtonStyle {
background: cx.theme().colors().ghost_element_active,
border_color: gpui::transparent_black(),
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
ButtonStyle2::Transparent => ButtonStyle {
background: gpui::transparent_black(),
border_color: gpui::transparent_black(),
// TODO: These are not great
label_color: Color::Muted.color(cx),
// TODO: These are not great
icon_color: Color::Muted.color(cx),
},
}
}
pub fn focused(self, cx: &mut WindowContext) -> ButtonStyle {
match self {
ButtonStyle2::Filled => ButtonStyle {
background: cx.theme().colors().element_background,
border_color: cx.theme().colors().border_focused,
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
ButtonStyle2::Subtle => ButtonStyle {
background: cx.theme().colors().ghost_element_background,
border_color: cx.theme().colors().border_focused,
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
ButtonStyle2::Transparent => ButtonStyle {
background: gpui::transparent_black(),
border_color: cx.theme().colors().border_focused,
label_color: Color::Accent.color(cx),
icon_color: Color::Accent.color(cx),
},
}
}
pub fn disabled(self, cx: &mut WindowContext) -> ButtonStyle {
match self {
ButtonStyle2::Filled => ButtonStyle {
background: cx.theme().colors().element_disabled,
border_color: cx.theme().colors().border_disabled,
label_color: Color::Disabled.color(cx),
icon_color: Color::Disabled.color(cx),
},
ButtonStyle2::Subtle => ButtonStyle {
background: cx.theme().colors().ghost_element_disabled,
border_color: cx.theme().colors().border_disabled,
label_color: Color::Disabled.color(cx),
icon_color: Color::Disabled.color(cx),
},
ButtonStyle2::Transparent => ButtonStyle {
background: gpui::transparent_black(),
border_color: gpui::transparent_black(),
label_color: Color::Disabled.color(cx),
icon_color: Color::Disabled.color(cx),
},
}
}
}
#[derive(Default, PartialEq, Clone, Copy)]
pub enum ButtonSize2 {
#[default]
Default,
Compact,
None,
}
impl ButtonSize2 {
fn height(self) -> Rems {
match self {
ButtonSize2::Default => rems(22. / 16.),
ButtonSize2::Compact => rems(18. / 16.),
ButtonSize2::None => rems(16. / 16.),
}
}
}
// pub struct Button {
// id: ElementId,
// icon: Option<Icon>,
// icon_color: Option<Color>,
// icon_position: Option<IconPosition2>,
// label: Option<Label>,
// label_color: Option<Color>,
// appearance: ButtonAppearance2,
// state: InteractionState,
// selected: bool,
// disabled: bool,
// tooltip: Option<Box<dyn Fn(&mut WindowContext) -> AnyView>>,
// width: Option<DefiniteLength>,
// action: Option<Box<dyn Fn(&MouseDownEvent, &mut WindowContext) + 'static>>,
// secondary_action: Option<Box<dyn Fn(&MouseDownEvent, &mut WindowContext) + 'static>>,
// /// Used to pass down some content to the button
// /// to enable creating custom buttons.
// children: SmallVec<[AnyElement; 2]>,
// }
pub trait ButtonCommon: Clickable {
fn id(&self) -> &ElementId;
fn style(self, style: ButtonStyle2) -> Self;
fn disabled(self, disabled: bool) -> Self;
fn size(self, size: ButtonSize2) -> Self;
fn tooltip(self, tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static) -> Self;
// fn width(&mut self, width: DefiniteLength) -> &mut Self;
}
// pub struct LabelButton {
// // Base properties...
// id: ElementId,
// appearance: ButtonAppearance,
// state: InteractionState,
// disabled: bool,
// size: ButtonSize,
// tooltip: Option<Box<dyn Fn(&mut WindowContext) -> AnyView>>,
// width: Option<DefiniteLength>,
// // Button-specific properties...
// label: Option<SharedString>,
// label_color: Option<Color>,
// icon: Option<Icon>,
// icon_color: Option<Color>,
// icon_position: Option<IconPosition>,
// // Define more fields for additional properties as needed
// }
// impl ButtonCommon for LabelButton {
// fn id(&self) -> &ElementId {
// &self.id
// }
// fn appearance(&mut self, appearance: ButtonAppearance) -> &mut Self {
// self.style= style;
// self
// }
// // implement methods from ButtonCommon trait...
// }
// impl LabelButton {
// pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>) -> Self {
// Self {
// id: id.into(),
// label: Some(label.into()),
// // initialize other fields with default values...
// }
// }
// // ... Define other builder methods specific to Button type...
// }
// TODO: Icon Button
#[derive(IntoElement)]
pub struct ButtonLike {
id: ElementId,
style: ButtonStyle2,
disabled: bool,
size: ButtonSize2,
tooltip: Option<Box<dyn Fn(&mut WindowContext) -> AnyView>>,
on_click: Option<Box<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>>,
children: SmallVec<[AnyElement; 2]>,
}
impl ButtonLike {
pub fn children(
&mut self,
children: impl IntoIterator<Item = impl Into<AnyElement>>,
) -> &mut Self {
self.children = children.into_iter().map(Into::into).collect();
self
}
pub fn new(id: impl Into<ElementId>) -> Self {
Self {
id: id.into(),
style: ButtonStyle2::default(),
disabled: false,
size: ButtonSize2::Default,
tooltip: None,
children: SmallVec::new(),
on_click: None,
}
}
}
impl Clickable for ButtonLike {
fn on_click(mut self, handler: impl Fn(&ClickEvent, &mut WindowContext) + 'static) -> Self {
self.on_click = Some(Box::new(handler));
self
}
}
// impl Selectable for ButtonLike {
// fn selected(&mut self, selected: bool) -> &mut Self {
// todo!()
// }
// fn selected_tooltip(
// &mut self,
// tooltip: Box<dyn Fn(&mut WindowContext) -> AnyView + 'static>,
// ) -> &mut Self {
// todo!()
// }
// }
impl ButtonCommon for ButtonLike {
fn id(&self) -> &ElementId {
&self.id
}
fn style(mut self, style: ButtonStyle2) -> Self {
self.style = style;
self
}
fn disabled(mut self, disabled: bool) -> Self {
self.disabled = disabled;
self
}
fn size(mut self, size: ButtonSize2) -> Self {
self.size = size;
self
}
fn tooltip(mut self, tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static) -> Self {
self.tooltip = Some(Box::new(tooltip));
self
}
}
impl RenderOnce for ButtonLike {
type Rendered = Stateful<Div>;
fn render(self, cx: &mut WindowContext) -> Self::Rendered {
h_stack()
.id(self.id.clone())
.h(self.size.height())
.rounded_md()
.cursor_pointer()
.gap_1()
.px_1()
.bg(self.style.enabled(cx).background)
.hover(|hover| hover.bg(self.style.hovered(cx).background))
.active(|active| active.bg(self.style.active(cx).background))
.when_some(
self.on_click.filter(|_| !self.disabled),
|this, on_click| this.on_click(move |event, cx| (on_click)(event, cx)),
)
.when_some(self.tooltip, |this, tooltip| {
this.tooltip(move |cx| tooltip(cx))
})
.children(self.children)
}
}
impl ParentElement for ButtonLike {
fn children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
&mut self.children
}
}
// pub struct ToggleButton {
// // based on either IconButton2 or Button, with additional 'selected: bool' property
// }
// impl ButtonCommon for ToggleButton {
// fn id(&self) -> &ElementId {
// &self.id
// }
// // ... Implement other methods from ButtonCommon trait with builder patterns...
// }
// impl ToggleButton {
// pub fn new() -> Self {
// // Initialize with default values
// Self {
// // ... initialize fields, possibly with defaults or required parameters...
// }
// }
// // ... Define other builder methods specific to ToggleButton type...
// }
// pub struct SplitButton {
// // Base properties...
// id: ElementId,
// // Button-specific properties, possibly including a DefaultButton
// secondary_action: Option<Box<dyn Fn(&MouseDownEvent, &mut WindowContext)>>,
// // More fields as necessary...
// }
// impl ButtonCommon for SplitButton {
// fn id(&self) -> &ElementId {
// &self.id
// }
// // ... Implement other methods from ButtonCommon trait with builder patterns...
// }
// impl SplitButton {
// pub fn new(id: impl Into<ElementId>) -> Self {
// Self {
// id: id.into(),
// // ... initialize other fields with default values...
// }
// }
// // ... Define other builder methods specific to SplitButton type...
// }

25
crates/ui2/src/components/disclosure.rs
View file

@ -1,19 +1,30 @@
use gpui::{div, Element, ParentElement};
use std::rc::Rc;
use crate::{Color, Icon, IconElement, IconSize, Toggle};
use gpui::{div, ClickEvent, Element, IntoElement, ParentElement, WindowContext};
pub fn disclosure_control(toggle: Toggle) -> impl Element {
use crate::{Color, Icon, IconButton, IconSize, Toggle};
pub fn disclosure_control(
toggle: Toggle,
on_toggle: Option<Rc<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>>,
) -> impl Element {
match (toggle.is_toggleable(), toggle.is_toggled()) {
(false, _) => div(),
(_, true) => div().child(
IconElement::new(Icon::ChevronDown)
IconButton::new("toggle", Icon::ChevronDown)
.color(Color::Muted)
.size(IconSize::Small),
.size(IconSize::Small)
.when_some(on_toggle, move |el, on_toggle| {
el.on_click(move |e, cx| on_toggle(e, cx))
}),
),
(_, false) => div().child(
IconElement::new(Icon::ChevronRight)
IconButton::new("toggle", Icon::ChevronRight)
.color(Color::Muted)
.size(IconSize::Small),
.size(IconSize::Small)
.when_some(on_toggle, move |el, on_toggle| {
el.on_click(move |e, cx| on_toggle(e, cx))
}),
),
}
}

53
crates/ui2/src/components/icon_button.rs
View file

@ -1,25 +1,26 @@
use crate::{h_stack, prelude::*, Icon, IconElement};
use gpui::{prelude::*, Action, AnyView, Div, MouseButton, MouseDownEvent, Stateful};
use crate::{h_stack, prelude::*, Icon, IconElement, IconSize};
use gpui::{prelude::*, Action, AnyView, ClickEvent, Div, Stateful};
#[derive(IntoElement)]
pub struct IconButton {
id: ElementId,
icon: Icon,
color: Color,
size: IconSize,
variant: ButtonVariant,
state: InteractionState,
disabled: bool,
selected: bool,
tooltip: Option<Box<dyn Fn(&mut WindowContext) -> AnyView + 'static>>,
on_mouse_down: Option<Box<dyn Fn(&MouseDownEvent, &mut WindowContext) + 'static>>,
on_click: Option<Box<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>>,
}
impl RenderOnce for IconButton {
type Rendered = Stateful<Div>;
fn render(self, cx: &mut WindowContext) -> Self::Rendered {
let icon_color = match (self.state, self.color) {
(InteractionState::Disabled, _) => Color::Disabled,
(InteractionState::Active, _) => Color::Selected,
let icon_color = match (self.disabled, self.selected, self.color) {
(true, _, _) => Color::Disabled,
(false, true, _) => Color::Selected,
_ => self.color,
};
@ -50,10 +51,14 @@ impl RenderOnce for IconButton {
// place we use an icon button.
// .hover(|style| style.bg(bg_hover_color))
.active(|style| style.bg(bg_active_color))
.child(IconElement::new(self.icon).color(icon_color));
.child(
IconElement::new(self.icon)
.size(self.size)
.color(icon_color),
);
if let Some(click_handler) = self.on_mouse_down {
button = button.on_mouse_down(MouseButton::Left, move |event, cx| {
if let Some(click_handler) = self.on_click {
button = button.on_click(move |event, cx| {
cx.stop_propagation();
click_handler(event, cx);
})
@ -65,8 +70,7 @@ impl RenderOnce for IconButton {
}
}
// HACK: Add an additional identified element wrapper to fix tooltips not showing up.
div().id(self.id.clone()).child(button)
button
}
}
@ -76,11 +80,12 @@ impl IconButton {
id: id.into(),
icon,
color: Color::default(),
size: Default::default(),
variant: ButtonVariant::default(),
state: InteractionState::default(),
selected: false,
disabled: false,
tooltip: None,
on_mouse_down: None,
on_click: None,
}
}
@ -94,13 +99,13 @@ impl IconButton {
self
}
pub fn variant(mut self, variant: ButtonVariant) -> Self {
self.variant = variant;
pub fn size(mut self, size: IconSize) -> Self {
self.size = size;
self
}
pub fn state(mut self, state: InteractionState) -> Self {
self.state = state;
pub fn variant(mut self, variant: ButtonVariant) -> Self {
self.variant = variant;
self
}
@ -109,16 +114,18 @@ impl IconButton {
self
}
pub fn disabled(mut self, disabled: bool) -> Self {
self.disabled = disabled;
self
}
pub fn tooltip(mut self, tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static) -> Self {
self.tooltip = Some(Box::new(tooltip));
self
}
pub fn on_click(
mut self,
handler: impl 'static + Fn(&MouseDownEvent, &mut WindowContext),
) -> Self {
self.on_mouse_down = Some(Box::new(handler));
pub fn on_click(mut self, handler: impl 'static + Fn(&ClickEvent, &mut WindowContext)) -> Self {
self.on_click = Some(Box::new(handler));
self
}

108
crates/ui2/src/components/input.rs
View file

@ -1,108 +0,0 @@
use crate::{prelude::*, Label};
use gpui::{prelude::*, Div, IntoElement, Stateful};
#[derive(Default, PartialEq)]
pub enum InputVariant {
#[default]
Ghost,
Filled,
}
#[derive(IntoElement)]
pub struct Input {
placeholder: SharedString,
value: String,
state: InteractionState,
variant: InputVariant,
disabled: bool,
is_active: bool,
}
impl RenderOnce for Input {
type Rendered = Stateful<Div>;
fn render(self, cx: &mut WindowContext) -> Self::Rendered {
let (input_bg, input_hover_bg, input_active_bg) = match self.variant {
InputVariant::Ghost => (
cx.theme().colors().ghost_element_background,
cx.theme().colors().ghost_element_hover,
cx.theme().colors().ghost_element_active,
),
InputVariant::Filled => (
cx.theme().colors().element_background,
cx.theme().colors().element_hover,
cx.theme().colors().element_active,
),
};
let placeholder_label = Label::new(self.placeholder.clone()).color(if self.disabled {
Color::Disabled
} else {
Color::Placeholder
});
let label = Label::new(self.value.clone()).color(if self.disabled {
Color::Disabled
} else {
Color::Default
});
div()
.id("input")
.h_7()
.w_full()
.px_2()
.border()
.border_color(cx.theme().styles.system.transparent)
.bg(input_bg)
.hover(|style| style.bg(input_hover_bg))
.active(|style| style.bg(input_active_bg))
.flex()
.items_center()
.child(div().flex().items_center().text_ui_sm().map(move |this| {
if self.value.is_empty() {
this.child(placeholder_label)
} else {
this.child(label)
}
}))
}
}
impl Input {
pub fn new(placeholder: impl Into<SharedString>) -> Self {
Self {
placeholder: placeholder.into(),
value: "".to_string(),
state: InteractionState::default(),
variant: InputVariant::default(),
disabled: false,
is_active: false,
}
}
pub fn value(mut self, value: String) -> Self {
self.value = value;
self
}
pub fn state(mut self, state: InteractionState) -> Self {
self.state = state;
self
}
pub fn variant(mut self, variant: InputVariant) -> Self {
self.variant = variant;
self
}
pub fn disabled(mut self, disabled: bool) -> Self {
self.disabled = disabled;
self
}
pub fn is_active(mut self, is_active: bool) -> Self {
self.is_active = is_active;
self
}
}

78
crates/ui2/src/components/list.rs
View file

@ -25,7 +25,9 @@ pub struct ListHeader {
left_icon: Option<Icon>,
meta: Option<ListHeaderMeta>,
toggle: Toggle,
on_toggle: Option<Rc<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>>,
inset: bool,
selected: bool,
}
impl ListHeader {
@ -36,6 +38,8 @@ impl ListHeader {
meta: None,
inset: false,
toggle: Toggle::NotToggleable,
on_toggle: None,
selected: false,
}
}
@ -44,6 +48,14 @@ impl ListHeader {
self
}
pub fn on_toggle(
mut self,
on_toggle: impl Fn(&ClickEvent, &mut WindowContext) + 'static,
) -> Self {
self.on_toggle = Some(Rc::new(on_toggle));
self
}
pub fn left_icon(mut self, left_icon: Option<Icon>) -> Self {
self.left_icon = left_icon;
self
@ -57,13 +69,18 @@ impl ListHeader {
self.meta = meta;
self
}
pub fn selected(mut self, selected: bool) -> Self {
self.selected = selected;
self
}
}
impl RenderOnce for ListHeader {
type Rendered = Div;
fn render(self, cx: &mut WindowContext) -> Self::Rendered {
let disclosure_control = disclosure_control(self.toggle);
let disclosure_control = disclosure_control(self.toggle, self.on_toggle);
let meta = match self.meta {
Some(ListHeaderMeta::Tools(icons)) => div().child(
@ -85,6 +102,9 @@ impl RenderOnce for ListHeader {
div()
.h_5()
.when(self.inset, |this| this.px_2())
.when(self.selected, |this| {
this.bg(cx.theme().colors().ghost_element_selected)
})
.flex()
.flex_1()
.items_center()
@ -177,6 +197,7 @@ pub struct ListItem {
toggle: Toggle,
inset: bool,
on_click: Option<Rc<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>>,
on_toggle: Option<Rc<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>>,
on_secondary_mouse_down: Option<Rc<dyn Fn(&MouseDownEvent, &mut WindowContext) + 'static>>,
children: SmallVec<[AnyElement; 2]>,
}
@ -193,6 +214,7 @@ impl ListItem {
inset: false,
on_click: None,
on_secondary_mouse_down: None,
on_toggle: None,
children: SmallVec::new(),
}
}
@ -230,6 +252,14 @@ impl ListItem {
self
}
pub fn on_toggle(
mut self,
on_toggle: impl Fn(&ClickEvent, &mut WindowContext) + 'static,
) -> Self {
self.on_toggle = Some(Rc::new(on_toggle));
self
}
pub fn selected(mut self, selected: bool) -> Self {
self.selected = selected;
self
@ -255,19 +285,6 @@ impl RenderOnce for ListItem {
type Rendered = Stateful<Div>;
fn render(self, cx: &mut WindowContext) -> Self::Rendered {
let left_content = match self.left_slot.clone() {
Some(GraphicSlot::Icon(i)) => Some(
h_stack().child(
IconElement::new(i)
.size(IconSize::Small)
.color(Color::Muted),
),
),
Some(GraphicSlot::Avatar(src)) => Some(h_stack().child(Avatar::source(src))),
Some(GraphicSlot::PublicActor(src)) => Some(h_stack().child(Avatar::uri(src))),
None => None,
};
div()
.id(self.id)
.relative()
@ -282,8 +299,8 @@ impl RenderOnce for ListItem {
.when(self.selected, |this| {
this.bg(cx.theme().colors().ghost_element_selected)
})
.when_some(self.on_click.clone(), |this, on_click| {
this.on_click(move |event, cx| {
.when_some(self.on_click, |this, on_click| {
this.cursor_pointer().on_click(move |event, cx| {
// HACK: GPUI currently fires `on_click` with any mouse button,
// but we only care about the left button.
if event.down.button == MouseButton::Left {
@ -304,23 +321,18 @@ impl RenderOnce for ListItem {
.gap_1()
.items_center()
.relative()
.child(disclosure_control(self.toggle))
.children(left_content)
.children(self.children)
// HACK: We need to attach the `on_click` handler to the child element in order to have the click
// event actually fire.
// Once this is fixed in GPUI we can remove this and rely on the `on_click` handler set above on the
// outer `div`.
.id("on_click_hack")
.when_some(self.on_click, |this, on_click| {
this.on_click(move |event, cx| {
// HACK: GPUI currently fires `on_click` with any mouse button,
// but we only care about the left button.
if event.down.button == MouseButton::Left {
(on_click)(event, cx)
}
})
}),
.child(disclosure_control(self.toggle, self.on_toggle))
.map(|this| match self.left_slot {
Some(GraphicSlot::Icon(i)) => this.child(
IconElement::new(i)
.size(IconSize::Small)
.color(Color::Muted),
),
Some(GraphicSlot::Avatar(src)) => this.child(Avatar::source(src)),
Some(GraphicSlot::PublicActor(src)) => this.child(Avatar::uri(src)),
None => this,
})
.children(self.children),
)
}
}

3
crates/ui2/src/components/stories.rs
View file

@ -4,18 +4,15 @@ mod checkbox;
mod context_menu;
mod icon;
mod icon_button;
mod input;
mod keybinding;
mod label;
mod list_item;
pub use avatar::*;
pub use button::*;
pub use checkbox::*;
pub use context_menu::*;
pub use icon::*;
pub use icon_button::*;
pub use input::*;
pub use keybinding::*;
pub use label::*;
pub use list_item::*;

164
crates/ui2/src/components/stories/button.rs
View file

@ -1,9 +1,8 @@
use gpui::{rems, Div, Render};
use gpui::{Div, Render};
use story::Story;
use strum::IntoEnumIterator;
use crate::prelude::*;
use crate::{h_stack, v_stack, Button, Icon, IconPosition, Label};
use crate::{h_stack, Button, Icon, IconPosition};
pub struct ButtonStory;
@ -11,8 +10,6 @@ impl Render for ButtonStory {
type Element = Div;
fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
let states = InteractionState::iter();
Story::container()
.child(Story::title_for::<Button>())
.child(
@ -20,121 +17,56 @@ impl Render for ButtonStory {
.flex()
.gap_8()
.child(
div()
.child(Story::label("Ghost (Default)"))
.child(h_stack().gap_2().children(states.clone().map(|state| {
v_stack()
.gap_1()
.child(Label::new(state.to_string()).color(Color::Muted))
.child(
Button::new("Label").variant(ButtonVariant::Ghost), // .state(state),
)
})))
.child(Story::label("Ghost – Left Icon"))
.child(h_stack().gap_2().children(states.clone().map(|state| {
v_stack()
.gap_1()
.child(Label::new(state.to_string()).color(Color::Muted))
.child(
Button::new("Label")
.variant(ButtonVariant::Ghost)
.icon(Icon::Plus)
.icon_position(IconPosition::Left), // .state(state),
)
})))
.child(Story::label("Ghost – Right Icon"))
.child(h_stack().gap_2().children(states.clone().map(|state| {
v_stack()
.gap_1()
.child(Label::new(state.to_string()).color(Color::Muted))
.child(
Button::new("Label")
.variant(ButtonVariant::Ghost)
.icon(Icon::Plus)
.icon_position(IconPosition::Right), // .state(state),
)
}))),
div().child(Story::label("Ghost (Default)")).child(
h_stack()
.gap_2()
.child(Button::new("Label").variant(ButtonVariant::Ghost)),
),
)
.child(Story::label("Ghost – Left Icon"))
.child(
div()
.child(Story::label("Filled"))
.child(h_stack().gap_2().children(states.clone().map(|state| {
v_stack()
.gap_1()
.child(Label::new(state.to_string()).color(Color::Muted))
.child(
Button::new("Label").variant(ButtonVariant::Filled), // .state(state),
)
})))
.child(Story::label("Filled – Left Button"))
.child(h_stack().gap_2().children(states.clone().map(|state| {
v_stack()
.gap_1()
.child(Label::new(state.to_string()).color(Color::Muted))
.child(
Button::new("Label")
.variant(ButtonVariant::Filled)
.icon(Icon::Plus)
.icon_position(IconPosition::Left), // .state(state),
)
})))
.child(Story::label("Filled – Right Button"))
.child(h_stack().gap_2().children(states.clone().map(|state| {
v_stack()
.gap_1()
.child(Label::new(state.to_string()).color(Color::Muted))
.child(
Button::new("Label")
.variant(ButtonVariant::Filled)
.icon(Icon::Plus)
.icon_position(IconPosition::Right), // .state(state),
)
}))),
)
.child(
div()
.child(Story::label("Fixed With"))
.child(h_stack().gap_2().children(states.clone().map(|state| {
v_stack()
.gap_1()
.child(Label::new(state.to_string()).color(Color::Muted))
.child(
Button::new("Label")
.variant(ButtonVariant::Filled)
// .state(state)
.width(Some(rems(6.).into())),
)
})))
.child(Story::label("Fixed With – Left Icon"))
.child(h_stack().gap_2().children(states.clone().map(|state| {
v_stack()
.gap_1()
.child(Label::new(state.to_string()).color(Color::Muted))
.child(
Button::new("Label")
.variant(ButtonVariant::Filled)
// .state(state)
.icon(Icon::Plus)
.icon_position(IconPosition::Left)
.width(Some(rems(6.).into())),
)
})))
.child(Story::label("Fixed With – Right Icon"))
.child(h_stack().gap_2().children(states.clone().map(|state| {
v_stack()
.gap_1()
.child(Label::new(state.to_string()).color(Color::Muted))
.child(
Button::new("Label")
.variant(ButtonVariant::Filled)
// .state(state)
.icon(Icon::Plus)
.icon_position(IconPosition::Right)
.width(Some(rems(6.).into())),
)
}))),
h_stack().gap_2().child(
Button::new("Label")
.variant(ButtonVariant::Ghost)
.icon(Icon::Plus)
.icon_position(IconPosition::Left),
),
),
)
.child(Story::label("Ghost – Right Icon"))
.child(
h_stack().gap_2().child(
Button::new("Label")
.variant(ButtonVariant::Ghost)
.icon(Icon::Plus)
.icon_position(IconPosition::Right),
),
)
.child(
div().child(Story::label("Filled")).child(
h_stack()
.gap_2()
.child(Button::new("Label").variant(ButtonVariant::Filled)),
),
)
.child(Story::label("Filled – Left Button"))
.child(
h_stack().gap_2().child(
Button::new("Label")
.variant(ButtonVariant::Filled)
.icon(Icon::Plus)
.icon_position(IconPosition::Left),
),
)
.child(Story::label("Filled – Right Button"))
.child(
h_stack().gap_2().child(
Button::new("Label")
.variant(ButtonVariant::Filled)
.icon(Icon::Plus)
.icon_position(IconPosition::Right),
),
)
.child(Story::label("Button with `on_click`"))
.child(
Button::new("Label")

18
crates/ui2/src/components/stories/input.rs
View file

@ -1,18 +0,0 @@
use gpui::{Div, Render};
use story::Story;
use crate::prelude::*;
use crate::Input;
pub struct InputStory;
impl Render for InputStory {
type Element = Div;
fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
Story::container()
.child(Story::title_for::<Input>())
.child(Story::label("Default"))
.child(div().flex().child(Input::new("Search")))
}
}

24
crates/ui2/src/components/stories/list_item.rs
View file

@ -2,7 +2,7 @@ use gpui::{Div, Render};
use story::Story;
use crate::prelude::*;
use crate::ListItem;
use crate::{Icon, ListItem};
pub struct ListItemStory;
@ -14,6 +14,20 @@ impl Render for ListItemStory {
.child(Story::title_for::<ListItem>())
.child(Story::label("Default"))
.child(ListItem::new("hello_world").child("Hello, world!"))
.child(Story::label("With left icon"))
.child(
ListItem::new("with_left_icon")
.child("Hello, world!")
.left_icon(Icon::Bell),
)
.child(Story::label("With left avatar"))
.child(
ListItem::new("with_left_avatar")
.child("Hello, world!")
.left_avatar(SharedString::from(
"https://avatars.githubusercontent.com/u/1714999?v=4",
)),
)
.child(Story::label("With `on_click`"))
.child(
ListItem::new("with_on_click")
@ -24,11 +38,11 @@ impl Render for ListItemStory {
)
.child(Story::label("With `on_secondary_mouse_down`"))
.child(
ListItem::new("with_on_secondary_mouse_down").on_secondary_mouse_down(
|_event, _cx| {
ListItem::new("with_on_secondary_mouse_down")
.child("Right click me")
.on_secondary_mouse_down(|_event, _cx| {
println!("Right mouse down!");
},
),
}),
)
}
}

6
crates/ui2/src/fixed.rs Normal file
View file

@ -0,0 +1,6 @@
use gpui::DefiniteLength;
pub trait FixedWidth {
fn width(self, width: DefiniteLength) -> Self;
fn full_width(self) -> Self;
}

59
crates/ui2/src/prelude.rs
View file

@ -3,62 +3,9 @@ pub use gpui::{
ViewContext, WindowContext,
};
pub use crate::clickable::*;
pub use crate::fixed::*;
pub use crate::selectable::*;
pub use crate::StyledExt;
pub use crate::{ButtonVariant, Color};
pub use theme::ActiveTheme;
use strum::EnumIter;
#[derive(Debug, Default, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, EnumIter)]
pub enum IconSide {
#[default]
Left,
Right,
}
#[derive(Default, PartialEq, Copy, Clone, EnumIter, strum::Display)]
pub enum InteractionState {
/// An element that is enabled and not hovered, active, focused, or disabled.
///
/// This is often referred to as the "default" state.
#[default]
Enabled,
/// An element that is hovered.
Hovered,
/// An element has an active mouse down or touch start event on it.
Active,
/// An element that is focused using the keyboard.
Focused,
/// An element that is disabled.
Disabled,
/// A toggleable element that is selected, like the active button in a
/// button toggle group.
Selected,
}
impl InteractionState {
pub fn if_enabled(&self, enabled: bool) -> Self {
if enabled {
*self
} else {
InteractionState::Disabled
}
}
}
#[derive(Debug, Default, PartialEq, Eq, Hash, Clone, Copy)]
pub enum Selection {
#[default]
Unselected,
Indeterminate,
Selected,
}
impl Selection {
pub fn inverse(&self) -> Self {
match self {
Self::Unselected | Self::Indeterminate => Self::Selected,
Self::Selected => Self::Unselected,
}
}
}

26
crates/ui2/src/selectable.rs Normal file
View file

@ -0,0 +1,26 @@
use gpui::{AnyView, WindowContext};
pub trait Selectable {
fn selected(self, selected: bool) -> Self;
fn selected_tooltip(
self,
tooltip: Box<dyn Fn(&mut WindowContext) -> AnyView + 'static>,
) -> Self;
}
#[derive(Debug, Default, PartialEq, Eq, Hash, Clone, Copy)]
pub enum Selection {
#[default]
Unselected,
Indeterminate,
Selected,
}
impl Selection {
pub fn inverse(&self) -> Self {
match self {
Self::Unselected | Self::Indeterminate => Self::Selected,
Self::Selected => Self::Unselected,
}
}
}

2
crates/ui2/src/styles/color.rs
View file

@ -1,7 +1,7 @@
use gpui::{Hsla, WindowContext};
use theme::ActiveTheme;
#[derive(Default, PartialEq, Copy, Clone)]
#[derive(Debug, Default, PartialEq, Copy, Clone)]
pub enum Color {
#[default]
Default,

6
crates/ui2/src/ui2.rs
View file

@ -12,13 +12,19 @@
#![doc = include_str!("../docs/building-ui.md")]
#![doc = include_str!("../docs/todo.md")]
mod clickable;
mod components;
mod fixed;
pub mod prelude;
mod selectable;
mod styled_ext;
mod styles;
pub mod utils;
pub use clickable::*;
pub use components::*;
pub use fixed::*;
pub use prelude::*;
pub use selectable::*;
pub use styled_ext::*;
pub use styles::*;