From cb0880cf3c4528202881a0333c74d052bcd5cf05 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 6 Dec 2023 10:08:26 -0500 Subject: [PATCH 1/7] Add debugging colors to styled_ext --- crates/ui2/src/styled_ext.rs | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/crates/ui2/src/styled_ext.rs b/crates/ui2/src/styled_ext.rs index e567830d6c..63711cbaf9 100644 --- a/crates/ui2/src/styled_ext.rs +++ b/crates/ui2/src/styled_ext.rs @@ -1,4 +1,4 @@ -use gpui::{px, Styled, WindowContext}; +use gpui::{hsla, px, Styled, WindowContext}; use settings::Settings; use theme::ThemeSettings; @@ -104,6 +104,30 @@ pub trait StyledExt: Styled + Sized { fn elevation_3(self, cx: &mut WindowContext) -> Self { elevated(self, cx, ElevationIndex::ModalSurface) } + + fn debug_bg_red(self) -> Self { + self.bg(gpui::red()) + } + + fn debug_bg_green(self) -> Self { + self.bg(gpui::green()) + } + + fn debug_bg_blue(self) -> Self { + self.bg(gpui::blue()) + } + + fn debug_bg_yellow(self) -> Self { + self.bg(hsla(60. / 360., 1., 0.5, 1.)) + } + + fn debug_bg_cyan(self) -> Self { + self.bg(hsla(160. / 360., 1., 0.5, 1.)) + } + + fn debug_bg_magenta(self) -> Self { + self.bg(hsla(300. / 360., 1., 0.5, 1.)) + } } impl StyledExt for E {} From b5c790ed29949c11ce8029369fdc31729fec3f56 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 6 Dec 2023 11:01:22 -0500 Subject: [PATCH 2/7] WIP update picker style --- crates/file_finder2/src/file_finder.rs | 4 +++- crates/picker2/src/picker2.rs | 32 +++++++++++++++++--------- crates/ui2/src/styles/elevation.rs | 14 +++++++---- 3 files changed, 34 insertions(+), 16 deletions(-) diff --git a/crates/file_finder2/src/file_finder.rs b/crates/file_finder2/src/file_finder.rs index 9938b94edb..0a11b13fb9 100644 --- a/crates/file_finder2/src/file_finder.rs +++ b/crates/file_finder2/src/file_finder.rs @@ -720,7 +720,9 @@ impl PickerDelegate for FileFinderDelegate { ListItem::new(ix).inset(true).selected(selected).child( v_stack() .child(HighlightedLabel::new(file_name, file_name_positions)) - .child(HighlightedLabel::new(full_path, full_path_positions)), + .child( + HighlightedLabel::new(full_path, full_path_positions).color(Color::Muted), + ), ), ) } diff --git a/crates/picker2/src/picker2.rs b/crates/picker2/src/picker2.rs index 89513be8b3..54df321cb1 100644 --- a/crates/picker2/src/picker2.rs +++ b/crates/picker2/src/picker2.rs @@ -1,6 +1,6 @@ use editor::Editor; use gpui::{ - div, prelude::*, uniform_list, AnyElement, AppContext, Div, FocusHandle, FocusableView, + div, prelude::*, rems, uniform_list, AnyElement, AppContext, Div, FocusHandle, FocusableView, MouseButton, MouseDownEvent, Render, Task, UniformListScrollHandle, View, ViewContext, WindowContext, }; @@ -193,10 +193,27 @@ impl Render for Picker { type Element = Div; fn render(&mut self, cx: &mut ViewContext) -> Self::Element { + let picker_editor = h_stack() + .overflow_hidden() + .flex_none() + .h_9() + .px_3() + .child(self.editor.clone()); + + let empty_state = div().p_1().child( + h_stack() + // TODO: This number matches the height of the uniform list items. + // Align these two with a less magic number. + .h(rems(1.4375)) + .px_2() + .child(Label::new("No matches").color(Color::Muted)), + ); + div() .key_context("picker") .size_full() - .elevation_2(cx) + .overflow_hidden() + .elevation_3(cx) .on_action(cx.listener(Self::select_next)) .on_action(cx.listener(Self::select_prev)) .on_action(cx.listener(Self::select_first)) @@ -205,10 +222,7 @@ impl Render for Picker { .on_action(cx.listener(Self::confirm)) .on_action(cx.listener(Self::secondary_confirm)) .child( - v_stack() - .py_0p5() - .px_1() - .child(div().px_1().py_0p5().child(self.editor.clone())), + picker_editor ) .child(Divider::horizontal()) .when(self.delegate.match_count() > 0, |el| { @@ -256,11 +270,7 @@ impl Render for Picker { }) .when(self.delegate.match_count() == 0, |el| { el.child( - v_stack().p_1().grow().child( - div() - .px_1() - .child(Label::new("No matches").color(Color::Muted)), - ), + empty_state ) }) } diff --git a/crates/ui2/src/styles/elevation.rs b/crates/ui2/src/styles/elevation.rs index 198d41e6b8..88b2ff2e56 100644 --- a/crates/ui2/src/styles/elevation.rs +++ b/crates/ui2/src/styles/elevation.rs @@ -37,7 +37,7 @@ impl ElevationIndex { ElevationIndex::ElevatedSurface => smallvec![BoxShadow { color: hsla(0., 0., 0., 0.12), - offset: point(px(0.), px(1.)), + offset: point(px(0.), px(2.)), blur_radius: px(3.), spread_radius: px(0.), }], @@ -45,13 +45,19 @@ impl ElevationIndex { ElevationIndex::ModalSurface => smallvec![ BoxShadow { color: hsla(0., 0., 0., 0.12), - offset: point(px(0.), px(1.)), + offset: point(px(0.), px(2.)), blur_radius: px(3.), spread_radius: px(0.), }, BoxShadow { - color: hsla(0., 0., 0., 0.20), - offset: point(px(3.), px(1.)), + color: hsla(0., 0., 0., 0.08), + offset: point(px(0.), px(3.)), + blur_radius: px(6.), + spread_radius: px(0.), + }, + BoxShadow { + color: hsla(0., 0., 0., 0.04), + offset: point(px(0.), px(6.)), blur_radius: px(12.), spread_radius: px(0.), }, From cf971f706cbe139f599a31b272a7eaf41780e7bd Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 6 Dec 2023 11:07:46 -0500 Subject: [PATCH 3/7] Extend ui prelude --- crates/ui2/src/prelude.rs | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/crates/ui2/src/prelude.rs b/crates/ui2/src/prelude.rs index 38065b6275..0392fe80ee 100644 --- a/crates/ui2/src/prelude.rs +++ b/crates/ui2/src/prelude.rs @@ -1,7 +1,8 @@ pub use gpui::prelude::*; pub use gpui::{ - div, Element, ElementId, InteractiveElement, ParentElement, RenderOnce, SharedString, Styled, - ViewContext, WindowContext, + div, px, relative, rems, AbsoluteLength, DefiniteLength, Div, Element, ElementId, + InteractiveElement, ParentElement, Pixels, Rems, RenderOnce, SharedString, Styled, ViewContext, + WindowContext, }; pub use crate::clickable::*; @@ -9,5 +10,8 @@ pub use crate::disableable::*; pub use crate::fixed::*; pub use crate::selectable::*; pub use crate::{h_stack, v_stack}; +pub use crate::{Button, ButtonSize, ButtonStyle, IconButton}; pub use crate::{ButtonCommon, Color, StyledExt}; +pub use crate::{Icon, IconElement, IconSize}; +pub use crate::{Label, LabelSize, LineHeightStyle}; pub use theme::ActiveTheme; From 74e3b12a26193c8b5a84f9caa30a176a598009ef Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 6 Dec 2023 11:10:27 -0500 Subject: [PATCH 4/7] Update file finder style --- crates/file_finder2/src/file_finder.rs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/crates/file_finder2/src/file_finder.rs b/crates/file_finder2/src/file_finder.rs index 0a11b13fb9..63bf465a73 100644 --- a/crates/file_finder2/src/file_finder.rs +++ b/crates/file_finder2/src/file_finder.rs @@ -2,7 +2,7 @@ use collections::HashMap; use editor::{scroll::autoscroll::Autoscroll, Bias, Editor}; use fuzzy::{CharBag, PathMatch, PathMatchCandidate}; use gpui::{ - actions, AppContext, DismissEvent, Div, EventEmitter, FocusHandle, FocusableView, Model, + actions, rems, AppContext, DismissEvent, Div, EventEmitter, FocusHandle, FocusableView, Model, ParentElement, Render, Styled, Task, View, ViewContext, VisualContext, WeakView, }; use picker::{Picker, PickerDelegate}; @@ -15,7 +15,7 @@ use std::{ }, }; use text::Point; -use ui::{prelude::*, v_stack, HighlightedLabel, ListItem}; +use ui::{prelude::*, HighlightedLabel, ListItem}; use util::{paths::PathLikeWithPosition, post_inc, ResultExt}; use workspace::Workspace; @@ -119,7 +119,7 @@ impl Render for FileFinder { type Element = Div; fn render(&mut self, _cx: &mut ViewContext) -> Self::Element { - v_stack().w_96().child(self.picker.clone()) + v_stack().w(rems(34.)).child(self.picker.clone()) } } From fffe4f51fbd48cdff1b540a3e0fef6753994783f Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 6 Dec 2023 23:38:47 -0500 Subject: [PATCH 5/7] Update pickers to have a consistently larger size --- crates/collab_ui2/src/collab_panel/channel_modal.rs | 4 ++-- crates/collab_ui2/src/collab_panel/contact_finder.rs | 4 ++-- crates/command_palette2/src/command_palette.rs | 2 +- crates/language_selector2/src/language_selector.rs | 4 ++-- crates/outline2/src/outline.rs | 2 +- crates/recent_projects2/src/recent_projects.rs | 2 +- crates/theme_selector2/src/theme_selector.rs | 2 +- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/crates/collab_ui2/src/collab_panel/channel_modal.rs b/crates/collab_ui2/src/collab_panel/channel_modal.rs index fc1a4c5fb7..af6343b98a 100644 --- a/crates/collab_ui2/src/collab_panel/channel_modal.rs +++ b/crates/collab_ui2/src/collab_panel/channel_modal.rs @@ -11,7 +11,7 @@ use gpui::{ }; use picker::{Picker, PickerDelegate}; use std::sync::Arc; -use ui::v_stack; +use ui::prelude::*; use util::TryFutureExt; actions!( @@ -151,7 +151,7 @@ impl Render for ChannelModal { type Element = Div; fn render(&mut self, cx: &mut ViewContext) -> Self::Element { - v_stack().min_w_96().child(self.picker.clone()) + v_stack().w(rems(34.)).child(self.picker.clone()) // let theme = &theme::current(cx).collab_panel.tabbed_modal; // let mode = self.picker.read(cx).delegate().mode; diff --git a/crates/collab_ui2/src/collab_panel/contact_finder.rs b/crates/collab_ui2/src/collab_panel/contact_finder.rs index 717ab2d897..1623d10eab 100644 --- a/crates/collab_ui2/src/collab_panel/contact_finder.rs +++ b/crates/collab_ui2/src/collab_panel/contact_finder.rs @@ -7,7 +7,7 @@ use gpui::{ use picker::{Picker, PickerDelegate}; use std::sync::Arc; use theme::ActiveTheme as _; -use ui::{h_stack, v_stack, Label}; +use ui::prelude::*; use util::{ResultExt as _, TryFutureExt}; pub fn init(cx: &mut AppContext) { @@ -58,7 +58,7 @@ impl Render for ContactFinder { .bg(cx.theme().colors().element_background), ) .child(self.picker.clone()) - .w_96() + .w(rems(34.)) } // fn focus_in(&mut self, _: gpui::AnyViewHandle, cx: &mut ViewContext) { diff --git a/crates/command_palette2/src/command_palette.rs b/crates/command_palette2/src/command_palette.rs index bdd66fa569..57c1fa5614 100644 --- a/crates/command_palette2/src/command_palette.rs +++ b/crates/command_palette2/src/command_palette.rs @@ -84,7 +84,7 @@ impl Render for CommandPalette { type Element = Div; fn render(&mut self, _cx: &mut ViewContext) -> Self::Element { - v_stack().min_w_96().child(self.picker.clone()) + v_stack().w(rems(34.)).child(self.picker.clone()) } } diff --git a/crates/language_selector2/src/language_selector.rs b/crates/language_selector2/src/language_selector.rs index e3970401d4..5d6914d1e2 100644 --- a/crates/language_selector2/src/language_selector.rs +++ b/crates/language_selector2/src/language_selector.rs @@ -12,7 +12,7 @@ use language::{Buffer, LanguageRegistry}; use picker::{Picker, PickerDelegate}; use project::Project; use std::sync::Arc; -use ui::{v_stack, HighlightedLabel, ListItem, Selectable}; +use ui::{prelude::*, HighlightedLabel, ListItem}; use util::ResultExt; use workspace::Workspace; @@ -70,7 +70,7 @@ impl Render for LanguageSelector { type Element = Div; fn render(&mut self, _cx: &mut ViewContext) -> Self::Element { - v_stack().min_w_96().child(self.picker.clone()) + v_stack().w(rems(34.)).child(self.picker.clone()) } } diff --git a/crates/outline2/src/outline.rs b/crates/outline2/src/outline.rs index 8442d6480d..8674416899 100644 --- a/crates/outline2/src/outline.rs +++ b/crates/outline2/src/outline.rs @@ -60,7 +60,7 @@ impl Render for OutlineView { type Element = Div; fn render(&mut self, _cx: &mut ViewContext) -> Self::Element { - v_stack().min_w_96().child(self.picker.clone()) + v_stack().w(rems(34.)).child(self.picker.clone()) } } diff --git a/crates/recent_projects2/src/recent_projects.rs b/crates/recent_projects2/src/recent_projects.rs index f6c2e0a2a2..0c11f2b9c7 100644 --- a/crates/recent_projects2/src/recent_projects.rs +++ b/crates/recent_projects2/src/recent_projects.rs @@ -97,7 +97,7 @@ impl Render for RecentProjects { type Element = Div; fn render(&mut self, _cx: &mut ViewContext) -> Self::Element { - v_stack().w_96().child(self.picker.clone()) + v_stack().w(rems(34.)).child(self.picker.clone()) } } diff --git a/crates/theme_selector2/src/theme_selector.rs b/crates/theme_selector2/src/theme_selector.rs index 582ce43a88..cbde6bc7a6 100644 --- a/crates/theme_selector2/src/theme_selector.rs +++ b/crates/theme_selector2/src/theme_selector.rs @@ -68,7 +68,7 @@ impl Render for ThemeSelector { type Element = Div; fn render(&mut self, _cx: &mut ViewContext) -> Self::Element { - v_stack().min_w_96().child(self.picker.clone()) + v_stack().w(rems(34.)).child(self.picker.clone()) } } From da3ba35d1cf4f5ef101529214611b0c04b4696d9 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 7 Dec 2023 00:15:43 -0500 Subject: [PATCH 6/7] add `color_alpha` function --- crates/theme2/src/theme2.rs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/crates/theme2/src/theme2.rs b/crates/theme2/src/theme2.rs index c5c79237ba..ff80b9f5f9 100644 --- a/crates/theme2/src/theme2.rs +++ b/crates/theme2/src/theme2.rs @@ -150,3 +150,9 @@ pub struct DiagnosticStyle { pub hint: Hsla, pub ignored: Hsla, } + +pub fn color_alpha(color: Hsla, alpha: f32) -> Hsla { + let mut color = color; + color.a = alpha; + color +} From 84aaeb4360fb8403606cb17cfab0408e9d20c409 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 7 Dec 2023 00:16:24 -0500 Subject: [PATCH 7/7] Fix incorrect text style in outline palette, use background highlights for matches --- crates/outline2/src/outline.rs | 49 +++++++++++++++++++++++++--------- 1 file changed, 37 insertions(+), 12 deletions(-) diff --git a/crates/outline2/src/outline.rs b/crates/outline2/src/outline.rs index 8674416899..45e167411e 100644 --- a/crates/outline2/src/outline.rs +++ b/crates/outline2/src/outline.rs @@ -5,18 +5,20 @@ use editor::{ use fuzzy::StringMatch; use gpui::{ actions, div, rems, AppContext, DismissEvent, Div, EventEmitter, FocusHandle, FocusableView, - FontWeight, ParentElement, Point, Render, Styled, StyledText, Task, TextStyle, View, - ViewContext, VisualContext, WeakView, WindowContext, + FontStyle, FontWeight, HighlightStyle, ParentElement, Point, Render, Styled, StyledText, Task, + TextStyle, View, ViewContext, VisualContext, WeakView, WhiteSpace, WindowContext, }; use language::Outline; use ordered_float::OrderedFloat; use picker::{Picker, PickerDelegate}; +use settings::Settings; use std::{ cmp::{self, Reverse}, sync::Arc, }; -use theme::ActiveTheme; -use ui::{v_stack, ListItem, Selectable}; + +use theme::{color_alpha, ActiveTheme, ThemeSettings}; +use ui::{prelude::*, ListItem}; use util::ResultExt; use workspace::Workspace; @@ -253,24 +255,47 @@ impl PickerDelegate for OutlineViewDelegate { &self, ix: usize, selected: bool, - _: &mut ViewContext>, + cx: &mut ViewContext>, ) -> Option { + let settings = ThemeSettings::get_global(cx); + + // TODO: We probably shouldn't need to build a whole new text style here + // but I'm not sure how to get the current one and modify it. + // Before this change TextStyle::default() was used here, which was giving us the wrong font and text color. + let text_style = TextStyle { + color: cx.theme().colors().text, + font_family: settings.buffer_font.family.clone(), + font_features: settings.buffer_font.features, + font_size: settings.buffer_font_size(cx).into(), + font_weight: FontWeight::NORMAL, + font_style: FontStyle::Normal, + line_height: relative(1.).into(), + background_color: None, + underline: None, + white_space: WhiteSpace::Normal, + }; + + let mut highlight_style = HighlightStyle::default(); + highlight_style.background_color = Some(color_alpha(cx.theme().colors().text_accent, 0.3)); + let mat = &self.matches[ix]; let outline_item = &self.outline.items[mat.candidate_id]; let highlights = gpui::combine_highlights( - mat.ranges().map(|range| (range, FontWeight::BOLD.into())), + mat.ranges().map(|range| (range, highlight_style)), outline_item.highlight_ranges.iter().cloned(), ); - let styled_text = StyledText::new(outline_item.text.clone()) - .with_highlights(&TextStyle::default(), highlights); + let styled_text = + StyledText::new(outline_item.text.clone()).with_highlights(&text_style, highlights); Some( - ListItem::new(ix) - .inset(true) - .selected(selected) - .child(div().pl(rems(outline_item.depth as f32)).child(styled_text)), + ListItem::new(ix).inset(true).selected(selected).child( + div() + .text_ui() + .pl(rems(outline_item.depth as f32)) + .child(styled_text), + ), ) } }