History

Update line heights, buttons to respond to UI scale

Nate Butler committed 3 years ago

Commit 7cb00ae1 parent 7b2782c6 files · +47 −13Browse files

Unified · Split

6 files
  1. crates/gpui3/src/styled.rs +12 −2
  2. crates/ui2/src/components/title_bar.rs +3 −2
  3. crates/ui2/src/elements/button.rs +4 −2
  4. crates/ui2/src/elements/icon.rs +8 −6
  5. crates/ui2/src/elements/label.rs +19 −1
  6. crates/ui2/src/settings.rs +1 −0
crates/gpui3/src/styled.rs+12−2
@@ -1,6 +1,6 @@
1use crate::{1use crate::{
2 self as gpui3, hsla, point, px, relative, rems, AlignItems, Display, Fill, FlexDirection, Hsla,2 self as gpui3, hsla, point, px, relative, rems, AlignItems, DefiniteLength, Display, Fill,
3 JustifyContent, Length, Position, Rems, SharedString, StyleRefinement,3 FlexDirection, Hsla, JustifyContent, Length, Position, Rems, SharedString, StyleRefinement,
4};4};
5use crate::{BoxShadow, TextStyleRefinement};5use crate::{BoxShadow, TextStyleRefinement};
6use smallvec::smallvec;6use smallvec::smallvec;
@@ -529,4 +529,14 @@ pub trait Styled { · 522 unmodified lines
529 .font_family = Some(family_name.into());529 .font_family = Some(family_name.into());
530 self530 self
531 }531 }
532
533 fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self
534 where
535 Self: Sized,
536 {
537 self.text_style()
538 .get_or_insert_with(Default::default)
539 .line_height = Some(line_height.into());
540 self
541 }
532}542}
crates/ui2/src/components/title_bar.rs+3−2
@@ -112,6 +112,7 @@ impl TitleBar { · 111 unmodified lines
112 .justify_between()112 .justify_between()
113 .w_full()113 .w_full()
114 .bg(color.background)114 .bg(color.background)
115 .py_1()
115 .child(116 .child(
116 div()117 div()
117 .flex()118 .flex()
@@ -132,7 +133,7 @@ impl TitleBar { · 14 unmodified lines
132 .child(Button::new("zed"))133 .child(Button::new("zed"))
133 .child(Button::new("nate/gpui2-ui-components")),134 .child(Button::new("nate/gpui2-ui-components")),
134 )135 )
135 .children(player_list.map(|p| PlayerStack::new(p)))136 // .children(player_list.map(|p| PlayerStack::new(p)))
136 .child(IconButton::new(Icon::Plus)),137 .child(IconButton::new(Icon::Plus)),
137 )138 )
138 .child(139 .child(
@@ -146,7 +147,7 @@ impl TitleBar { · 7 unmodified lines
146 .items_center()147 .items_center()
147 .gap_1()148 .gap_1()
148 .child(IconButton::new(Icon::FolderX))149 .child(IconButton::new(Icon::FolderX))
149 .child(IconButton::new(Icon::Close)),150 .child(IconButton::new(Icon::Exit)),
150 )151 )
151 .child(ToolDivider::new())152 .child(ToolDivider::new())
152 .child(153 .child(
crates/ui2/src/elements/button.rs+4−2
@@ -3,9 +3,9 @@ use std::sync::Arc; · 2 unmodified lines
3 3
4use gpui3::{DefiniteLength, Hsla, Interactive, MouseButton, WindowContext};4use gpui3::{DefiniteLength, Hsla, Interactive, MouseButton, WindowContext};
5 5
6use crate::prelude::*;
7use crate::settings::user_settings;6use crate::settings::user_settings;
8use crate::{h_stack, Icon, IconColor, IconElement, Label, LabelColor};7use crate::{h_stack, Icon, IconColor, IconElement, Label, LabelColor};
8use crate::{prelude::*, LineHeightStyle};
9 9
10#[derive(Default, PartialEq, Clone, Copy)]10#[derive(Default, PartialEq, Clone, Copy)]
11pub enum IconPosition {11pub enum IconPosition {
@@ -137,7 +137,9 @@ impl<S: 'static + Send + Sync + Clone> Button<S> { · 125 unmodified lines
137 }137 }
138 138
139 fn render_label(&self) -> Label<S> {139 fn render_label(&self) -> Label<S> {
140 Label::new(self.label.clone()).color(self.label_color())140 Label::new(self.label.clone())
141 .color(self.label_color())
142 .line_height_style(LineHeightStyle::UILabel)
141 }143 }
142 144
143 fn render_icon(&self, icon_color: IconColor) -> Option<IconElement<S>> {145 fn render_icon(&self, icon_color: IconColor) -> Option<IconElement<S>> {
crates/ui2/src/elements/icon.rs+8−6
@@ -11,7 +11,7 @@ use crate::theme::{theme, Theme}; · 10 unmodified lines
11pub enum IconSize {11pub enum IconSize {
12 Small,12 Small,
13 #[default]13 #[default]
14 Large,14 Medium,
15}15}
16 16
17#[derive(Default, PartialEq, Copy, Clone)]17#[derive(Default, PartialEq, Copy, Clone)]
@@ -58,6 +58,7 @@ pub enum Icon { · 40 unmodified lines
58 ChevronRight,58 ChevronRight,
59 ChevronUp,59 ChevronUp,
60 Close,60 Close,
61 Exit,
61 ExclamationTriangle,62 ExclamationTriangle,
62 File,63 File,
63 FileGeneric,64 FileGeneric,
@@ -109,6 +110,7 @@ impl Icon { · 45 unmodified lines
109 Icon::ChevronRight => "icons/chevron_right.svg",110 Icon::ChevronRight => "icons/chevron_right.svg",
110 Icon::ChevronUp => "icons/chevron_up.svg",111 Icon::ChevronUp => "icons/chevron_up.svg",
111 Icon::Close => "icons/x.svg",112 Icon::Close => "icons/x.svg",
113 Icon::Exit => "icons/exit.svg",
112 Icon::ExclamationTriangle => "icons/warning.svg",114 Icon::ExclamationTriangle => "icons/warning.svg",
113 Icon::File => "icons/file.svg",115 Icon::File => "icons/file.svg",
114 Icon::FileGeneric => "icons/file_icons/file.svg",116 Icon::FileGeneric => "icons/file_icons/file.svg",
@@ -177,13 +179,13 @@ impl<S: 'static + Send + Sync> IconElement<S> { · 62 unmodified lines
177 fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {179 fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
178 let theme = theme(cx);180 let theme = theme(cx);
179 let fill = self.color.color(theme);181 let fill = self.color.color(theme);
180 182 let svg_size = match self.size {
181 let sized_svg = match self.size {183 IconSize::Small => ui_size(12. / 14.),
182 IconSize::Small => svg().size_3p5(),184 IconSize::Medium => ui_size(15. / 14.),
183 IconSize::Large => svg().size_4(),
184 };185 };
185 186
186 sized_svg187 svg()
188 .size(svg_size)
187 .flex_none()189 .flex_none()
188 .path(self.icon.path())190 .path(self.icon.path())
189 .text_color(fill)191 .text_color(fill)
crates/ui2/src/elements/label.rs+19−1
@@ -1,6 +1,6 @@
1use std::marker::PhantomData;1use std::marker::PhantomData;
2 2
3use gpui3::{Hsla, WindowContext};3use gpui3::{relative, Hsla, WindowContext};
4use smallvec::SmallVec;4use smallvec::SmallVec;
5 5
6use crate::prelude::*;6use crate::prelude::*;
@@ -38,10 +38,19 @@ impl LabelColor { · 31 unmodified lines
38 }38 }
39}39}
40 40
41#[derive(Default, PartialEq, Copy, Clone)]
42pub enum LineHeightStyle {
43 #[default]
44 TextLabel,
45 /// Sets the line height to 1
46 UILabel,
47}
48
41#[derive(Element, Clone)]49#[derive(Element, Clone)]
42pub struct Label<S: 'static + Send + Sync + Clone> {50pub struct Label<S: 'static + Send + Sync + Clone> {
43 state_type: PhantomData<S>,51 state_type: PhantomData<S>,
44 label: SharedString,52 label: SharedString,
53 line_height_style: LineHeightStyle,
45 color: LabelColor,54 color: LabelColor,
46 strikethrough: bool,55 strikethrough: bool,
47}56}
@@ -51,6 +60,7 @@ impl<S: 'static + Send + Sync + Clone> Label<S> { · 3 unmodified lines
51 Self {60 Self {
52 state_type: PhantomData,61 state_type: PhantomData,
53 label: label.into(),62 label: label.into(),
63 line_height_style: LineHeightStyle::default(),
54 color: LabelColor::Default,64 color: LabelColor::Default,
55 strikethrough: false,65 strikethrough: false,
56 }66 }
@@ -61,6 +71,11 @@ impl<S: 'static + Send + Sync + Clone> Label<S> { · 4 unmodified lines
61 self71 self
62 }72 }
63 73
74 pub fn line_height_style(mut self, line_height_style: LineHeightStyle) -> Self {
75 self.line_height_style = line_height_style;
76 self
77 }
78
64 pub fn set_strikethrough(mut self, strikethrough: bool) -> Self {79 pub fn set_strikethrough(mut self, strikethrough: bool) -> Self {
65 self.strikethrough = strikethrough;80 self.strikethrough = strikethrough;
66 self81 self
@@ -82,6 +97,9 @@ impl<S: 'static + Send + Sync + Clone> Label<S> { · 15 unmodified lines
82 )97 )
83 })98 })
84 .text_size(ui_size(1.))99 .text_size(ui_size(1.))
100 .when(self.line_height_style == LineHeightStyle::UILabel, |this| {
101 this.line_height(relative(1.))
102 })
85 .text_color(self.color.hsla(cx))103 .text_color(self.color.hsla(cx))
86 .child(self.label.clone())104 .child(self.label.clone())
87 }105 }
crates/ui2/src/settings.rs+1−0
@@ -8,6 +8,7 @@ use crate::DisclosureControlStyle; · 7 unmodified lines
8pub fn user_settings() -> Settings {8pub fn user_settings() -> Settings {
9 let mut settings = Settings::default();9 let mut settings = Settings::default();
10 settings.list_indent_depth = SettingValue::UserDefined(rems(0.5).into());10 settings.list_indent_depth = SettingValue::UserDefined(rems(0.5).into());
11 // settings.ui_scale = SettingValue::UserDefined(2.);
11 settings12 settings
12}13}
13 14

Keyboard shortcuts

General

Show keyboard shortcuts
?
Focus the current search
/

Issues and pull requests

Open filters
f

Issues, pull requests and Inbox

Select next item
j↓
Select previous item
k↑
Open selected item
Enter
Dismiss filters or clear selection
Esc

Repository code

Go to file
t