diff --git a/crates/ui2/src/components/avatar.rs b/crates/ui2/src/components/avatar.rs index 9c993dfc06..d083d8fd46 100644 --- a/crates/ui2/src/components/avatar.rs +++ b/crates/ui2/src/components/avatar.rs @@ -61,23 +61,6 @@ mod stories { .child(Avatar::new( "https://avatars.githubusercontent.com/u/326587?v=4", )) - // .child(Avatar::new( - // "https://avatars.githubusercontent.com/u/326587?v=4", - // )) - // .child(Avatar::new( - // "https://avatars.githubusercontent.com/u/482957?v=4", - // )) - // .child(Avatar::new( - // "https://avatars.githubusercontent.com/u/1714999?v=4", - // )) - // .child(Avatar::new( - // "https://avatars.githubusercontent.com/u/1486634?v=4", - // )) - .child(Story::label(cx, "Rounded rectangle")) - // .child( - // Avatar::new("https://avatars.githubusercontent.com/u/1714999?v=4") - // .shape(Shape::RoundedRectangle), - // ) } } } diff --git a/crates/ui2/src/components/button.rs b/crates/ui2/src/components/button.rs index 437daaa982..5787616832 100644 --- a/crates/ui2/src/components/button.rs +++ b/crates/ui2/src/components/button.rs @@ -1,9 +1,11 @@ use std::sync::Arc; -use gpui::{div, rems, DefiniteLength, Hsla, MouseButton, WindowContext}; +use gpui::{div, DefiniteLength, Hsla, MouseButton, WindowContext}; -use crate::{h_stack, Icon, IconColor, IconElement, Label, LabelColor, LineHeightStyle}; -use crate::{prelude::*, IconButton}; +use crate::{ + h_stack, prelude::*, Icon, IconButton, IconColor, IconElement, Label, LabelColor, + LineHeightStyle, +}; /// Provides the flexibility to use either a standard /// button or an icon button in a given context. @@ -167,10 +169,10 @@ impl Button { let icon_color = self.icon_color(); let mut button = h_stack() - .relative() .id(SharedString::from(format!("{}", self.label))) + .relative() .p_1() - .text_size(rems(1.)) + .text_ui() .rounded_md() .bg(self.variant.bg_color(cx)) .hover(|style| style.bg(self.variant.bg_color_hover(cx))) @@ -217,7 +219,7 @@ impl ButtonGroup { } fn render(self, _view: &mut V, cx: &mut ViewContext) -> impl Component { - let mut el = h_stack().text_size(rems(1.)); + let mut el = h_stack().text_ui(); for button in self.buttons { el = el.child(button.render(_view, cx)); diff --git a/crates/ui2/src/components/details.rs b/crates/ui2/src/components/details.rs index c7f6cc1839..f138290f17 100644 --- a/crates/ui2/src/components/details.rs +++ b/crates/ui2/src/components/details.rs @@ -31,7 +31,7 @@ impl Details { v_stack() .p_1() .gap_0p5() - .text_xs() + .text_ui_sm() .text_color(cx.theme().colors().text) .size_full() .child(self.text) diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs index cb4fb4d7f0..f0dc85b445 100644 --- a/crates/ui2/src/components/icon_button.rs +++ b/crates/ui2/src/components/icon_button.rs @@ -88,6 +88,7 @@ impl IconButton { .id(self.id.clone()) .justify_center() .rounded_md() + // todo!("Where do these numbers come from?") .py(rems(0.21875)) .px(rems(0.375)) .bg(bg_color) diff --git a/crates/ui2/src/components/input.rs b/crates/ui2/src/components/input.rs index e9f520346c..1a44827fe8 100644 --- a/crates/ui2/src/components/input.rs +++ b/crates/ui2/src/components/input.rs @@ -94,7 +94,7 @@ impl Input { .active(|style| style.bg(input_active_bg)) .flex() .items_center() - .child(div().flex().items_center().text_sm().map(|this| { + .child(div().flex().items_center().text_ui_sm().map(|this| { if self.value.is_empty() { this.child(placeholder_label) } else { diff --git a/crates/ui2/src/components/keybinding.rs b/crates/ui2/src/components/keybinding.rs index 22bbc747a2..bd02e694ed 100644 --- a/crates/ui2/src/components/keybinding.rs +++ b/crates/ui2/src/components/keybinding.rs @@ -64,7 +64,7 @@ impl Key { .px_2() .py_0() .rounded_md() - .text_sm() + .text_ui_sm() .text_color(cx.theme().colors().text) .bg(cx.theme().colors().element_background) .child(self.key.clone()) diff --git a/crates/ui2/src/components/label.rs b/crates/ui2/src/components/label.rs index dd078d2331..827ba87918 100644 --- a/crates/ui2/src/components/label.rs +++ b/crates/ui2/src/components/label.rs @@ -1,7 +1,9 @@ -use gpui::{relative, rems, Hsla, WindowContext}; +use gpui::{relative, Hsla, WindowContext}; use smallvec::SmallVec; use crate::prelude::*; +use crate::styled_ext::StyledExt; + #[derive(Default, PartialEq, Copy, Clone)] pub enum LabelColor { #[default] @@ -85,7 +87,7 @@ impl Label { .bg(LabelColor::Hidden.hsla(cx)), ) }) - .text_size(rems(1.)) + .text_ui() .when(self.line_height_style == LineHeightStyle::UILabel, |this| { this.line_height(relative(1.)) }) diff --git a/crates/ui2/src/components/stack.rs b/crates/ui2/src/components/stack.rs index d7bd0eb04f..d3d7a75aa7 100644 --- a/crates/ui2/src/components/stack.rs +++ b/crates/ui2/src/components/stack.rs @@ -1,31 +1,17 @@ use gpui::{div, Div}; -use crate::prelude::*; - -pub trait Stack: Styled + Sized { - /// Horizontally stacks elements. - fn h_stack(self) -> Self { - self.flex().flex_row().items_center() - } - - /// Vertically stacks elements. - fn v_stack(self) -> Self { - self.flex().flex_col() - } -} - -impl Stack for Div {} +use crate::StyledExt; /// Horizontally stacks elements. /// /// Sets `flex()`, `flex_row()`, `items_center()` pub fn h_stack() -> Div { - div().h_stack() + div().h_flex() } /// Vertically stacks elements. /// /// Sets `flex()`, `flex_col()` pub fn v_stack() -> Div { - div().v_stack() + div().v_flex() } diff --git a/crates/ui2/src/lib.rs b/crates/ui2/src/lib.rs index 5fb3998438..149dcd3fd0 100644 --- a/crates/ui2/src/lib.rs +++ b/crates/ui2/src/lib.rs @@ -19,12 +19,14 @@ mod elevation; pub mod prelude; pub mod settings; mod static_data; +mod styled_ext; mod to_extract; pub mod utils; pub use components::*; pub use prelude::*; pub use static_data::*; +pub use styled_ext::*; pub use to_extract::*; // This needs to be fully qualified with `crate::` otherwise we get a panic diff --git a/crates/ui2/src/prelude.rs b/crates/ui2/src/prelude.rs index 3f179210eb..545f437a9b 100644 --- a/crates/ui2/src/prelude.rs +++ b/crates/ui2/src/prelude.rs @@ -1,3 +1,5 @@ +use gpui::rems; +use gpui::Rems; pub use gpui::{ div, Component, Element, ElementId, ParentElement, SharedString, StatefulInteractive, StatelessInteractive, Styled, ViewContext, WindowContext, @@ -5,11 +7,38 @@ pub use gpui::{ pub use crate::elevation::*; pub use crate::ButtonVariant; +pub use crate::StyledExt; pub use theme2::ActiveTheme; use gpui::Hsla; use strum::EnumIter; +#[derive(Debug, Default, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, EnumIter)] +pub enum UITextSize { + /// The default size for UI text. + /// + /// `0.825rem` or `14px` at the default scale of `1rem` = `16px`. + /// + /// Note: The absolute size of this text will change based on a user's `ui_scale` setting. + #[default] + Default, + /// The small size for UI text. + /// + /// `0.75rem` or `12px` at the default scale of `1rem` = `16px`. + /// + /// Note: The absolute size of this text will change based on a user's `ui_scale` setting. + Small, +} + +impl UITextSize { + pub fn rems(self) -> Rems { + match self { + Self::Default => rems(0.875), + Self::Small => rems(0.75), + } + } +} + #[derive(Debug, Default, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, EnumIter)] pub enum FileSystemStatus { #[default] diff --git a/crates/ui2/src/styled_ext.rs b/crates/ui2/src/styled_ext.rs new file mode 100644 index 0000000000..543781ef52 --- /dev/null +++ b/crates/ui2/src/styled_ext.rs @@ -0,0 +1,74 @@ +use gpui::{Div, ElementFocus, ElementInteractivity, Styled}; + +use crate::UITextSize; + +/// Extends [`Styled`](gpui::Styled) with Zed specific styling methods. +pub trait StyledExt: Styled { + /// Horizontally stacks elements. + /// + /// Sets `flex()`, `flex_row()`, `items_center()` + fn h_flex(self) -> Self + where + Self: Sized, + { + self.flex().flex_row().items_center() + } + + /// Vertically stacks elements. + /// + /// Sets `flex()`, `flex_col()` + fn v_flex(self) -> Self + where + Self: Sized, + { + self.flex().flex_col() + } + + fn text_ui_size(self, size: UITextSize) -> Self + where + Self: Sized, + { + let size = size.rems(); + + self.text_size(size) + } + + /// The default size for UI text. + /// + /// `0.825rem` or `14px` at the default scale of `1rem` = `16px`. + /// + /// Note: The absolute size of this text will change based on a user's `ui_scale` setting. + /// + /// Use [`text_ui_sm`] for regular-sized text. + fn text_ui(self) -> Self + where + Self: Sized, + { + let size = UITextSize::default().rems(); + + self.text_size(size) + } + + /// The small size for UI text. + /// + /// `0.75rem` or `12px` at the default scale of `1rem` = `16px`. + /// + /// Note: The absolute size of this text will change based on a user's `ui_scale` setting. + /// + /// Use [`text_ui`] for regular-sized text. + fn text_ui_sm(self) -> Self + where + Self: Sized, + { + let size = UITextSize::Small.rems(); + + self.text_size(size) + } +} + +impl StyledExt for Div +where + I: ElementInteractivity, + F: ElementFocus, +{ +} diff --git a/crates/ui2/src/to_extract/breadcrumb.rs b/crates/ui2/src/to_extract/breadcrumb.rs index cd7df87646..782f772fa1 100644 --- a/crates/ui2/src/to_extract/breadcrumb.rs +++ b/crates/ui2/src/to_extract/breadcrumb.rs @@ -30,7 +30,7 @@ impl Breadcrumb { h_stack() .id("breadcrumb") .px_1() - .text_sm() + .text_ui_sm() .text_color(cx.theme().colors().text_muted) .rounded_md() .hover(|style| style.bg(cx.theme().colors().ghost_element_hover)) diff --git a/crates/ui2/src/to_extract/collab_panel.rs b/crates/ui2/src/to_extract/collab_panel.rs index 7b785ae9e1..d56166ad2e 100644 --- a/crates/ui2/src/to_extract/collab_panel.rs +++ b/crates/ui2/src/to_extract/collab_panel.rs @@ -77,7 +77,7 @@ impl CollabPanel { .items_center() .child( div() - .text_sm() + .text_ui_sm() .text_color(cx.theme().colors().text_placeholder) .child("Find..."), ), diff --git a/crates/workspace2/src/workspace2.rs b/crates/workspace2/src/workspace2.rs index b51b0186ef..bc2c649637 100644 --- a/crates/workspace2/src/workspace2.rs +++ b/crates/workspace2/src/workspace2.rs @@ -36,7 +36,7 @@ use futures::{ Future, FutureExt, StreamExt, }; use gpui::{ - div, point, size, AnyModel, AnyView, AnyWeakView, AppContext, AsyncAppContext, + div, point, rems, size, AnyModel, AnyView, AnyWeakView, AppContext, AsyncAppContext, AsyncWindowContext, Bounds, Component, Div, Entity, EntityId, EventEmitter, FocusHandle, GlobalPixels, Model, ModelContext, ParentElement, Point, Render, Size, StatefulInteractive, Styled, Subscription, Task, View, ViewContext, VisualContext, WeakView, WindowBounds, @@ -69,6 +69,7 @@ use std::{ }; use theme2::ActiveTheme; pub use toolbar::{ToolbarItemLocation, ToolbarItemView}; +use ui::{h_stack, Label}; use util::ResultExt; use uuid::Uuid; use workspace_settings::{AutosaveSetting, WorkspaceSettings}; @@ -2620,19 +2621,23 @@ impl Workspace { // } fn render_titlebar(&self, cx: &mut ViewContext) -> impl Component { - div() + h_stack() + .id("titlebar") + .justify_between() + .w_full() + .h(rems(1.75)) .bg(cx.theme().colors().title_bar_background) .when( !matches!(cx.window_bounds(), WindowBounds::Fullscreen), |s| s.pl_20(), ) - .id("titlebar") .on_click(|_, event, cx| { if event.up.click_count == 2 { cx.zoom_window(); } }) - .child("Collab title bar Item") // self.titlebar_item + .child(h_stack().child(Label::new("Left side titlebar item"))) // self.titlebar_item + .child(h_stack().child(Label::new("Right side titlebar item"))) } fn active_item_path_changed(&mut self, cx: &mut ViewContext) {