Pass IDs to IconButtons instead of generating them

This commit is contained in:
Marshall Bowers 2023-10-24 11:20:31 +02:00
parent 7719ed0d6c
commit 47f979d457
11 changed files with 40 additions and 39 deletions

View file

@ -45,7 +45,7 @@ impl<S: 'static + Send + Sync> AssistantPanel<S> {
.child( .child(
div() div()
.flex() .flex()
.child(IconButton::new(Icon::Menu)) .child(IconButton::new(Icon::Menu, "menu"))
.child(Label::new("New Conversation")), .child(Label::new("New Conversation")),
) )
.child( .child(
@ -53,11 +53,11 @@ impl<S: 'static + Send + Sync> AssistantPanel<S> {
.flex() .flex()
.items_center() .items_center()
.gap_px() .gap_px()
.child(IconButton::new(Icon::SplitMessage)) .child(IconButton::new(Icon::SplitMessage, "split_message"))
.child(IconButton::new(Icon::Quote)) .child(IconButton::new(Icon::Quote, "quote"))
.child(IconButton::new(Icon::MagicWand)) .child(IconButton::new(Icon::MagicWand, "magic_wand"))
.child(IconButton::new(Icon::Plus)) .child(IconButton::new(Icon::Plus, "plus"))
.child(IconButton::new(Icon::Maximize)), .child(IconButton::new(Icon::Maximize, "maximize")),
), ),
) )
// Chat Body // Chat Body

View file

@ -32,7 +32,7 @@ impl BufferSearch {
h_stack().bg(color.toolbar).p_2().child( h_stack().bg(color.toolbar).p_2().child(
h_stack().child(Input::new("Search")).child( h_stack().child(Input::new("Search")).child(
IconButton::<Self>::new(Icon::Replace) IconButton::<Self>::new(Icon::Replace, "replace")
.when(self.is_replace_open, |this| this.color(IconColor::Accent)) .when(self.is_replace_open, |this| this.color(IconColor::Accent))
.on_click(|buffer_search, cx| { .on_click(|buffer_search, cx| {
buffer_search.toggle_replace(cx); buffer_search.toggle_replace(cx);

View file

@ -45,8 +45,8 @@ impl<S: 'static + Send + Sync> ChatPanel<S> {
.flex() .flex()
.items_center() .items_center()
.gap_px() .gap_px()
.child(IconButton::new(Icon::File)) .child(IconButton::new(Icon::File, "file"))
.child(IconButton::new(Icon::AudioOn)), .child(IconButton::new(Icon::AudioOn, "audio_on")),
), ),
) )
.child( .child(

View file

@ -61,15 +61,15 @@ impl EditorPane {
Toolbar::new() Toolbar::new()
.left_item(Breadcrumb::new(self.path.clone(), self.symbols.clone())) .left_item(Breadcrumb::new(self.path.clone(), self.symbols.clone()))
.right_items(vec![ .right_items(vec![
IconButton::new(Icon::InlayHint), IconButton::new(Icon::InlayHint, "toggle_inlay_hints"),
IconButton::<Self>::new(Icon::MagnifyingGlass) IconButton::<Self>::new(Icon::MagnifyingGlass, "buffer_search")
.when(self.is_buffer_search_open, |this| { .when(self.is_buffer_search_open, |this| {
this.color(IconColor::Accent) this.color(IconColor::Accent)
}) })
.on_click(|editor, cx| { .on_click(|editor, cx| {
editor.toggle_buffer_search(cx); editor.toggle_buffer_search(cx);
}), }),
IconButton::new(Icon::MagicWand), IconButton::new(Icon::MagicWand, "inline_assist"),
]), ]),
) )
.children(Some(self.buffer_search.clone()).filter(|_| self.is_buffer_search_open)) .children(Some(self.buffer_search.clone()).filter(|_| self.is_buffer_search_open))

View file

@ -19,6 +19,7 @@ impl<S: 'static + Send + Sync> Default for IconButtonHandlers<S> {
#[derive(Element)] #[derive(Element)]
pub struct IconButton<S: 'static + Send + Sync> { pub struct IconButton<S: 'static + Send + Sync> {
state_type: PhantomData<S>, state_type: PhantomData<S>,
id: ElementId,
icon: Icon, icon: Icon,
color: IconColor, color: IconColor,
variant: ButtonVariant, variant: ButtonVariant,
@ -27,9 +28,10 @@ pub struct IconButton<S: 'static + Send + Sync> {
} }
impl<S: 'static + Send + Sync> IconButton<S> { impl<S: 'static + Send + Sync> IconButton<S> {
pub fn new(icon: Icon) -> Self { pub fn new(icon: Icon, id: impl Into<ElementId>) -> Self {
Self { Self {
state_type: PhantomData, state_type: PhantomData,
id: id.into(),
icon, icon,
color: IconColor::default(), color: IconColor::default(),
variant: ButtonVariant::default(), variant: ButtonVariant::default(),
@ -88,8 +90,7 @@ impl<S: 'static + Send + Sync> IconButton<S> {
}; };
let mut button = h_stack() let mut button = h_stack()
// TODO: We probably need a more robust method for differentiating `IconButton`s from one another. .id(self.id.clone())
.id(SharedString::from(format!("{:?}", self.icon)))
.justify_center() .justify_center()
.rounded_md() .rounded_md()
.py(ui_size(cx, 0.25)) .py(ui_size(cx, 0.25))

View file

@ -34,7 +34,7 @@ impl<S: 'static + Send + Sync + Clone> MultiBuffer<S> {
.p_4() .p_4()
.bg(color.editor_subheader) .bg(color.editor_subheader)
.child(Label::new("main.rs")) .child(Label::new("main.rs"))
.child(IconButton::new(Icon::ArrowUpRight)), .child(IconButton::new(Icon::ArrowUpRight, "arrow_up_right")),
) )
.child(buffer) .child(buffer)
})) }))

