onboarding: Add design adjustments (#35480)
Release Notes: - N/A --------- Co-authored-by: Anthony <anthony@zed.dev>
This commit is contained in:
Danilo Leal
GitHub
parent
b31f893408
commit
faa45c53d7
17 changed files with 348 additions and 185 deletions
|
|
@ -32,7 +32,7 @@ impl RenderOnce for Badge {
|
|||
.pl_1()
|
||||
.pr_2()
|
||||
.border_1()
|
||||
.border_color(cx.theme().colors().border)
|
||||
.border_color(cx.theme().colors().border.opacity(0.6))
|
||||
.bg(cx.theme().colors().element_background)
|
||||
.rounded_sm()
|
||||
.overflow_hidden()
|
||||
|
|
@ -42,12 +42,7 @@ impl RenderOnce for Badge {
|
|||
.color(Color::Muted),
|
||||
)
|
||||
.child(Divider::vertical().color(DividerColor::Border))
|
||||
.child(
|
||||
Label::new(self.label.clone())
|
||||
.size(LabelSize::XSmall)
|
||||
.buffer_font(cx)
|
||||
.ml_1(),
|
||||
)
|
||||
.child(Label::new(self.label.clone()).size(LabelSize::Small).ml_1())
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -358,6 +358,7 @@ impl ButtonStyle {
|
|||
#[derive(Default, PartialEq, Clone, Copy)]
|
||||
pub enum ButtonSize {
|
||||
Large,
|
||||
Medium,
|
||||
#[default]
|
||||
Default,
|
||||
Compact,
|
||||
|
|
@ -368,6 +369,7 @@ impl ButtonSize {
|
|||
pub fn rems(self) -> Rems {
|
||||
match self {
|
||||
ButtonSize::Large => rems_from_px(32.),
|
||||
ButtonSize::Medium => rems_from_px(28.),
|
||||
ButtonSize::Default => rems_from_px(22.),
|
||||
ButtonSize::Compact => rems_from_px(18.),
|
||||
ButtonSize::None => rems_from_px(16.),
|
||||
|
|
@ -573,7 +575,7 @@ impl RenderOnce for ButtonLike {
|
|||
})
|
||||
.gap(DynamicSpacing::Base04.rems(cx))
|
||||
.map(|this| match self.size {
|
||||
ButtonSize::Large => this.px(DynamicSpacing::Base06.rems(cx)),
|
||||
ButtonSize::Large | ButtonSize::Medium => this.px(DynamicSpacing::Base06.rems(cx)),
|
||||
ButtonSize::Default | ButtonSize::Compact => {
|
||||
this.px(DynamicSpacing::Base04.rems(cx))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -295,6 +295,7 @@ pub struct ButtonConfiguration {
|
|||
label: SharedString,
|
||||
icon: Option<IconName>,
|
||||
on_click: Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>,
|
||||
selected: bool,
|
||||
}
|
||||
|
||||
mod private {
|
||||
|
|
@ -308,6 +309,7 @@ pub trait ButtonBuilder: 'static + private::ToggleButtonStyle {
|
|||
pub struct ToggleButtonSimple {
|
||||
label: SharedString,
|
||||
on_click: Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>,
|
||||
selected: bool,
|
||||
}
|
||||
|
||||
impl ToggleButtonSimple {
|
||||
|
|
@ -318,8 +320,14 @@ impl ToggleButtonSimple {
|
|||
Self {
|
||||
label: label.into(),
|
||||
on_click: Box::new(on_click),
|
||||
selected: false,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn selected(mut self, selected: bool) -> Self {
|
||||
self.selected = selected;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl private::ToggleButtonStyle for ToggleButtonSimple {}
|
||||
|
|
@ -330,6 +338,7 @@ impl ButtonBuilder for ToggleButtonSimple {
|
|||
label: self.label,
|
||||
icon: None,
|
||||
on_click: self.on_click,
|
||||
selected: self.selected,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -338,6 +347,7 @@ pub struct ToggleButtonWithIcon {
|
|||
label: SharedString,
|
||||
icon: IconName,
|
||||
on_click: Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>,
|
||||
selected: bool,
|
||||
}
|
||||
|
||||
impl ToggleButtonWithIcon {
|
||||
|
|
@ -350,8 +360,14 @@ impl ToggleButtonWithIcon {
|
|||
label: label.into(),
|
||||
icon,
|
||||
on_click: Box::new(on_click),
|
||||
selected: false,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn selected(mut self, selected: bool) -> Self {
|
||||
self.selected = selected;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl private::ToggleButtonStyle for ToggleButtonWithIcon {}
|
||||
|
|
@ -362,6 +378,7 @@ impl ButtonBuilder for ToggleButtonWithIcon {
|
|||
label: self.label,
|
||||
icon: Some(self.icon),
|
||||
on_click: self.on_click,
|
||||
selected: self.selected,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -373,6 +390,12 @@ pub enum ToggleButtonGroupStyle {
|
|||
Outlined,
|
||||
}
|
||||
|
||||
#[derive(Clone, Copy, PartialEq)]
|
||||
pub enum ToggleButtonGroupSize {
|
||||
Default,
|
||||
Medium,
|
||||
}
|
||||
|
||||
#[derive(IntoElement)]
|
||||
pub struct ToggleButtonGroup<T, const COLS: usize = 3, const ROWS: usize = 1>
|
||||
where
|
||||
|
|
@ -381,6 +404,7 @@ where
|
|||
group_name: &'static str,
|
||||
rows: [[T; COLS]; ROWS],
|
||||
style: ToggleButtonGroupStyle,
|
||||
size: ToggleButtonGroupSize,
|
||||
button_width: Rems,
|
||||
selected_index: usize,
|
||||
}
|
||||
|
|
@ -391,6 +415,7 @@ impl<T: ButtonBuilder, const COLS: usize> ToggleButtonGroup<T, COLS> {
|
|||
group_name,
|
||||
rows: [buttons],
|
||||
style: ToggleButtonGroupStyle::Transparent,
|
||||
size: ToggleButtonGroupSize::Default,
|
||||
button_width: rems_from_px(100.),
|
||||
selected_index: 0,
|
||||
}
|
||||
|
|
@ -403,6 +428,7 @@ impl<T: ButtonBuilder, const COLS: usize> ToggleButtonGroup<T, COLS, 2> {
|
|||
group_name,
|
||||
rows: [first_row, second_row],
|
||||
style: ToggleButtonGroupStyle::Transparent,
|
||||
size: ToggleButtonGroupSize::Default,
|
||||
button_width: rems_from_px(100.),
|
||||
selected_index: 0,
|
||||
}
|
||||
|
|
@ -415,6 +441,11 @@ impl<T: ButtonBuilder, const COLS: usize, const ROWS: usize> ToggleButtonGroup<T
|
|||
self
|
||||
}
|
||||
|
||||
pub fn size(mut self, size: ToggleButtonGroupSize) -> Self {
|
||||
self.size = size;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn button_width(mut self, button_width: Rems) -> Self {
|
||||
self.button_width = button_width;
|
||||
self
|
||||
|
|
@ -430,53 +461,56 @@ impl<T: ButtonBuilder, const COLS: usize, const ROWS: usize> RenderOnce
|
|||
for ToggleButtonGroup<T, COLS, ROWS>
|
||||
{
|
||||
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let entries = self.rows.into_iter().enumerate().map(|(row_index, row)| {
|
||||
row.into_iter().enumerate().map(move |(col_index, button)| {
|
||||
let ButtonConfiguration {
|
||||
label,
|
||||
icon,
|
||||
on_click,
|
||||
} = button.into_configuration();
|
||||
let entries =
|
||||
self.rows.into_iter().enumerate().map(|(row_index, row)| {
|
||||
row.into_iter().enumerate().map(move |(col_index, button)| {
|
||||
let ButtonConfiguration {
|
||||
label,
|
||||
icon,
|
||||
on_click,
|
||||
selected,
|
||||
} = button.into_configuration();
|
||||
|
||||
let entry_index = row_index * COLS + col_index;
|
||||
let entry_index = row_index * COLS + col_index;
|
||||
|
||||
ButtonLike::new((self.group_name, entry_index))
|
||||
.when(entry_index == self.selected_index, |this| {
|
||||
this.toggle_state(true)
|
||||
.selected_style(ButtonStyle::Tinted(TintColor::Accent))
|
||||
})
|
||||
.rounding(None)
|
||||
.when(self.style == ToggleButtonGroupStyle::Filled, |button| {
|
||||
button.style(ButtonStyle::Filled)
|
||||
})
|
||||
.child(
|
||||
h_flex()
|
||||
.min_w(self.button_width)
|
||||
.gap_1p5()
|
||||
.px_3()
|
||||
.py_1()
|
||||
.justify_center()
|
||||
.when_some(icon, |this, icon| {
|
||||
this.child(Icon::new(icon).size(IconSize::XSmall).map(|this| {
|
||||
if entry_index == self.selected_index {
|
||||
this.color(Color::Accent)
|
||||
} else {
|
||||
this.color(Color::Muted)
|
||||
}
|
||||
}))
|
||||
})
|
||||
.child(
|
||||
Label::new(label)
|
||||
.size(LabelSize::Small)
|
||||
.when(entry_index == self.selected_index, |this| {
|
||||
this.color(Color::Accent)
|
||||
}),
|
||||
),
|
||||
)
|
||||
.on_click(on_click)
|
||||
.into_any_element()
|
||||
})
|
||||
});
|
||||
ButtonLike::new((self.group_name, entry_index))
|
||||
.when(entry_index == self.selected_index || selected, |this| {
|
||||
this.toggle_state(true)
|
||||
.selected_style(ButtonStyle::Tinted(TintColor::Accent))
|
||||
})
|
||||
.rounding(None)
|
||||
.when(self.style == ToggleButtonGroupStyle::Filled, |button| {
|
||||
button.style(ButtonStyle::Filled)
|
||||
})
|
||||
.when(self.size == ToggleButtonGroupSize::Medium, |button| {
|
||||
button.size(ButtonSize::Medium)
|
||||
})
|
||||
.child(
|
||||
h_flex()
|
||||
.min_w(self.button_width)
|
||||
.gap_1p5()
|
||||
.px_3()
|
||||
.py_1()
|
||||
.justify_center()
|
||||
.when_some(icon, |this, icon| {
|
||||
this.py_2()
|
||||
.child(Icon::new(icon).size(IconSize::XSmall).map(|this| {
|
||||
if entry_index == self.selected_index || selected {
|
||||
this.color(Color::Accent)
|
||||
} else {
|
||||
this.color(Color::Muted)
|
||||
}
|
||||
}))
|
||||
})
|
||||
.child(Label::new(label).size(LabelSize::Small).when(
|
||||
entry_index == self.selected_index || selected,
|
||||
|this| this.color(Color::Accent),
|
||||
)),
|
||||
)
|
||||
.on_click(on_click)
|
||||
.into_any_element()
|
||||
})
|
||||
});
|
||||
|
||||
let border_color = cx.theme().colors().border.opacity(0.6);
|
||||
let is_outlined_or_filled = self.style == ToggleButtonGroupStyle::Outlined
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue