Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update line heights, buttons to respond to UI scale

Browse source 
Co-Authored-By: Marshall Bowers <1486634+maxdeviant@users.noreply.github.com>
This commit is contained in:
Nate Butler 2023-10-18 17:55:17 -04:00
parent 7b2782c0f6
commit 7cb00aeb34
6 changed files with 47 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

14
crates/gpui3/src/styled.rs
View file

@ -1,6 +1,6 @@
use crate::{
self as gpui3, hsla, point, px, relative, rems, AlignItems, Display, Fill, FlexDirection, Hsla,
JustifyContent, Length, Position, Rems, SharedString, StyleRefinement,
self as gpui3, hsla, point, px, relative, rems, AlignItems, DefiniteLength, Display, Fill,
FlexDirection, Hsla, JustifyContent, Length, Position, Rems, SharedString, StyleRefinement,
};
use crate::{BoxShadow, TextStyleRefinement};
use smallvec::smallvec;
@ -529,4 +529,14 @@ pub trait Styled {
.font_family = Some(family_name.into());
self
}
fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self
where
Self: Sized,
{
self.text_style()
.get_or_insert_with(Default::default)
.line_height = Some(line_height.into());
self
}
}

5
crates/ui2/src/components/title_bar.rs
View file

@ -112,6 +112,7 @@ impl TitleBar {
.justify_between()
.w_full()
.bg(color.background)
.py_1()
.child(
div()
.flex()
@ -132,7 +133,7 @@ impl TitleBar {
.child(Button::new("zed"))
.child(Button::new("nate/gpui2-ui-components")),
)
.children(player_list.map(|p| PlayerStack::new(p)))
// .children(player_list.map(|p| PlayerStack::new(p)))
.child(IconButton::new(Icon::Plus)),
)
.child(
@ -146,7 +147,7 @@ impl TitleBar {
.items_center()
.gap_1()
.child(IconButton::new(Icon::FolderX))
.child(IconButton::new(Icon::Close)),
.child(IconButton::new(Icon::Exit)),
)
.child(ToolDivider::new())
.child(

6
crates/ui2/src/elements/button.rs
View file

@ -3,9 +3,9 @@ use std::sync::Arc;
use gpui3::{DefiniteLength, Hsla, Interactive, MouseButton, WindowContext};
use crate::prelude::*;
use crate::settings::user_settings;
use crate::{h_stack, Icon, IconColor, IconElement, Label, LabelColor};
use crate::{prelude::*, LineHeightStyle};
#[derive(Default, PartialEq, Clone, Copy)]
pub enum IconPosition {
@ -137,7 +137,9 @@ impl<S: 'static + Send + Sync + Clone> Button<S> {
}
fn render_label(&self) -> Label<S> {
Label::new(self.label.clone()).color(self.label_color())
Label::new(self.label.clone())
.color(self.label_color())
.line_height_style(LineHeightStyle::UILabel)
}
fn render_icon(&self, icon_color: IconColor) -> Option<IconElement<S>> {

14
crates/ui2/src/elements/icon.rs
View file

@ -11,7 +11,7 @@ use crate::theme::{theme, Theme};
pub enum IconSize {
Small,
#[default]
Large,
Medium,
}
#[derive(Default, PartialEq, Copy, Clone)]
@ -58,6 +58,7 @@ pub enum Icon {
ChevronRight,
ChevronUp,
Close,
Exit,
ExclamationTriangle,
File,
FileGeneric,
@ -109,6 +110,7 @@ impl Icon {
Icon::ChevronRight => "icons/chevron_right.svg",
Icon::ChevronUp => "icons/chevron_up.svg",
Icon::Close => "icons/x.svg",
Icon::Exit => "icons/exit.svg",
Icon::ExclamationTriangle => "icons/warning.svg",
Icon::File => "icons/file.svg",
Icon::FileGeneric => "icons/file_icons/file.svg",
@ -177,13 +179,13 @@ impl<S: 'static + Send + Sync> IconElement<S> {
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
let theme = theme(cx);
let fill = self.color.color(theme);
let sized_svg = match self.size {
IconSize::Small => svg().size_3p5(),
IconSize::Large => svg().size_4(),
let svg_size = match self.size {
IconSize::Small => ui_size(12. / 14.),
IconSize::Medium => ui_size(15. / 14.),
};
sized_svg
svg()
.size(svg_size)
.flex_none()
.path(self.icon.path())
.text_color(fill)

20
crates/ui2/src/elements/label.rs
View file

@ -1,6 +1,6 @@
use std::marker::PhantomData;
use gpui3::{Hsla, WindowContext};
use gpui3::{relative, Hsla, WindowContext};
use smallvec::SmallVec;
use crate::prelude::*;
@ -38,10 +38,19 @@ impl LabelColor {
}
}
#[derive(Default, PartialEq, Copy, Clone)]
pub enum LineHeightStyle {
#[default]
TextLabel,
/// Sets the line height to 1
UILabel,
}
#[derive(Element, Clone)]
pub struct Label<S: 'static + Send + Sync + Clone> {
state_type: PhantomData<S>,
label: SharedString,
line_height_style: LineHeightStyle,
color: LabelColor,
strikethrough: bool,
}
@ -51,6 +60,7 @@ impl<S: 'static + Send + Sync + Clone> Label<S> {
Self {
state_type: PhantomData,
label: label.into(),
line_height_style: LineHeightStyle::default(),
color: LabelColor::Default,
strikethrough: false,
}
@ -61,6 +71,11 @@ impl<S: 'static + Send + Sync + Clone> Label<S> {
self
}
pub fn line_height_style(mut self, line_height_style: LineHeightStyle) -> Self {
self.line_height_style = line_height_style;
self
}
pub fn set_strikethrough(mut self, strikethrough: bool) -> Self {
self.strikethrough = strikethrough;
self
@ -82,6 +97,9 @@ impl<S: 'static + Send + Sync + Clone> Label<S> {
)
})
.text_size(ui_size(1.))
.when(self.line_height_style == LineHeightStyle::UILabel, |this| {
this.line_height(relative(1.))
})
.text_color(self.color.hsla(cx))
.child(self.label.clone())
}

1
crates/ui2/src/settings.rs
View file

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