View file

@ -113,7 +113,7 @@ impl StatusBar {
.items_center() .items_center()
.gap_1() .gap_1()
.child( .child(
IconButton::<Workspace>::new(Icon::FileTree) IconButton::<Workspace>::new(Icon::FileTree, "project_panel")
.when(workspace.is_project_panel_open(), |this| { .when(workspace.is_project_panel_open(), |this| {
this.color(IconColor::Accent) this.color(IconColor::Accent)
}) })
@ -122,7 +122,7 @@ impl StatusBar {
}), }),
) )
.child( .child(
IconButton::<Workspace>::new(Icon::Hash) IconButton::<Workspace>::new(Icon::Hash, "collab_panel")
.when(workspace.is_collab_panel_open(), |this| { .when(workspace.is_collab_panel_open(), |this| {
this.color(IconColor::Accent) this.color(IconColor::Accent)
}) })
@ -131,7 +131,7 @@ impl StatusBar {
}), }),
) )
.child(ToolDivider::new()) .child(ToolDivider::new())
.child(IconButton::new(Icon::XCircle)) .child(IconButton::new(Icon::XCircle, "diagnostics"))
} }
fn right_tools( fn right_tools(
@ -164,11 +164,11 @@ impl StatusBar {
.items_center() .items_center()
.gap_1() .gap_1()
.child( .child(
IconButton::new(Icon::Copilot) IconButton::new(Icon::Copilot, "copilot")
.on_click(|_, _| println!("Copilot clicked.")), .on_click(|_, _| println!("Copilot clicked.")),
) )
.child( .child(
IconButton::new(Icon::Envelope) IconButton::new(Icon::Envelope, "envelope")
.on_click(|_, _| println!("Send Feedback clicked.")), .on_click(|_, _| println!("Send Feedback clicked.")),
), ),
) )
@ -179,7 +179,7 @@ impl StatusBar {
.items_center() .items_center()
.gap_1() .gap_1()
.child( .child(
IconButton::<Workspace>::new(Icon::Terminal) IconButton::<Workspace>::new(Icon::Terminal, "terminal")
.when(workspace.is_terminal_open(), |this| { .when(workspace.is_terminal_open(), |this| {
this.color(IconColor::Accent) this.color(IconColor::Accent)
}) })
@ -188,7 +188,7 @@ impl StatusBar {
}), }),
) )
.child( .child(
IconButton::<Workspace>::new(Icon::MessageBubbles) IconButton::<Workspace>::new(Icon::MessageBubbles, "chat_panel")
.when(workspace.is_chat_panel_open(), |this| { .when(workspace.is_chat_panel_open(), |this| {
this.color(IconColor::Accent) this.color(IconColor::Accent)
}) })
@ -197,7 +197,7 @@ impl StatusBar {
}), }),
) )
.child( .child(
IconButton::<Workspace>::new(Icon::Ai) IconButton::<Workspace>::new(Icon::Ai, "assistant_panel")
.when(workspace.is_assistant_panel_open(), |this| { .when(workspace.is_assistant_panel_open(), |this| {
this.color(IconColor::Accent) this.color(IconColor::Accent)
}) })

View file

@ -51,11 +51,11 @@ impl<S: 'static + Send + Sync + Clone> TabBar<S> {
.items_center() .items_center()
.gap_px() .gap_px()
.child( .child(
IconButton::new(Icon::ArrowLeft) IconButton::new(Icon::ArrowLeft, "arrow_left")
.state(InteractionState::Enabled.if_enabled(can_navigate_back)), .state(InteractionState::Enabled.if_enabled(can_navigate_back)),
) )
.child( .child(
IconButton::new(Icon::ArrowRight).state( IconButton::new(Icon::ArrowRight, "arrow_right").state(
InteractionState::Enabled.if_enabled(can_navigate_forward), InteractionState::Enabled.if_enabled(can_navigate_forward),
), ),
), ),
@ -83,8 +83,8 @@ impl<S: 'static + Send + Sync + Clone> TabBar<S> {
.flex() .flex()
.items_center() .items_center()
.gap_px() .gap_px()
.child(IconButton::new(Icon::Plus)) .child(IconButton::new(Icon::Plus, "plus"))
.child(IconButton::new(Icon::Split)), .child(IconButton::new(Icon::Split, "split")),
), ),
) )
} }

