mirror of
https://github.com/zed-industries/zed.git
synced 2026-06-01 03:14:56 +07:00
onboarding: Add some UI improvements (#40016)
Includes improvements in button padding, ways we space elements out, more consistent use of some components, and cleaning up redundant buttons styles. Pretty much nothing changes in the design, though. Release Notes: - N/A
This commit is contained in:
Danilo Leal
GitHub
parent
d4b5bb9f17
commit
6dc3e643b4
4 changed files with 49 additions and 95 deletions
|
|
@ -1,9 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.6" d="M3.5 11V5.5L8.5 8L3.5 11Z" fill="black"/>
|
||||
<path opacity="0.4" d="M8.5 14L3.5 11L8.5 8V14Z" fill="black"/>
|
||||
<path opacity="0.6" d="M8.5 5.5H3.5L8.5 2.5L8.5 5.5Z" fill="black"/>
|
||||
<path opacity="0.8" d="M8.5 5.5V2.5L13.5 5.5H8.5Z" fill="black"/>
|
||||
<path opacity="0.2" d="M13.5 11L8.5 14L11 9.5L13.5 11Z" fill="black"/>
|
||||
<path opacity="0.5" d="M13.5 11L11 9.5L13.5 5V11Z" fill="black"/>
|
||||
<path d="M3.5 11V5L8.5 2.11325L13.5 5V11L8.5 13.8868L3.5 11Z" stroke="black"/>
|
||||
<path d="M13.2806 4.66818L8.26042 1.76982C8.09921 1.67673 7.9003 1.67673 7.73909 1.76982L2.71918 4.66818C2.58367 4.74642 2.5 4.89112 2.5 5.04785V10.8924C2.5 11.0489 2.58367 11.1938 2.71918 11.2721L7.73934 14.1704C7.90054 14.2635 8.09946 14.2635 8.26066 14.1704L13.2808 11.2721C13.4163 11.1938 13.5 11.0491 13.5 10.8924V5.04785C13.5 4.89136 13.4163 4.74642 13.2808 4.66818H13.2806ZM12.9653 5.28212L8.11901 13.676C8.08626 13.7326 7.99977 13.7095 7.99977 13.6439V8.14771C7.99977 8.03788 7.94107 7.9363 7.84586 7.88115L3.08613 5.13317C3.02957 5.10041 3.05266 5.0139 3.11818 5.0139H12.8106C12.9483 5.0139 13.0343 5.1631 12.9655 5.28236H12.9653V5.28212Z" fill="#C4CAD4"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 583 B After Width: | Height: | Size: 769 B |
|
|
@ -9,7 +9,7 @@ use theme::{
|
|||
ThemeSettings,
|
||||
};
|
||||
use ui::{
|
||||
ButtonLike, ParentElement as _, StatefulInteractiveElement, SwitchField, TintColor,
|
||||
Divider, ParentElement as _, StatefulInteractiveElement, SwitchField, TintColor,
|
||||
ToggleButtonGroup, ToggleButtonGroupSize, ToggleButtonSimple, ToggleButtonWithIcon, prelude::*,
|
||||
rems_from_px,
|
||||
};
|
||||
|
|
@ -221,10 +221,7 @@ fn render_telemetry_section(tab_index: &mut isize, cx: &App) -> impl IntoElement
|
|||
let fs = <dyn Fs>::global(cx);
|
||||
|
||||
v_flex()
|
||||
.pt_6()
|
||||
.gap_4()
|
||||
.border_t_1()
|
||||
.border_color(cx.theme().colors().border_variant.opacity(0.5))
|
||||
.child(
|
||||
SwitchField::new(
|
||||
"onboarding-telemetry-metrics",
|
||||
|
|
@ -410,27 +407,23 @@ fn render_setting_import_button(
|
|||
imported: bool,
|
||||
) -> impl IntoElement + 'static {
|
||||
let action = action.boxed_clone();
|
||||
h_flex().w_full().child(
|
||||
ButtonLike::new(label.clone())
|
||||
.style(ButtonStyle::OutlinedTransparent)
|
||||
.selected_style(ButtonStyle::Tinted(TintColor::Accent))
|
||||
.toggle_state(imported)
|
||||
.size(ButtonSize::Medium)
|
||||
.tab_index(tab_index)
|
||||
.child(
|
||||
h_flex()
|
||||
.w_full()
|
||||
.justify_between()
|
||||
.when(imported, |this| {
|
||||
this.child(Icon::new(IconName::Check).color(Color::Success))
|
||||
})
|
||||
.child(Label::new(label.clone()).mx_2().size(LabelSize::Small)),
|
||||
)
|
||||
.on_click(move |_, window, cx| {
|
||||
telemetry::event!("Welcome Import Settings", import_source = label,);
|
||||
window.dispatch_action(action.boxed_clone(), cx);
|
||||
}),
|
||||
)
|
||||
|
||||
Button::new(label.clone(), label.clone())
|
||||
.style(ButtonStyle::OutlinedGhost)
|
||||
.size(ButtonSize::Medium)
|
||||
.label_size(LabelSize::Small)
|
||||
.selected_style(ButtonStyle::Tinted(TintColor::Accent))
|
||||
.toggle_state(imported)
|
||||
.tab_index(tab_index)
|
||||
.when(imported, |this| {
|
||||
this.icon(IconName::Check)
|
||||
.icon_size(IconSize::Small)
|
||||
.color(Color::Success)
|
||||
})
|
||||
.on_click(move |_, window, cx| {
|
||||
telemetry::event!("Welcome Import Settings", import_source = label,);
|
||||
window.dispatch_action(action.boxed_clone(), cx);
|
||||
})
|
||||
}
|
||||
|
||||
fn render_import_settings_section(tab_index: &mut isize, cx: &mut App) -> impl IntoElement {
|
||||
|
|
@ -454,6 +447,9 @@ fn render_import_settings_section(tab_index: &mut isize, cx: &mut App) -> impl I
|
|||
});
|
||||
|
||||
h_flex()
|
||||
.gap_2()
|
||||
.flex_wrap()
|
||||
.justify_between()
|
||||
.child(
|
||||
v_flex()
|
||||
.gap_0p5()
|
||||
|
|
@ -464,7 +460,6 @@ fn render_import_settings_section(tab_index: &mut isize, cx: &mut App) -> impl I
|
|||
.color(Color::Muted),
|
||||
),
|
||||
)
|
||||
.child(div().w_full())
|
||||
.child(h_flex().gap_1().child(vscode).child(cursor))
|
||||
}
|
||||
|
||||
|
|
@ -477,5 +472,6 @@ pub(crate) fn render_basics_page(cx: &mut App) -> impl IntoElement {
|
|||
.child(render_base_keymap_section(&mut tab_index, cx))
|
||||
.child(render_import_settings_section(&mut tab_index, cx))
|
||||
.child(render_vim_mode_switch(&mut tab_index, cx))
|
||||
.child(Divider::horizontal().color(ui::DividerColor::BorderVariant))
|
||||
.child(render_telemetry_section(&mut tab_index, cx))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ use serde::Deserialize;
|
|||
use settings::{SettingsStore, VsCodeSettingsSource};
|
||||
use std::sync::Arc;
|
||||
use ui::{
|
||||
KeyBinding, ParentElement as _, StatefulInteractiveElement, Vector, VectorName,
|
||||
Divider, KeyBinding, ParentElement as _, StatefulInteractiveElement, Vector, VectorName,
|
||||
WithScrollbar as _, prelude::*, rems_from_px,
|
||||
};
|
||||
pub use ui_input::font_picker;
|
||||
|
|
@ -294,44 +294,45 @@ impl Render for Onboarding {
|
|||
.child(
|
||||
div()
|
||||
.max_w(Rems(48.0))
|
||||
.w_full()
|
||||
.mx_auto()
|
||||
.size_full()
|
||||
.gap_6()
|
||||
.mx_auto()
|
||||
.child(
|
||||
v_flex()
|
||||
.m_auto()
|
||||
.id("page-content")
|
||||
.gap_6()
|
||||
.m_auto()
|
||||
.p_12()
|
||||
.size_full()
|
||||
.max_w_full()
|
||||
.min_w_0()
|
||||
.p_12()
|
||||
.border_color(cx.theme().colors().border_variant.opacity(0.5))
|
||||
.gap_6()
|
||||
.overflow_y_scroll()
|
||||
.child(
|
||||
h_flex()
|
||||
.w_full()
|
||||
.gap_4()
|
||||
.child(Vector::square(VectorName::ZedLogo, rems(2.5)))
|
||||
.justify_between()
|
||||
.child(
|
||||
v_flex()
|
||||
h_flex()
|
||||
.gap_4()
|
||||
.child(Vector::square(VectorName::ZedLogo, rems(2.5)))
|
||||
.child(
|
||||
Headline::new("Welcome to Zed")
|
||||
.size(HeadlineSize::Small),
|
||||
)
|
||||
.child(
|
||||
Label::new("The editor for what's next")
|
||||
.color(Color::Muted)
|
||||
.size(LabelSize::Small)
|
||||
.italic(),
|
||||
v_flex()
|
||||
.child(
|
||||
Headline::new("Welcome to Zed")
|
||||
.size(HeadlineSize::Small),
|
||||
)
|
||||
.child(
|
||||
Label::new("The editor for what's next")
|
||||
.color(Color::Muted)
|
||||
.size(LabelSize::Small)
|
||||
.italic(),
|
||||
),
|
||||
),
|
||||
)
|
||||
.child(div().w_full())
|
||||
.child({
|
||||
Button::new("finish_setup", "Finish Setup")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.size(ButtonSize::Medium)
|
||||
.width(Rems(12.0))
|
||||
.key_binding(
|
||||
KeyBinding::for_action_in(
|
||||
|
|
@ -345,11 +346,9 @@ impl Render for Onboarding {
|
|||
.on_click(|_, window, cx| {
|
||||
window.dispatch_action(Finish.boxed_clone(), cx);
|
||||
})
|
||||
})
|
||||
.pb_6()
|
||||
.border_b_1()
|
||||
.border_color(cx.theme().colors().border_variant.opacity(0.5)),
|
||||
}),
|
||||
)
|
||||
.child(Divider::horizontal().color(ui::DividerColor::BorderVariant))
|
||||
.child(self.render_page(cx))
|
||||
.track_scroll(&self.scroll_handle),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -135,9 +135,6 @@ pub enum ButtonStyle {
|
|||
/// a fully transparent button.
|
||||
Outlined,
|
||||
|
||||
/// Transparent button that always has an outline.
|
||||
OutlinedTransparent,
|
||||
|
||||
/// A more de-emphasized version of the outlined button.
|
||||
OutlinedGhost,
|
||||
|
||||
|
|
@ -228,12 +225,6 @@ impl ButtonStyle {
|
|||
label_color: Color::Default.color(cx),
|
||||
icon_color: Color::Default.color(cx),
|
||||
},
|
||||
ButtonStyle::OutlinedTransparent => ButtonLikeStyles {
|
||||
background: cx.theme().colors().ghost_element_background,
|
||||
border_color: cx.theme().colors().border_variant,
|
||||
label_color: Color::Default.color(cx),
|
||||
icon_color: Color::Default.color(cx),
|
||||
},
|
||||
ButtonStyle::OutlinedGhost => ButtonLikeStyles {
|
||||
background: transparent_black(),
|
||||
border_color: cx.theme().colors().border_variant,
|
||||
|
|
@ -285,14 +276,8 @@ impl ButtonStyle {
|
|||
label_color: Color::Default.color(cx),
|
||||
icon_color: Color::Default.color(cx),
|
||||
},
|
||||
ButtonStyle::OutlinedTransparent => ButtonLikeStyles {
|
||||
background: cx.theme().colors().ghost_element_hover,
|
||||
border_color: cx.theme().colors().border,
|
||||
label_color: Color::Default.color(cx),
|
||||
icon_color: Color::Default.color(cx),
|
||||
},
|
||||
ButtonStyle::OutlinedGhost => ButtonLikeStyles {
|
||||
background: transparent_black(),
|
||||
background: cx.theme().colors().ghost_element_hover,
|
||||
border_color: cx.theme().colors().border,
|
||||
label_color: Color::Default.color(cx),
|
||||
icon_color: Color::Default.color(cx),
|
||||
|
|
@ -335,12 +320,6 @@ impl ButtonStyle {
|
|||
label_color: Color::Default.color(cx),
|
||||
icon_color: Color::Default.color(cx),
|
||||
},
|
||||
ButtonStyle::OutlinedTransparent => ButtonLikeStyles {
|
||||
background: cx.theme().colors().ghost_element_active,
|
||||
border_color: cx.theme().colors().border_variant,
|
||||
label_color: Color::Default.color(cx),
|
||||
icon_color: Color::Default.color(cx),
|
||||
},
|
||||
ButtonStyle::OutlinedGhost => ButtonLikeStyles {
|
||||
background: transparent_black(),
|
||||
border_color: cx.theme().colors().border_variant,
|
||||
|
|
@ -380,12 +359,6 @@ impl ButtonStyle {
|
|||
label_color: Color::Default.color(cx),
|
||||
icon_color: Color::Default.color(cx),
|
||||
},
|
||||
ButtonStyle::OutlinedTransparent => ButtonLikeStyles {
|
||||
background: cx.theme().colors().ghost_element_background,
|
||||
border_color: cx.theme().colors().border,
|
||||
label_color: Color::Default.color(cx),
|
||||
icon_color: Color::Default.color(cx),
|
||||
},
|
||||
ButtonStyle::OutlinedGhost => ButtonLikeStyles {
|
||||
background: transparent_black(),
|
||||
border_color: cx.theme().colors().border,
|
||||
|
|
@ -428,12 +401,6 @@ impl ButtonStyle {
|
|||
label_color: Color::Default.color(cx),
|
||||
icon_color: Color::Default.color(cx),
|
||||
},
|
||||
ButtonStyle::OutlinedTransparent => ButtonLikeStyles {
|
||||
background: cx.theme().colors().ghost_element_disabled,
|
||||
border_color: cx.theme().colors().border_disabled,
|
||||
label_color: Color::Default.color(cx),
|
||||
icon_color: Color::Default.color(cx),
|
||||
},
|
||||
ButtonStyle::OutlinedGhost => ButtonLikeStyles {
|
||||
background: transparent_black(),
|
||||
border_color: cx.theme().colors().border_disabled,
|
||||
|
|
@ -690,9 +657,7 @@ impl RenderOnce for ButtonLike {
|
|||
.when(
|
||||
matches!(
|
||||
self.style,
|
||||
ButtonStyle::Outlined
|
||||
| ButtonStyle::OutlinedTransparent
|
||||
| ButtonStyle::OutlinedGhost
|
||||
ButtonStyle::Outlined | ButtonStyle::OutlinedGhost
|
||||
),
|
||||
|this| this.border_1(),
|
||||
)
|
||||
|
|
@ -704,7 +669,7 @@ impl RenderOnce for ButtonLike {
|
|||
})
|
||||
.gap(DynamicSpacing::Base04.rems(cx))
|
||||
.map(|this| match self.size {
|
||||
ButtonSize::Large | ButtonSize::Medium => this.px(DynamicSpacing::Base06.rems(cx)),
|
||||
ButtonSize::Large | ButtonSize::Medium => this.px(DynamicSpacing::Base08.rems(cx)),
|
||||
ButtonSize::Default | ButtonSize::Compact => {
|
||||
this.px(DynamicSpacing::Base04.rems(cx))
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue