From 6d6aa3b253971607e90f821ff60dc2737ea2764d Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 21 Nov 2023 10:43:18 -0500 Subject: [PATCH 1/7] Update default ui font settings --- assets/settings/default.json | 2 +- assets/settings/initial_user_settings.json | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/assets/settings/default.json b/assets/settings/default.json index bf2acc708e..221862ca98 100644 --- a/assets/settings/default.json +++ b/assets/settings/default.json @@ -43,7 +43,7 @@ "calt": false }, // The default font size for text in the UI - "ui_font_size": 14, + "ui_font_size": 16, // The factor to grow the active pane by. Defaults to 1.0 // which gives the same size as all other panes. "active_pane_magnification": 1.0, diff --git a/assets/settings/initial_user_settings.json b/assets/settings/initial_user_settings.json index dc79fd7911..75d4a02626 100644 --- a/assets/settings/initial_user_settings.json +++ b/assets/settings/initial_user_settings.json @@ -7,5 +7,6 @@ // custom settings, run the `open default settings` command // from the command palette or from `Zed` application menu. { - "buffer_font_size": 15 + "ui_font_size": 16, + "buffer_font_size": 16 } From bec61123fd1ee067a01b19e94c1088855f637036 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 21 Nov 2023 11:06:27 -0500 Subject: [PATCH 2/7] Update toolbar.rs --- crates/workspace2/src/toolbar.rs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/crates/workspace2/src/toolbar.rs b/crates/workspace2/src/toolbar.rs index f69f096a3f..99820581fb 100644 --- a/crates/workspace2/src/toolbar.rs +++ b/crates/workspace2/src/toolbar.rs @@ -83,7 +83,8 @@ impl Render for Toolbar { //dbg!(&self.items.len()); v_stack() .border_b() - .border_color(cx.theme().colors().border) + .border_color(cx.theme().colors().border_variant) + .bg(cx.theme().colors().toolbar_background) .child( h_stack() .justify_between() From f04deeb5f9efd673e0a78d7ddc61122b0eeb9cd1 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 21 Nov 2023 11:51:15 -0500 Subject: [PATCH 3/7] Document InteractionState --- crates/ui2/src/prelude.rs | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/crates/ui2/src/prelude.rs b/crates/ui2/src/prelude.rs index c3b52de84a..eaa12eb6c5 100644 --- a/crates/ui2/src/prelude.rs +++ b/crates/ui2/src/prelude.rs @@ -24,12 +24,22 @@ pub enum OverflowStyle { #[derive(Default, PartialEq, Copy, Clone, EnumIter, strum::Display)] pub enum InteractionState { + /// An element that is enabled and not hovered, active, focused, or disabled. + /// + /// This is often referred to as the "default" state. #[default] Enabled, + /// An element that is hovered. Hovered, + /// An element has an active mouse down or touch start event on it. Active, + /// An element that is focused using the keyboard. Focused, + /// An element that is disabled. Disabled, + /// A toggleable element that is selected, like the active button in a + /// button toggle group. + Selected, } impl InteractionState { From dac7912e873ff5f26289d47b1831855ed3580d3c Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 21 Nov 2023 12:10:06 -0500 Subject: [PATCH 4/7] Start on popover --- crates/ui2/src/components.rs | 2 ++ crates/ui2/src/components/popover.rs | 52 ++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+) create mode 100644 crates/ui2/src/components/popover.rs diff --git a/crates/ui2/src/components.rs b/crates/ui2/src/components.rs index 4d7e3c14b6..46d8a59804 100644 --- a/crates/ui2/src/components.rs +++ b/crates/ui2/src/components.rs @@ -10,6 +10,7 @@ mod input; mod keybinding; mod label; mod list; +mod popover; mod slot; mod stack; mod stories; @@ -28,6 +29,7 @@ pub use input::*; pub use keybinding::*; pub use label::*; pub use list::*; +pub use popover::*; pub use slot::*; pub use stack::*; pub use stories::*; diff --git a/crates/ui2/src/components/popover.rs b/crates/ui2/src/components/popover.rs new file mode 100644 index 0000000000..74478e4051 --- /dev/null +++ b/crates/ui2/src/components/popover.rs @@ -0,0 +1,52 @@ +use gpui::{ + AnyElement, Component, Div, ElementId, ParentElement, RenderOnce, Styled, WindowContext, +}; +use smallvec::SmallVec; + +use crate::{v_stack, StyledExt}; + +#[derive(RenderOnce)] +pub struct Popover { + children: SmallVec<[AnyElement; 2]>, + aside: Option>, +} + +impl Component for Popover { + type Rendered = Div; + + fn render(self, cx: &mut WindowContext) -> Self::Rendered { + v_stack() + .relative() + .elevation_2(cx) + .p_1() + .children(self.children) + .when_some(self.aside, |this, aside| { + // TODO: This will statically position the aside to the top right of the popover. + // We should update this to avoid collisions with the window edges. + this.child( + v_stack() + .top_0() + .neg_right_1() + .absolute() + .elevation_2(cx) + .p_1() + .children(aside), + ) + }) + } +} + +impl Popover { + pub fn new() -> Self { + Self { + children: SmallVec::new(), + aside: None, + } + } +} + +impl ParentElement for Popover { + fn children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> { + &mut self.children + } +} From 9f2e3bab9b0c8b5c60a6674ea06f2ab89763c374 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 21 Nov 2023 12:26:10 -0500 Subject: [PATCH 5/7] Allow popover to take an aside Co-Authored-By: Marshall Bowers <1486634+maxdeviant@users.noreply.github.com> --- crates/ui2/src/components/popover.rs | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/crates/ui2/src/components/popover.rs b/crates/ui2/src/components/popover.rs index 74478e4051..a919cc5417 100644 --- a/crates/ui2/src/components/popover.rs +++ b/crates/ui2/src/components/popover.rs @@ -1,5 +1,6 @@ use gpui::{ - AnyElement, Component, Div, ElementId, ParentElement, RenderOnce, Styled, WindowContext, + AnyElement, Component, Div, Element, ElementId, ParentElement, RenderOnce, Styled, + WindowContext, }; use smallvec::SmallVec; @@ -8,7 +9,7 @@ use crate::{v_stack, StyledExt}; #[derive(RenderOnce)] pub struct Popover { children: SmallVec<[AnyElement; 2]>, - aside: Option>, + aside: Option, } impl Component for Popover { @@ -30,7 +31,7 @@ impl Component for Popover { .absolute() .elevation_2(cx) .p_1() - .children(aside), + .child(aside), ) }) } @@ -43,6 +44,14 @@ impl Popover { aside: None, } } + + pub fn aside(mut self, aside: impl RenderOnce) -> Self + where + Self: Sized, + { + self.aside = Some(aside.render_once().into_any()); + self + } } impl ParentElement for Popover { From 9a145a4d866ad2641725d6e0298f1c6f68d48765 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 21 Nov 2023 12:40:48 -0500 Subject: [PATCH 6/7] Correctly position popover aside, add list item states Co-Authored-By: Marshall Bowers <1486634+maxdeviant@users.noreply.github.com> --- crates/ui2/src/components/list.rs | 3 ++- crates/ui2/src/components/popover.rs | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/crates/ui2/src/components/list.rs b/crates/ui2/src/components/list.rs index b054a568fc..0266ae3342 100644 --- a/crates/ui2/src/components/list.rs +++ b/crates/ui2/src/components/list.rs @@ -364,12 +364,13 @@ impl Component for ListItem { } } }) - .bg(cx.theme().colors().surface_background) // TODO: Add focus state // .when(self.state == InteractionState::Focused, |this| { // this.border() // .border_color(cx.theme().colors().border_focused) // }) + .hover(|style| style.bg(cx.theme().colors().ghost_element_hover)) + .active(|style| style.bg(cx.theme().colors().ghost_element_active)) .child( sized_item .when(self.variant == ListItemVariant::Inset, |this| this.px_2()) diff --git a/crates/ui2/src/components/popover.rs b/crates/ui2/src/components/popover.rs index a919cc5417..e2aec4810f 100644 --- a/crates/ui2/src/components/popover.rs +++ b/crates/ui2/src/components/popover.rs @@ -27,7 +27,8 @@ impl Component for Popover { this.child( v_stack() .top_0() - .neg_right_1() + .left_full() + .ml_1() .absolute() .elevation_2(cx) .p_1() From 40a49e689608c01e8d61a0e7bd56f73fc24bed5d Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 21 Nov 2023 12:43:56 -0500 Subject: [PATCH 7/7] Update popover doc Co-Authored-By: Marshall Bowers <1486634+maxdeviant@users.noreply.github.com> --- crates/ui2/src/components/popover.rs | 29 +++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/crates/ui2/src/components/popover.rs b/crates/ui2/src/components/popover.rs index e2aec4810f..fd001c32f4 100644 --- a/crates/ui2/src/components/popover.rs +++ b/crates/ui2/src/components/popover.rs @@ -6,6 +6,33 @@ use smallvec::SmallVec; use crate::{v_stack, StyledExt}; +/// A popover is used to display a menu or show some options. +/// +/// Clicking the element that launches the popover should not change the current view, +/// and the popover should be statically positioned relative to that element (not the +/// user's mouse.) +/// +/// Example: A "new" menu with options like "new file", "new folder", etc, +/// Linear's "Display" menu, a profile menu that appers when you click your avatar. +/// +/// Related elements: +/// +/// `ContextMenu`: +/// +/// Used to display a popover menu that only contains a list of items. Context menus are always +/// launched by secondary clicking on an element. The menu is positioned relative to the user's cursor. +/// +/// Example: Right clicking a file in the file tree to get a list of actions, right clicking +/// a tab to in the tab bar to get a list of actions. +/// +/// `Dropdown`: +/// +/// Used to display a list of options when the user clicks an element. The menu is +/// positioned relative the element that was clicked, and clicking an item in the +/// dropdown should change the value of the element that was clicked. +/// +/// Example: A theme select control. Displays "One Dark", clicking it opens a list of themes. +/// When one is selected, the theme select control displays the selected theme. #[derive(RenderOnce)] pub struct Popover { children: SmallVec<[AnyElement; 2]>, @@ -23,7 +50,7 @@ impl Component for Popover { .children(self.children) .when_some(self.aside, |this, aside| { // TODO: This will statically position the aside to the top right of the popover. - // We should update this to avoid collisions with the window edges. + // We should update this to use gpui2::overlay avoid collisions with the window edges. this.child( v_stack() .top_0()