View file

@ -40,11 +40,11 @@ impl<S: 'static + Send + Sync + Clone> Terminal<S> {
.items_center() .items_center()
.gap_px() .gap_px()
.child( .child(
IconButton::new(Icon::ArrowLeft).state( IconButton::new(Icon::ArrowLeft, "arrow_left").state(
InteractionState::Enabled.if_enabled(can_navigate_back), InteractionState::Enabled.if_enabled(can_navigate_back),
), ),
) )
.child(IconButton::new(Icon::ArrowRight).state( .child(IconButton::new(Icon::ArrowRight, "arrow_right").state(
InteractionState::Enabled.if_enabled(can_navigate_forward), InteractionState::Enabled.if_enabled(can_navigate_forward),
)), )),
), ),

View file

@ -129,7 +129,7 @@ impl TitleBar {
.child(Button::new("nate/gpui2-ui-components")), .child(Button::new("nate/gpui2-ui-components")),
) )
.children(player_list.map(|p| PlayerStack::new(p))) .children(player_list.map(|p| PlayerStack::new(p)))
.child(IconButton::new(Icon::Plus)), .child(IconButton::new(Icon::Plus, "plus")),
) )
.child( .child(
div() div()
@ -141,8 +141,8 @@ impl TitleBar {
.flex() .flex()
.items_center() .items_center()
.gap_1() .gap_1()
.child(IconButton::new(Icon::FolderX)) .child(IconButton::new(Icon::FolderX, "folder_x"))
.child(IconButton::new(Icon::Exit)), .child(IconButton::new(Icon::Exit, "exit")),
) )
.child(ToolDivider::new()) .child(ToolDivider::new())
.child( .child(
@ -152,17 +152,17 @@ impl TitleBar {
.items_center() .items_center()
.gap_1() .gap_1()
.child( .child(
IconButton::<TitleBar>::new(Icon::Mic) IconButton::<TitleBar>::new(Icon::Mic, "toggle_mic_status")
.when(self.is_mic_muted(), |this| this.color(IconColor::Error)) .when(self.is_mic_muted(), |this| this.color(IconColor::Error))
.on_click(|title_bar, cx| title_bar.toggle_mic_status(cx)), .on_click(|title_bar, cx| title_bar.toggle_mic_status(cx)),
) )
.child( .child(
IconButton::<TitleBar>::new(Icon::AudioOn) IconButton::<TitleBar>::new(Icon::AudioOn, "toggle_deafened")
.when(self.is_deafened, |this| this.color(IconColor::Error)) .when(self.is_deafened, |this| this.color(IconColor::Error))
.on_click(|title_bar, cx| title_bar.toggle_deafened(cx)), .on_click(|title_bar, cx| title_bar.toggle_deafened(cx)),
) )
.child( .child(
IconButton::<TitleBar>::new(Icon::Screen) IconButton::<TitleBar>::new(Icon::Screen, "toggle_screen_share")
.when( .when(
self.screen_share_status == ScreenShareStatus::Shared, self.screen_share_status == ScreenShareStatus::Shared,
|this| this.color(IconColor::Accent), |this| this.color(IconColor::Accent),

View file

@ -130,9 +130,9 @@ mod stories {
], ],
)) ))
.right_items(vec![ .right_items(vec![
IconButton::new(Icon::InlayHint), IconButton::new(Icon::InlayHint, "toggle_inlay_hints"),
IconButton::new(Icon::MagnifyingGlass), IconButton::new(Icon::MagnifyingGlass, "buffer_search"),
IconButton::new(Icon::MagicWand), IconButton::new(Icon::MagicWand, "inline_assist"),
]), ]),
) )
} }