From 2ea1a4c5be3a4ec0513ddfea5202127510ad0a50 Mon Sep 17 00:00:00 2001 From: Danilo Leal Date: Wed, 22 Jan 2025 17:27:16 -0300 Subject: [PATCH] Checkpoin: Iterating on design and writing Co-Authored-By: Agus Zubiaga --- Cargo.lock | 2 + crates/title_bar/src/title_bar.rs | 14 ++- crates/zed_predict_tos/Cargo.toml | 4 +- crates/zed_predict_tos/src/zed_predict_tos.rs | 113 +++++++++++------- 4 files changed, 88 insertions(+), 45 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 388748f3f2..bb033bda96 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -16512,6 +16512,8 @@ dependencies = [ "client", "gpui", "menu", + "settings", + "theme", "ui", "workspace", ] diff --git a/crates/title_bar/src/title_bar.rs b/crates/title_bar/src/title_bar.rs index 90e3c33273..c7639a90f8 100644 --- a/crates/title_bar/src/title_bar.rs +++ b/crates/title_bar/src/title_bar.rs @@ -211,7 +211,6 @@ impl Render for TitleBar { .child( h_flex() .h_full() - .px_1() .items_center() .gap_1p5() .child( @@ -228,7 +227,7 @@ impl Render for TitleBar { ) .child( Label::new( - "Zed AI's Edit Predictions", + "Zed AI's Edit Prediction", ) .size(LabelSize::Small), ), @@ -251,8 +250,15 @@ impl Render for TitleBar { }), ) .child( - IconButton::new("close", IconName::Close) - .icon_size(IconSize::Indicator), + div() + .border_l_1() + .border_color( + cx.theme().colors().editor_foreground.opacity(0.1), + ) + .child( + IconButton::new("close", IconName::Close) + .icon_size(IconSize::Indicator), + ), ), ), ) diff --git a/crates/zed_predict_tos/Cargo.toml b/crates/zed_predict_tos/Cargo.toml index 657cf4b1b0..73caf3d25a 100644 --- a/crates/zed_predict_tos/Cargo.toml +++ b/crates/zed_predict_tos/Cargo.toml @@ -18,6 +18,8 @@ test-support = [] [dependencies] client.workspace = true gpui.workspace = true +menu.workspace = true +settings.workspace = true +theme.workspace = true ui.workspace = true workspace.workspace = true -menu.workspace = true diff --git a/crates/zed_predict_tos/src/zed_predict_tos.rs b/crates/zed_predict_tos/src/zed_predict_tos.rs index 075e617557..7cfe0beb66 100644 --- a/crates/zed_predict_tos/src/zed_predict_tos.rs +++ b/crates/zed_predict_tos/src/zed_predict_tos.rs @@ -2,9 +2,10 @@ use client::UserStore; use gpui::{ - AppContext, ClickEvent, DismissEvent, EventEmitter, FocusHandle, FocusableView, Model, + svg, AppContext, ClickEvent, DismissEvent, EventEmitter, FocusHandle, FocusableView, Model, MouseDownEvent, Render, View, }; +use settings::Settings; use ui::{prelude::*, TintColor}; use workspace::{ModalView, Workspace}; @@ -83,70 +84,102 @@ impl ModalView for ZedPredictTos {} impl Render for ZedPredictTos { fn render(&mut self, cx: &mut ViewContext) -> impl IntoElement { + let description = if self.viewed { + "After accepting the ToS, Zed will be set as your inline completions provider." + } else { + "To start using Edit Predictions, please read and accept our Terms of Service." + }; + v_flex() + .w_96() + .p_4() + .relative() + .items_center() + .gap_2() + .overflow_hidden() + .elevation_3(cx) .id("zed predict tos") .track_focus(&self.focus_handle(cx)) .on_action(cx.listener(Self::cancel)) .key_context("ZedPredictTos") - .elevation_3(cx) - .w_96() - .items_center() - .p_4() - .gap_2() .on_action(cx.listener(|_, _: &menu::Cancel, cx| { cx.emit(DismissEvent); })) .on_any_mouse_down(cx.listener(|this, _: &MouseDownEvent, cx| { cx.focus(&this.focus_handle); })) + .child( + h_flex() + .max_h_32() + .p_1() + .overflow_hidden() + .flex_wrap() + .gap_1() + .absolute() + .top_0() + .left_0() + .right_0() + .children((0..254).enumerate().map(|(index, _)| { + let opacity = 0.24 - (index as f32 * 0.0016); + svg() + .path("icons/zed_predict.svg") + .text_color(cx.theme().colors().icon_disabled) + .w(px(14.)) + .h(px(14.)) + .opacity(opacity.max(0.001)) + })), + ) .child({ let tab = |_n: u8| { h_flex() - .px_10() - .bg(cx.theme().colors().text_accent.opacity(0.15)) + .px_4() + .py_0p5() + .bg(cx.theme().colors().editor_background) .border_1() - .border_color(cx.theme().colors().text_accent.opacity(0.8)) + .border_color(cx.theme().colors().text_accent.opacity(0.4)) .rounded_md() - .child( - Label::new("tab") - .color(Color::Muted), - ) + .font(theme::ThemeSettings::get_global(cx).buffer_font.clone()) + .text_size(TextSize::XSmall.rems(cx)) + .text_color(cx.theme().colors().text) + .child("tab") }; - v_flex().items_center().gap_3().w_full().child(tab(0).ml_neg_32()).child(tab(1)).child(tab(2).ml_32()) - }) - .child( - h_flex() + v_flex() + .items_center() + .gap_2() .w_full() - .justify_between() - .child( - v_flex() - .gap_0p5() - .child( - Label::new("Zed AI") - .size(LabelSize::Small) - .color(Color::Muted), - ) - .child(Headline::new("Edit Prediction")), - ) - .child(Icon::new(IconName::ZedPredict).size(IconSize::XLarge)), - ) - .child( - Label::new( - "To use Zed AI's Edit Prediction feature, please read and accept our Terms of Service.", - ) - .color(Color::Muted), - ) + .child(tab(0).ml_neg_20()) + .child(tab(1)) + .child(tab(2).ml_20()) + }) .child( v_flex() .mt_2() .gap_0p5() + .items_center() + .child( + h_flex().child( + Label::new("Zed AI") + .size(LabelSize::Small) + .color(Color::Muted), + ), + ) + .child(h_flex().child(Headline::new("Edit Prediction"))) + .child(Label::new(description).color(Color::Muted)), + ) + .child( + v_flex() + .mt_2() + .gap_1() .w_full() .child(if self.viewed { - Button::new("accept-tos", "I've Read and Accept the Terms of Service") - .style(ButtonStyle::Tinted(TintColor::Accent)) - .full_width() - .on_click(cx.listener(Self::accept_terms)) + Button::new( + "accept-tos", + "Accept the Terms of Service and Start Using It", + ) + .style(ButtonStyle::Tinted(TintColor::Accent)) + .full_width() + .on_click(cx.listener(Self::accept_terms)) } else { Button::new("view-tos", "Read Terms of Service") .style(ButtonStyle::Tinted(TintColor::Accent))