Co-Authored-By: Mikayla Maki <mikayla.c.maki@gmail.com>
This commit is contained in:
Nate Butler 2023-03-08 16:34:27 -05:00
parent 350ddf2025
commit 9842b7ad1a
3 changed files with 171 additions and 116 deletions

View file

@ -858,6 +858,9 @@ pub struct WelcomeStyle {
pub logo_subheading: ContainedText,
pub checkbox: CheckboxStyle,
pub button: Interactive<ContainedText>,
pub button_group: ContainerStyle,
pub heading_group: ContainerStyle,
pub checkbox_group: ContainerStyle,
}
#[derive(Clone, Deserialize, Default)]

View file

@ -52,6 +52,8 @@ impl View for WelcomePage {
PaneBackdrop::new(
self_handle.id(),
Flex::column()
.with_children([
Flex::column()
.with_children([
Image::new("images/zed-logo-90x90.png")
@ -70,9 +72,36 @@ impl View for WelcomePage {
.contained()
.with_style(theme.welcome.logo_subheading.container)
.boxed(),
self.render_cta_button("Choose a theme", theme_selector::Toggle, width, cx),
self.render_cta_button("Choose a keymap", ToggleBaseKeymapSelector, width, cx),
self.render_cta_button("Install the CLI", install_cli::Install, width, cx),
])
.contained()
.with_style(theme.welcome.heading_group)
.boxed(),
Flex::row()
.with_children([
self.render_cta_button(
"Choose a theme",
theme_selector::Toggle,
width,
cx,
),
self.render_cta_button(
"Choose a keymap",
ToggleBaseKeymapSelector,
width,
cx,
),
self.render_cta_button(
"Install the CLI",
install_cli::Install,
width,
cx,
),
])
.contained()
.with_style(theme.welcome.button_group)
.boxed(),
Flex::column()
.with_children([
self.render_settings_checkbox::<Metrics>(
"Do you want to send telemetry?",
&theme.welcome.checkbox,
@ -88,6 +117,10 @@ impl View for WelcomePage {
|content, checked| content.telemetry.set_diagnostics(checked),
),
])
.contained()
.with_style(theme.welcome.checkbox_group)
.boxed(),
])
.constrained()
.with_max_width(width)
.contained()

View file

@ -14,7 +14,7 @@ export default function welcome(colorScheme: ColorScheme) {
top: 3,
bottom: 3,
},
shadow: colorScheme.popoverShadow,
// shadow: colorScheme.popoverShadow,
border: border(layer),
margin: {
right: 8,
@ -23,10 +23,10 @@ export default function welcome(colorScheme: ColorScheme) {
},
};
let interactive_text_size: TextProperties = { size: "md" }
let interactive_text_size: TextProperties = { size: "sm" }
return {
pageWidth: 450,
pageWidth: 320,
logoSubheading: {
...text(layer, "sans", { size: "lg" }),
margin: {
@ -34,9 +34,28 @@ export default function welcome(colorScheme: ColorScheme) {
bottom: 7,
},
},
buttonGroup: {
border: border(layer, "active"),
margin: {
top: 8,
bottom: 7
},
},
headingGroup: {
margin: {
top: 8,
bottom: 7
},
},
checkboxGroup: {
margin: {
top: 8,
bottom: 7
},
},
button: {
background: background(layer),
border: border(layer, "active"),
border: border(layer, "default"),
cornerRadius: 4,
margin: {
top: 8,
@ -48,11 +67,11 @@ export default function welcome(colorScheme: ColorScheme) {
left: 7,
right: 7,
},
...text(layer, "sans", "hovered", interactive_text_size),
...text(layer, "sans", "default", interactive_text_size),
hover: {
...text(layer, "sans", "hovered", interactive_text_size),
background: background(layer, "hovered"),
border: border(layer, "hovered"),
...text(layer, "sans", "default", interactive_text_size),
background: background(layer, "default"),
border: border(layer, "active"),
},
},
checkbox: {