update
This commit is contained in:
@@ -7,7 +7,7 @@ use gpui::{
|
||||
Styled as _, Window, deferred, div, ease_out_quint, px,
|
||||
};
|
||||
use gpui_native_icons::{IconRole, icon};
|
||||
use gpui_native_theme::ActiveTheme as _;
|
||||
use gpui_native_theme::{ActiveTheme as _, Size};
|
||||
|
||||
use crate::common::DismissHandler;
|
||||
use crate::common::v_flex;
|
||||
@@ -128,8 +128,10 @@ impl RenderOnce for Alert {
|
||||
let surface = theme.colors.surface;
|
||||
let border = theme.colors.border;
|
||||
let shadows = theme.elevations.popover.shadows();
|
||||
let text_size = theme.sizes.small.text_size;
|
||||
let icon_size = theme.sizes.small.icon_size;
|
||||
let metrics = theme.sizes.resolve(Size::Medium);
|
||||
let icon_size = metrics.icon_size;
|
||||
let title_size = metrics.text_size;
|
||||
let caption_size = metrics.caption_size;
|
||||
|
||||
div()
|
||||
.w_full()
|
||||
@@ -160,7 +162,7 @@ impl RenderOnce for Alert {
|
||||
.when_some(self.title.clone(), |alert, title| {
|
||||
alert.child(
|
||||
div()
|
||||
.text_size(text_size)
|
||||
.text_size(title_size)
|
||||
.text_color(foreground)
|
||||
.when(self.message.is_some(), |title| {
|
||||
title.font_weight(gpui::FontWeight::SEMIBOLD)
|
||||
@@ -169,13 +171,17 @@ impl RenderOnce for Alert {
|
||||
)
|
||||
})
|
||||
.when_some(self.message.clone(), |alert, message| {
|
||||
// With no title, the message is the primary line.
|
||||
let color = if self.title.is_some() {
|
||||
muted_foreground
|
||||
} else {
|
||||
foreground
|
||||
};
|
||||
alert.child(div().text_size(text_size).text_color(color).child(message))
|
||||
alert.child(
|
||||
div()
|
||||
.text_size(caption_size)
|
||||
.text_color(color)
|
||||
.child(message),
|
||||
)
|
||||
}),
|
||||
)
|
||||
.when_some(self.on_dismiss, |alert, on_dismiss| {
|
||||
@@ -189,7 +195,7 @@ impl RenderOnce for Alert {
|
||||
.hover(|style| style.bg(muted))
|
||||
.child(
|
||||
icon(IconRole::Close)
|
||||
.size(theme.sizes.small.icon_size * 0.75)
|
||||
.size(theme.sizes.small.dense_icon_size)
|
||||
.color(foreground.alpha(0.55)),
|
||||
)
|
||||
.on_click(move |_, _window, cx| on_dismiss(cx)),
|
||||
|
||||
@@ -83,11 +83,9 @@ impl RenderOnce for Badge {
|
||||
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let metrics = theme.sizes.resolve(self.size);
|
||||
let label_size = metrics.caption_size;
|
||||
let (background, foreground) = self.variant.tokens(theme);
|
||||
|
||||
// Counts read smaller than control labels, like every native badge.
|
||||
let label_size = metrics.text_size * 0.8;
|
||||
|
||||
h_flex()
|
||||
.flex_none()
|
||||
.justify_center()
|
||||
@@ -95,8 +93,7 @@ impl RenderOnce for Badge {
|
||||
.bg(background)
|
||||
.text_color(foreground)
|
||||
.text_size(label_size)
|
||||
.line_height(label_size * 1.25)
|
||||
.px(metrics.padding_x * 0.5)
|
||||
.px(metrics.dense_padding_x)
|
||||
.py_0p5()
|
||||
.child(self.label)
|
||||
.refine_style(&self.style)
|
||||
|
||||
@@ -121,7 +121,7 @@ impl RenderOnce for Checkbox {
|
||||
h_flex()
|
||||
.justify_center()
|
||||
.flex_none()
|
||||
.size(metrics.icon_size)
|
||||
.size(metrics.indicator_size)
|
||||
.rounded(theme.radius.sm)
|
||||
.border_1()
|
||||
.when(self.checked, |indicator| {
|
||||
@@ -129,7 +129,11 @@ impl RenderOnce for Checkbox {
|
||||
.bg(ramps.primary.base)
|
||||
.border_color(ramps.primary.base)
|
||||
.hover(|style| style.bg(ramps.primary.hover))
|
||||
.child(icon(IconRole::Check).color(colors.primary_foreground))
|
||||
.child(
|
||||
icon(IconRole::Check)
|
||||
.size(metrics.dense_icon_size)
|
||||
.color(colors.primary_foreground),
|
||||
)
|
||||
})
|
||||
.when(!self.checked, |indicator| {
|
||||
indicator
|
||||
|
||||
@@ -1551,7 +1551,7 @@ impl RenderOnce for Input {
|
||||
.overflow_hidden()
|
||||
.w_full()
|
||||
.h(metrics.input_height)
|
||||
.px(metrics.padding_x / 2.0)
|
||||
.px(metrics.dense_padding_x)
|
||||
.rounded(radius.control)
|
||||
.border_1()
|
||||
.border_color(colors.border)
|
||||
|
||||
@@ -136,6 +136,7 @@ struct MenuChrome {
|
||||
radius_overlay: Pixels,
|
||||
radius_sm: Pixels,
|
||||
icon_size: Pixels,
|
||||
dense_icon_size: Pixels,
|
||||
shadow: Vec<BoxShadow>,
|
||||
}
|
||||
|
||||
@@ -234,6 +235,7 @@ impl RenderOnce for Menu {
|
||||
radius_overlay: theme.radius.overlay,
|
||||
radius_sm: theme.radius.sm,
|
||||
icon_size: theme.sizes.medium.icon_size,
|
||||
dense_icon_size: theme.sizes.medium.dense_icon_size,
|
||||
shadow: theme.elevations.popover.shadows(),
|
||||
},
|
||||
theme.motion.overlay,
|
||||
@@ -348,7 +350,7 @@ impl RenderOnce for Menu {
|
||||
.role(Role::Menu)
|
||||
.aria_label(label)
|
||||
.mt_1()
|
||||
.min_w_40()
|
||||
.min_w_56()
|
||||
.p_1()
|
||||
.bg(chrome.surface)
|
||||
.text_color(chrome.foreground)
|
||||
@@ -522,7 +524,7 @@ fn render_item(
|
||||
.when(checked == Some(true), |row| {
|
||||
row.child(
|
||||
icon_glyph(IconRole::Check)
|
||||
.size(chrome.icon_size * 0.75)
|
||||
.size(chrome.dense_icon_size)
|
||||
.color(label_color),
|
||||
)
|
||||
})
|
||||
|
||||
@@ -189,7 +189,7 @@ where
|
||||
h_flex()
|
||||
.justify_center()
|
||||
.flex_none()
|
||||
.size(metrics.icon_size)
|
||||
.size(metrics.indicator_size)
|
||||
.rounded(radius.full)
|
||||
.border_1()
|
||||
.when(is_selected, |indicator| {
|
||||
@@ -199,7 +199,7 @@ where
|
||||
.hover(|style| style.bg(ramps.primary.hover))
|
||||
.child(
|
||||
div()
|
||||
.size(metrics.icon_size / 2.0)
|
||||
.size(metrics.indicator_size / 2.0)
|
||||
.rounded(radius.full)
|
||||
.bg(colors.primary_foreground),
|
||||
)
|
||||
|
||||
@@ -5,7 +5,7 @@ use gpui::{
|
||||
AnimationExt as _, App, Bounds, ElementId, Entity, InteractiveElement as _, IntoElement,
|
||||
KeyDownEvent, ParentElement as _, Point, RenderOnce, Role, SharedString, SpringAnimation,
|
||||
SpringConfig, StatefulInteractiveElement as _, StyleRefinement, Styled as _, Toggled, Window,
|
||||
canvas, div, rems,
|
||||
canvas, div,
|
||||
};
|
||||
use gpui_native_icons::{IconRole, icon};
|
||||
use gpui_native_theme::{ActiveTheme as _, Size};
|
||||
@@ -152,29 +152,12 @@ where
|
||||
let ring = theme.colors.ring;
|
||||
let radius = theme.radius.full;
|
||||
let plate_shadow = theme.elevations.control.shadows();
|
||||
let icon_size = metrics.icon_size * 0.85;
|
||||
|
||||
let track_height = match self.size {
|
||||
Size::Small => metrics.control_height,
|
||||
Size::Medium => metrics.control_height * 1.15,
|
||||
Size::Large => metrics.control_height * 1.35,
|
||||
};
|
||||
|
||||
let track_inset = match self.size {
|
||||
Size::Small => rems(0.125),
|
||||
Size::Medium => rems(0.25),
|
||||
Size::Large => rems(0.375),
|
||||
};
|
||||
|
||||
let horizontal_padding = match self.size {
|
||||
Size::Small => metrics.padding_x * 0.5,
|
||||
Size::Medium | Size::Large => metrics.padding_x * 0.75,
|
||||
};
|
||||
|
||||
let text_size = match self.size {
|
||||
Size::Small => metrics.text_size * 0.85,
|
||||
Size::Medium | Size::Large => metrics.text_size,
|
||||
};
|
||||
let track_height = metrics.strip_height;
|
||||
let track_inset = metrics.plate_inset;
|
||||
let horizontal_padding = metrics.dense_padding_x;
|
||||
let text_size = metrics.caption_size;
|
||||
let icon_size = metrics.icon_size;
|
||||
|
||||
let selected_index = self
|
||||
.options
|
||||
|
||||
@@ -168,7 +168,7 @@ where
|
||||
let foreground = theme.colors.foreground;
|
||||
let muted_foreground = theme.colors.muted_foreground;
|
||||
let radius = theme.radius.control;
|
||||
let icon_size = metrics.icon_size * 0.75;
|
||||
let icon_size = metrics.dense_icon_size;
|
||||
|
||||
let label = self
|
||||
.a11y_label
|
||||
@@ -214,7 +214,7 @@ where
|
||||
.gap_2()
|
||||
.w_full()
|
||||
.h(metrics.input_height)
|
||||
.px(metrics.padding_x / 2.0)
|
||||
.px(metrics.dense_padding_x)
|
||||
.rounded(radius)
|
||||
.border_1()
|
||||
.border_color(if is_open { ring } else { border })
|
||||
|
||||
@@ -96,11 +96,11 @@ impl RenderOnce for Switch {
|
||||
let ramps = theme.ramps;
|
||||
let metrics = theme.sizes.resolve(self.size);
|
||||
|
||||
let track_height = metrics.icon_size * 1.25;
|
||||
let track_width = metrics.icon_size * 2.25;
|
||||
let track_height = metrics.control_height;
|
||||
let track_width = metrics.control_height * 1.65;
|
||||
|
||||
let knob = metrics.icon_size;
|
||||
let inset = metrics.icon_size * 0.125;
|
||||
let knob = metrics.indicator_size;
|
||||
let inset = metrics.plate_inset;
|
||||
let travel = track_width - knob - inset * 2.;
|
||||
|
||||
let next = !self.checked;
|
||||
|
||||
@@ -266,6 +266,7 @@ fn pill(entry: &ToastEntry, toasts: &Entity<Toasts>, cx: &App) -> gpui::Stateful
|
||||
let radius = theme.radius.full;
|
||||
let shadows = theme.elevations.popover.shadows();
|
||||
let icon_size = theme.sizes.small.icon_size;
|
||||
let dense_icon_size = theme.sizes.small.dense_icon_size;
|
||||
let text_size = theme.sizes.small.text_size;
|
||||
let toast = &entry.toast;
|
||||
let toasts = toasts.clone();
|
||||
@@ -336,7 +337,7 @@ fn pill(entry: &ToastEntry, toasts: &Entity<Toasts>, cx: &App) -> gpui::Stateful
|
||||
.hover(|style| style.bg(muted))
|
||||
.child(
|
||||
icon(IconRole::Close)
|
||||
.size(icon_size * 0.75)
|
||||
.size(dense_icon_size)
|
||||
.color(foreground.alpha(0.55)),
|
||||
)
|
||||
.on_click(move |_, _window, cx| {
|
||||
|
||||
@@ -100,7 +100,7 @@ impl RenderOnce for Toggle {
|
||||
.id(self.id)
|
||||
.justify_center()
|
||||
.h(metrics.control_height)
|
||||
.px(metrics.padding_x * 0.75)
|
||||
.px(metrics.dense_padding_x)
|
||||
.rounded(theme.radius.control)
|
||||
.text_size(metrics.text_size)
|
||||
.text_color(colors.foreground)
|
||||
|
||||
Reference in New Issue
Block a user