Take a first pass at styling the welcome screen (#3601)

This PR is a first pass at styling the welcome screen in Zed2.

Here's the current state:

<img width="1237" alt="Screenshot 2023-12-11 at 7 00 43 PM"
src="https://github.com/zed-industries/zed/assets/1486634/a0cbd5ca-7331-4785-bf46-f83fc4cb3bb6">

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers 2023-12-11 19:06:33 -05:00 committed by GitHub
parent 149e90c3d9
commit 39a115b264
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -4,7 +4,7 @@ mod base_keymap_setting;
use client::TelemetrySettings; use client::TelemetrySettings;
use db::kvp::KEY_VALUE_STORE; use db::kvp::KEY_VALUE_STORE;
use gpui::{ use gpui::{
div, svg, AnyElement, AppContext, Div, EventEmitter, FocusHandle, Focusable, FocusableView, svg, AnyElement, AppContext, Div, EventEmitter, FocusHandle, Focusable, FocusableView,
InteractiveElement, ParentElement, Render, Styled, Subscription, View, ViewContext, InteractiveElement, ParentElement, Render, Styled, Subscription, View, ViewContext,
VisualContext, WeakView, WindowContext, VisualContext, WeakView, WindowContext,
}; };
@ -60,13 +60,10 @@ impl Render for WelcomePage {
type Element = Focusable<Div>; type Element = Focusable<Div>;
fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element { fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
div() h_stack().full().track_focus(&self.focus_handle).child(
.full()
.track_focus(&self.focus_handle)
.relative()
.child(
v_stack() v_stack()
.w_96() .w_96()
.gap_4()
.mx_auto() .mx_auto()
.child( .child(
svg() svg()
@ -77,13 +74,20 @@ impl Render for WelcomePage {
.mx_auto(), .mx_auto(),
) )
.child(Label::new("Code at the speed of thought")) .child(Label::new("Code at the speed of thought"))
.child(
v_stack()
.gap_2()
.child( .child(
Button::new("choose-theme", "Choose a theme") Button::new("choose-theme", "Choose a theme")
.full_width() .full_width()
.on_click(cx.listener(|this, _, cx| { .on_click(cx.listener(|this, _, cx| {
this.workspace this.workspace
.update(cx, |workspace, cx| { .update(cx, |workspace, cx| {
theme_selector::toggle(workspace, &Default::default(), cx) theme_selector::toggle(
workspace,
&Default::default(),
cx,
)
}) })
.ok(); .ok();
})), })),
@ -108,16 +112,25 @@ impl Render for WelcomePage {
.full_width() .full_width()
.on_click(cx.listener(|_, _, cx| { .on_click(cx.listener(|_, _, cx| {
cx.app_mut() cx.app_mut()
.spawn(|cx| async move { install_cli::install_cli(&cx).await }) .spawn(
|cx| async move { install_cli::install_cli(&cx).await },
)
.detach_and_log_err(cx); .detach_and_log_err(cx);
})), })),
),
) )
.child( .child(
v_stack() v_stack()
.p_3()
.gap_2()
.bg(cx.theme().colors().elevated_surface_background) .bg(cx.theme().colors().elevated_surface_background)
.border_1()
.border_color(cx.theme().colors().border)
.rounded_md()
.child( .child(
// todo!("vim setting") // todo!("vim setting")
h_stack() h_stack()
.gap_2()
.child( .child(
Checkbox::new( Checkbox::new(
"enable-vim", "enable-vim",
@ -139,10 +152,11 @@ impl Render for WelcomePage {
// }, // },
// )), // )),
) )
.child("Enable vim mode"), .child(Label::new("Enable vim mode")),
) )
.child( .child(
h_stack() h_stack()
.gap_2()
.child( .child(
Checkbox::new( Checkbox::new(
"enable-telemetry", "enable-telemetry",
@ -152,22 +166,21 @@ impl Render for WelcomePage {
ui::Selection::Unselected ui::Selection::Unselected
}, },
) )
.on_click( .on_click(cx.listener(
cx.listener(move |this, selection, cx| { move |this, selection, cx| {
this.update_settings::<TelemetrySettings>( this.update_settings::<TelemetrySettings>(
selection, selection,
cx, cx,
|settings, value| { |settings, value| settings.metrics = Some(value),
settings.metrics = Some(value)
},
); );
}), },
), )),
) )
.child("Send usage data"), .child(Label::new("Send anonymous usage data")),
) )
.child( .child(
h_stack() h_stack()
.gap_2()
.child( .child(
Checkbox::new( Checkbox::new(
"enable-crash", "enable-crash",
@ -177,8 +190,8 @@ impl Render for WelcomePage {
ui::Selection::Unselected ui::Selection::Unselected
}, },
) )
.on_click( .on_click(cx.listener(
cx.listener(move |this, selection, cx| { move |this, selection, cx| {
this.update_settings::<TelemetrySettings>( this.update_settings::<TelemetrySettings>(
selection, selection,
cx, cx,
@ -186,10 +199,10 @@ impl Render for WelcomePage {
settings.diagnostics = Some(value) settings.diagnostics = Some(value)
}, },
); );
}), },
), )),
) )
.child("Send crash reports"), .child(Label::new("Send crash reports")),
), ),
), ),
) )