From 9842b7ad1a7f0c6008c9b030e2c7d8db9b63c0a2 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 8 Mar 2023 16:34:27 -0500 Subject: [PATCH] WIP Co-Authored-By: Mikayla Maki --- 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(-) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index e7252fbf61eff3da14f93731452eed6094f793ce..8fc6db3e5bfdaf2730670168a0e63821b0962ecd 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -858,6 +858,9 @@ pub struct WelcomeStyle { pub logo_subheading: ContainedText, pub checkbox: CheckboxStyle, pub button: Interactive, + pub button_group: ContainerStyle, + pub heading_group: ContainerStyle, + pub checkbox_group: ContainerStyle, } #[derive(Clone, Deserialize, Default)] diff --git a/crates/welcome/src/welcome.rs b/crates/welcome/src/welcome.rs index c780a06ee151242337a2ddd50d2f7d55744b4c36..d5431e5108ca77d7856fff529122085ce74c581d 100644 --- a/crates/welcome/src/welcome.rs +++ b/crates/welcome/src/welcome.rs @@ -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::( + "Do you want to send telemetry?", + &theme.welcome.checkbox, + metrics, + cx, + |content, checked| content.telemetry.set_metrics(checked), + ), + self.render_settings_checkbox::( + "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::( - "Do you want to send telemetry?", - &theme.welcome.checkbox, - metrics, - cx, - |content, checked| content.telemetry.set_metrics(checked), - ), - self.render_settings_checkbox::( - "Send crash reports", - &theme.welcome.checkbox, - diagnostics, - cx, - |content, checked| content.telemetry.set_diagnostics(checked), - ), ]) .constrained() .with_max_width(width) diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts index bfd67cec8d19d29d651e71acfc573f9aa4757c1c..2dc0f59b2e5a432251e630cdd60342807cffd158 100644 --- a/styles/src/styleTree/welcome.ts +++ b/styles/src/styleTree/welcome.ts @@ -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") + } + } } - } -} \ No newline at end of file +}