zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-09-16 17:07:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

Break typography styles out of StyledExt (#11013)

Browse Source 
- Centralizes typography-related UI styles and methods in
`styles/typography.rs`
- Breaks the typography-related styles out of `StyledExt`. This means we
add a `StyledTypography` trait – this should more or less be an
invisible change as we publish it in the prelude.
- adds the ability to easily grab the UI or Buffer font sizes
(`ui_font_size`, `buffer_font_size`) with `TextSize::UI`,
`TextSize::Editor`

Release Notes:

- N/A
This commit is contained in:
Nate Butler 2024-04-25 17:42:53 -04:00 committed by GitHub
parent 4c780568bc
commit 366d7e7728
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 100 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
crates/breadcrumbs/src/breadcrumbs.rs
View File

@ -33,7 +33,7 @@ impl EventEmitter<ToolbarItemEvent> for Breadcrumbs {}
impl Render for Breadcrumbs {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
const MAX_SEGMENTS: usize = 12;
let element = h_flex().text_ui();
let element = h_flex().text_ui(cx);
let Some(active_item) = self.active_item.as_ref() else {
return element;
};

12
crates/collab_ui/src/chat_panel.rs
View File

@ -315,7 +315,7 @@ impl ChatPanel {
None => {
return div().child(
h_flex()
.text_ui_xs()
.text_ui_xs(cx)
.my_0p5()
.px_0p5()
.gap_x_1()
@ -350,7 +350,7 @@ impl ChatPanel {
div().child(
h_flex()
.id(message_element_id)
.text_ui_xs()
.text_ui_xs(cx)
.my_0p5()
.px_0p5()
.gap_x_1()
@ -495,7 +495,7 @@ impl ChatPanel {
|this| {
this.child(
h_flex()
.text_ui_sm()
.text_ui_sm(cx)
.child(
div().absolute().child(
Avatar::new(message.sender.avatar_uri.clone())
@ -539,7 +539,7 @@ impl ChatPanel {
el.child(
v_flex()
.w_full()
.text_ui_sm()
.text_ui_sm(cx)
.id(element_id)
.child(text.element("body".into(), cx)),
)
@ -562,7 +562,7 @@ impl ChatPanel {
div()
.px_1()
.rounded_md()
.text_ui_xs()
.text_ui_xs(cx)
.bg(cx.theme().colors().background)
.child("New messages"),
)
@ -1003,7 +1003,7 @@ impl Render for ChatPanel {
el.child(
h_flex()
.px_2()
.text_ui_xs()
.text_ui_xs(cx)
.justify_between()
.border_t_1()
.border_color(cx.theme().colors().border)

4
crates/collab_ui/src/chat_panel/message_editor.rs
View File

@ -18,7 +18,7 @@ use project::{search::SearchQuery, Completion};
use settings::Settings;
use std::{ops::Range, sync::Arc, time::Duration};
use theme::ThemeSettings;
use ui::{prelude::*, UiTextSize};
use ui::{prelude::*, TextSize};
use crate::panel_settings::MessageEditorSettings;
@ -523,7 +523,7 @@ impl Render for MessageEditor {
},
font_family: settings.ui_font.family.clone(),
font_features: settings.ui_font.features,
font_size: UiTextSize::Small.rems().into(),
font_size: TextSize::Small.rems(cx).into(),
font_weight: FontWeight::NORMAL,
font_style: FontStyle::Normal,
line_height: relative(1.3),

2
crates/collab_ui/src/notifications/collab_notification.rs
View File

@ -34,7 +34,7 @@ impl ParentElement for CollabNotification {
impl RenderOnce for CollabNotification {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
h_flex()
.text_ui()
.text_ui(cx)
.justify_between()
.size_full()
.overflow_hidden()

2
crates/outline/src/outline.rs
View File

@ -306,7 +306,7 @@ impl PickerDelegate for OutlineViewDelegate {
.selected(selected)
.child(
div()
.text_ui()
.text_ui(cx)
.pl(rems(outline_item.depth as f32))
.child(styled_text),
),

2
crates/ui/src/components/keybinding.rs
View File

@ -160,7 +160,7 @@ impl RenderOnce for Key {
}
})
.h(rems_from_px(14.))
.text_ui()
.text_ui(cx)
.line_height(relative(1.))
.text_color(cx.theme().colors().text_muted)
.child(self.key.clone())

8
crates/ui/src/components/label/label_like.rs
View File

@ -108,10 +108,10 @@ impl RenderOnce for LabelLike {
)
})
.map(|this| match self.size {
LabelSize::Large => this.text_ui_lg(),
LabelSize::Default => this.text_ui(),
LabelSize::Small => this.text_ui_sm(),
LabelSize::XSmall => this.text_ui_xs(),
LabelSize::Large => this.text_ui_lg(cx),
LabelSize::Default => this.text_ui(cx),
LabelSize::Small => this.text_ui_sm(cx),
LabelSize::XSmall => this.text_ui_xs(cx),
})
.when(self.line_height_style == LineHeightStyle::UiLabel, |this| {
this.line_height(relative(1.))

2
crates/ui/src/components/tooltip.rs
View File

@ -96,7 +96,7 @@ pub fn tooltip_container<V>(
v_flex()
.elevation_2(cx)
.font_family(ui_font)
.text_ui()
.text_ui(cx)
.text_color(cx.theme().colors().text)
.py_1()
.px_2()

2
crates/ui/src/prelude.rs
View File

@ -11,7 +11,7 @@ pub use crate::clickable::*;
pub use crate::disableable::*;
pub use crate::fixed::*;
pub use crate::selectable::*;
pub use crate::styles::{rems_from_px, vh, vw, PlatformStyle};
pub use crate::styles::{rems_from_px, vh, vw, PlatformStyle, StyledTypography};
pub use crate::visible_on_hover::*;
pub use crate::{h_flex, v_flex};
pub use crate::{Button, ButtonSize, ButtonStyle, IconButton, SelectableButton};

64
crates/ui/src/styled_ext.rs
View File

@ -1,9 +1,7 @@
use gpui::{hsla, px, Styled, WindowContext};
use settings::Settings;
use theme::ThemeSettings;
use crate::prelude::*;
use crate::{ElevationIndex, UiTextSize};
use crate::ElevationIndex;
fn elevated<E: Styled>(this: E, cx: &mut WindowContext, index: ElevationIndex) -> E {
this.bg(cx.theme().colors().elevated_surface_background)
@ -29,66 +27,6 @@ pub trait StyledExt: Styled + Sized {
self.flex().flex_col()
}
/// Sets the text size using a [`UiTextSize`].
fn text_ui_size(self, size: UiTextSize) -> Self {
self.text_size(size.rems())
}
/// The large size for UI text.
///
/// `1rem` or `16px` 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_lg(self) -> Self {
self.text_size(UiTextSize::Large.rems())
}
/// 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 smaller text.
fn text_ui(self) -> Self {
self.text_size(UiTextSize::default().rems())
}
/// 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 {
self.text_size(UiTextSize::Small.rems())
}
/// The extra small size for UI text.
///
/// `0.625rem` or `10px` 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_xs(self) -> Self {
self.text_size(UiTextSize::XSmall.rems())
}
/// The font size for buffer text.
///
/// Retrieves the default font size, or the user's custom font size if set.
///
/// This should only be used for text that is displayed in a buffer,
/// or other places that text needs to match the user's buffer font size.
fn text_buffer(self, cx: &mut WindowContext) -> Self {
let settings = ThemeSettings::get_global(cx);
self.text_size(settings.buffer_font_size(cx))
}
/// The [`Surface`](ElevationIndex::Surface) elevation level, located above the app background, is the standard level for all elements
///
/// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`

84
crates/ui/src/styles/typography.rs
View File

@ -6,8 +6,73 @@ use theme::{ActiveTheme, ThemeSettings};
use crate::rems_from_px;
/// Extends [`gpui::Styled`] with typography-related styling methods.
pub trait StyledTypography: Styled + Sized {
/// Sets the text size using a [`UiTextSize`].
fn text_ui_size(self, size: TextSize, cx: &WindowContext) -> Self {
self.text_size(size.rems(cx))
}
/// The large size for UI text.
///
/// `1rem` or `16px` 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_lg(self, cx: &WindowContext) -> Self {
self.text_size(TextSize::Large.rems(cx))
}
/// 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 smaller text.
fn text_ui(self, cx: &WindowContext) -> Self {
self.text_size(TextSize::default().rems(cx))
}
/// 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, cx: &WindowContext) -> Self {
self.text_size(TextSize::Small.rems(cx))
}
/// The extra small size for UI text.
///
/// `0.625rem` or `10px` 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_xs(self, cx: &WindowContext) -> Self {
self.text_size(TextSize::XSmall.rems(cx))
}
/// The font size for buffer text.
///
/// Retrieves the default font size, or the user's custom font size if set.
///
/// This should only be used for text that is displayed in a buffer,
/// or other places that text needs to match the user's buffer font size.
fn text_buffer(self, cx: &mut WindowContext) -> Self {
let settings = ThemeSettings::get_global(cx);
self.text_size(settings.buffer_font_size(cx))
}
}
impl<E: Styled> StyledTypography for E {}
#[derive(Debug, Default, Clone)]
pub enum UiTextSize {
pub enum TextSize {
/// The default size for UI text.
///
/// `0.825rem` or `14px` at the default scale of `1rem` = `16px`.
@ -35,15 +100,28 @@ pub enum UiTextSize {
///
/// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
XSmall,
/// The `ui_font_size` set by the user.
UI,
/// The `buffer_font_size` set by the user.
Editor,
// TODO: The terminal settings will need to be passed to
// ThemeSettings before we can enable this.
//// The `terminal.font_size` set by the user.
// Terminal,
}
impl UiTextSize {
pub fn rems(self) -> Rems {
impl TextSize {
pub fn rems(self, cx: &WindowContext) -> Rems {
let theme_settings = ThemeSettings::get_global(cx);
match self {
Self::Large => rems_from_px(16.),
Self::Default => rems_from_px(14.),
Self::Small => rems_from_px(12.),
Self::XSmall => rems_from_px(10.),
Self::UI => rems_from_px(theme_settings.ui_font_size.into()),
Self::Editor => rems_from_px(theme_settings.buffer_font_size.into()),
}
}
}