Nate Butler and Mikayla Maki created
Co-Authored-By: Mikayla Maki <mikayla.c.maki@gmail.com>crates/theme/src/theme.rs | 3
crates/welcome/src/welcome.rs | 95 +++++++++++-----
styles/src/styleTree/welcome.ts | 187 +++++++++++++++++++---------------
3 files changed, 170 insertions(+), 115 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)]
@@ -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)
@@ -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: {
+ let checkboxBase = {
+ cornerRadius: 4,
+ padding: {
+ left: 3,
+ right: 3,
+ top: 3,
+ bottom: 3,
+ },
+ // shadow: colorScheme.popoverShadow,
+ border: border(layer),
margin: {
- top: 5,
+ 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"),
+ },
},
- },
- 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")
- }
+ 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")
+ }
+ }
}
- }
-}
+}