From 0f33775a91a5733285ef1dd222200e6024f8caf7 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Tue, 2 Jan 2024 11:53:57 -0500 Subject: [PATCH] Add general-purpose functions for sizing in viewport units (#3833) This PR adds general-purpose functions for obtaining a `Length` in viewport units. Previously in #3600 we had added specific variants of `w` and `h` that took viewport units, but I think it makes more sense to just have a primitive that can compose with any styling method that accepts a `Length` or `Into`. Release Notes: - N/A --- crates/outline2/src/outline.rs | 6 +----- crates/storybook2/src/stories/viewport_units.rs | 8 ++++---- crates/ui2/src/prelude.rs | 1 + crates/ui2/src/styled_ext.rs | 14 -------------- crates/ui2/src/styles.rs | 2 ++ crates/ui2/src/styles/units.rs | 15 +++++++++++++++ 6 files changed, 23 insertions(+), 23 deletions(-) create mode 100644 crates/ui2/src/styles/units.rs diff --git a/crates/outline2/src/outline.rs b/crates/outline2/src/outline.rs index c5cfcfe66a..e33d22c9ed 100644 --- a/crates/outline2/src/outline.rs +++ b/crates/outline2/src/outline.rs @@ -79,12 +79,8 @@ impl OutlineView { editor: View, cx: &mut ViewContext, ) -> OutlineView { - const MAX_HEIGHT_IN_VH: f32 = 0.75; - let delegate = OutlineViewDelegate::new(cx.view().downgrade(), outline, editor, cx); - let picker = cx.new_view(|cx| { - Picker::new(delegate, cx).max_height(cx.viewport_size().height * MAX_HEIGHT_IN_VH) - }); + let picker = cx.new_view(|cx| Picker::new(delegate, cx).max_height(vh(0.75, cx))); OutlineView { picker } } } diff --git a/crates/storybook2/src/stories/viewport_units.rs b/crates/storybook2/src/stories/viewport_units.rs index 3114420085..edd0a73060 100644 --- a/crates/storybook2/src/stories/viewport_units.rs +++ b/crates/storybook2/src/stories/viewport_units.rs @@ -13,16 +13,16 @@ impl Render for ViewportUnitsStory { .flex_row() .child( div() - .w_vw(0.5, cx) - .h_vh(0.8, cx) + .w(vw(0.5, cx)) + .h(vh(0.8, cx)) .bg(gpui::red()) .text_color(gpui::white()) .child("50vw, 80vh"), ) .child( div() - .w_vw(0.25, cx) - .h_vh(0.33, cx) + .w(vw(0.25, cx)) + .h(vh(0.33, cx)) .bg(gpui::green()) .text_color(gpui::white()) .child("25vw, 33vh"), diff --git a/crates/ui2/src/prelude.rs b/crates/ui2/src/prelude.rs index a0a0adeb1d..dbf3c79b71 100644 --- a/crates/ui2/src/prelude.rs +++ b/crates/ui2/src/prelude.rs @@ -9,6 +9,7 @@ pub use crate::clickable::*; pub use crate::disableable::*; pub use crate::fixed::*; pub use crate::selectable::*; +pub use crate::styles::{vh, vw}; pub use crate::visible_on_hover::*; pub use crate::{h_stack, v_stack}; pub use crate::{Button, ButtonSize, ButtonStyle, IconButton}; diff --git a/crates/ui2/src/styled_ext.rs b/crates/ui2/src/styled_ext.rs index 7e761f8f2c..a673f9dfd6 100644 --- a/crates/ui2/src/styled_ext.rs +++ b/crates/ui2/src/styled_ext.rs @@ -16,20 +16,6 @@ fn elevated(this: E, cx: &mut WindowContext, index: ElevationIndex) - /// Extends [`Styled`](gpui::Styled) with Zed specific styling methods. pub trait StyledExt: Styled + Sized { - /// Sets the width of the element as a percentage of the viewport's width. - /// - /// `percent` should be a value between `0.0` and `1.0`. - fn w_vw(self, percent: f32, cx: &mut WindowContext) -> Self { - self.w(cx.viewport_size().width * percent) - } - - /// Sets the height of the element as a percentage of the viewport's height. - /// - /// `percent` should be a value between `0.0` and `1.0`. - fn h_vh(self, percent: f32, cx: &mut WindowContext) -> Self { - self.h(cx.viewport_size().height * percent) - } - /// Horizontally stacks elements. /// /// Sets `flex()`, `flex_row()`, `items_center()` diff --git a/crates/ui2/src/styles.rs b/crates/ui2/src/styles.rs index 6caddc2cdb..0b16cb95f3 100644 --- a/crates/ui2/src/styles.rs +++ b/crates/ui2/src/styles.rs @@ -1,7 +1,9 @@ mod color; mod elevation; mod typography; +mod units; pub use color::*; pub use elevation::*; pub use typography::*; +pub use units::*; diff --git a/crates/ui2/src/styles/units.rs b/crates/ui2/src/styles/units.rs new file mode 100644 index 0000000000..f7dfbb7231 --- /dev/null +++ b/crates/ui2/src/styles/units.rs @@ -0,0 +1,15 @@ +use gpui::{Length, WindowContext}; + +/// Returns a [`Length`] corresponding to the specified percentage of the viewport's width. +/// +/// `percent` should be a value between `0.0` and `1.0`. +pub fn vw(percent: f32, cx: &mut WindowContext) -> Length { + Length::from(cx.viewport_size().width * percent) +} + +/// Returns a [`Length`] corresponding to the specified percentage of the viewport's height. +/// +/// `percent` should be a value between `0.0` and `1.0`. +pub fn vh(percent: f32, cx: &mut WindowContext) -> Length { + Length::from(cx.viewport_size().height * percent) +}