From a6d8915b6cb527fd0493ee94a21f999e033c191d Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Fri, 20 Oct 2023 15:59:47 -0400 Subject: [PATCH 01/10] Document more styles --- crates/gpui3/src/styled.rs | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/crates/gpui3/src/styled.rs b/crates/gpui3/src/styled.rs index 00a68753b6..a23106cfa6 100644 --- a/crates/gpui3/src/styled.rs +++ b/crates/gpui3/src/styled.rs @@ -137,6 +137,8 @@ pub trait Styled { self } + /// Sets the element to align flex items to the start of the container's cross axis. + /// [Docs](https://tailwindcss.com/docs/align-items#start) fn items_start(mut self) -> Self where Self: Sized, @@ -145,6 +147,8 @@ pub trait Styled { self } + /// Sets the element to align flex items to the end of the container's cross axis. + /// [Docs](https://tailwindcss.com/docs/align-items#end) fn items_end(mut self) -> Self where Self: Sized, @@ -153,6 +157,8 @@ pub trait Styled { self } + /// Sets the element to align flex items along the center of the container's cross axis. + /// [Docs](https://tailwindcss.com/docs/align-items#center) fn items_center(mut self) -> Self where Self: Sized, @@ -161,6 +167,9 @@ pub trait Styled { self } + /// Sets the element to justify flex items along the container's main axis + /// such that there is an equal amount of space between each item. + /// [Docs](https://tailwindcss.com/docs/justify-content#space-between) fn justify_between(mut self) -> Self where Self: Sized, @@ -169,6 +178,8 @@ pub trait Styled { self } + /// Sets the element to justify flex items along the center of the container's main axis. + /// [Docs](https://tailwindcss.com/docs/justify-content#center) fn justify_center(mut self) -> Self where Self: Sized, @@ -177,6 +188,8 @@ pub trait Styled { self } + /// Sets the element to justify flex items against the start of the container's main axis. + /// [Docs](https://tailwindcss.com/docs/justify-content#start) fn justify_start(mut self) -> Self where Self: Sized, @@ -185,6 +198,8 @@ pub trait Styled { self } + /// Sets the element to justify flex items against the end of the container's main axis. + /// [Docs](https://tailwindcss.com/docs/justify-content#end) fn justify_end(mut self) -> Self where Self: Sized, @@ -193,6 +208,9 @@ pub trait Styled { self } + /// Sets the element to justify items along the container's main axis such + /// that there is an equal amount of space on each side of each item. + /// [Docs](https://tailwindcss.com/docs/justify-content#space-around) fn justify_around(mut self) -> Self where Self: Sized, @@ -201,6 +219,7 @@ pub trait Styled { self } + /// Sets the background color of the element. fn bg(mut self, fill: F) -> Self where F: Into, @@ -210,6 +229,7 @@ pub trait Styled { self } + /// Sets the border color of the element. fn border_color(mut self, border_color: C) -> Self where C: Into, @@ -219,6 +239,8 @@ pub trait Styled { self } + /// Sets the box shadow of the element. + /// [Docs](https://tailwindcss.com/docs/box-shadow) fn shadow(mut self) -> Self where Self: Sized, @@ -240,6 +262,8 @@ pub trait Styled { self } + /// Clears the box shadow of the element. + /// [Docs](https://tailwindcss.com/docs/box-shadow) fn shadow_none(mut self) -> Self where Self: Sized, @@ -248,6 +272,8 @@ pub trait Styled { self } + /// Sets the box shadow of the element. + /// [Docs](https://tailwindcss.com/docs/box-shadow) fn shadow_sm(mut self) -> Self where Self: Sized, @@ -261,6 +287,8 @@ pub trait Styled { self } + /// Sets the box shadow of the element. + /// [Docs](https://tailwindcss.com/docs/box-shadow) fn shadow_md(mut self) -> Self where Self: Sized, @@ -282,6 +310,8 @@ pub trait Styled { self } + /// Sets the box shadow of the element. + /// [Docs](https://tailwindcss.com/docs/box-shadow) fn shadow_lg(mut self) -> Self where Self: Sized, @@ -303,6 +333,8 @@ pub trait Styled { self } + /// Sets the box shadow of the element. + /// [Docs](https://tailwindcss.com/docs/box-shadow) fn shadow_xl(mut self) -> Self where Self: Sized, @@ -324,6 +356,8 @@ pub trait Styled { self } + /// Sets the box shadow of the element. + /// [Docs](https://tailwindcss.com/docs/box-shadow) fn shadow_2xl(mut self) -> Self where Self: Sized, From 4dc2440024767fe2c8b4c8e834de929866a9c779 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Fri, 20 Oct 2023 16:13:54 -0400 Subject: [PATCH 02/10] Enable text wrapping for `Details` --- crates/ui2/src/elements/details.rs | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/crates/ui2/src/elements/details.rs b/crates/ui2/src/elements/details.rs index 61b793480f..e53e5f7cf5 100644 --- a/crates/ui2/src/elements/details.rs +++ b/crates/ui2/src/elements/details.rs @@ -38,6 +38,7 @@ impl Details { .gap_0p5() .text_xs() .text_color(color.text) + .size_full() .child(self.text) .children(self.meta.map(|m| m)) .children(self.actions.take().map(|a| a)) @@ -49,7 +50,7 @@ pub use stories::*; #[cfg(feature = "stories")] mod stories { - use crate::Story; + use crate::{Button, Story}; use super::*; @@ -79,6 +80,15 @@ mod stories { Details::new("The quick brown fox jumps over the lazy dog") .meta_text("Sphinx of black quartz, judge my vow."), ) + .child(Story::label(cx, "With meta and actions")) + .child( + Details::new("The quick brown fox jumps over the lazy dog") + .meta_text("Sphinx of black quartz, judge my vow.") + .actions(ButtonGroup::new(vec![ + Button::new("Decline"), + Button::new("Accept").variant(crate::ButtonVariant::Filled), + ])), + ) } } } From 080638216a088d6bda532ba4aad84ce6bccf6db3 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Fri, 20 Oct 2023 16:30:45 -0400 Subject: [PATCH 03/10] Wire up `NotificationsPanel` story --- crates/storybook2/src/story_selector.rs | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/crates/storybook2/src/story_selector.rs b/crates/storybook2/src/story_selector.rs index 14edce568e..0e9335b816 100644 --- a/crates/storybook2/src/story_selector.rs +++ b/crates/storybook2/src/story_selector.rs @@ -70,6 +70,7 @@ pub enum ComponentStory { Keybinding, LanguageSelector, MultiBuffer, + NotificationsPanel, Palette, Panel, ProjectPanel, @@ -131,6 +132,10 @@ impl ComponentStory { ui::MultiBufferStory::new().into_any() }) .into_any(), + Self::NotificationsPanel => view(cx.entity(|cx| ()), |_, _| { + ui::NotificationsPanelStory::new().into_any() + }) + .into_any(), Self::Palette => view(cx.entity(|cx| ()), |_, _| { ui::PaletteStory::new().into_any() }) From cbdd1d6d6c1e4974f4c8b8949c877a5eb54b5dad Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Fri, 20 Oct 2023 16:30:52 -0400 Subject: [PATCH 04/10] Use `children` instead of `when` --- crates/ui2/src/components/list.rs | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/crates/ui2/src/components/list.rs b/crates/ui2/src/components/list.rs index e2c30b6bfa..f664bbb547 100644 --- a/crates/ui2/src/components/list.rs +++ b/crates/ui2/src/components/list.rs @@ -514,9 +514,11 @@ impl ListDetailsEntry { .w_full() .line_height(relative(1.2)) .child(Label::new(self.label.clone()).color(label_color)) - .when(self.meta.is_some(), |this| { - this.child(Label::new(self.meta.clone().unwrap()).color(LabelColor::Muted)) - }) + .children( + self.meta + .take() + .map(|meta| Label::new(meta).color(LabelColor::Muted)), + ) .child( h_stack().gap_1().justify_end().children( self.actions From 7719ed0d6c7523e3cac09c2447876563d0c5ae3c Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Fri, 20 Oct 2023 16:34:33 -0400 Subject: [PATCH 05/10] Remove unnecessary iterator --- crates/ui2/src/components/list.rs | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/crates/ui2/src/components/list.rs b/crates/ui2/src/components/list.rs index f664bbb547..fa4ec4fd74 100644 --- a/crates/ui2/src/components/list.rs +++ b/crates/ui2/src/components/list.rs @@ -520,13 +520,10 @@ impl ListDetailsEntry { .map(|meta| Label::new(meta).color(LabelColor::Muted)), ) .child( - h_stack().gap_1().justify_end().children( - self.actions - .take() - .unwrap_or_default() - .into_iter() - .map(|action| action), - ), + h_stack() + .gap_1() + .justify_end() + .children(self.actions.take().unwrap_or_default()), ) } } From 47f979d457e13982bcc0d39052dd84a385457aa6 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Tue, 24 Oct 2023 11:20:31 +0200 Subject: [PATCH 06/10] Pass IDs to `IconButton`s instead of generating them --- crates/ui2/src/components/assistant_panel.rs | 12 ++++++------ crates/ui2/src/components/buffer_search.rs | 2 +- crates/ui2/src/components/chat_panel.rs | 4 ++-- crates/ui2/src/components/editor_pane.rs | 6 +++--- crates/ui2/src/components/icon_button.rs | 7 ++++--- crates/ui2/src/components/multi_buffer.rs | 2 +- crates/ui2/src/components/status_bar.rs | 16 ++++++++-------- crates/ui2/src/components/tab_bar.rs | 8 ++++---- crates/ui2/src/components/terminal.rs | 4 ++-- crates/ui2/src/components/title_bar.rs | 12 ++++++------ crates/ui2/src/components/toolbar.rs | 6 +++--- 11 files changed, 40 insertions(+), 39 deletions(-) diff --git a/crates/ui2/src/components/assistant_panel.rs b/crates/ui2/src/components/assistant_panel.rs index 2b32f332a4..5f38fefb34 100644 --- a/crates/ui2/src/components/assistant_panel.rs +++ b/crates/ui2/src/components/assistant_panel.rs @@ -45,7 +45,7 @@ impl AssistantPanel { .child( div() .flex() - .child(IconButton::new(Icon::Menu)) + .child(IconButton::new(Icon::Menu, "menu")) .child(Label::new("New Conversation")), ) .child( @@ -53,11 +53,11 @@ impl AssistantPanel { .flex() .items_center() .gap_px() - .child(IconButton::new(Icon::SplitMessage)) - .child(IconButton::new(Icon::Quote)) - .child(IconButton::new(Icon::MagicWand)) - .child(IconButton::new(Icon::Plus)) - .child(IconButton::new(Icon::Maximize)), + .child(IconButton::new(Icon::SplitMessage, "split_message")) + .child(IconButton::new(Icon::Quote, "quote")) + .child(IconButton::new(Icon::MagicWand, "magic_wand")) + .child(IconButton::new(Icon::Plus, "plus")) + .child(IconButton::new(Icon::Maximize, "maximize")), ), ) // Chat Body diff --git a/crates/ui2/src/components/buffer_search.rs b/crates/ui2/src/components/buffer_search.rs index 06acd468cd..8e1b9b3e97 100644 --- a/crates/ui2/src/components/buffer_search.rs +++ b/crates/ui2/src/components/buffer_search.rs @@ -32,7 +32,7 @@ impl BufferSearch { h_stack().bg(color.toolbar).p_2().child( h_stack().child(Input::new("Search")).child( - IconButton::::new(Icon::Replace) + IconButton::::new(Icon::Replace, "replace") .when(self.is_replace_open, |this| this.color(IconColor::Accent)) .on_click(|buffer_search, cx| { buffer_search.toggle_replace(cx); diff --git a/crates/ui2/src/components/chat_panel.rs b/crates/ui2/src/components/chat_panel.rs index e8f535bda9..fda07f4718 100644 --- a/crates/ui2/src/components/chat_panel.rs +++ b/crates/ui2/src/components/chat_panel.rs @@ -45,8 +45,8 @@ impl ChatPanel { .flex() .items_center() .gap_px() - .child(IconButton::new(Icon::File)) - .child(IconButton::new(Icon::AudioOn)), + .child(IconButton::new(Icon::File, "file")) + .child(IconButton::new(Icon::AudioOn, "audio_on")), ), ) .child( diff --git a/crates/ui2/src/components/editor_pane.rs b/crates/ui2/src/components/editor_pane.rs index 770273e7d1..a1da0da258 100644 --- a/crates/ui2/src/components/editor_pane.rs +++ b/crates/ui2/src/components/editor_pane.rs @@ -61,15 +61,15 @@ impl EditorPane { Toolbar::new() .left_item(Breadcrumb::new(self.path.clone(), self.symbols.clone())) .right_items(vec![ - IconButton::new(Icon::InlayHint), - IconButton::::new(Icon::MagnifyingGlass) + IconButton::new(Icon::InlayHint, "toggle_inlay_hints"), + IconButton::::new(Icon::MagnifyingGlass, "buffer_search") .when(self.is_buffer_search_open, |this| { this.color(IconColor::Accent) }) .on_click(|editor, 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)) diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs index dd7e9457e1..a5edfc9c73 100644 --- a/crates/ui2/src/components/icon_button.rs +++ b/crates/ui2/src/components/icon_button.rs @@ -19,6 +19,7 @@ impl Default for IconButtonHandlers { #[derive(Element)] pub struct IconButton { state_type: PhantomData, + id: ElementId, icon: Icon, color: IconColor, variant: ButtonVariant, @@ -27,9 +28,10 @@ pub struct IconButton { } impl IconButton { - pub fn new(icon: Icon) -> Self { + pub fn new(icon: Icon, id: impl Into) -> Self { Self { state_type: PhantomData, + id: id.into(), icon, color: IconColor::default(), variant: ButtonVariant::default(), @@ -88,8 +90,7 @@ impl IconButton { }; let mut button = h_stack() - // TODO: We probably need a more robust method for differentiating `IconButton`s from one another. - .id(SharedString::from(format!("{:?}", self.icon))) + .id(self.id.clone()) .justify_center() .rounded_md() .py(ui_size(cx, 0.25)) diff --git a/crates/ui2/src/components/multi_buffer.rs b/crates/ui2/src/components/multi_buffer.rs index 32ac40762a..0b47f2c3d8 100644 --- a/crates/ui2/src/components/multi_buffer.rs +++ b/crates/ui2/src/components/multi_buffer.rs @@ -34,7 +34,7 @@ impl MultiBuffer { .p_4() .bg(color.editor_subheader) .child(Label::new("main.rs")) - .child(IconButton::new(Icon::ArrowUpRight)), + .child(IconButton::new(Icon::ArrowUpRight, "arrow_up_right")), ) .child(buffer) })) diff --git a/crates/ui2/src/components/status_bar.rs b/crates/ui2/src/components/status_bar.rs index 69d5344290..cfcfdf0700 100644 --- a/crates/ui2/src/components/status_bar.rs +++ b/crates/ui2/src/components/status_bar.rs @@ -113,7 +113,7 @@ impl StatusBar { .items_center() .gap_1() .child( - IconButton::::new(Icon::FileTree) + IconButton::::new(Icon::FileTree, "project_panel") .when(workspace.is_project_panel_open(), |this| { this.color(IconColor::Accent) }) @@ -122,7 +122,7 @@ impl StatusBar { }), ) .child( - IconButton::::new(Icon::Hash) + IconButton::::new(Icon::Hash, "collab_panel") .when(workspace.is_collab_panel_open(), |this| { this.color(IconColor::Accent) }) @@ -131,7 +131,7 @@ impl StatusBar { }), ) .child(ToolDivider::new()) - .child(IconButton::new(Icon::XCircle)) + .child(IconButton::new(Icon::XCircle, "diagnostics")) } fn right_tools( @@ -164,11 +164,11 @@ impl StatusBar { .items_center() .gap_1() .child( - IconButton::new(Icon::Copilot) + IconButton::new(Icon::Copilot, "copilot") .on_click(|_, _| println!("Copilot clicked.")), ) .child( - IconButton::new(Icon::Envelope) + IconButton::new(Icon::Envelope, "envelope") .on_click(|_, _| println!("Send Feedback clicked.")), ), ) @@ -179,7 +179,7 @@ impl StatusBar { .items_center() .gap_1() .child( - IconButton::::new(Icon::Terminal) + IconButton::::new(Icon::Terminal, "terminal") .when(workspace.is_terminal_open(), |this| { this.color(IconColor::Accent) }) @@ -188,7 +188,7 @@ impl StatusBar { }), ) .child( - IconButton::::new(Icon::MessageBubbles) + IconButton::::new(Icon::MessageBubbles, "chat_panel") .when(workspace.is_chat_panel_open(), |this| { this.color(IconColor::Accent) }) @@ -197,7 +197,7 @@ impl StatusBar { }), ) .child( - IconButton::::new(Icon::Ai) + IconButton::::new(Icon::Ai, "assistant_panel") .when(workspace.is_assistant_panel_open(), |this| { this.color(IconColor::Accent) }) diff --git a/crates/ui2/src/components/tab_bar.rs b/crates/ui2/src/components/tab_bar.rs index 5c20bbe397..445f2d6deb 100644 --- a/crates/ui2/src/components/tab_bar.rs +++ b/crates/ui2/src/components/tab_bar.rs @@ -51,11 +51,11 @@ impl TabBar { .items_center() .gap_px() .child( - IconButton::new(Icon::ArrowLeft) + IconButton::new(Icon::ArrowLeft, "arrow_left") .state(InteractionState::Enabled.if_enabled(can_navigate_back)), ) .child( - IconButton::new(Icon::ArrowRight).state( + IconButton::new(Icon::ArrowRight, "arrow_right").state( InteractionState::Enabled.if_enabled(can_navigate_forward), ), ), @@ -83,8 +83,8 @@ impl TabBar { .flex() .items_center() .gap_px() - .child(IconButton::new(Icon::Plus)) - .child(IconButton::new(Icon::Split)), + .child(IconButton::new(Icon::Plus, "plus")) + .child(IconButton::new(Icon::Split, "split")), ), ) } diff --git a/crates/ui2/src/components/terminal.rs b/crates/ui2/src/components/terminal.rs index 8a68d05067..aaf4382f51 100644 --- a/crates/ui2/src/components/terminal.rs +++ b/crates/ui2/src/components/terminal.rs @@ -40,11 +40,11 @@ impl Terminal { .items_center() .gap_px() .child( - IconButton::new(Icon::ArrowLeft).state( + IconButton::new(Icon::ArrowLeft, "arrow_left").state( 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), )), ), diff --git a/crates/ui2/src/components/title_bar.rs b/crates/ui2/src/components/title_bar.rs index 4c106c82d6..c33d37238a 100644 --- a/crates/ui2/src/components/title_bar.rs +++ b/crates/ui2/src/components/title_bar.rs @@ -129,7 +129,7 @@ impl TitleBar { .child(Button::new("nate/gpui2-ui-components")), ) .children(player_list.map(|p| PlayerStack::new(p))) - .child(IconButton::new(Icon::Plus)), + .child(IconButton::new(Icon::Plus, "plus")), ) .child( div() @@ -141,8 +141,8 @@ impl TitleBar { .flex() .items_center() .gap_1() - .child(IconButton::new(Icon::FolderX)) - .child(IconButton::new(Icon::Exit)), + .child(IconButton::new(Icon::FolderX, "folder_x")) + .child(IconButton::new(Icon::Exit, "exit")), ) .child(ToolDivider::new()) .child( @@ -152,17 +152,17 @@ impl TitleBar { .items_center() .gap_1() .child( - IconButton::::new(Icon::Mic) + IconButton::::new(Icon::Mic, "toggle_mic_status") .when(self.is_mic_muted(), |this| this.color(IconColor::Error)) .on_click(|title_bar, cx| title_bar.toggle_mic_status(cx)), ) .child( - IconButton::::new(Icon::AudioOn) + IconButton::::new(Icon::AudioOn, "toggle_deafened") .when(self.is_deafened, |this| this.color(IconColor::Error)) .on_click(|title_bar, cx| title_bar.toggle_deafened(cx)), ) .child( - IconButton::::new(Icon::Screen) + IconButton::::new(Icon::Screen, "toggle_screen_share") .when( self.screen_share_status == ScreenShareStatus::Shared, |this| this.color(IconColor::Accent), diff --git a/crates/ui2/src/components/toolbar.rs b/crates/ui2/src/components/toolbar.rs index aeec01bc7f..081c3664be 100644 --- a/crates/ui2/src/components/toolbar.rs +++ b/crates/ui2/src/components/toolbar.rs @@ -130,9 +130,9 @@ mod stories { ], )) .right_items(vec![ - IconButton::new(Icon::InlayHint), - IconButton::new(Icon::MagnifyingGlass), - IconButton::new(Icon::MagicWand), + IconButton::new(Icon::InlayHint, "toggle_inlay_hints"), + IconButton::new(Icon::MagnifyingGlass, "buffer_search"), + IconButton::new(Icon::MagicWand, "inline_assist"), ]), ) } From 6a532af1fdc613754965a82e963c1ffdd192285c Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Tue, 24 Oct 2023 11:26:19 +0200 Subject: [PATCH 07/10] Swap the parameters to `IconButton` --- crates/ui2/src/components/assistant_panel.rs | 12 ++++++------ crates/ui2/src/components/buffer_search.rs | 2 +- crates/ui2/src/components/chat_panel.rs | 4 ++-- crates/ui2/src/components/editor_pane.rs | 6 +++--- crates/ui2/src/components/icon_button.rs | 2 +- crates/ui2/src/components/multi_buffer.rs | 2 +- crates/ui2/src/components/status_bar.rs | 16 ++++++++-------- crates/ui2/src/components/tab_bar.rs | 8 ++++---- crates/ui2/src/components/terminal.rs | 4 ++-- crates/ui2/src/components/title_bar.rs | 12 ++++++------ crates/ui2/src/components/toolbar.rs | 6 +++--- 11 files changed, 37 insertions(+), 37 deletions(-) diff --git a/crates/ui2/src/components/assistant_panel.rs b/crates/ui2/src/components/assistant_panel.rs index 5f38fefb34..d5d22d819c 100644 --- a/crates/ui2/src/components/assistant_panel.rs +++ b/crates/ui2/src/components/assistant_panel.rs @@ -45,7 +45,7 @@ impl AssistantPanel { .child( div() .flex() - .child(IconButton::new(Icon::Menu, "menu")) + .child(IconButton::new("menu", Icon::Menu)) .child(Label::new("New Conversation")), ) .child( @@ -53,11 +53,11 @@ impl AssistantPanel { .flex() .items_center() .gap_px() - .child(IconButton::new(Icon::SplitMessage, "split_message")) - .child(IconButton::new(Icon::Quote, "quote")) - .child(IconButton::new(Icon::MagicWand, "magic_wand")) - .child(IconButton::new(Icon::Plus, "plus")) - .child(IconButton::new(Icon::Maximize, "maximize")), + .child(IconButton::new("split_message", Icon::SplitMessage)) + .child(IconButton::new("quote", Icon::Quote)) + .child(IconButton::new("magic_wand", Icon::MagicWand)) + .child(IconButton::new("plus", Icon::Plus)) + .child(IconButton::new("maximize", Icon::Maximize)), ), ) // Chat Body diff --git a/crates/ui2/src/components/buffer_search.rs b/crates/ui2/src/components/buffer_search.rs index 8e1b9b3e97..bdb31b0369 100644 --- a/crates/ui2/src/components/buffer_search.rs +++ b/crates/ui2/src/components/buffer_search.rs @@ -32,7 +32,7 @@ impl BufferSearch { h_stack().bg(color.toolbar).p_2().child( h_stack().child(Input::new("Search")).child( - IconButton::::new(Icon::Replace, "replace") + IconButton::::new("replace", Icon::Replace) .when(self.is_replace_open, |this| this.color(IconColor::Accent)) .on_click(|buffer_search, cx| { buffer_search.toggle_replace(cx); diff --git a/crates/ui2/src/components/chat_panel.rs b/crates/ui2/src/components/chat_panel.rs index fda07f4718..7afccd6d9d 100644 --- a/crates/ui2/src/components/chat_panel.rs +++ b/crates/ui2/src/components/chat_panel.rs @@ -45,8 +45,8 @@ impl ChatPanel { .flex() .items_center() .gap_px() - .child(IconButton::new(Icon::File, "file")) - .child(IconButton::new(Icon::AudioOn, "audio_on")), + .child(IconButton::new("file", Icon::File)) + .child(IconButton::new("audio_on", Icon::AudioOn)), ), ) .child( diff --git a/crates/ui2/src/components/editor_pane.rs b/crates/ui2/src/components/editor_pane.rs index a1da0da258..ebdcd4a873 100644 --- a/crates/ui2/src/components/editor_pane.rs +++ b/crates/ui2/src/components/editor_pane.rs @@ -61,15 +61,15 @@ impl EditorPane { Toolbar::new() .left_item(Breadcrumb::new(self.path.clone(), self.symbols.clone())) .right_items(vec![ - IconButton::new(Icon::InlayHint, "toggle_inlay_hints"), - IconButton::::new(Icon::MagnifyingGlass, "buffer_search") + IconButton::new("toggle_inlay_hints", Icon::InlayHint), + IconButton::::new("buffer_search", Icon::MagnifyingGlass) .when(self.is_buffer_search_open, |this| { this.color(IconColor::Accent) }) .on_click(|editor, cx| { editor.toggle_buffer_search(cx); }), - IconButton::new(Icon::MagicWand, "inline_assist"), + IconButton::new("inline_assist", Icon::MagicWand), ]), ) .children(Some(self.buffer_search.clone()).filter(|_| self.is_buffer_search_open)) diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs index a5edfc9c73..bd5ad77437 100644 --- a/crates/ui2/src/components/icon_button.rs +++ b/crates/ui2/src/components/icon_button.rs @@ -28,7 +28,7 @@ pub struct IconButton { } impl IconButton { - pub fn new(icon: Icon, id: impl Into) -> Self { + pub fn new(id: impl Into, icon: Icon) -> Self { Self { state_type: PhantomData, id: id.into(), diff --git a/crates/ui2/src/components/multi_buffer.rs b/crates/ui2/src/components/multi_buffer.rs index 0b47f2c3d8..bf8b6777cf 100644 --- a/crates/ui2/src/components/multi_buffer.rs +++ b/crates/ui2/src/components/multi_buffer.rs @@ -34,7 +34,7 @@ impl MultiBuffer { .p_4() .bg(color.editor_subheader) .child(Label::new("main.rs")) - .child(IconButton::new(Icon::ArrowUpRight, "arrow_up_right")), + .child(IconButton::new("arrow_up_right", Icon::ArrowUpRight)), ) .child(buffer) })) diff --git a/crates/ui2/src/components/status_bar.rs b/crates/ui2/src/components/status_bar.rs index cfcfdf0700..8ebb8901f3 100644 --- a/crates/ui2/src/components/status_bar.rs +++ b/crates/ui2/src/components/status_bar.rs @@ -113,7 +113,7 @@ impl StatusBar { .items_center() .gap_1() .child( - IconButton::::new(Icon::FileTree, "project_panel") + IconButton::::new("project_panel", Icon::FileTree) .when(workspace.is_project_panel_open(), |this| { this.color(IconColor::Accent) }) @@ -122,7 +122,7 @@ impl StatusBar { }), ) .child( - IconButton::::new(Icon::Hash, "collab_panel") + IconButton::::new("collab_panel", Icon::Hash) .when(workspace.is_collab_panel_open(), |this| { this.color(IconColor::Accent) }) @@ -131,7 +131,7 @@ impl StatusBar { }), ) .child(ToolDivider::new()) - .child(IconButton::new(Icon::XCircle, "diagnostics")) + .child(IconButton::new("diagnostics", Icon::XCircle)) } fn right_tools( @@ -164,11 +164,11 @@ impl StatusBar { .items_center() .gap_1() .child( - IconButton::new(Icon::Copilot, "copilot") + IconButton::new("copilot", Icon::Copilot) .on_click(|_, _| println!("Copilot clicked.")), ) .child( - IconButton::new(Icon::Envelope, "envelope") + IconButton::new("envelope", Icon::Envelope) .on_click(|_, _| println!("Send Feedback clicked.")), ), ) @@ -179,7 +179,7 @@ impl StatusBar { .items_center() .gap_1() .child( - IconButton::::new(Icon::Terminal, "terminal") + IconButton::::new("terminal", Icon::Terminal) .when(workspace.is_terminal_open(), |this| { this.color(IconColor::Accent) }) @@ -188,7 +188,7 @@ impl StatusBar { }), ) .child( - IconButton::::new(Icon::MessageBubbles, "chat_panel") + IconButton::::new("chat_panel", Icon::MessageBubbles) .when(workspace.is_chat_panel_open(), |this| { this.color(IconColor::Accent) }) @@ -197,7 +197,7 @@ impl StatusBar { }), ) .child( - IconButton::::new(Icon::Ai, "assistant_panel") + IconButton::::new("assistant_panel", Icon::Ai) .when(workspace.is_assistant_panel_open(), |this| { this.color(IconColor::Accent) }) diff --git a/crates/ui2/src/components/tab_bar.rs b/crates/ui2/src/components/tab_bar.rs index 445f2d6deb..c7fe1578f2 100644 --- a/crates/ui2/src/components/tab_bar.rs +++ b/crates/ui2/src/components/tab_bar.rs @@ -51,11 +51,11 @@ impl TabBar { .items_center() .gap_px() .child( - IconButton::new(Icon::ArrowLeft, "arrow_left") + IconButton::new("arrow_left", Icon::ArrowLeft) .state(InteractionState::Enabled.if_enabled(can_navigate_back)), ) .child( - IconButton::new(Icon::ArrowRight, "arrow_right").state( + IconButton::new("arrow_right", Icon::ArrowRight).state( InteractionState::Enabled.if_enabled(can_navigate_forward), ), ), @@ -83,8 +83,8 @@ impl TabBar { .flex() .items_center() .gap_px() - .child(IconButton::new(Icon::Plus, "plus")) - .child(IconButton::new(Icon::Split, "split")), + .child(IconButton::new("plus", Icon::Plus)) + .child(IconButton::new("split", Icon::Split)), ), ) } diff --git a/crates/ui2/src/components/terminal.rs b/crates/ui2/src/components/terminal.rs index aaf4382f51..443973a0dc 100644 --- a/crates/ui2/src/components/terminal.rs +++ b/crates/ui2/src/components/terminal.rs @@ -40,11 +40,11 @@ impl Terminal { .items_center() .gap_px() .child( - IconButton::new(Icon::ArrowLeft, "arrow_left").state( + IconButton::new("arrow_left", Icon::ArrowLeft).state( InteractionState::Enabled.if_enabled(can_navigate_back), ), ) - .child(IconButton::new(Icon::ArrowRight, "arrow_right").state( + .child(IconButton::new("arrow_right", Icon::ArrowRight).state( InteractionState::Enabled.if_enabled(can_navigate_forward), )), ), diff --git a/crates/ui2/src/components/title_bar.rs b/crates/ui2/src/components/title_bar.rs index c33d37238a..f6d4fca97c 100644 --- a/crates/ui2/src/components/title_bar.rs +++ b/crates/ui2/src/components/title_bar.rs @@ -129,7 +129,7 @@ impl TitleBar { .child(Button::new("nate/gpui2-ui-components")), ) .children(player_list.map(|p| PlayerStack::new(p))) - .child(IconButton::new(Icon::Plus, "plus")), + .child(IconButton::new("plus", Icon::Plus)), ) .child( div() @@ -141,8 +141,8 @@ impl TitleBar { .flex() .items_center() .gap_1() - .child(IconButton::new(Icon::FolderX, "folder_x")) - .child(IconButton::new(Icon::Exit, "exit")), + .child(IconButton::new("folder_x", Icon::FolderX)) + .child(IconButton::new("exit", Icon::Exit)), ) .child(ToolDivider::new()) .child( @@ -152,17 +152,17 @@ impl TitleBar { .items_center() .gap_1() .child( - IconButton::::new(Icon::Mic, "toggle_mic_status") + IconButton::::new("toggle_mic_status", Icon::Mic) .when(self.is_mic_muted(), |this| this.color(IconColor::Error)) .on_click(|title_bar, cx| title_bar.toggle_mic_status(cx)), ) .child( - IconButton::::new(Icon::AudioOn, "toggle_deafened") + IconButton::::new("toggle_deafened", Icon::AudioOn) .when(self.is_deafened, |this| this.color(IconColor::Error)) .on_click(|title_bar, cx| title_bar.toggle_deafened(cx)), ) .child( - IconButton::::new(Icon::Screen, "toggle_screen_share") + IconButton::::new("toggle_screen_share", Icon::Screen) .when( self.screen_share_status == ScreenShareStatus::Shared, |this| this.color(IconColor::Accent), diff --git a/crates/ui2/src/components/toolbar.rs b/crates/ui2/src/components/toolbar.rs index 081c3664be..0d44235faf 100644 --- a/crates/ui2/src/components/toolbar.rs +++ b/crates/ui2/src/components/toolbar.rs @@ -130,9 +130,9 @@ mod stories { ], )) .right_items(vec![ - IconButton::new(Icon::InlayHint, "toggle_inlay_hints"), - IconButton::new(Icon::MagnifyingGlass, "buffer_search"), - IconButton::new(Icon::MagicWand, "inline_assist"), + IconButton::new("toggle_inlay_hints", Icon::InlayHint), + IconButton::new("buffer_search", Icon::MagnifyingGlass), + IconButton::new("inline_assist", Icon::MagicWand), ]), ) } From 785901c75e4ddf017c4e6cf16c30554409594c1a Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Tue, 24 Oct 2023 12:32:30 +0200 Subject: [PATCH 08/10] Load embedded fonts --- crates/gpui3/src/text_system.rs | 4 ++++ crates/storybook2/src/storybook2.rs | 31 ++++++++++++++++------------- crates/ui2/src/story.rs | 2 +- 3 files changed, 22 insertions(+), 15 deletions(-) diff --git a/crates/gpui3/src/text_system.rs b/crates/gpui3/src/text_system.rs index 3b16bb506c..7c96b1a180 100644 --- a/crates/gpui3/src/text_system.rs +++ b/crates/gpui3/src/text_system.rs @@ -55,6 +55,10 @@ impl TextSystem { } } + pub fn add_fonts(&self, fonts: &[Arc>]) -> Result<()> { + self.platform_text_system.add_fonts(fonts) + } + pub fn font_id(&self, font: &Font) -> Result { let font_id = self.font_ids_by_font.read().get(font).copied(); if let Some(font_id) = font_id { diff --git a/crates/storybook2/src/storybook2.rs b/crates/storybook2/src/storybook2.rs index 4beca32ca1..f8b8b747e9 100644 --- a/crates/storybook2/src/storybook2.rs +++ b/crates/storybook2/src/storybook2.rs @@ -10,8 +10,8 @@ use std::sync::Arc; use clap::Parser; use gpui3::{ - div, px, size, view, AnyView, BorrowAppContext, Bounds, Context, Element, ViewContext, - WindowBounds, WindowOptions, + div, px, size, view, AnyView, AppContext, AssetSource, BorrowAppContext, Bounds, Context, + Element, ViewContext, WindowBounds, WindowOptions, }; use log::LevelFilter; use simplelog::SimpleLogger; @@ -54,6 +54,8 @@ fn main() { let asset_source = Arc::new(Assets); gpui3::App::production(asset_source).run(move |cx| { + load_embedded_fonts(cx); + let selector = story_selector.unwrap_or(StorySelector::Component(ComponentStory::Workspace)); @@ -112,15 +114,16 @@ impl StoryWrapper { } } -// fn load_embedded_fonts(platform: &dyn gpui2::Platform) { -// let font_paths = Assets.list("fonts"); -// let mut embedded_fonts = Vec::new(); -// for font_path in &font_paths { -// if font_path.ends_with(".ttf") { -// let font_path = &*font_path; -// let font_bytes = Assets.load(font_path).unwrap().to_vec(); -// embedded_fonts.push(Arc::from(font_bytes)); -// } -// } -// platform.fonts().add_fonts(&embedded_fonts).unwrap(); -// } +fn load_embedded_fonts(cx: &AppContext) { + let font_paths = Assets.list(&"fonts".into()).unwrap(); + let mut embedded_fonts = Vec::new(); + for font_path in &font_paths { + if font_path.ends_with(".ttf") { + let font_path = &*font_path; + let font_bytes = Assets.load(font_path).unwrap().to_vec(); + embedded_fonts.push(Arc::from(font_bytes)); + } + } + + cx.text_system().add_fonts(&embedded_fonts).unwrap(); +} diff --git a/crates/ui2/src/story.rs b/crates/ui2/src/story.rs index 2a753df4f1..e51ff0f856 100644 --- a/crates/ui2/src/story.rs +++ b/crates/ui2/src/story.rs @@ -14,7 +14,7 @@ impl Story { .flex_col() .pt_2() .px_4() - .font("Zed Mono Extended") + .font("Zed Mono") .bg(color.background) } From f2710f37c52c04f294c309068645749ff7b7da57 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Tue, 24 Oct 2023 12:49:18 +0200 Subject: [PATCH 09/10] Fix default font family --- crates/ui2/src/components/workspace.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/ui2/src/components/workspace.rs b/crates/ui2/src/components/workspace.rs index 39b08c3f41..f39ce7e51c 100644 --- a/crates/ui2/src/components/workspace.rs +++ b/crates/ui2/src/components/workspace.rs @@ -208,7 +208,7 @@ impl Workspace { .size_full() .flex() .flex_col() - .font("Zed Sans Extended") + .font("Zed Sans") .gap_0() .justify_start() .items_start() From 23ad0a2c58393bfff7c1b5b8927524257ffcae5f Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Tue, 24 Oct 2023 13:31:01 +0200 Subject: [PATCH 10/10] Return a `Result` from `load_embedded_fonts` --- crates/storybook2/src/storybook2.rs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/crates/storybook2/src/storybook2.rs b/crates/storybook2/src/storybook2.rs index f8b8b747e9..bbd62230cc 100644 --- a/crates/storybook2/src/storybook2.rs +++ b/crates/storybook2/src/storybook2.rs @@ -54,7 +54,7 @@ fn main() { let asset_source = Arc::new(Assets); gpui3::App::production(asset_source).run(move |cx| { - load_embedded_fonts(cx); + load_embedded_fonts(cx).unwrap(); let selector = story_selector.unwrap_or(StorySelector::Component(ComponentStory::Workspace)); @@ -114,16 +114,16 @@ impl StoryWrapper { } } -fn load_embedded_fonts(cx: &AppContext) { - let font_paths = Assets.list(&"fonts".into()).unwrap(); +fn load_embedded_fonts(cx: &AppContext) -> gpui3::Result<()> { + let font_paths = Assets.list(&"fonts".into())?; let mut embedded_fonts = Vec::new(); for font_path in &font_paths { if font_path.ends_with(".ttf") { let font_path = &*font_path; - let font_bytes = Assets.load(font_path).unwrap().to_vec(); + let font_bytes = Assets.load(font_path)?.to_vec(); embedded_fonts.push(Arc::from(font_bytes)); } } - cx.text_system().add_fonts(&embedded_fonts).unwrap(); + cx.text_system().add_fonts(&embedded_fonts) }