WIP
Co-Authored-By: Mikayla Maki <mikayla.c.maki@gmail.com>
This commit is contained in:
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 checkbox: CheckboxStyle,
|
||||
pub button: Interactive<ContainedText>,
|
||||
pub button_group: ContainerStyle,
|
||||
pub heading_group: ContainerStyle,
|
||||
pub checkbox_group: ContainerStyle,
|
||||
}
|
||||
|
||||
#[derive(Clone, Deserialize, Default)]
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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: {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue