Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

3
crates/theme/src/theme.rs
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)]

95
crates/welcome/src/welcome.rs
View file

@ -54,39 +54,72 @@ impl View for WelcomePage {
self_handle.id(),
Flex::column()
.with_children([
Image::new("images/zed-logo-90x90.png")
.constrained()
.with_width(90.)
.with_height(90.)
.aligned()
Flex::column()
.with_children([
Image::new("images/zed-logo-90x90.png")
.constrained()
.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()
.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(),
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()
.with_max_width(width)

189
styles/src/styleTree/welcome.ts
View file

@ -4,91 +4,110 @@ import { border, background, foreground, text, TextProperties } from "./componen
export default function welcome(colorScheme: ColorScheme) {
let layer = colorScheme.highest;
let layer = colorScheme.highest;
let checkboxBase = {
cornerRadius: 4,
padding: {
left: 3,
right: 3,
top: 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,
let checkboxBase = {
cornerRadius: 4,
padding: {
left: 3,
right: 3,
top: 3,
bottom: 3,
},
},
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")
}
// shadow: colorScheme.popoverShadow,
border: border(layer),
margin: {
right: 8,
top: 5,
bottom: 5
},
};
let interactive_text_size: TextProperties = { size: "sm" }
return {
pageWidth: 320,
logoSubheading: {
...text(layer, "sans", { size: "lg" }),
margin: {
top: 10,
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, "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")
}
}
}
}
}
}