From bca97f7186d55139dbfe4ecf1a50efb6e8016b5c Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 19 Oct 2023 12:58:17 -0400 Subject: [PATCH 01/14] =?UTF-8?q?Checkpoint=20=E2=80=93=20Broken?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- crates/ui2/src/components/assistant_panel.rs | 2 +- crates/ui2/src/components/breadcrumb.rs | 32 ++++++------- crates/ui2/src/components/buffer.rs | 14 +++--- crates/ui2/src/components/buffer_search.rs | 29 +++++------- crates/ui2/src/components/chat_panel.rs | 2 - crates/ui2/src/components/collab_panel.rs | 50 ++++++++++---------- crates/ui2/src/components/context_menu.rs | 6 +-- crates/ui2/src/components/editor_pane.rs | 2 +- crates/ui2/src/components/facepile.rs | 10 ++-- crates/ui2/src/components/icon_button.rs | 21 ++++++-- crates/ui2/src/components/keybinding.rs | 6 +-- crates/ui2/src/components/list.rs | 10 ++-- crates/ui2/src/components/multi_buffer.rs | 6 +-- crates/ui2/src/components/palette.rs | 15 +++--- crates/ui2/src/components/panel.rs | 2 +- crates/ui2/src/components/panes.rs | 4 +- crates/ui2/src/components/project_panel.rs | 2 +- crates/ui2/src/components/status_bar.rs | 2 +- crates/ui2/src/components/tab.rs | 2 +- crates/ui2/src/components/tab_bar.rs | 2 +- crates/ui2/src/components/terminal.rs | 2 +- crates/ui2/src/components/title_bar.rs | 2 +- crates/ui2/src/components/toolbar.rs | 4 +- crates/ui2/src/components/traffic_lights.rs | 4 +- crates/ui2/src/elements/avatar.rs | 2 +- crates/ui2/src/elements/details.rs | 8 +++- crates/ui2/src/elements/icon.rs | 2 +- crates/ui2/src/elements/input.rs | 2 +- crates/ui2/src/elements/label.rs | 6 +-- crates/ui2/src/elements/player.rs | 4 +- crates/ui2/src/elements/tool_divider.rs | 2 +- crates/ui2/src/prelude.rs | 49 ++++++++++++++++++- crates/ui2/src/story.rs | 6 +-- 33 files changed, 184 insertions(+), 128 deletions(-) diff --git a/crates/ui2/src/components/assistant_panel.rs b/crates/ui2/src/components/assistant_panel.rs index b64f7befd30ff7f4ee45442234f3c6dc744a9433..fcba18a60f321db168f62e47a2d22caae170bb14 100644 --- a/crates/ui2/src/components/assistant_panel.rs +++ b/crates/ui2/src/components/assistant_panel.rs @@ -27,7 +27,7 @@ impl AssistantPanel { } fn render(&mut self, view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); Panel::new(self.scroll_state.clone()) .children(vec![div() diff --git a/crates/ui2/src/components/breadcrumb.rs b/crates/ui2/src/components/breadcrumb.rs index b0c706f9abac46a6a19929828c44412e9d51b387..a721b59179a2e6fe9c22d6db912526f7f3e85f14 100644 --- a/crates/ui2/src/components/breadcrumb.rs +++ b/crates/ui2/src/components/breadcrumb.rs @@ -25,10 +25,9 @@ impl Breadcrumb { } } - fn render_separator(&self, theme: &Theme) -> Div { - div() - .child(" › ") - .text_color(HighlightColor::Default.hsla(theme)) + fn render_separator(&self, cx: &WindowContext) -> Div { + let color = ThemeColor::new(cx); + div().child(" › ").text_color(color.text_muted) } fn render( @@ -36,21 +35,22 @@ impl Breadcrumb { view_state: &mut S, cx: &mut ViewContext, ) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); + let color = ThemeColor::new(cx); let symbols_len = self.symbols.len(); h_stack() .px_1() - // TODO: Read font from theme (or settings?). - .font("Zed Mono Extended") .text_sm() - .text_color(theme.middle.base.default.foreground) + .text_color(color.text_muted) .rounded_md() - .hover(|style| style.bg(theme.highest.base.hovered.background)) + .hover(|style| style.bg(color.ghost_element_hover)) + // TODO: Add this when active is ready + // .active(|style| style.bg(color.ghost_element_active)) .child(self.path.clone().to_str().unwrap().to_string()) .child(if !self.symbols.is_empty() { - self.render_separator(&theme) + self.render_separator(cx) } else { div() }) @@ -68,7 +68,7 @@ impl Breadcrumb { let is_last_segment = ix == symbols_len - 1; if !is_last_segment { - items.push(self.render_separator(&theme)); + items.push(self.render_separator(cx)); } items @@ -107,7 +107,7 @@ mod stories { view_state: &mut S, cx: &mut ViewContext, ) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); Story::container(cx) .child(Story::title_for::<_, Breadcrumb>(cx)) @@ -118,21 +118,21 @@ mod stories { Symbol(vec![ HighlightedText { text: "impl ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "BreadcrumbStory".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, ]), Symbol(vec![ HighlightedText { text: "fn ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "render".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, ]), ], diff --git a/crates/ui2/src/components/buffer.rs b/crates/ui2/src/components/buffer.rs index 7a775327f9b67e3732c4d285a0e74a735e74f68c..9564ede748e802eb0ca750a93d1bbba35706e949 100644 --- a/crates/ui2/src/components/buffer.rs +++ b/crates/ui2/src/components/buffer.rs @@ -163,19 +163,19 @@ impl Buffer { } fn render_row(row: BufferRow, cx: &WindowContext) -> impl Element { - let theme = theme(cx); let system_color = SystemColor::new(); + let color = ThemeColor::new(cx); let line_background = if row.current { - theme.middle.base.default.background + color.editor_active_line } else { system_color.transparent }; let line_number_color = if row.current { - HighlightColor::Default.hsla(&theme) + color.text } else { - HighlightColor::Comment.hsla(&theme) + color.syntax.comment }; h_stack() @@ -225,14 +225,14 @@ impl Buffer { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let rows = self.render_rows(cx); v_stack() .flex_1() .w_full() .h_full() - .bg(theme.highest.base.default.background) + .bg(color.editor_background) .children(rows) } } @@ -268,7 +268,7 @@ mod stories { _view: &mut S, cx: &mut ViewContext, ) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); Story::container(cx) .child(Story::title_for::<_, Buffer>(cx)) diff --git a/crates/ui2/src/components/buffer_search.rs b/crates/ui2/src/components/buffer_search.rs index ddc18bdc77d149900a4996f88a7ba121601d9b76..395c538a6c50bdbc9565605230dd5194eedf8f00 100644 --- a/crates/ui2/src/components/buffer_search.rs +++ b/crates/ui2/src/components/buffer_search.rs @@ -21,27 +21,22 @@ impl BufferSearch { } pub fn view(cx: &mut WindowContext) -> View { - let theme = theme(cx); + let color = ThemeColor::new(cx); view(cx.entity(|cx| Self::new()), Self::render) } fn render(&mut self, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); - - h_stack() - .bg(theme.highest.base.default.background) - .p_2() - .child( - h_stack() - .child(Input::new("Search (↑/↓ for previous/next query)")) - .child( - IconButton::::new(Icon::Replace) - .when(self.is_replace_open, |this| this.color(IconColor::Accent)) - .on_click(|buffer_search, cx| { - buffer_search.toggle_replace(cx); - }), - ), - ) + let color = ThemeColor::new(cx); + + h_stack().bg(color.toolbar_background).p_2().child( + h_stack().child(Input::new("Search")).child( + IconButton::::new(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 45a62e207a264ce1eff21ae59bb1f311135c96cd..4f0e3bd3c3ef9aabd47ce5bff7445368918842e8 100644 --- a/crates/ui2/src/components/chat_panel.rs +++ b/crates/ui2/src/components/chat_panel.rs @@ -26,8 +26,6 @@ impl ChatPanel { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); - div() .flex() .flex_col() diff --git a/crates/ui2/src/components/collab_panel.rs b/crates/ui2/src/components/collab_panel.rs index 55733ed8d360d332f222bbaea7815289b42d78a7..560c1d7f1250af3cd6fb56830d7e3badf96224c4 100644 --- a/crates/ui2/src/components/collab_panel.rs +++ b/crates/ui2/src/components/collab_panel.rs @@ -24,7 +24,7 @@ impl CollabPanel { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let color = ThemeColor::new(cx); v_stack() @@ -35,20 +35,15 @@ impl CollabPanel { .w_full() .overflow_y_scroll(self.scroll_state.clone()) .child( - div() - .bg(theme.lowest.base.default.background) - .pb_1() - .border_color(theme.lowest.base.default.border) - .border_b() - .child( - List::new(static_collab_panel_current_call()) - .header( - ListHeader::new("CRDB") - .set_left_icon(Icon::Hash.into()) - .set_toggle(ToggleState::Toggled), - ) - .set_toggle(ToggleState::Toggled), - ), + div().pb_1().border_color(color.border).border_b().child( + List::new(static_collab_panel_current_call()) + .header( + ListHeader::new("CRDB") + .set_left_icon(Icon::Hash.into()) + .set_toggle(ToggleState::Toggled), + ) + .set_toggle(ToggleState::Toggled), + ), ) .child( v_stack().py_1().child( @@ -86,13 +81,13 @@ impl CollabPanel { .h_7() .px_2() .border_t() - .border_color(theme.middle.variant.default.border) + .border_color(color.border) .flex() .items_center() .child( div() .text_sm() - .text_color(theme.middle.variant.default.foreground) + .text_color(color.text_placeholder) .child("Find..."), ), ) @@ -102,8 +97,9 @@ impl CollabPanel { &self, label: impl Into, expanded: bool, - theme: &Theme, + cx: &WindowContext, ) -> impl Element { + let color = ThemeColor::new(cx); div() .h_7() .px_2() @@ -121,7 +117,7 @@ impl CollabPanel { }) .w_3p5() .h_3p5() - .text_color(theme.middle.variant.default.foreground), + .text_color(color.icon_muted), ), ) } @@ -130,14 +126,16 @@ impl CollabPanel { &self, avatar_uri: impl Into, label: impl Into, - theme: &Theme, + cx: &WindowContext, ) -> impl Element { + let color = ThemeColor::new(cx); + div() .h_7() .px_2() .flex() .items_center() - .hover(|style| style.bg(theme.lowest.variant.hovered.background)) + .hover(|style| style.bg(color.ghost_element_hover)) // .active(|style| style.fill(theme.lowest.variant.pressed.background)) .child( div() @@ -146,11 +144,11 @@ impl CollabPanel { .gap_1() .text_sm() .child( - img().uri(avatar_uri).size_3p5().rounded_full().bg(theme - .middle - .positive - .default - .foreground), + img() + .uri(avatar_uri) + .size_3p5() + .rounded_full() + .bg(color.image_fallback_background), ) .child(label.into()), ) diff --git a/crates/ui2/src/components/context_menu.rs b/crates/ui2/src/components/context_menu.rs index b3ed884e64f42baf68e0835c4e16b2b1628b5b8a..d37b38dd80d5d55c98a6ec8143c343c23ec008ed 100644 --- a/crates/ui2/src/components/context_menu.rs +++ b/crates/ui2/src/components/context_menu.rs @@ -44,13 +44,13 @@ impl ContextMenu { } } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); v_stack() .flex() - .bg(theme.lowest.base.default.background) + .bg(color.elevated_surface) .border() - .border_color(theme.lowest.base.default.border) + .border_color(color.border) .child( List::new( self.items diff --git a/crates/ui2/src/components/editor_pane.rs b/crates/ui2/src/components/editor_pane.rs index 59dc2619fa0a4341ac89d549d468ea85a7f63354..b54ad3110014d5d289c36552c91ae18334e3f475 100644 --- a/crates/ui2/src/components/editor_pane.rs +++ b/crates/ui2/src/components/editor_pane.rs @@ -43,7 +43,7 @@ impl EditorPane { } pub fn view(cx: &mut WindowContext) -> View { - let theme = theme(cx); + let color = ThemeColor::new(cx); view( cx.entity(|cx| hello_world_rust_editor_with_status_example(cx)), diff --git a/crates/ui2/src/components/facepile.rs b/crates/ui2/src/components/facepile.rs index 4f76c505da14db679c1b89fbbfd7267c40804e15..8bd4eafa18918b1b83bcf806434cb0eadd7e0a4e 100644 --- a/crates/ui2/src/components/facepile.rs +++ b/crates/ui2/src/components/facepile.rs @@ -1,7 +1,7 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::{theme, Avatar, Player}; +use crate::{Avatar, Player}; #[derive(Element)] pub struct Facepile { @@ -18,7 +18,7 @@ impl Facepile { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let player_count = self.players.len(); let player_list = self.players.iter().enumerate().map(|(ix, player)| { let isnt_last = ix < player_count - 1; @@ -52,7 +52,11 @@ mod stories { } } - fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { + fn render( + &mut self, + _view: &mut S, + cx: &mut ViewContext, + ) -> impl Element { let players = static_players(); Story::container(cx) diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs index 3f41b4f5b953e89f54db58fa97aefcfcfbc3c4f1..163622002a06de516b8408abe3561c0099ee165c 100644 --- a/crates/ui2/src/components/icon_button.rs +++ b/crates/ui2/src/components/icon_button.rs @@ -67,7 +67,6 @@ impl IconButton { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); let color = ThemeColor::new(cx); let icon_color = match (self.state, self.color) { @@ -75,15 +74,27 @@ impl IconButton { _ => self.color, }; + let (bg_color, bg_hover_color, bg_active_color) = match self.variant { + ButtonVariant::Filled => ( + color.filled_element, + color.filled_element_hover, + color.filled_element_active, + ), + ButtonVariant::Ghost => ( + color.ghost_element, + color.ghost_element_hover, + color.ghost_element_active, + ), + }; + let mut button = h_stack() .justify_center() .rounded_md() .py(ui_size(0.25)) .px(ui_size(6. / 14.)) - .when(self.variant == ButtonVariant::Filled, |this| { - this.bg(color.filled_element) - }) - .hover(|style| style.bg(theme.highest.base.hovered.background)) + .bg(bg_color) + .hover(|style| style.bg(bg_hover_color)) + // .active(|style| style.bg(bg_active_color)) .child(IconElement::new(self.icon).color(icon_color)); if let Some(click_handler) = self.handlers.click.clone() { diff --git a/crates/ui2/src/components/keybinding.rs b/crates/ui2/src/components/keybinding.rs index 72128e54345615e90b21782696105fb492bca575..6f244a2cd8e41ee96f7d5f515c48a2ddc1dd3b30 100644 --- a/crates/ui2/src/components/keybinding.rs +++ b/crates/ui2/src/components/keybinding.rs @@ -70,15 +70,15 @@ impl Key { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); div() .px_2() .py_0() .rounded_md() .text_sm() - .text_color(theme.lowest.on.default.foreground) - .bg(theme.lowest.on.default.background) + .text_color(color.text) + .bg(color.filled_element) .child(self.key.clone()) } } diff --git a/crates/ui2/src/components/list.rs b/crates/ui2/src/components/list.rs index 1a60581855aae9f5052c703d3b1d94c82d1bddb1..ddf7649b9552964e219eeb9b968608943fd65ee7 100644 --- a/crates/ui2/src/components/list.rs +++ b/crates/ui2/src/components/list.rs @@ -91,7 +91,7 @@ impl ListHeader { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let system_color = SystemColor::new(); let color = ThemeColor::new(cx); @@ -158,7 +158,7 @@ impl ListSubHeader { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); h_stack().flex_1().w_full().relative().py_1().child( div() @@ -338,7 +338,7 @@ impl ListEntry { &mut self, cx: &mut ViewContext, ) -> Option> { - let theme = theme(cx); + let color = ThemeColor::new(cx); let disclosure_control_icon = if let Some(ToggleState::Toggled) = self.toggle { IconElement::new(Icon::ChevronDown) @@ -360,7 +360,7 @@ impl ListEntry { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let system_color = SystemColor::new(); let color = ThemeColor::new(cx); let setting = user_settings(); @@ -470,7 +470,7 @@ impl List { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let is_toggleable = self.toggleable != Toggleable::NotToggleable; let is_toggled = Toggleable::is_toggled(&self.toggleable); diff --git a/crates/ui2/src/components/multi_buffer.rs b/crates/ui2/src/components/multi_buffer.rs index eb3e8a5af6d70f886f74238c46c77c9fd28c6790..e9a8d60493c7d8adced713c1d119d7bf41c68173 100644 --- a/crates/ui2/src/components/multi_buffer.rs +++ b/crates/ui2/src/components/multi_buffer.rs @@ -18,7 +18,7 @@ impl MultiBuffer { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); v_stack() .w_full() @@ -32,7 +32,7 @@ impl MultiBuffer { .items_center() .justify_between() .p_4() - .bg(theme.lowest.base.default.background) + .bg(color.editor_subheader) .child(Label::new("main.rs")) .child(IconButton::new(Icon::ArrowUpRight)), ) @@ -67,7 +67,7 @@ mod stories { _view: &mut S, cx: &mut ViewContext, ) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); Story::container(cx) .child(Story::title_for::<_, MultiBuffer>(cx)) diff --git a/crates/ui2/src/components/palette.rs b/crates/ui2/src/components/palette.rs index 4ed99d295f5bcd9b659080e06867943a769b73bd..697f78ee4614c43c028d3f083ffcced6730e7aa5 100644 --- a/crates/ui2/src/components/palette.rs +++ b/crates/ui2/src/components/palette.rs @@ -48,21 +48,21 @@ impl Palette { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); v_stack() .w_96() .rounded_lg() - .bg(theme.lowest.base.default.background) + .bg(color.elevated_surface) .border() - .border_color(theme.lowest.base.default.border) + .border_color(color.border) .child( v_stack() .gap_px() .child(v_stack().py_0p5().px_1().child(div().px_2().py_0p5().child( Label::new(self.input_placeholder.clone()).color(LabelColor::Placeholder), ))) - .child(div().h_px().w_full().bg(theme.lowest.base.default.border)) + .child(div().h_px().w_full().bg(color.filled_element)) .child( v_stack() .py_0p5() @@ -90,9 +90,8 @@ impl Palette { .px_2() .py_0p5() .rounded_lg() - .hover(|style| style.bg(theme.lowest.base.hovered.background)) - // .active() - // .fill(theme.lowest.base.pressed.background) + .hover(|style| style.bg(color.ghost_element_hover)) + // .active(|style| style.bg(color.ghost_element_active)) .child(item.clone()) })), ), @@ -135,7 +134,7 @@ impl PaletteItem { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); div() .flex() diff --git a/crates/ui2/src/components/panel.rs b/crates/ui2/src/components/panel.rs index 52e36b2f14e21c4c2f61683d8d8b0ce10efeadc3..d70d81c82e8e5f5f1dc50f813b796cd050bc9654 100644 --- a/crates/ui2/src/components/panel.rs +++ b/crates/ui2/src/components/panel.rs @@ -97,7 +97,7 @@ impl Panel { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let panel_base; let current_width = self.width.unwrap_or(self.initial_width); diff --git a/crates/ui2/src/components/panes.rs b/crates/ui2/src/components/panes.rs index 96c0bb86ce266b8004b4dfbe26ebc42185bb12ba..c88d687ea190e23bd411724c2b621d666ed12de2 100644 --- a/crates/ui2/src/components/panes.rs +++ b/crates/ui2/src/components/panes.rs @@ -43,7 +43,7 @@ impl Pane { } fn render(&mut self, view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); div() .flex() @@ -90,7 +90,7 @@ impl PaneGroup { } fn render(&mut self, view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); if !self.panes.is_empty() { let el = div() diff --git a/crates/ui2/src/components/project_panel.rs b/crates/ui2/src/components/project_panel.rs index 4c4fbe9f293602bd4dfe8435837203ccee50df22..4f883c1c15b502ad49b012e778b3c38ca6fedfb0 100644 --- a/crates/ui2/src/components/project_panel.rs +++ b/crates/ui2/src/components/project_panel.rs @@ -21,7 +21,7 @@ impl ProjectPanel { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let color = ThemeColor::new(cx); div() diff --git a/crates/ui2/src/components/status_bar.rs b/crates/ui2/src/components/status_bar.rs index 8a68cbf31bce704c0acf3269c1ddf43bb724767c..b7aa9a53d39193c8495f33af9832820b8bdc7356 100644 --- a/crates/ui2/src/components/status_bar.rs +++ b/crates/ui2/src/components/status_bar.rs @@ -87,7 +87,7 @@ impl StatusBar { view: &mut Workspace, cx: &mut ViewContext, ) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); div() .py_0p5() diff --git a/crates/ui2/src/components/tab.rs b/crates/ui2/src/components/tab.rs index 7e8ad15daa69f4895dc5df691a550f92d869fc59..75911976b2716627136f2c2fbc32f06ab25e966d 100644 --- a/crates/ui2/src/components/tab.rs +++ b/crates/ui2/src/components/tab.rs @@ -75,7 +75,7 @@ impl Tab { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let has_fs_conflict = self.fs_status == FileSystemStatus::Conflict; let is_deleted = self.fs_status == FileSystemStatus::Deleted; diff --git a/crates/ui2/src/components/tab_bar.rs b/crates/ui2/src/components/tab_bar.rs index 542bc695188ab9bfda68bde65bdca89268b8ba71..9d352a09a5f02ebc243e56fe90963c4e7fc0e08f 100644 --- a/crates/ui2/src/components/tab_bar.rs +++ b/crates/ui2/src/components/tab_bar.rs @@ -24,7 +24,7 @@ impl TabBar { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let can_navigate_back = true; let can_navigate_forward = false; diff --git a/crates/ui2/src/components/terminal.rs b/crates/ui2/src/components/terminal.rs index 598fad5fa6bde16b7ce7f5935be1aba507af5b3e..a56c07a75052eb563a7562d8a206e9f04109a36a 100644 --- a/crates/ui2/src/components/terminal.rs +++ b/crates/ui2/src/components/terminal.rs @@ -18,7 +18,7 @@ impl Terminal { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let can_navigate_back = true; let can_navigate_forward = false; diff --git a/crates/ui2/src/components/title_bar.rs b/crates/ui2/src/components/title_bar.rs index 68033629ba0f9dbe69a4aeda0c9e42cddbde2330..a64694c3c6d2c114bd6276e5dbe506ca5f09d1e6 100644 --- a/crates/ui2/src/components/title_bar.rs +++ b/crates/ui2/src/components/title_bar.rs @@ -93,7 +93,7 @@ impl TitleBar { } fn render(&mut self, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let color = ThemeColor::new(cx); let setting = user_settings(); diff --git a/crates/ui2/src/components/toolbar.rs b/crates/ui2/src/components/toolbar.rs index 0be752b3e3016384c890746360f8671b704b12c9..e58de4c9ba9358d73c1cfac9f3a437abb12f3dab 100644 --- a/crates/ui2/src/components/toolbar.rs +++ b/crates/ui2/src/components/toolbar.rs @@ -56,7 +56,7 @@ impl Toolbar { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); div() .bg(theme.highest.base.default.background) @@ -98,7 +98,7 @@ mod stories { _view: &mut S, cx: &mut ViewContext, ) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); Story::container(cx) .child(Story::title_for::<_, Toolbar>(cx)) diff --git a/crates/ui2/src/components/traffic_lights.rs b/crates/ui2/src/components/traffic_lights.rs index 0a2b769bca61db89da45ac79a0b707ad5842db2b..0533639841121ee610bdcafdd2aa93e35972c236 100644 --- a/crates/ui2/src/components/traffic_lights.rs +++ b/crates/ui2/src/components/traffic_lights.rs @@ -27,7 +27,7 @@ impl TrafficLight { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let system_color = SystemColor::new(); let fill = match (self.window_has_focus, self.color) { @@ -61,7 +61,7 @@ impl TrafficLights { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); div() .flex() diff --git a/crates/ui2/src/elements/avatar.rs b/crates/ui2/src/elements/avatar.rs index 314e001bdeb472e3f315c37a3489346fc8b891c1..9b86b557426c374d10183ed00428a796a5e6e08b 100644 --- a/crates/ui2/src/elements/avatar.rs +++ b/crates/ui2/src/elements/avatar.rs @@ -27,7 +27,7 @@ impl Avatar { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let mut img = img(); diff --git a/crates/ui2/src/elements/details.rs b/crates/ui2/src/elements/details.rs index 94e213ffbfd27129c6e0386a094630850fa5503e..84deb69d596d5896d167744492a67b6938109b85 100644 --- a/crates/ui2/src/elements/details.rs +++ b/crates/ui2/src/elements/details.rs @@ -25,7 +25,7 @@ impl Details { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); div() // .flex() @@ -60,7 +60,11 @@ mod stories { } } - fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { + fn render( + &mut self, + _view: &mut S, + cx: &mut ViewContext, + ) -> impl Element { Story::container(cx) .child(Story::title_for::<_, Details>(cx)) .child(Story::label(cx, "Default")) diff --git a/crates/ui2/src/elements/icon.rs b/crates/ui2/src/elements/icon.rs index 00c22432d47110dce99dac7df785b6638125c6e5..720ef95a5af6fcb74dfcc82e1cf6ee785c0326ee 100644 --- a/crates/ui2/src/elements/icon.rs +++ b/crates/ui2/src/elements/icon.rs @@ -177,7 +177,7 @@ impl IconElement { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let fill = self.color.color(theme); let svg_size = match self.size { IconSize::Small => ui_size(12. / 14.), diff --git a/crates/ui2/src/elements/input.rs b/crates/ui2/src/elements/input.rs index 45edb1a73d7fe469609ce88a506d675abe279880..57cdcfe59944bd7659c1619d64c68613dfd9ae2f 100644 --- a/crates/ui2/src/elements/input.rs +++ b/crates/ui2/src/elements/input.rs @@ -46,7 +46,7 @@ impl Input { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let text_el; let text_color; diff --git a/crates/ui2/src/elements/label.rs b/crates/ui2/src/elements/label.rs index 37cabc553490e3e70def4a014999bed779020e70..f81c86c31f3df365a76838df17940393f626c8ee 100644 --- a/crates/ui2/src/elements/label.rs +++ b/crates/ui2/src/elements/label.rs @@ -22,7 +22,7 @@ pub enum LabelColor { impl LabelColor { pub fn hsla(&self, cx: &WindowContext) -> Hsla { - let theme = theme(cx); + let color = ThemeColor::new(cx); match self { Self::Default => theme.middle.base.default.foreground, @@ -82,7 +82,7 @@ impl Label { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); div() .when(self.strikethrough, |this| { @@ -136,7 +136,7 @@ impl HighlightedLabel { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); let highlight_color = theme.lowest.accent.default.foreground; diff --git a/crates/ui2/src/elements/player.rs b/crates/ui2/src/elements/player.rs index 514cfe97ec5b91107210ed3c5aa67c2457c1afd3..cf90dbab34b792f3f3327fbee47bd7bf7aadb1c4 100644 --- a/crates/ui2/src/elements/player.rs +++ b/crates/ui2/src/elements/player.rs @@ -139,13 +139,13 @@ impl Player { } pub fn cursor_color(&self, cx: &mut ViewContext) -> Hsla { - let theme = theme(cx); + let color = ThemeColor::new(cx); let index = self.index % 8; theme.players[self.index].cursor } pub fn selection_color(&self, cx: &mut ViewContext) -> Hsla { - let theme = theme(cx); + let color = ThemeColor::new(cx); let index = self.index % 8; theme.players[self.index].selection } diff --git a/crates/ui2/src/elements/tool_divider.rs b/crates/ui2/src/elements/tool_divider.rs index 3b7392c3a2ce9a7f2705f65f2a82abbd952c2f27..d0fc709346d4b492964c455d3150806f20981ce8 100644 --- a/crates/ui2/src/elements/tool_divider.rs +++ b/crates/ui2/src/elements/tool_divider.rs @@ -16,7 +16,7 @@ impl ToolDivider { } fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); div().w_px().h_3().bg(theme.lowest.base.default.border) } diff --git a/crates/ui2/src/prelude.rs b/crates/ui2/src/prelude.rs index a132542e299b4e088449e215f262df0e42f93ac9..9433145ff52cd6b29f07a393b792cc5ef6fe868b 100644 --- a/crates/ui2/src/prelude.rs +++ b/crates/ui2/src/prelude.rs @@ -35,6 +35,27 @@ impl SystemColor { } } +#[derive(Clone, Copy)] +pub struct SyntaxColor { + pub comment: Hsla, + pub string: Hsla, + pub function: Hsla, + pub keyword: Hsla, +} + +impl SyntaxColor { + pub fn new(cx: &WindowContext) -> Self { + let theme = theme(cx); + + Self { + comment: theme.syntax.comment, + string: theme.syntax.string, + function: theme.syntax.function, + keyword: theme.syntax.keyword, + } + } +} + #[derive(Clone, Copy)] pub struct ThemeColor { pub border: Hsla, @@ -63,12 +84,26 @@ pub struct ThemeColor { pub filled_element_selected: Hsla, pub filled_element_disabled: Hsla, pub ghost_element: Hsla, + /// The background color of a hovered element with no default background, + /// like a ghost-style button or an interactable list item. /// - TODO: Map to step 3. pub ghost_element_hover: Hsla, /// - TODO: Map to step 4. pub ghost_element_active: Hsla, pub ghost_element_selected: Hsla, pub ghost_element_disabled: Hsla, + pub text: Hsla, + pub text_muted: Hsla, + pub text_placeholder: Hsla, + pub text_disabled: Hsla, + pub icon_muted: Hsla, + pub syntax: SyntaxColor, + + pub toolbar_background: Hsla, + pub editor_background: Hsla, + pub editor_subheader: Hsla, + pub editor_active_line: Hsla, + pub image_fallback_background: Hsla, } impl ThemeColor { @@ -94,6 +129,18 @@ impl ThemeColor { ghost_element_active: theme.lowest.base.hovered.background, ghost_element_selected: theme.lowest.accent.default.background, ghost_element_disabled: system_color.transparent, + text: theme.lowest.base.default.foreground, + text_muted: theme.lowest.variant.default.foreground, + /// TODO: map this to a real value + text_placeholder: theme.lowest.negative.default.foreground, + text_disabled: theme.lowest.base.disabled.foreground, + icon_muted: theme.lowest.variant.default.foreground, + syntax: SyntaxColor::new(cx), + toolbar_background: theme.highest.base.default.background, + editor_background: theme.highest.base.default.background, + editor_subheader: theme.middle.base.default.background, + editor_active_line: theme.highest.on.default.background, + image_fallback_background: theme.lowest.base.default.background, } } } @@ -192,7 +239,7 @@ impl GitStatus { } pub fn hsla(&self, cx: &WindowContext) -> Hsla { - let theme = theme(cx); + let color = ThemeColor::new(cx); let system_color = SystemColor::new(); match self { diff --git a/crates/ui2/src/story.rs b/crates/ui2/src/story.rs index 4edc796d00a55f63d7b9e37f83bb0cd66c017bff..cb269850d16597c5e6b9aa5a92244ffa8936684a 100644 --- a/crates/ui2/src/story.rs +++ b/crates/ui2/src/story.rs @@ -7,7 +7,7 @@ pub struct Story {} impl Story { pub fn container(cx: &mut ViewContext) -> Div { - let theme = theme(cx); + let color = ThemeColor::new(cx); div() .size_full() @@ -23,7 +23,7 @@ impl Story { cx: &mut ViewContext, title: &str, ) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); div() .text_xl() @@ -41,7 +41,7 @@ impl Story { cx: &mut ViewContext, label: &str, ) -> impl Element { - let theme = theme(cx); + let color = ThemeColor::new(cx); div() .mt_4() From 58650b7d2d2cc19b8b4b5c08b69c59f263dd4043 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 19 Oct 2023 14:38:01 -0400 Subject: [PATCH 02/14] Checkpoint - Still Broken --- crates/ui2/src/components/buffer.rs | 8 +- crates/ui2/src/components/buffer_search.rs | 2 +- crates/ui2/src/components/chat_panel.rs | 1 - crates/ui2/src/components/collab_panel.rs | 1 - crates/ui2/src/components/context_menu.rs | 2 +- crates/ui2/src/components/editor_pane.rs | 2 +- crates/ui2/src/components/icon_button.rs | 2 +- crates/ui2/src/components/keybinding.rs | 1 - crates/ui2/src/components/list.rs | 1 - crates/ui2/src/components/multi_buffer.rs | 10 +- crates/ui2/src/components/palette.rs | 1 - crates/ui2/src/components/panel.rs | 57 ++++------ crates/ui2/src/components/panes.rs | 4 +- crates/ui2/src/components/project_panel.rs | 3 +- crates/ui2/src/components/status_bar.rs | 14 ++- crates/ui2/src/components/tab.rs | 23 +++- crates/ui2/src/components/tab_bar.rs | 16 ++- crates/ui2/src/components/terminal.rs | 6 +- crates/ui2/src/components/title_bar.rs | 2 +- crates/ui2/src/components/toolbar.rs | 11 +- crates/ui2/src/components/traffic_lights.rs | 4 +- crates/ui2/src/elements/avatar.rs | 3 +- crates/ui2/src/elements/details.rs | 3 +- crates/ui2/src/elements/icon.rs | 8 +- crates/ui2/src/elements/input.rs | 85 ++++++++------- crates/ui2/src/elements/label.rs | 12 +- crates/ui2/src/elements/player.rs | 6 +- crates/ui2/src/elements/tool_divider.rs | 3 +- crates/ui2/src/prelude.rs | 115 +++++++++++++++++--- crates/ui2/src/static_data.rs | 100 ++++++++--------- crates/ui2/src/story.rs | 7 +- 31 files changed, 299 insertions(+), 214 deletions(-) diff --git a/crates/ui2/src/components/buffer.rs b/crates/ui2/src/components/buffer.rs index 9564ede748e802eb0ca750a93d1bbba35706e949..eca075e71a5a69e5f1f518a91c1831184cb7d8cd 100644 --- a/crates/ui2/src/components/buffer.rs +++ b/crates/ui2/src/components/buffer.rs @@ -3,7 +3,7 @@ use std::marker::PhantomData; use gpui3::{Hsla, WindowContext}; use crate::prelude::*; -use crate::{h_stack, theme, v_stack, Icon, IconElement}; +use crate::{h_stack, v_stack, Icon, IconElement}; #[derive(Default, PartialEq, Copy, Clone)] pub struct PlayerCursor { @@ -232,7 +232,7 @@ impl Buffer { .flex_1() .w_full() .h_full() - .bg(color.editor_background) + .bg(color.editor) .children(rows) } } @@ -279,14 +279,14 @@ mod stories { div() .w(rems(64.)) .h_96() - .child(hello_world_rust_buffer_example(&theme)), + .child(hello_world_rust_buffer_example(&color)), ) .child(Story::label(cx, "Hello World (Rust) with Status")) .child( div() .w(rems(64.)) .h_96() - .child(hello_world_rust_buffer_with_status_example(&theme)), + .child(hello_world_rust_buffer_with_status_example(&color)), ) } } diff --git a/crates/ui2/src/components/buffer_search.rs b/crates/ui2/src/components/buffer_search.rs index 395c538a6c50bdbc9565605230dd5194eedf8f00..7e863b8493443d65959965fdaefb2053ee9b45ac 100644 --- a/crates/ui2/src/components/buffer_search.rs +++ b/crates/ui2/src/components/buffer_search.rs @@ -29,7 +29,7 @@ impl BufferSearch { fn render(&mut self, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); - h_stack().bg(color.toolbar_background).p_2().child( + h_stack().bg(color.toolbar).p_2().child( h_stack().child(Input::new("Search")).child( IconButton::::new(Icon::Replace) .when(self.is_replace_open, |this| this.color(IconColor::Accent)) diff --git a/crates/ui2/src/components/chat_panel.rs b/crates/ui2/src/components/chat_panel.rs index 4f0e3bd3c3ef9aabd47ce5bff7445368918842e8..89ba0825f8f92237986e7847f902bca4078e19c6 100644 --- a/crates/ui2/src/components/chat_panel.rs +++ b/crates/ui2/src/components/chat_panel.rs @@ -3,7 +3,6 @@ use std::marker::PhantomData; use chrono::NaiveDateTime; use crate::prelude::*; -use crate::theme::theme; use crate::{Icon, IconButton, Input, Label, LabelColor}; #[derive(Element)] diff --git a/crates/ui2/src/components/collab_panel.rs b/crates/ui2/src/components/collab_panel.rs index 560c1d7f1250af3cd6fb56830d7e3badf96224c4..8d36f1b1d717cdfcd837aac2d2b4123e0fd0f4fe 100644 --- a/crates/ui2/src/components/collab_panel.rs +++ b/crates/ui2/src/components/collab_panel.rs @@ -3,7 +3,6 @@ use std::marker::PhantomData; use gpui3::{img, svg, SharedString}; use crate::prelude::*; -use crate::theme::{theme, Theme}; use crate::{ static_collab_panel_channels, static_collab_panel_current_call, v_stack, Icon, List, ListHeader, ToggleState, diff --git a/crates/ui2/src/components/context_menu.rs b/crates/ui2/src/components/context_menu.rs index d37b38dd80d5d55c98a6ec8143c343c23ec008ed..45e1d40bcc9c4ad4cdc9eedc038268233eee1ab7 100644 --- a/crates/ui2/src/components/context_menu.rs +++ b/crates/ui2/src/components/context_menu.rs @@ -1,5 +1,5 @@ use crate::{prelude::*, ListItemVariant}; -use crate::{theme, v_stack, Label, List, ListEntry, ListItem, ListSeparator, ListSubHeader}; +use crate::{v_stack, Label, List, ListEntry, ListItem, ListSeparator, ListSubHeader}; #[derive(Clone)] pub enum ContextMenuItem { diff --git a/crates/ui2/src/components/editor_pane.rs b/crates/ui2/src/components/editor_pane.rs index b54ad3110014d5d289c36552c91ae18334e3f475..93461bf9d0b0b2b675f869aae50d1ad048288018 100644 --- a/crates/ui2/src/components/editor_pane.rs +++ b/crates/ui2/src/components/editor_pane.rs @@ -56,7 +56,7 @@ impl EditorPane { .w_full() .h_full() .flex_1() - .child(TabBar::new(self.tabs.clone())) + .child(TabBar::new(self.tabs.clone()).can_navigate((false, true))) .child( Toolbar::new() .left_item(Breadcrumb::new(self.path.clone(), self.symbols.clone())) diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs index 163622002a06de516b8408abe3561c0099ee165c..43e5a33cdff8fe158199d31d067f4449147b0d3a 100644 --- a/crates/ui2/src/components/icon_button.rs +++ b/crates/ui2/src/components/icon_button.rs @@ -4,7 +4,7 @@ use std::sync::Arc; use gpui3::{Interactive, MouseButton}; use crate::{h_stack, prelude::*}; -use crate::{theme, ClickHandler, Icon, IconColor, IconElement}; +use crate::{ClickHandler, Icon, IconColor, IconElement}; struct IconButtonHandlers { click: Option>, diff --git a/crates/ui2/src/components/keybinding.rs b/crates/ui2/src/components/keybinding.rs index 6f244a2cd8e41ee96f7d5f515c48a2ddc1dd3b30..46768a6ddcc3f9e67cc8426079896a8dc789aed5 100644 --- a/crates/ui2/src/components/keybinding.rs +++ b/crates/ui2/src/components/keybinding.rs @@ -4,7 +4,6 @@ use std::marker::PhantomData; use strum::{EnumIter, IntoEnumIterator}; use crate::prelude::*; -use crate::theme; #[derive(Element, Clone)] pub struct Keybinding { diff --git a/crates/ui2/src/components/list.rs b/crates/ui2/src/components/list.rs index ddf7649b9552964e219eeb9b968608943fd65ee7..2f77553ac1fef0677606d967b0384de6b07b49ae 100644 --- a/crates/ui2/src/components/list.rs +++ b/crates/ui2/src/components/list.rs @@ -4,7 +4,6 @@ use gpui3::{div, Div}; use crate::prelude::*; use crate::settings::user_settings; -use crate::theme::theme; use crate::{h_stack, v_stack, Avatar, Icon, IconColor, IconElement, IconSize, Label, LabelColor}; #[derive(Clone, Copy, Default, Debug, PartialEq)] diff --git a/crates/ui2/src/components/multi_buffer.rs b/crates/ui2/src/components/multi_buffer.rs index e9a8d60493c7d8adced713c1d119d7bf41c68173..32ac40762af8d550e3bee02dc063c532c7c3e647 100644 --- a/crates/ui2/src/components/multi_buffer.rs +++ b/crates/ui2/src/components/multi_buffer.rs @@ -73,11 +73,11 @@ mod stories { .child(Story::title_for::<_, MultiBuffer>(cx)) .child(Story::label(cx, "Default")) .child(MultiBuffer::new(vec![ - hello_world_rust_buffer_example(&theme), - hello_world_rust_buffer_example(&theme), - hello_world_rust_buffer_example(&theme), - hello_world_rust_buffer_example(&theme), - hello_world_rust_buffer_example(&theme), + hello_world_rust_buffer_example(&color), + hello_world_rust_buffer_example(&color), + hello_world_rust_buffer_example(&color), + hello_world_rust_buffer_example(&color), + hello_world_rust_buffer_example(&color), ])) } } diff --git a/crates/ui2/src/components/palette.rs b/crates/ui2/src/components/palette.rs index 697f78ee4614c43c028d3f083ffcced6730e7aa5..8de26502a7b3f54cd5c832832a0c9b67768ea371 100644 --- a/crates/ui2/src/components/palette.rs +++ b/crates/ui2/src/components/palette.rs @@ -1,7 +1,6 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::theme::theme; use crate::{h_stack, v_stack, Keybinding, Label, LabelColor}; #[derive(Element)] diff --git a/crates/ui2/src/components/panel.rs b/crates/ui2/src/components/panel.rs index d70d81c82e8e5f5f1dc50f813b796cd050bc9654..9290b94b0755ab4eaeab3fc379bcb165a82dfc91 100644 --- a/crates/ui2/src/components/panel.rs +++ b/crates/ui2/src/components/panel.rs @@ -3,9 +3,9 @@ use std::marker::PhantomData; use gpui3::{AbsoluteLength, AnyElement}; use smallvec::SmallVec; +use crate::prelude::*; use crate::settings::user_settings; use crate::v_stack; -use crate::{prelude::*, theme}; #[derive(Default, Debug, PartialEq, Eq, Hash, Clone, Copy)] pub enum PanelAllowedSides { @@ -99,43 +99,24 @@ impl Panel { fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); - let panel_base; - let current_width = self.width.unwrap_or(self.initial_width); - - match self.current_side { - PanelSide::Left => { - panel_base = v_stack() - .flex_initial() - .h_full() - // .w(current_width) - .w_64() - .bg(theme.middle.base.default.background) - .border_r() - .border_color(theme.middle.base.default.border); - } - PanelSide::Right => { - panel_base = v_stack() - .flex_initial() - .h_full() - // .w(current_width) - .w_64() - .bg(theme.middle.base.default.background) - .border_l() - .border_color(theme.middle.base.default.border); - } - PanelSide::Bottom => { - panel_base = v_stack() - .flex_initial() - .w_full() - // .h(current_width) - .h_64() - .bg(theme.middle.base.default.background) - .border_t() - .border_color(theme.middle.base.default.border); - } - } - - panel_base.children(self.children.drain(..)) + let current_size = self.width.unwrap_or(self.initial_width); + + v_stack() + .flex_initial() + .when( + self.current_side == PanelSide::Left || self.current_side == PanelSide::Right, + |this| this.h_full().w(current_size), + ) + .when(self.current_side == PanelSide::Left, |this| this.border_r()) + .when(self.current_side == PanelSide::Right, |this| { + this.border_l() + }) + .when(self.current_side == PanelSide::Bottom, |this| { + this.border_b().w_full().h(current_size) + }) + .bg(color.surface) + .border_color(color.border) + .children(self.children.drain(..)) } } diff --git a/crates/ui2/src/components/panes.rs b/crates/ui2/src/components/panes.rs index c88d687ea190e23bd411724c2b621d666ed12de2..7fc4c830f6f0a961c4b0ec8527e22f757e359e3f 100644 --- a/crates/ui2/src/components/panes.rs +++ b/crates/ui2/src/components/panes.rs @@ -4,7 +4,6 @@ use gpui3::{hsla, AnyElement, Hsla, Length, Size}; use smallvec::SmallVec; use crate::prelude::*; -use crate::theme; #[derive(Default, PartialEq)] pub enum SplitDirection { @@ -99,7 +98,6 @@ impl PaneGroup { .gap_px() .w_full() .h_full() - .bg(theme.lowest.base.default.background) .children(self.panes.iter_mut().map(|pane| pane.render(view, cx))); if self.split_direction == SplitDirection::Horizontal { @@ -116,7 +114,7 @@ impl PaneGroup { .gap_px() .w_full() .h_full() - .bg(theme.lowest.base.default.background) + .bg(color.editor) .children(self.groups.iter_mut().map(|group| group.render(view, cx))); if self.split_direction == SplitDirection::Horizontal { diff --git a/crates/ui2/src/components/project_panel.rs b/crates/ui2/src/components/project_panel.rs index 4f883c1c15b502ad49b012e778b3c38ca6fedfb0..30137d9b8325bfdc08b8867378472b0e879d7ab2 100644 --- a/crates/ui2/src/components/project_panel.rs +++ b/crates/ui2/src/components/project_panel.rs @@ -2,8 +2,7 @@ use std::marker::PhantomData; use crate::prelude::*; use crate::{ - static_project_panel_project_items, static_project_panel_single_items, theme, Input, List, - ListHeader, + static_project_panel_project_items, static_project_panel_single_items, Input, List, ListHeader, }; #[derive(Element)] diff --git a/crates/ui2/src/components/status_bar.rs b/crates/ui2/src/components/status_bar.rs index b7aa9a53d39193c8495f33af9832820b8bdc7356..69d5344290c4e81a23964ffd55b3027e45d01bdc 100644 --- a/crates/ui2/src/components/status_bar.rs +++ b/crates/ui2/src/components/status_bar.rs @@ -96,16 +96,18 @@ impl StatusBar { .items_center() .justify_between() .w_full() - .bg(theme.lowest.base.default.background) - .child(self.left_tools(view, &theme)) - .child(self.right_tools(view, &theme)) + .bg(color.status_bar) + .child(self.left_tools(view, cx)) + .child(self.right_tools(view, cx)) } fn left_tools( &self, workspace: &mut Workspace, - theme: &Theme, + cx: &WindowContext, ) -> impl Element { + let color = ThemeColor::new(cx); + div() .flex() .items_center() @@ -135,8 +137,10 @@ impl StatusBar { fn right_tools( &self, workspace: &mut Workspace, - theme: &Theme, + cx: &WindowContext, ) -> impl Element { + let color = ThemeColor::new(cx); + div() .flex() .items_center() diff --git a/crates/ui2/src/components/tab.rs b/crates/ui2/src/components/tab.rs index 75911976b2716627136f2c2fbc32f06ab25e966d..36adb6017858948cc3b59ba240f4577a3384006f 100644 --- a/crates/ui2/src/components/tab.rs +++ b/crates/ui2/src/components/tab.rs @@ -1,7 +1,7 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::{theme, Icon, IconColor, IconElement, Label, LabelColor}; +use crate::{Icon, IconColor, IconElement, Label, LabelColor}; #[derive(Element, Clone)] pub struct Tab { @@ -96,17 +96,28 @@ impl Tab { let close_icon = IconElement::new(Icon::Close).color(IconColor::Muted); + let (tab_bg, tab_hover_bg, tab_active_bg) = match self.current { + true => ( + color.ghost_element, + color.ghost_element_hover, + color.ghost_element_active, + ), + false => ( + color.filled_element, + color.filled_element_hover, + color.filled_element_active, + ), + }; + div() .px_2() .py_0p5() .flex() .items_center() .justify_center() - .bg(if self.current { - theme.highest.base.default.background - } else { - theme.middle.base.default.background - }) + .bg(tab_bg) + .hover(|h| h.bg(tab_hover_bg)) + // .active(|a| a.bg(tab_active_bg)) .child( div() .px_1() diff --git a/crates/ui2/src/components/tab_bar.rs b/crates/ui2/src/components/tab_bar.rs index 9d352a09a5f02ebc243e56fe90963c4e7fc0e08f..216c7b53fa4fa8d48716589f794e9909b4ea22ca 100644 --- a/crates/ui2/src/components/tab_bar.rs +++ b/crates/ui2/src/components/tab_bar.rs @@ -1,12 +1,14 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::{theme, Icon, IconButton, Tab}; +use crate::{Icon, IconButton, Tab}; #[derive(Element)] pub struct TabBar { state_type: PhantomData, scroll_state: ScrollState, + /// Backwards, Forwards + can_navigate: (bool, bool), tabs: Vec>, } @@ -15,6 +17,7 @@ impl TabBar { Self { state_type: PhantomData, scroll_state: ScrollState::default(), + can_navigate: (false, false), tabs, } } @@ -23,15 +26,20 @@ impl TabBar { self.scroll_state = scroll_state; } + pub fn can_navigate(mut self, can_navigate: (bool, bool)) -> Self { + self.can_navigate = can_navigate; + self + } + fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); - let can_navigate_back = true; - let can_navigate_forward = false; + + let (can_navigate_back, can_navigate_forward) = self.can_navigate; div() .w_full() .flex() - .bg(theme.middle.base.default.background) + .bg(color.tab_bar) // Left Side .child( div() diff --git a/crates/ui2/src/components/terminal.rs b/crates/ui2/src/components/terminal.rs index a56c07a75052eb563a7562d8a206e9f04109a36a..a2703bfd673ff7e01698c902d378037c45d598b0 100644 --- a/crates/ui2/src/components/terminal.rs +++ b/crates/ui2/src/components/terminal.rs @@ -3,7 +3,7 @@ use std::marker::PhantomData; use gpui3::{relative, rems, Size}; use crate::prelude::*; -use crate::{theme, Icon, IconButton, Pane, Tab}; +use crate::{Icon, IconButton, Pane, Tab}; #[derive(Element)] pub struct Terminal { @@ -32,7 +32,7 @@ impl Terminal { div() .w_full() .flex() - .bg(theme.middle.base.default.background) + .bg(color.surface) .child( div().px_1().flex().flex_none().gap_2().child( div() @@ -79,7 +79,7 @@ impl Terminal { height: rems(36.).into(), }, ) - .child(crate::static_data::terminal_buffer(&theme)), + .child(crate::static_data::terminal_buffer(&color)), ) } } diff --git a/crates/ui2/src/components/title_bar.rs b/crates/ui2/src/components/title_bar.rs index a64694c3c6d2c114bd6276e5dbe506ca5f09d1e6..76d40f7f11f4f75a1fc39c01deb3d60e272e19f3 100644 --- a/crates/ui2/src/components/title_bar.rs +++ b/crates/ui2/src/components/title_bar.rs @@ -6,7 +6,7 @@ use gpui3::{view, Context, View}; use crate::prelude::*; use crate::settings::user_settings; use crate::{ - random_players_with_call_status, theme, Avatar, Button, Icon, IconButton, IconColor, MicStatus, + random_players_with_call_status, Avatar, Button, Icon, IconButton, IconColor, MicStatus, PlayerWithCallStatus, ScreenShareStatus, ToolDivider, TrafficLights, }; diff --git a/crates/ui2/src/components/toolbar.rs b/crates/ui2/src/components/toolbar.rs index e58de4c9ba9358d73c1cfac9f3a437abb12f3dab..aeec01bc7f8fd8d916de98aee87bdb78e3a1ea49 100644 --- a/crates/ui2/src/components/toolbar.rs +++ b/crates/ui2/src/components/toolbar.rs @@ -2,7 +2,6 @@ use gpui3::AnyElement; use smallvec::SmallVec; use crate::prelude::*; -use crate::theme; #[derive(Clone)] pub struct ToolbarItem {} @@ -59,7 +58,7 @@ impl Toolbar { let color = ThemeColor::new(cx); div() - .bg(theme.highest.base.default.background) + .bg(color.toolbar) .p_2() .flex() .justify_between() @@ -111,21 +110,21 @@ mod stories { Symbol(vec![ HighlightedText { text: "impl ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "ToolbarStory".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, ]), Symbol(vec![ HighlightedText { text: "fn ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "render".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, ]), ], diff --git a/crates/ui2/src/components/traffic_lights.rs b/crates/ui2/src/components/traffic_lights.rs index 0533639841121ee610bdcafdd2aa93e35972c236..cf8d2b47d149bbda5a0353fb338562adfe826a74 100644 --- a/crates/ui2/src/components/traffic_lights.rs +++ b/crates/ui2/src/components/traffic_lights.rs @@ -1,7 +1,7 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::{theme, SystemColor}; +use crate::SystemColor; #[derive(Clone, Copy)] enum TrafficLightColor { @@ -34,7 +34,7 @@ impl TrafficLight { (true, TrafficLightColor::Red) => system_color.mac_os_traffic_light_red, (true, TrafficLightColor::Yellow) => system_color.mac_os_traffic_light_yellow, (true, TrafficLightColor::Green) => system_color.mac_os_traffic_light_green, - (false, _) => theme.lowest.base.active.background, + (false, _) => color.filled_element, }; div().w_3().h_3().rounded_full().bg(fill) diff --git a/crates/ui2/src/elements/avatar.rs b/crates/ui2/src/elements/avatar.rs index 9b86b557426c374d10183ed00428a796a5e6e08b..78e03a77d0e80b9a800839dcae88053bf49fc927 100644 --- a/crates/ui2/src/elements/avatar.rs +++ b/crates/ui2/src/elements/avatar.rs @@ -3,7 +3,6 @@ use std::marker::PhantomData; use gpui3::img; use crate::prelude::*; -use crate::theme::theme; #[derive(Element, Clone)] pub struct Avatar { @@ -39,7 +38,7 @@ impl Avatar { img.uri(self.src.clone()) .size_4() - .bg(theme.middle.warning.default.foreground) + .bg(color.image_fallback_background) } } diff --git a/crates/ui2/src/elements/details.rs b/crates/ui2/src/elements/details.rs index 84deb69d596d5896d167744492a67b6938109b85..1467376c00ce9fde8cb8968e91e62ca4762ee545 100644 --- a/crates/ui2/src/elements/details.rs +++ b/crates/ui2/src/elements/details.rs @@ -1,7 +1,6 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::theme; #[derive(Element, Clone)] pub struct Details { @@ -33,7 +32,7 @@ impl Details { .p_1() .gap_0p5() .text_xs() - .text_color(theme.lowest.base.default.foreground) + .text_color(color.text) .child(self.text) .children(self.meta.map(|m| m)) } diff --git a/crates/ui2/src/elements/icon.rs b/crates/ui2/src/elements/icon.rs index 720ef95a5af6fcb74dfcc82e1cf6ee785c0326ee..61f9ed4a64ca06ecf6cc9a0fb0b2dc39c2603aaf 100644 --- a/crates/ui2/src/elements/icon.rs +++ b/crates/ui2/src/elements/icon.rs @@ -1,11 +1,10 @@ use std::marker::PhantomData; -use std::sync::Arc; use gpui3::{svg, Hsla}; use strum::EnumIter; use crate::prelude::*; -use crate::theme::{theme, Theme}; +use crate::theme::theme; #[derive(Default, PartialEq, Copy, Clone)] pub enum IconSize { @@ -29,7 +28,8 @@ pub enum IconColor { } impl IconColor { - pub fn color(self, theme: Arc) -> Hsla { + pub fn color(self, cx: &WindowContext) -> Hsla { + let theme = theme(cx); match self { IconColor::Default => theme.lowest.base.default.foreground, IconColor::Muted => theme.lowest.variant.default.foreground, @@ -178,7 +178,7 @@ impl IconElement { fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); - let fill = self.color.color(theme); + let fill = self.color.color(cx); let svg_size = match self.size { IconSize::Small => ui_size(12. / 14.), IconSize::Medium => ui_size(15. / 14.), diff --git a/crates/ui2/src/elements/input.rs b/crates/ui2/src/elements/input.rs index 57cdcfe59944bd7659c1619d64c68613dfd9ae2f..df126c52cf2c77ceb93b0099e9b4ed99b4c03d6a 100644 --- a/crates/ui2/src/elements/input.rs +++ b/crates/ui2/src/elements/input.rs @@ -1,7 +1,8 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::theme; +use crate::Label; +use crate::LabelColor; #[derive(Default, PartialEq)] pub enum InputVariant { @@ -17,6 +18,8 @@ pub struct Input { value: String, state: InteractionState, variant: InputVariant, + disabled: bool, + is_active: bool, } impl Input { @@ -27,6 +30,8 @@ impl Input { value: "".to_string(), state: InteractionState::default(), variant: InputVariant::default(), + disabled: false, + is_active: false, } } @@ -45,55 +50,54 @@ impl Input { self } - fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { - let color = ThemeColor::new(cx); - - let text_el; - let text_color; - let background_color_default; - let background_color_active; + pub fn disabled(mut self, disabled: bool) -> Self { + self.disabled = disabled; + self + } - let mut border_color_default = theme.middle.base.default.border; - let mut border_color_hover = theme.middle.base.hovered.border; - let border_color_focus = theme.middle.base.pressed.background; + pub fn is_active(mut self, is_active: bool) -> Self { + self.is_active = is_active; + self + } - match self.variant { - InputVariant::Ghost => { - background_color_default = theme.middle.base.default.background; - background_color_active = theme.middle.base.active.background; - } - InputVariant::Filled => { - background_color_default = theme.middle.on.default.background; - background_color_active = theme.middle.on.active.background; - } + fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { + let color = ThemeColor::new(cx); + let system_color = SystemColor::new(); + + let (input_bg, input_hover_bg, input_active_bg) = match self.variant { + InputVariant::Ghost => ( + color.ghost_element, + color.ghost_element_hover, + color.ghost_element_active, + ), + InputVariant::Filled => ( + color.filled_element, + color.filled_element_hover, + color.filled_element_active, + ), }; - if self.state == InteractionState::Focused { - border_color_default = theme.players[0].cursor; - border_color_hover = theme.players[0].cursor; - } + let placeholder_label = Label::new(self.placeholder).color(if self.disabled { + LabelColor::Disabled + } else { + LabelColor::Placeholder + }); - if self.state == InteractionState::Focused || self.state == InteractionState::Active { - text_el = self.value.clone(); - text_color = theme.lowest.base.default.foreground; + let label = Label::new(self.value.clone()).color(if self.disabled { + LabelColor::Disabled } else { - text_el = self.placeholder.to_string().clone(); - text_color = theme.lowest.base.disabled.foreground; - } + LabelColor::Default + }); div() .h_7() .w_full() .px_2() .border() - .border_color(border_color_default) - .bg(background_color_default) - .hover(|style| { - style - .border_color(border_color_hover) - .bg(background_color_active) - }) - // .active(|a| .border_color(border_color_active)) + .border_color(system_color.transparent) + .bg(input_bg) + .hover(|style| style.bg(input_hover_bg)) + // .active(|style| style.bg(input_active_bg)) .flex() .items_center() .child( @@ -101,9 +105,8 @@ impl Input { .flex() .items_center() .text_sm() - .text_color(text_color) - .child(text_el) - .child(div().text_color(theme.players[0].cursor).child("|")), + .when(self.value.is_empty(), |this| this.child(placeholder_label)) + .when(!self.value.is_empty(), |this| this.child(label)), ) } } diff --git a/crates/ui2/src/elements/label.rs b/crates/ui2/src/elements/label.rs index f81c86c31f3df365a76838df17940393f626c8ee..cfb0c21cb18c7302f64bab9e4f80188285abdcc6 100644 --- a/crates/ui2/src/elements/label.rs +++ b/crates/ui2/src/elements/label.rs @@ -23,16 +23,18 @@ pub enum LabelColor { impl LabelColor { pub fn hsla(&self, cx: &WindowContext) -> Hsla { let color = ThemeColor::new(cx); + // TODO: Remove + let theme = theme(cx); match self { - Self::Default => theme.middle.base.default.foreground, - Self::Muted => theme.middle.variant.default.foreground, + Self::Default => color.text, + Self::Muted => color.text_muted, Self::Created => theme.middle.positive.default.foreground, Self::Modified => theme.middle.warning.default.foreground, Self::Deleted => theme.middle.negative.default.foreground, - Self::Disabled => theme.middle.base.disabled.foreground, + Self::Disabled => color.text_disabled, Self::Hidden => theme.middle.variant.default.foreground, - Self::Placeholder => theme.middle.base.disabled.foreground, + Self::Placeholder => color.text_placeholder, Self::Accent => theme.middle.accent.default.foreground, } } @@ -138,7 +140,7 @@ impl HighlightedLabel { fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); - let highlight_color = theme.lowest.accent.default.foreground; + let highlight_color = color.text_accent; let mut highlight_indices = self.highlight_indices.iter().copied().peekable(); diff --git a/crates/ui2/src/elements/player.rs b/crates/ui2/src/elements/player.rs index cf90dbab34b792f3f3327fbee47bd7bf7aadb1c4..2cab1c57d5de288b86c336ba4cf15cbeb3974ca8 100644 --- a/crates/ui2/src/elements/player.rs +++ b/crates/ui2/src/elements/player.rs @@ -1,6 +1,6 @@ use gpui3::{Hsla, ViewContext}; -use crate::theme; +use crate::ThemeColor; #[derive(Debug, Default, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy)] pub enum PlayerStatus { @@ -141,13 +141,13 @@ impl Player { pub fn cursor_color(&self, cx: &mut ViewContext) -> Hsla { let color = ThemeColor::new(cx); let index = self.index % 8; - theme.players[self.index].cursor + color.player[self.index].cursor } pub fn selection_color(&self, cx: &mut ViewContext) -> Hsla { let color = ThemeColor::new(cx); let index = self.index % 8; - theme.players[self.index].selection + color.player[self.index].selection } pub fn avatar_src(&self) -> &str { diff --git a/crates/ui2/src/elements/tool_divider.rs b/crates/ui2/src/elements/tool_divider.rs index d0fc709346d4b492964c455d3150806f20981ce8..7316b22c4ce9361614ba453bf4aed0cdb2a537e4 100644 --- a/crates/ui2/src/elements/tool_divider.rs +++ b/crates/ui2/src/elements/tool_divider.rs @@ -1,7 +1,6 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::theme; #[derive(Element)] pub struct ToolDivider { @@ -18,6 +17,6 @@ impl ToolDivider { fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); - div().w_px().h_3().bg(theme.lowest.base.default.border) + div().w_px().h_3().bg(color.border) } } diff --git a/crates/ui2/src/prelude.rs b/crates/ui2/src/prelude.rs index 9433145ff52cd6b29f07a393b792cc5ef6fe868b..c7663b9ce609ac871450ab9abeb91e8204d49817 100644 --- a/crates/ui2/src/prelude.rs +++ b/crates/ui2/src/prelude.rs @@ -9,6 +9,7 @@ pub use crate::{theme, ButtonVariant, ElementExt, Theme}; use gpui3::{hsla, rems, rgb, Hsla, Rems}; use strum::EnumIter; +// TODO Remove uses in favor of ThemeColor #[derive(Default)] pub struct SystemColor { pub transparent: Hsla, @@ -35,6 +36,30 @@ impl SystemColor { } } +#[derive(Clone, Copy)] +pub struct PlayerThemeColors { + pub cursor: Hsla, + pub selection: Hsla, +} + +impl PlayerThemeColors { + pub fn new(cx: &WindowContext, ix: usize) -> Self { + let theme = theme(cx); + + if ix < theme.players.len() { + Self { + cursor: theme.players[ix].cursor, + selection: theme.players[ix].selection, + } + } else { + Self { + cursor: rgb::(0xff00ff), + selection: rgb::(0xff00ff), + } + } + } +} + #[derive(Clone, Copy)] pub struct SyntaxColor { pub comment: Hsla, @@ -48,16 +73,36 @@ impl SyntaxColor { let theme = theme(cx); Self { - comment: theme.syntax.comment, - string: theme.syntax.string, - function: theme.syntax.function, - keyword: theme.syntax.keyword, + comment: theme + .syntax + .get("comment") + .cloned() + .unwrap_or_else(|| rgb::(0xff00ff)), + string: theme + .syntax + .get("string") + .cloned() + .unwrap_or_else(|| rgb::(0xff00ff)), + function: theme + .syntax + .get("function") + .cloned() + .unwrap_or_else(|| rgb::(0xff00ff)), + keyword: theme + .syntax + .get("keyword") + .cloned() + .unwrap_or_else(|| rgb::(0xff00ff)), } } } #[derive(Clone, Copy)] pub struct ThemeColor { + pub transparent: Hsla, + pub mac_os_traffic_light_red: Hsla, + pub mac_os_traffic_light_yellow: Hsla, + pub mac_os_traffic_light_green: Hsla, pub border: Hsla, pub border_variant: Hsla, pub border_focused: Hsla, @@ -96,14 +141,28 @@ pub struct ThemeColor { pub text_muted: Hsla, pub text_placeholder: Hsla, pub text_disabled: Hsla, + pub text_accent: Hsla, pub icon_muted: Hsla, pub syntax: SyntaxColor, - pub toolbar_background: Hsla, - pub editor_background: Hsla, + pub status_bar: Hsla, + pub title_bar: Hsla, + pub toolbar: Hsla, + pub tab_bar: Hsla, + pub editor: Hsla, pub editor_subheader: Hsla, pub editor_active_line: Hsla, + pub terminal: Hsla, pub image_fallback_background: Hsla, + + pub git_created: Hsla, + pub git_modified: Hsla, + pub git_deleted: Hsla, + pub git_conflict: Hsla, + pub git_ignored: Hsla, + pub git_renamed: Hsla, + + pub player: [PlayerThemeColors; 8], } impl ThemeColor { @@ -111,7 +170,22 @@ impl ThemeColor { let theme = theme(cx); let system_color = SystemColor::new(); + let players = [ + PlayerThemeColors::new(cx, 0), + PlayerThemeColors::new(cx, 1), + PlayerThemeColors::new(cx, 2), + PlayerThemeColors::new(cx, 3), + PlayerThemeColors::new(cx, 4), + PlayerThemeColors::new(cx, 5), + PlayerThemeColors::new(cx, 6), + PlayerThemeColors::new(cx, 7), + ]; + Self { + transparent: hsla(0.0, 0.0, 0.0, 0.0), + mac_os_traffic_light_red: rgb::(0xEC695E), + mac_os_traffic_light_yellow: rgb::(0xF4BF4F), + mac_os_traffic_light_green: rgb::(0x62C554), border: theme.lowest.base.default.border, border_variant: theme.lowest.variant.default.border, border_focused: theme.lowest.accent.default.border, @@ -134,13 +208,28 @@ impl ThemeColor { /// TODO: map this to a real value text_placeholder: theme.lowest.negative.default.foreground, text_disabled: theme.lowest.base.disabled.foreground, + text_accent: theme.lowest.accent.default.foreground, icon_muted: theme.lowest.variant.default.foreground, syntax: SyntaxColor::new(cx), - toolbar_background: theme.highest.base.default.background, - editor_background: theme.highest.base.default.background, + + status_bar: theme.lowest.base.default.background, + title_bar: theme.lowest.base.default.background, + toolbar: theme.highest.base.default.background, + tab_bar: theme.middle.base.default.background, + editor: theme.highest.base.default.background, editor_subheader: theme.middle.base.default.background, + terminal: theme.highest.base.default.background, editor_active_line: theme.highest.on.default.background, image_fallback_background: theme.lowest.base.default.background, + + git_created: theme.lowest.positive.default.foreground, + git_modified: theme.lowest.accent.default.foreground, + git_deleted: theme.lowest.negative.default.foreground, + git_conflict: theme.lowest.warning.default.foreground, + git_ignored: theme.lowest.base.disabled.foreground, + git_renamed: theme.lowest.warning.default.foreground, + + player: players, } } } @@ -244,11 +333,11 @@ impl GitStatus { match self { Self::None => system_color.transparent, - Self::Created => theme.lowest.positive.default.foreground, - Self::Modified => theme.lowest.warning.default.foreground, - Self::Deleted => theme.lowest.negative.default.foreground, - Self::Conflict => theme.lowest.warning.default.foreground, - Self::Renamed => theme.lowest.accent.default.foreground, + Self::Created => color.git_created, + Self::Modified => color.git_modified, + Self::Deleted => color.git_deleted, + Self::Conflict => color.git_conflict, + Self::Renamed => color.git_renamed, } } } diff --git a/crates/ui2/src/static_data.rs b/crates/ui2/src/static_data.rs index c9b389c923d68bfb05e13904d0a6f4f067af99d3..f83cc4a9795ecfe89dbde8c28077ebb9b0e93425 100644 --- a/crates/ui2/src/static_data.rs +++ b/crates/ui2/src/static_data.rs @@ -4,12 +4,12 @@ use std::str::FromStr; use gpui3::WindowContext; use rand::Rng; +use crate::HighlightedText; use crate::{ - theme, Buffer, BufferRow, BufferRows, EditorPane, FileSystemStatus, GitStatus, HighlightColor, - HighlightedLine, HighlightedText, Icon, Keybinding, Label, LabelColor, ListEntry, - ListEntrySize, ListItem, Livestream, MicStatus, ModifierKeys, PaletteItem, Player, - PlayerCallStatus, PlayerWithCallStatus, ScreenShareStatus, Symbol, Tab, Theme, ToggleState, - VideoStatus, + Buffer, BufferRow, BufferRows, EditorPane, FileSystemStatus, GitStatus, HighlightedLine, Icon, + Keybinding, Label, LabelColor, ListEntry, ListEntrySize, ListItem, Livestream, MicStatus, + ModifierKeys, PaletteItem, Player, PlayerCallStatus, PlayerWithCallStatus, ScreenShareStatus, + Symbol, Tab, ThemeColor, ToggleState, VideoStatus, }; pub fn static_tabs_example() -> Vec> { @@ -613,7 +613,7 @@ pub fn empty_buffer_example() -> Buffer { } pub fn hello_world_rust_editor_example(cx: &mut WindowContext) -> EditorPane { - let theme = theme(cx); + let color = ThemeColor::new(cx); EditorPane::new( cx, @@ -622,19 +622,19 @@ pub fn hello_world_rust_editor_example(cx: &mut WindowContext) -> EditorPane { vec![Symbol(vec![ HighlightedText { text: "fn ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "main".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, ])], - hello_world_rust_buffer_example(&theme), + hello_world_rust_buffer_example(&color), ) } pub fn hello_world_rust_buffer_example( - theme: &Theme, + color: &ThemeColor, ) -> Buffer { Buffer::new() .set_title("hello_world.rs".to_string()) @@ -642,11 +642,11 @@ pub fn hello_world_rust_buffer_example( .set_language("rust".to_string()) .set_rows(Some(BufferRows { show_line_numbers: true, - rows: hello_world_rust_buffer_rows(theme), + rows: hello_world_rust_buffer_rows(color), })) } -pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { +pub fn hello_world_rust_buffer_rows(color: &ThemeColor) -> Vec { let show_line_number = true; vec![ @@ -658,15 +658,15 @@ pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { highlighted_texts: vec![ HighlightedText { text: "fn ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "main".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, HighlightedText { text: "() {".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, ], }), @@ -682,7 +682,7 @@ pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { highlighted_texts: vec![HighlightedText { text: " // Statements here are executed when the compiled binary is called." .to_string(), - color: HighlightColor::Comment.hsla(&theme), + color: color.syntax.comment, }], }), cursors: None, @@ -705,7 +705,7 @@ pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: " // Print text to the console.".to_string(), - color: HighlightColor::Comment.hsla(&theme), + color: color.syntax.comment, }], }), cursors: None, @@ -720,15 +720,15 @@ pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { highlighted_texts: vec![ HighlightedText { text: " println!(".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, HighlightedText { text: "\"Hello, world!\"".to_string(), - color: HighlightColor::String.hsla(&theme), + color: color.syntax.string, }, HighlightedText { text: ");".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, ], }), @@ -743,7 +743,7 @@ pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: "}".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }], }), cursors: None, @@ -754,7 +754,7 @@ pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { } pub fn hello_world_rust_editor_with_status_example(cx: &mut WindowContext) -> EditorPane { - let theme = theme(cx); + let color = ThemeColor::new(cx); EditorPane::new( cx, @@ -763,19 +763,19 @@ pub fn hello_world_rust_editor_with_status_example(cx: &mut WindowContext) -> Ed vec![Symbol(vec![ HighlightedText { text: "fn ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "main".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, ])], - hello_world_rust_buffer_with_status_example(&theme), + hello_world_rust_buffer_with_status_example(&color), ) } pub fn hello_world_rust_buffer_with_status_example( - theme: &Theme, + color: &ThemeColor, ) -> Buffer { Buffer::new() .set_title("hello_world.rs".to_string()) @@ -783,11 +783,11 @@ pub fn hello_world_rust_buffer_with_status_example Vec { +pub fn hello_world_rust_with_status_buffer_rows(color: &ThemeColor) -> Vec { let show_line_number = true; vec![ @@ -799,15 +799,15 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec highlighted_texts: vec![ HighlightedText { text: "fn ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "main".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, HighlightedText { text: "() {".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, ], }), @@ -823,7 +823,7 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec highlighted_texts: vec![HighlightedText { text: "// Statements here are executed when the compiled binary is called." .to_string(), - color: HighlightColor::Comment.hsla(&theme), + color: color.syntax.comment, }], }), cursors: None, @@ -846,7 +846,7 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: " // Print text to the console.".to_string(), - color: HighlightColor::Comment.hsla(&theme), + color: color.syntax.comment, }], }), cursors: None, @@ -861,15 +861,15 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec highlighted_texts: vec![ HighlightedText { text: " println!(".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, HighlightedText { text: "\"Hello, world!\"".to_string(), - color: HighlightColor::String.hsla(&theme), + color: color.syntax.string, }, HighlightedText { text: ");".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, ], }), @@ -884,7 +884,7 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: "}".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }], }), cursors: None, @@ -898,7 +898,7 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: "".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }], }), cursors: None, @@ -912,7 +912,7 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: "// Marshall and Nate were here".to_string(), - color: HighlightColor::Comment.hsla(&theme), + color: color.syntax.comment, }], }), cursors: None, @@ -922,16 +922,16 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec ] } -pub fn terminal_buffer(theme: &Theme) -> Buffer { +pub fn terminal_buffer(color: &ThemeColor) -> Buffer { Buffer::new() .set_title("zed — fish".to_string()) .set_rows(Some(BufferRows { show_line_numbers: false, - rows: terminal_buffer_rows(theme), + rows: terminal_buffer_rows(color), })) } -pub fn terminal_buffer_rows(theme: &Theme) -> Vec { +pub fn terminal_buffer_rows(color: &ThemeColor) -> Vec { let show_line_number = false; vec![ @@ -943,31 +943,31 @@ pub fn terminal_buffer_rows(theme: &Theme) -> Vec { highlighted_texts: vec![ HighlightedText { text: "maxdeviant ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "in ".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, HighlightedText { text: "profaned-capital ".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, HighlightedText { text: "in ".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, HighlightedText { text: "~/p/zed ".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, HighlightedText { text: "on ".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, HighlightedText { text: " gpui2-ui ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, ], }), @@ -982,7 +982,7 @@ pub fn terminal_buffer_rows(theme: &Theme) -> Vec { line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: "λ ".to_string(), - color: HighlightColor::String.hsla(&theme), + color: color.syntax.string, }], }), cursors: None, diff --git a/crates/ui2/src/story.rs b/crates/ui2/src/story.rs index cb269850d16597c5e6b9aa5a92244ffa8936684a..2a753df4f1ce1884c4c7504461377727f0e5546b 100644 --- a/crates/ui2/src/story.rs +++ b/crates/ui2/src/story.rs @@ -1,7 +1,6 @@ use gpui3::Div; use crate::prelude::*; -use crate::theme; pub struct Story {} @@ -16,7 +15,7 @@ impl Story { .pt_2() .px_4() .font("Zed Mono Extended") - .bg(theme.lowest.base.default.background) + .bg(color.background) } pub fn title( @@ -27,7 +26,7 @@ impl Story { div() .text_xl() - .text_color(theme.lowest.base.default.foreground) + .text_color(color.text) .child(title.to_owned()) } @@ -47,7 +46,7 @@ impl Story { .mt_4() .mb_2() .text_xs() - .text_color(theme.lowest.base.default.foreground) + .text_color(color.text) .child(label.to_owned()) } } From 2189983323ba31aa0bbb57a95823fff0f583b630 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Thu, 19 Oct 2023 15:02:00 -0400 Subject: [PATCH 03/14] Add missing `Clone` bounds --- crates/ui2/src/components/buffer_search.rs | 1 + crates/ui2/src/elements/input.rs | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/crates/ui2/src/components/buffer_search.rs b/crates/ui2/src/components/buffer_search.rs index 7e863b8493443d65959965fdaefb2053ee9b45ac..06acd468cd9eb13fe770816e56eb5ac0ca4f83af 100644 --- a/crates/ui2/src/components/buffer_search.rs +++ b/crates/ui2/src/components/buffer_search.rs @@ -3,6 +3,7 @@ use gpui3::{view, Context, View}; use crate::prelude::*; use crate::{h_stack, Icon, IconButton, IconColor, Input}; +#[derive(Clone)] pub struct BufferSearch { is_replace_open: bool, } diff --git a/crates/ui2/src/elements/input.rs b/crates/ui2/src/elements/input.rs index df126c52cf2c77ceb93b0099e9b4ed99b4c03d6a..c5076cfab93d3adaeeb0714ff2b55a91c4aa43c4 100644 --- a/crates/ui2/src/elements/input.rs +++ b/crates/ui2/src/elements/input.rs @@ -12,7 +12,7 @@ pub enum InputVariant { } #[derive(Element)] -pub struct Input { +pub struct Input { state_type: PhantomData, placeholder: SharedString, value: String, @@ -22,7 +22,7 @@ pub struct Input { is_active: bool, } -impl Input { +impl Input { pub fn new(placeholder: impl Into) -> Self { Self { state_type: PhantomData, @@ -77,7 +77,7 @@ impl Input { ), }; - let placeholder_label = Label::new(self.placeholder).color(if self.disabled { + let placeholder_label = Label::new(self.placeholder.clone()).color(if self.disabled { LabelColor::Disabled } else { LabelColor::Placeholder From 92542e6b94b531a3b833792da34762273537a10d Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Thu, 19 Oct 2023 16:12:21 -0400 Subject: [PATCH 04/14] Identify `IconButton` --- crates/ui2/src/components/icon_button.rs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs index cf8d3119294d0e28f961d4472f921c055f25fff6..ce3c2a9421c60b558f16b8694b2cd9a0a5be40a8 100644 --- a/crates/ui2/src/components/icon_button.rs +++ b/crates/ui2/src/components/icon_button.rs @@ -88,6 +88,8 @@ impl IconButton { }; let mut button = h_stack() + // TODO: We need to pass the ID in so that `IconButton`s can be differentiated from one another. + .id("icon_button") .justify_center() .rounded_md() .py(ui_size(cx, 0.25)) From 1be1bffb290457efab27e9c3dd98b0119b482739 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Thu, 19 Oct 2023 16:13:25 -0400 Subject: [PATCH 05/14] Wire up active style for `Breadcrumb` --- crates/ui2/src/components/breadcrumb.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/crates/ui2/src/components/breadcrumb.rs b/crates/ui2/src/components/breadcrumb.rs index a721b59179a2e6fe9c22d6db912526f7f3e85f14..d0286f325db22a8c7f376bbef53bffcd90cadca3 100644 --- a/crates/ui2/src/components/breadcrumb.rs +++ b/crates/ui2/src/components/breadcrumb.rs @@ -41,13 +41,13 @@ impl Breadcrumb { let symbols_len = self.symbols.len(); h_stack() + .id("breadcrumb") .px_1() .text_sm() .text_color(color.text_muted) .rounded_md() .hover(|style| style.bg(color.ghost_element_hover)) - // TODO: Add this when active is ready - // .active(|style| style.bg(color.ghost_element_active)) + .active(|style| style.bg(color.ghost_element_active)) .child(self.path.clone().to_str().unwrap().to_string()) .child(if !self.symbols.is_empty() { self.render_separator(cx) From d91b423a45949c4d1bb863ccd4e4fe511c1707d1 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Thu, 19 Oct 2023 16:16:09 -0400 Subject: [PATCH 06/14] Remove unused `Interactive` impl for `FakeSettings` --- crates/ui2/src/settings.rs | 33 +-------------------------------- 1 file changed, 1 insertion(+), 32 deletions(-) diff --git a/crates/ui2/src/settings.rs b/crates/ui2/src/settings.rs index 995da199cf90a6b600e9fc14a9eaaa2bbe2cf3b0..d7ace0a0838d6f4f10e9ad9ec55040cbd2283d6a 100644 --- a/crates/ui2/src/settings.rs +++ b/crates/ui2/src/settings.rs @@ -1,9 +1,7 @@ use std::ops::Deref; -use std::sync::Arc; use gpui3::{ - rems, AbsoluteLength, AnyElement, BorrowAppContext, Bounds, Interactive, LayoutId, Pixels, - WindowContext, + rems, AbsoluteLength, AnyElement, BorrowAppContext, Bounds, LayoutId, Pixels, WindowContext, }; use crate::prelude::*; @@ -149,32 +147,3 @@ impl Element for WithSettings { }); } } - -impl Interactive for WithSettings { - fn listeners(&mut self) -> &mut gpui3::EventListeners { - self.child.listeners() - } - - fn on_mouse_down( - mut self, - button: gpui3::MouseButton, - handler: impl Fn(&mut Self::ViewState, &gpui3::MouseDownEvent, &mut ViewContext) - + Send - + Sync - + 'static, - ) -> Self - where - Self: Sized, - { - println!("WithSettings on_mouse_down"); - - let settings = self.settings.clone(); - - self.listeners() - .mouse_down - .push(Arc::new(move |view, event, bounds, phase, cx| { - cx.with_global(settings.clone(), |cx| handler(view, event, cx)) - })); - self - } -} From 4050bf43c466fd093c15fc82cd7e8e56d57c0662 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Thu, 19 Oct 2023 16:31:24 -0400 Subject: [PATCH 07/14] Remove `Clone` bound for `Label` --- crates/ui2/src/components/context_menu.rs | 12 +++---- crates/ui2/src/components/list.rs | 44 +++++++++++------------ crates/ui2/src/elements/label.rs | 6 ++-- 3 files changed, 30 insertions(+), 32 deletions(-) diff --git a/crates/ui2/src/components/context_menu.rs b/crates/ui2/src/components/context_menu.rs index 45e1d40bcc9c4ad4cdc9eedc038268233eee1ab7..5096f37c6d7757c3701eaa3ae1feb63b7551731c 100644 --- a/crates/ui2/src/components/context_menu.rs +++ b/crates/ui2/src/components/context_menu.rs @@ -1,14 +1,13 @@ use crate::{prelude::*, ListItemVariant}; use crate::{v_stack, Label, List, ListEntry, ListItem, ListSeparator, ListSubHeader}; -#[derive(Clone)] -pub enum ContextMenuItem { +pub enum ContextMenuItem { Header(SharedString), Entry(Label), Separator, } -impl ContextMenuItem { +impl ContextMenuItem { fn to_list_item(self) -> ListItem { match self { ContextMenuItem::Header(label) => ListSubHeader::new(label).into(), @@ -33,11 +32,11 @@ impl ContextMenuItem { } #[derive(Element)] -pub struct ContextMenu { +pub struct ContextMenu { items: Vec>, } -impl ContextMenu { +impl ContextMenu { pub fn new(items: impl IntoIterator>) -> Self { Self { items: items.into_iter().collect(), @@ -54,8 +53,7 @@ impl ContextMenu { .child( List::new( self.items - .clone() - .into_iter() + .drain(..) .map(ContextMenuItem::to_list_item) .collect(), ) diff --git a/crates/ui2/src/components/list.rs b/crates/ui2/src/components/list.rs index 6d37521d17ab57863c76d13b680efd8465ded470..ab0c3901107c09a82499836f0822227f993538c6 100644 --- a/crates/ui2/src/components/list.rs +++ b/crates/ui2/src/components/list.rs @@ -14,8 +14,8 @@ pub enum ListItemVariant { Inset, } -#[derive(Element, Clone)] -pub struct ListHeader { +#[derive(Element)] +pub struct ListHeader { state_type: PhantomData, label: SharedString, left_icon: Option, @@ -24,7 +24,7 @@ pub struct ListHeader { toggleable: Toggleable, } -impl ListHeader { +impl ListHeader { pub fn new(label: impl Into) -> Self { Self { state_type: PhantomData, @@ -133,15 +133,15 @@ impl ListHeader { } } -#[derive(Element, Clone)] -pub struct ListSubHeader { +#[derive(Element)] +pub struct ListSubHeader { state_type: PhantomData, label: SharedString, left_icon: Option, variant: ListItemVariant, } -impl ListSubHeader { +impl ListSubHeader { pub fn new(label: impl Into) -> Self { Self { state_type: PhantomData, @@ -198,32 +198,32 @@ pub enum ListEntrySize { Medium, } -#[derive(Clone, Element)] -pub enum ListItem { +#[derive(Element)] +pub enum ListItem { Entry(ListEntry), Separator(ListSeparator), Header(ListSubHeader), } -impl From> for ListItem { +impl From> for ListItem { fn from(entry: ListEntry) -> Self { Self::Entry(entry) } } -impl From> for ListItem { +impl From> for ListItem { fn from(entry: ListSeparator) -> Self { Self::Separator(entry) } } -impl From> for ListItem { +impl From> for ListItem { fn from(entry: ListSubHeader) -> Self { Self::Header(entry) } } -impl ListItem { +impl ListItem { fn render(&mut self, view: &mut S, cx: &mut ViewContext) -> impl Element { match self { ListItem::Entry(entry) => div().child(entry.render(view, cx)), @@ -245,11 +245,11 @@ impl ListItem { } } -#[derive(Element, Clone)] -pub struct ListEntry { +#[derive(Element)] +pub struct ListEntry { disclosure_control_style: DisclosureControlVisibility, indent_level: u32, - label: Label, + label: Option>, left_content: Option, variant: ListItemVariant, size: ListEntrySize, @@ -257,12 +257,12 @@ pub struct ListEntry { toggle: Option, } -impl ListEntry { +impl ListEntry { pub fn new(label: Label) -> Self { Self { disclosure_control_style: DisclosureControlVisibility::default(), indent_level: 0, - label, + label: Some(label), variant: ListItemVariant::default(), left_content: None, size: ListEntrySize::default(), @@ -411,7 +411,7 @@ impl ListEntry { .relative() .children(self.disclosure_control(cx)) .children(left_content) - .child(self.label.clone()), + .children(self.label.take()), ) } } @@ -436,14 +436,14 @@ impl ListSeparator { } #[derive(Element)] -pub struct List { +pub struct List { items: Vec>, empty_message: SharedString, header: Option>, toggleable: Toggleable, } -impl List { +impl List { pub fn new(items: Vec>) -> Self { Self { items, @@ -475,7 +475,7 @@ impl List { let list_content = match (self.items.is_empty(), is_toggled) { (_, false) => div(), - (false, _) => div().children(self.items.iter().cloned()), + (false, _) => div().children(self.items.drain(..)), (true, _) => { div().child(Label::new(self.empty_message.clone()).color(LabelColor::Muted)) } @@ -485,7 +485,7 @@ impl List { .py_1() .children( self.header - .clone() + .take() .map(|header| header.set_toggleable(self.toggleable)), ) .child(list_content) diff --git a/crates/ui2/src/elements/label.rs b/crates/ui2/src/elements/label.rs index 4f0ba5994b9b453fd72ace1b937ff7331bd727ad..cee964df12a2a8c5a0172f223a3b0296c08ede4f 100644 --- a/crates/ui2/src/elements/label.rs +++ b/crates/ui2/src/elements/label.rs @@ -48,8 +48,8 @@ pub enum LineHeightStyle { UILabel, } -#[derive(Element, Clone)] -pub struct Label { +#[derive(Element)] +pub struct Label { state_type: PhantomData, label: SharedString, line_height_style: LineHeightStyle, @@ -57,7 +57,7 @@ pub struct Label { strikethrough: bool, } -impl Label { +impl Label { pub fn new(label: impl Into) -> Self { Self { state_type: PhantomData, From 3ac7ef90efed06929e1b87592f8d6d18d0ed7f32 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Thu, 19 Oct 2023 16:32:48 -0400 Subject: [PATCH 08/14] Remove `Clone` bound for `Input` --- crates/ui2/src/elements/input.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/crates/ui2/src/elements/input.rs b/crates/ui2/src/elements/input.rs index 19c51c1ec0b513e84a447825a30cc131dbf77df7..33647e234f71ba2e4f32e41919032b69fbe4c3fd 100644 --- a/crates/ui2/src/elements/input.rs +++ b/crates/ui2/src/elements/input.rs @@ -12,7 +12,7 @@ pub enum InputVariant { } #[derive(Element)] -pub struct Input { +pub struct Input { state_type: PhantomData, placeholder: SharedString, value: String, @@ -22,7 +22,7 @@ pub struct Input { is_active: bool, } -impl Input { +impl Input { pub fn new(placeholder: impl Into) -> Self { Self { state_type: PhantomData, From fa3916d1bf8b3603fde75779d07cdd33977f5a16 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Thu, 19 Oct 2023 16:34:08 -0400 Subject: [PATCH 09/14] Remove `Clone` bound for `HighlightedLabel` --- crates/ui2/src/elements/input.rs | 4 ++-- crates/ui2/src/elements/label.rs | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/crates/ui2/src/elements/input.rs b/crates/ui2/src/elements/input.rs index 33647e234f71ba2e4f32e41919032b69fbe4c3fd..dc2a8b8d6346623cc295e1c8004c5a76ade0a066 100644 --- a/crates/ui2/src/elements/input.rs +++ b/crates/ui2/src/elements/input.rs @@ -122,11 +122,11 @@ mod stories { use super::*; #[derive(Element)] - pub struct InputStory { + pub struct InputStory { state_type: PhantomData, } - impl InputStory { + impl InputStory { pub fn new() -> Self { Self { state_type: PhantomData, diff --git a/crates/ui2/src/elements/label.rs b/crates/ui2/src/elements/label.rs index cee964df12a2a8c5a0172f223a3b0296c08ede4f..5278404d2bf3989ade60d9b0e3b543b5b6efd756 100644 --- a/crates/ui2/src/elements/label.rs +++ b/crates/ui2/src/elements/label.rs @@ -107,8 +107,8 @@ impl Label { } } -#[derive(Element, Clone)] -pub struct HighlightedLabel { +#[derive(Element)] +pub struct HighlightedLabel { state_type: PhantomData, label: SharedString, color: LabelColor, @@ -116,7 +116,7 @@ pub struct HighlightedLabel { strikethrough: bool, } -impl HighlightedLabel { +impl HighlightedLabel { pub fn new(label: impl Into, highlight_indices: Vec) -> Self { Self { state_type: PhantomData, @@ -214,11 +214,11 @@ mod stories { use super::*; #[derive(Element)] - pub struct LabelStory { + pub struct LabelStory { state_type: PhantomData, } - impl LabelStory { + impl LabelStory { pub fn new() -> Self { Self { state_type: PhantomData, From a1aba3220971f5f10ee8cd46f458d7097b6bb45c Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Thu, 19 Oct 2023 16:35:44 -0400 Subject: [PATCH 10/14] Remove `Clone` bound from `Button` and `Details` --- crates/ui2/src/elements/button.rs | 4 ++-- crates/ui2/src/elements/details.rs | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/crates/ui2/src/elements/button.rs b/crates/ui2/src/elements/button.rs index 7d7040e18154ad7f185140430bc8ab63dfead727..b0fe2d71d7c5e8ccf9a9bf31e6cc27566112b8de 100644 --- a/crates/ui2/src/elements/button.rs +++ b/crates/ui2/src/elements/button.rs @@ -34,7 +34,7 @@ impl Default for ButtonHandlers { } #[derive(Element)] -pub struct Button { +pub struct Button { state_type: PhantomData, label: SharedString, variant: ButtonVariant, @@ -45,7 +45,7 @@ pub struct Button { handlers: ButtonHandlers, } -impl Button { +impl Button { pub fn new(label: impl Into) -> Self { Self { state_type: PhantomData, diff --git a/crates/ui2/src/elements/details.rs b/crates/ui2/src/elements/details.rs index 1467376c00ce9fde8cb8968e91e62ca4762ee545..30aa696c3baab413289498f746be3527e67eef34 100644 --- a/crates/ui2/src/elements/details.rs +++ b/crates/ui2/src/elements/details.rs @@ -2,14 +2,14 @@ use std::marker::PhantomData; use crate::prelude::*; -#[derive(Element, Clone)] -pub struct Details { +#[derive(Element)] +pub struct Details { state_type: PhantomData, text: &'static str, meta: Option<&'static str>, } -impl Details { +impl Details { pub fn new(text: &'static str) -> Self { Self { state_type: PhantomData, From e1e8b63eb5355b1ca7be2b4c878c08eb62a0083b Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Thu, 19 Oct 2023 16:37:15 -0400 Subject: [PATCH 11/14] Remove `Clone` bound from `IconElement` --- crates/ui2/src/components/tab.rs | 6 +++--- crates/ui2/src/elements/icon.rs | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/crates/ui2/src/components/tab.rs b/crates/ui2/src/components/tab.rs index 36adb6017858948cc3b59ba240f4577a3384006f..6eebaa1e0b41926ff3c83d1de1b09de3afb99bab 100644 --- a/crates/ui2/src/components/tab.rs +++ b/crates/ui2/src/components/tab.rs @@ -94,7 +94,7 @@ impl Tab { (GitStatus::Conflict, false) => Label::new(self.title.clone()), }; - let close_icon = IconElement::new(Icon::Close).color(IconColor::Muted); + let close_icon = || IconElement::new(Icon::Close).color(IconColor::Muted); let (tab_bg, tab_hover_bg, tab_active_bg) = match self.current { true => ( @@ -131,13 +131,13 @@ impl Tab { })) .children(self.icon.map(IconElement::new)) .children(if self.close_side == IconSide::Left { - Some(close_icon.clone()) + Some(close_icon()) } else { None }) .child(label) .children(if self.close_side == IconSide::Right { - Some(close_icon) + Some(close_icon()) } else { None }), diff --git a/crates/ui2/src/elements/icon.rs b/crates/ui2/src/elements/icon.rs index a5b6adff489c658f30771418920a940ca4196e88..662aefe12fa2f51214c82f5f3266ab770fc0cb4a 100644 --- a/crates/ui2/src/elements/icon.rs +++ b/crates/ui2/src/elements/icon.rs @@ -148,7 +148,7 @@ impl Icon { } } -#[derive(Element, Clone)] +#[derive(Element)] pub struct IconElement { state_type: PhantomData, icon: Icon, From 52f2521f6a72b6b3e7f382099768d895378fc89f Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Thu, 19 Oct 2023 16:37:54 -0400 Subject: [PATCH 12/14] Wire up active style for `Tab` --- crates/ui2/src/components/tab.rs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/crates/ui2/src/components/tab.rs b/crates/ui2/src/components/tab.rs index 6eebaa1e0b41926ff3c83d1de1b09de3afb99bab..e9d03e9caeea07f31f5565f01f350fb787b8cbd9 100644 --- a/crates/ui2/src/components/tab.rs +++ b/crates/ui2/src/components/tab.rs @@ -110,6 +110,7 @@ impl Tab { }; div() + .id("tab") .px_2() .py_0p5() .flex() @@ -117,7 +118,7 @@ impl Tab { .justify_center() .bg(tab_bg) .hover(|h| h.bg(tab_hover_bg)) - // .active(|a| a.bg(tab_active_bg)) + .active(|a| a.bg(tab_active_bg)) .child( div() .px_1() From 28b29d09856f583db85502717f1d13c4f5a2e829 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Thu, 19 Oct 2023 16:42:21 -0400 Subject: [PATCH 13/14] Give each `Tab` its own ID --- crates/ui2/src/components/tab.rs | 35 ++++++++++++++++++-------- crates/ui2/src/components/tab_bar.rs | 18 +++++++------- crates/ui2/src/components/terminal.rs | 4 +-- crates/ui2/src/static_data.rs | 36 ++++++++++++++------------- 4 files changed, 54 insertions(+), 39 deletions(-) diff --git a/crates/ui2/src/components/tab.rs b/crates/ui2/src/components/tab.rs index e9d03e9caeea07f31f5565f01f350fb787b8cbd9..1128ac368cd9b19ab12c5c4aeff28078189fe1e5 100644 --- a/crates/ui2/src/components/tab.rs +++ b/crates/ui2/src/components/tab.rs @@ -6,6 +6,7 @@ use crate::{Icon, IconColor, IconElement, Label, LabelColor}; #[derive(Element, Clone)] pub struct Tab { state_type: PhantomData, + id: ElementId, title: String, icon: Option, current: bool, @@ -17,9 +18,10 @@ pub struct Tab { } impl Tab { - pub fn new() -> Self { + pub fn new(id: impl Into) -> Self { Self { state_type: PhantomData, + id: id.into(), title: "untitled".to_string(), icon: None, current: false, @@ -110,7 +112,7 @@ impl Tab { }; div() - .id("tab") + .id(self.id.clone()) .px_2() .py_0p5() .flex() @@ -146,6 +148,7 @@ impl Tab { } } +use gpui3::ElementId; #[cfg(feature = "stories")] pub use stories::*; @@ -184,7 +187,7 @@ mod stories { v_stack() .gap_2() .child(Story::label(cx, "Default")) - .child(Tab::new()), + .child(Tab::new("default")), ), ) .child( @@ -192,8 +195,16 @@ mod stories { v_stack().gap_2().child(Story::label(cx, "Current")).child( h_stack() .gap_4() - .child(Tab::new().title("Current".to_string()).current(true)) - .child(Tab::new().title("Not Current".to_string()).current(false)), + .child( + Tab::new("current") + .title("Current".to_string()) + .current(true), + ) + .child( + Tab::new("not_current") + .title("Not Current".to_string()) + .current(false), + ), ), ), ) @@ -202,7 +213,7 @@ mod stories { v_stack() .gap_2() .child(Story::label(cx, "Titled")) - .child(Tab::new().title("label".to_string())), + .child(Tab::new("titled").title("label".to_string())), ), ) .child( @@ -211,7 +222,7 @@ mod stories { .gap_2() .child(Story::label(cx, "With Icon")) .child( - Tab::new() + Tab::new("with_icon") .title("label".to_string()) .icon(Some(Icon::Envelope)), ), @@ -226,11 +237,11 @@ mod stories { h_stack() .gap_4() .child( - Tab::new() + Tab::new("left") .title("Left".to_string()) .close_side(IconSide::Left), ) - .child(Tab::new().title("Right".to_string())), + .child(Tab::new("right").title("Right".to_string())), ), ), ) @@ -239,7 +250,7 @@ mod stories { .gap_2() .child(Story::label(cx, "Git Status")) .child(h_stack().gap_4().children(git_statuses.map(|git_status| { - Tab::new() + Tab::new("git_status") .title(git_status.to_string()) .git_status(git_status) }))), @@ -249,7 +260,9 @@ mod stories { .gap_2() .child(Story::label(cx, "File System Status")) .child(h_stack().gap_4().children(fs_statuses.map(|fs_status| { - Tab::new().title(fs_status.to_string()).fs_status(fs_status) + Tab::new("file_system_status") + .title(fs_status.to_string()) + .fs_status(fs_status) }))), ) } diff --git a/crates/ui2/src/components/tab_bar.rs b/crates/ui2/src/components/tab_bar.rs index 216c7b53fa4fa8d48716589f794e9909b4ea22ca..a1f25264fbd951be08afd84f3a78070f12afa081 100644 --- a/crates/ui2/src/components/tab_bar.rs +++ b/crates/ui2/src/components/tab_bar.rs @@ -122,33 +122,33 @@ mod stories { .child(Story::title_for::<_, TabBar>(cx)) .child(Story::label(cx, "Default")) .child(TabBar::new(vec![ - Tab::new() + Tab::new(1) .title("Cargo.toml".to_string()) .current(false) .git_status(GitStatus::Modified), - Tab::new() + Tab::new(2) .title("Channels Panel".to_string()) .current(false), - Tab::new() + Tab::new(3) .title("channels_panel.rs".to_string()) .current(true) .git_status(GitStatus::Modified), - Tab::new() + Tab::new(4) .title("workspace.rs".to_string()) .current(false) .git_status(GitStatus::Modified), - Tab::new() + Tab::new(5) .title("icon_button.rs".to_string()) .current(false), - Tab::new() + Tab::new(6) .title("storybook.rs".to_string()) .current(false) .git_status(GitStatus::Created), - Tab::new().title("theme.rs".to_string()).current(false), - Tab::new() + Tab::new(7).title("theme.rs".to_string()).current(false), + Tab::new(8) .title("theme_registry.rs".to_string()) .current(false), - Tab::new() + Tab::new(9) .title("styleable_helpers.rs".to_string()) .current(false), ])) diff --git a/crates/ui2/src/components/terminal.rs b/crates/ui2/src/components/terminal.rs index a2703bfd673ff7e01698c902d378037c45d598b0..4b71c2ea886bd67952e940fdea00aeff47436888 100644 --- a/crates/ui2/src/components/terminal.rs +++ b/crates/ui2/src/components/terminal.rs @@ -54,14 +54,14 @@ impl Terminal { div() .flex() .child( - Tab::new() + Tab::new(1) .title("zed — fish".to_string()) .icon(Icon::Terminal) .close_side(IconSide::Right) .current(true), ) .child( - Tab::new() + Tab::new(2) .title("zed — fish".to_string()) .icon(Icon::Terminal) .close_side(IconSide::Right) diff --git a/crates/ui2/src/static_data.rs b/crates/ui2/src/static_data.rs index f83cc4a9795ecfe89dbde8c28077ebb9b0e93425..96d8357bc439406404ecd2f13f68b3d68f06a4ed 100644 --- a/crates/ui2/src/static_data.rs +++ b/crates/ui2/src/static_data.rs @@ -14,48 +14,48 @@ use crate::{ pub fn static_tabs_example() -> Vec> { vec![ - Tab::new() + Tab::new("wip.rs") .title("wip.rs".to_string()) .icon(Icon::FileRust) .current(false) .fs_status(FileSystemStatus::Deleted), - Tab::new() + Tab::new("Cargo.toml") .title("Cargo.toml".to_string()) .icon(Icon::FileToml) .current(false) .git_status(GitStatus::Modified), - Tab::new() + Tab::new("Channels Panel") .title("Channels Panel".to_string()) .icon(Icon::Hash) .current(false), - Tab::new() + Tab::new("channels_panel.rs") .title("channels_panel.rs".to_string()) .icon(Icon::FileRust) .current(true) .git_status(GitStatus::Modified), - Tab::new() + Tab::new("workspace.rs") .title("workspace.rs".to_string()) .current(false) .icon(Icon::FileRust) .git_status(GitStatus::Modified), - Tab::new() + Tab::new("icon_button.rs") .title("icon_button.rs".to_string()) .icon(Icon::FileRust) .current(false), - Tab::new() + Tab::new("storybook.rs") .title("storybook.rs".to_string()) .icon(Icon::FileRust) .current(false) .git_status(GitStatus::Created), - Tab::new() + Tab::new("theme.rs") .title("theme.rs".to_string()) .icon(Icon::FileRust) .current(false), - Tab::new() + Tab::new("theme_registry.rs") .title("theme_registry.rs".to_string()) .icon(Icon::FileRust) .current(false), - Tab::new() + Tab::new("styleable_helpers.rs") .title("styleable_helpers.rs".to_string()) .icon(Icon::FileRust) .current(false), @@ -64,21 +64,21 @@ pub fn static_tabs_example() -> Vec> { pub fn static_tabs_1() -> Vec> { vec![ - Tab::new() + Tab::new("project_panel.rs") .title("project_panel.rs".to_string()) .icon(Icon::FileRust) .current(false) .fs_status(FileSystemStatus::Deleted), - Tab::new() + Tab::new("tab_bar.rs") .title("tab_bar.rs".to_string()) .icon(Icon::FileRust) .current(false) .git_status(GitStatus::Modified), - Tab::new() + Tab::new("workspace.rs") .title("workspace.rs".to_string()) .icon(Icon::FileRust) .current(false), - Tab::new() + Tab::new("tab.rs") .title("tab.rs".to_string()) .icon(Icon::FileRust) .current(true) @@ -88,12 +88,12 @@ pub fn static_tabs_1() -> Vec> { pub fn static_tabs_2() -> Vec> { vec![ - Tab::new() + Tab::new("tab_bar.rs") .title("tab_bar.rs".to_string()) .icon(Icon::FileRust) .current(false) .fs_status(FileSystemStatus::Deleted), - Tab::new() + Tab::new("static_data.rs") .title("static_data.rs".to_string()) .icon(Icon::FileRust) .current(true) @@ -102,7 +102,9 @@ pub fn static_tabs_2() -> Vec> { } pub fn static_tabs_3() -> Vec> { - vec![Tab::new().git_status(GitStatus::Created).current(true)] + vec![Tab::new("static_tabs_3") + .git_status(GitStatus::Created) + .current(true)] } pub fn static_players() -> Vec { From 94f0140f620ecb0ef816ffdf75392888cc7644b1 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Thu, 19 Oct 2023 16:50:33 -0400 Subject: [PATCH 14/14] Assign each `IconButton` an ID based on the icon --- crates/ui2/src/components/icon_button.rs | 4 ++-- crates/ui2/src/elements/icon.rs | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs index ce3c2a9421c60b558f16b8694b2cd9a0a5be40a8..af028c13dce48b6a623a7fb3a34b4298e9914bc9 100644 --- a/crates/ui2/src/components/icon_button.rs +++ b/crates/ui2/src/components/icon_button.rs @@ -88,8 +88,8 @@ impl IconButton { }; let mut button = h_stack() - // TODO: We need to pass the ID in so that `IconButton`s can be differentiated from one another. - .id("icon_button") + // TODO: We probably need a more robust method for differentiating `IconButton`s from one another. + .id(SharedString::from(format!("{:?}", self.icon))) .justify_center() .rounded_md() .py(ui_size(cx, 0.25)) diff --git a/crates/ui2/src/elements/icon.rs b/crates/ui2/src/elements/icon.rs index 662aefe12fa2f51214c82f5f3266ab770fc0cb4a..ce63d9e9d761268f920adc46cdc7e54bedcc260b 100644 --- a/crates/ui2/src/elements/icon.rs +++ b/crates/ui2/src/elements/icon.rs @@ -44,7 +44,7 @@ impl IconColor { } } -#[derive(Default, PartialEq, Copy, Clone, EnumIter)] +#[derive(Debug, Default, PartialEq, Copy, Clone, EnumIter)] pub enum Icon { Ai, ArrowLeft,