WIP
Co-Authored-By: Mikayla Maki <mikayla.c.maki@gmail.com>
This commit is contained in:
Nate Butler
parent
350ddf2025
commit
9842b7ad1a
3 changed files with 171 additions and 116 deletions
|
|
@ -858,6 +858,9 @@ pub struct WelcomeStyle {
|
||||||
pub logo_subheading: ContainedText,
|
pub logo_subheading: ContainedText,
|
||||||
pub checkbox: CheckboxStyle,
|
pub checkbox: CheckboxStyle,
|
||||||
pub button: Interactive<ContainedText>,
|
pub button: Interactive<ContainedText>,
|
||||||
|
pub button_group: ContainerStyle,
|
||||||
|
pub heading_group: ContainerStyle,
|
||||||
|
pub checkbox_group: ContainerStyle,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Clone, Deserialize, Default)]
|
#[derive(Clone, Deserialize, Default)]
|
||||||
|
|
|
||||||
|
|
@ -54,39 +54,72 @@ impl View for WelcomePage {
|
||||||
self_handle.id(),
|
self_handle.id(),
|
||||||
Flex::column()
|
Flex::column()
|
||||||
.with_children([
|
.with_children([
|
||||||
Image::new("images/zed-logo-90x90.png")
|
Flex::column()
|
||||||
.constrained()
|
.with_children([
|
||||||
.with_width(90.)
|
Image::new("images/zed-logo-90x90.png")
|
||||||
.with_height(90.)
|
.constrained()
|
||||||
.aligned()
|
.with_width(90.)
|
||||||
|
.with_height(90.)
|
||||||
|
.aligned()
|
||||||
|
.contained()
|
||||||
|
.aligned()
|
||||||
|
.boxed(),
|
||||||
|
Label::new(
|
||||||
|
"Code at the speed of thought",
|
||||||
|
theme.welcome.logo_subheading.text.clone(),
|
||||||
|
)
|
||||||
|
.aligned()
|
||||||
|
.contained()
|
||||||
|
.with_style(theme.welcome.logo_subheading.container)
|
||||||
|
.boxed(),
|
||||||
|
])
|
||||||
.contained()
|
.contained()
|
||||||
.aligned()
|
.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,
|
||||||
|
metrics,
|
||||||
|
cx,
|
||||||
|
|content, checked| content.telemetry.set_metrics(checked),
|
||||||
|
),
|
||||||
|
self.render_settings_checkbox::<Diagnostics>(
|
||||||
|
"Send crash reports",
|
||||||
|
&theme.welcome.checkbox,
|
||||||
|
diagnostics,
|
||||||
|
cx,
|
||||||
|
|content, checked| content.telemetry.set_diagnostics(checked),
|
||||||
|
),
|
||||||
|
])
|
||||||
|
.contained()
|
||||||
|
.with_style(theme.welcome.checkbox_group)
|
||||||
.boxed(),
|
.boxed(),
|
||||||
Label::new(
|
|
||||||
"Code at the speed of thought",
|
|
||||||
theme.welcome.logo_subheading.text.clone(),
|
|
||||||
)
|
|
||||||
.aligned()
|
|
||||||
.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),
|
|
||||||
self.render_settings_checkbox::<Metrics>(
|
|
||||||
"Do you want to send telemetry?",
|
|
||||||
&theme.welcome.checkbox,
|
|
||||||
metrics,
|
|
||||||
cx,
|
|
||||||
|content, checked| content.telemetry.set_metrics(checked),
|
|
||||||
),
|
|
||||||
self.render_settings_checkbox::<Diagnostics>(
|
|
||||||
"Send crash reports",
|
|
||||||
&theme.welcome.checkbox,
|
|
||||||
diagnostics,
|
|
||||||
cx,
|
|
||||||
|content, checked| content.telemetry.set_diagnostics(checked),
|
|
||||||
),
|
|
||||||
])
|
])
|
||||||
.constrained()
|
.constrained()
|
||||||
.with_max_width(width)
|
.with_max_width(width)
|
||||||
|
|
|
||||||
|
|
@ -4,91 +4,110 @@ import { border, background, foreground, text, TextProperties } from "./componen
|
||||||
|
|
||||||
|
|
||||||
export default function welcome(colorScheme: ColorScheme) {
|
export default function welcome(colorScheme: ColorScheme) {
|
||||||
let layer = colorScheme.highest;
|
let layer = colorScheme.highest;
|
||||||
|
|
||||||
let checkboxBase = {
|
let checkboxBase = {
|
||||||
cornerRadius: 4,
|
cornerRadius: 4,
|
||||||
padding: {
|
padding: {
|
||||||
left: 3,
|
left: 3,
|
||||||
right: 3,
|
right: 3,
|
||||||
top: 3,
|
top: 3,
|
||||||
bottom: 3,
|
bottom: 3,
|
||||||
},
|
|
||||||
shadow: colorScheme.popoverShadow,
|
|
||||||
border: border(layer),
|
|
||||||
margin: {
|
|
||||||
right: 8,
|
|
||||||
top: 5,
|
|
||||||
bottom: 5
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
let interactive_text_size: TextProperties = { size: "md" }
|
|
||||||
|
|
||||||
return {
|
|
||||||
pageWidth: 450,
|
|
||||||
logoSubheading: {
|
|
||||||
...text(layer, "sans", { size: "lg" }),
|
|
||||||
margin: {
|
|
||||||
top: 10,
|
|
||||||
bottom: 7,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
background: background(layer),
|
|
||||||
border: border(layer, "active"),
|
|
||||||
cornerRadius: 4,
|
|
||||||
margin: {
|
|
||||||
top: 8,
|
|
||||||
bottom: 7
|
|
||||||
},
|
|
||||||
padding: {
|
|
||||||
top: 1,
|
|
||||||
bottom: 1,
|
|
||||||
left: 7,
|
|
||||||
right: 7,
|
|
||||||
},
|
|
||||||
...text(layer, "sans", "hovered", interactive_text_size),
|
|
||||||
hover: {
|
|
||||||
...text(layer, "sans", "hovered", interactive_text_size),
|
|
||||||
background: background(layer, "hovered"),
|
|
||||||
border: border(layer, "hovered"),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
checkbox: {
|
|
||||||
label: {
|
|
||||||
...text(layer, "sans", interactive_text_size),
|
|
||||||
// Also supports margin, container, border, etc.
|
|
||||||
},
|
|
||||||
container: {
|
|
||||||
margin: {
|
|
||||||
top: 5,
|
|
||||||
},
|
},
|
||||||
},
|
// shadow: colorScheme.popoverShadow,
|
||||||
width: 12,
|
border: border(layer),
|
||||||
height: 12,
|
margin: {
|
||||||
checkIcon: "icons/check_12.svg",
|
right: 8,
|
||||||
checkIconColor: foreground(layer, "on"),
|
top: 5,
|
||||||
default: {
|
bottom: 5
|
||||||
...checkboxBase,
|
},
|
||||||
background: background(layer, "default"),
|
};
|
||||||
border: border(layer, "active")
|
|
||||||
},
|
let interactive_text_size: TextProperties = { size: "sm" }
|
||||||
checked: {
|
|
||||||
...checkboxBase,
|
return {
|
||||||
background: background(layer, "hovered"),
|
pageWidth: 320,
|
||||||
border: border(layer, "active")
|
logoSubheading: {
|
||||||
},
|
...text(layer, "sans", { size: "lg" }),
|
||||||
hovered: {
|
margin: {
|
||||||
...checkboxBase,
|
top: 10,
|
||||||
background: background(layer, "hovered"),
|
bottom: 7,
|
||||||
border: border(layer, "hovered")
|
},
|
||||||
},
|
},
|
||||||
hoveredAndChecked: {
|
buttonGroup: {
|
||||||
...checkboxBase,
|
border: border(layer, "active"),
|
||||||
background: background(layer, "hovered"),
|
margin: {
|
||||||
border: border(layer, "active")
|
top: 8,
|
||||||
}
|
bottom: 7
|
||||||
|
},
|
||||||
|
},
|
||||||
|
headingGroup: {
|
||||||
|
margin: {
|
||||||
|
top: 8,
|
||||||
|
bottom: 7
|
||||||
|
},
|
||||||
|
},
|
||||||
|
checkboxGroup: {
|
||||||
|
margin: {
|
||||||
|
top: 8,
|
||||||
|
bottom: 7
|
||||||
|
},
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
background: background(layer),
|
||||||
|
border: border(layer, "default"),
|
||||||
|
cornerRadius: 4,
|
||||||
|
margin: {
|
||||||
|
top: 8,
|
||||||
|
bottom: 7
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
top: 1,
|
||||||
|
bottom: 1,
|
||||||
|
left: 7,
|
||||||
|
right: 7,
|
||||||
|
},
|
||||||
|
...text(layer, "sans", "default", interactive_text_size),
|
||||||
|
hover: {
|
||||||
|
...text(layer, "sans", "default", interactive_text_size),
|
||||||
|
background: background(layer, "default"),
|
||||||
|
border: border(layer, "active"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
checkbox: {
|
||||||
|
label: {
|
||||||
|
...text(layer, "sans", interactive_text_size),
|
||||||
|
// Also supports margin, container, border, etc.
|
||||||
|
},
|
||||||
|
container: {
|
||||||
|
margin: {
|
||||||
|
top: 5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
width: 12,
|
||||||
|
height: 12,
|
||||||
|
checkIcon: "icons/check_12.svg",
|
||||||
|
checkIconColor: foreground(layer, "on"),
|
||||||
|
default: {
|
||||||
|
...checkboxBase,
|
||||||
|
background: background(layer, "default"),
|
||||||
|
border: border(layer, "active")
|
||||||
|
},
|
||||||
|
checked: {
|
||||||
|
...checkboxBase,
|
||||||
|
background: background(layer, "hovered"),
|
||||||
|
border: border(layer, "active")
|
||||||
|
},
|
||||||
|
hovered: {
|
||||||
|
...checkboxBase,
|
||||||
|
background: background(layer, "hovered"),
|
||||||
|
border: border(layer, "hovered")
|
||||||
|
},
|
||||||
|
hoveredAndChecked: {
|
||||||
|
...checkboxBase,
|
||||||
|
background: background(layer, "hovered"),
|
||||||
|
border: border(layer, "active")
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue