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

crates/gpui3/src/styled.rs +12 −2
crates/ui2/src/components/title_bar.rs +3 −2
crates/ui2/src/elements/button.rs +4 −2
crates/ui2/src/elements/icon.rs +8 −6
crates/ui2/src/elements/label.rs +19 −1
crates/ui2/src/settings.rs +1 −0

@@ -1,6 +1,6 @@
1	1	use crate::{
2		− self as gpui3, hsla, point, px, relative, rems, AlignItems, Display, Fill, FlexDirection, Hsla,
3		− JustifyContent, Length, Position, Rems, SharedString, StyleRefinement,
	2	+ self as gpui3, hsla, point, px, relative, rems, AlignItems, DefiniteLength, Display, Fill,
	3	+ FlexDirection, Hsla, JustifyContent, Length, Position, Rems, SharedString, StyleRefinement,
4	4	};
5	5	use crate::{BoxShadow, TextStyleRefinement};
6	6	use smallvec::smallvec;
@@ -529,4 +529,14 @@ pub trait Styled { · 522 unmodified lines
529	529	.font_family = Some(family_name.into());
530	530	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	112	.justify_between()
113	113	.w_full()
114	114	.bg(color.background)
	115	+ .py_1()
115	116	.child(
116	117	div()
117	118	.flex()
@@ -132,7 +133,7 @@ impl TitleBar { · 14 unmodified lines
132	133	.child(Button::new("zed"))
133	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	137	.child(IconButton::new(Icon::Plus)),
137	138	)
138	139	.child(
@@ -146,7 +147,7 @@ impl TitleBar { · 7 unmodified lines
146	147	.items_center()
147	148	.gap_1()
148	149	.child(IconButton::new(Icon::FolderX))
149		− .child(IconButton::new(Icon::Close)),
	150	+ .child(IconButton::new(Icon::Exit)),
150	151	)
151	152	.child(ToolDivider::new())
152	153	.child(

crates/ui2/src/elements/button.rs+4−2

@@ -3,9 +3,9 @@ use std::sync::Arc; · 2 unmodified lines
3	3
4	4	use gpui3::{DefiniteLength, Hsla, Interactive, MouseButton, WindowContext};
5	5
6		−use crate::prelude::*;
7	6	use crate::settings::user_settings;
8	7	use crate::{h_stack, Icon, IconColor, IconElement, Label, LabelColor};
	8	+use crate::{prelude::*, LineHeightStyle};
9	9
10	10	#[derive(Default, PartialEq, Clone, Copy)]
11	11	pub enum IconPosition {
@@ -137,7 +137,9 @@ impl<S: 'static + Send + Sync + Clone> Button<S> { · 125 unmodified lines
137	137	}
138	138
139	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	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
11	11	pub enum IconSize {
12	12	Small,
13	13	#[default]
14		− Large,
	14	+ Medium,
15	15	}
16	16
17	17	#[derive(Default, PartialEq, Copy, Clone)]
@@ -58,6 +58,7 @@ pub enum Icon { · 40 unmodified lines
58	58	ChevronRight,
59	59	ChevronUp,
60	60	Close,
	61	+ Exit,
61	62	ExclamationTriangle,
62	63	File,
63	64	FileGeneric,
@@ -109,6 +110,7 @@ impl Icon { · 45 unmodified lines
109	110	Icon::ChevronRight => "icons/chevron_right.svg",
110	111	Icon::ChevronUp => "icons/chevron_up.svg",
111	112	Icon::Close => "icons/x.svg",
	113	+ Icon::Exit => "icons/exit.svg",
112	114	Icon::ExclamationTriangle => "icons/warning.svg",
113	115	Icon::File => "icons/file.svg",
114	116	Icon::FileGeneric => "icons/file_icons/file.svg",
@@ -177,13 +179,13 @@ impl<S: 'static + Send + Sync> IconElement<S> { · 62 unmodified lines
177	179	fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
178	180	let theme = theme(cx);
179	181	let fill = self.color.color(theme);
180		−
181		− let sized_svg = match self.size {
182		− IconSize::Small => svg().size_3p5(),
183		− IconSize::Large => svg().size_4(),
	182	+ let svg_size = match self.size {
	183	+ IconSize::Small => ui_size(12. / 14.),
	184	+ IconSize::Medium => ui_size(15. / 14.),
184	185	};
185	186
186		− sized_svg
	187	+ svg()
	188	+ .size(svg_size)
187	189	.flex_none()
188	190	.path(self.icon.path())
189	191	.text_color(fill)

crates/ui2/src/elements/label.rs+19−1

@@ -1,6 +1,6 @@
1	1	use std::marker::PhantomData;
2	2
3		−use gpui3::{Hsla, WindowContext};
	3	+use gpui3::{relative, Hsla, WindowContext};
4	4	use smallvec::SmallVec;
5	5
6	6	use crate::prelude::*;
@@ -38,10 +38,19 @@ impl LabelColor { · 31 unmodified lines
38	38	}
39	39	}
40	40
	41	+#[derive(Default, PartialEq, Copy, Clone)]
	42	+pub enum LineHeightStyle {
	43	+ #[default]
	44	+ TextLabel,
	45	+ /// Sets the line height to 1
	46	+ UILabel,
	47	+}
	48	+
41	49	#[derive(Element, Clone)]
42	50	pub struct Label<S: 'static + Send + Sync + Clone> {
43	51	state_type: PhantomData<S>,
44	52	label: SharedString,
	53	+ line_height_style: LineHeightStyle,
45	54	color: LabelColor,
46	55	strikethrough: bool,
47	56	}
@@ -51,6 +60,7 @@ impl<S: 'static + Send + Sync + Clone> Label<S> { · 3 unmodified lines
51	60	Self {
52	61	state_type: PhantomData,
53	62	label: label.into(),
	63	+ line_height_style: LineHeightStyle::default(),
54	64	color: LabelColor::Default,
55	65	strikethrough: false,
56	66	}
@@ -61,6 +71,11 @@ impl<S: 'static + Send + Sync + Clone> Label<S> { · 4 unmodified lines
61	71	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	79	pub fn set_strikethrough(mut self, strikethrough: bool) -> Self {
65	80	self.strikethrough = strikethrough;
66	81	self
@@ -82,6 +97,9 @@ impl<S: 'static + Send + Sync + Clone> Label<S> { · 15 unmodified lines
82	97	)
83	98	})
84	99	.text_size(ui_size(1.))
	100	+ .when(self.line_height_style == LineHeightStyle::UILabel, \|this\| {
	101	+ this.line_height(relative(1.))
	102	+ })
85	103	.text_color(self.color.hsla(cx))
86	104	.child(self.label.clone())
87	105	}

crates/ui2/src/settings.rs+1−0

@@ -8,6 +8,7 @@ use crate::DisclosureControlStyle; · 7 unmodified lines
8	8	pub fn user_settings() -> Settings {
9	9	let mut settings = Settings::default();
10	10	settings.list_indent_depth = SettingValue::UserDefined(rems(0.5).into());
	11	+ // settings.ui_scale = SettingValue::UserDefined(2.);
11	12	settings
12	13	}
13	14

Update line heights, buttons to respond to UI scale

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code