mirror of
https://github.com/zed-industries/zed.git
synced 2024-10-24 23:47:05 +00:00
Finish device code flow for copilot
This commit is contained in:
Mikayla Maki
parent
f5d4bcd934
commit
afc9b832c8
4 changed files with 442 additions and 479 deletions
|
|
@ -4,6 +4,7 @@ use gpui::{
|
|||
ViewContext, ViewHandle, WindowKind, WindowOptions,
|
||||
};
|
||||
use settings::Settings;
|
||||
use theme::ui::modal;
|
||||
|
||||
#[derive(PartialEq, Eq, Debug, Clone)]
|
||||
struct CopyUserCode;
|
||||
|
|
@ -11,7 +12,7 @@ struct CopyUserCode;
|
|||
#[derive(PartialEq, Eq, Debug, Clone)]
|
||||
struct OpenGithub;
|
||||
|
||||
const _COPILOT_SIGN_UP_URL: &'static str = "https://github.com/features/copilot";
|
||||
const COPILOT_SIGN_UP_URL: &'static str = "https://github.com/features/copilot";
|
||||
|
||||
pub fn init(cx: &mut MutableAppContext) {
|
||||
let copilot = Copilot::global(cx).unwrap();
|
||||
|
|
@ -66,53 +67,60 @@ pub fn init(cx: &mut MutableAppContext) {
|
|||
.detach();
|
||||
|
||||
// Modal theming test:
|
||||
// use gpui::geometry::vector::vec2f;
|
||||
// let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions();
|
||||
// let window_options = WindowOptions {
|
||||
// bounds: gpui::WindowBounds::Fixed(RectF::new(Default::default(), window_size)),
|
||||
// titlebar: None,
|
||||
// center: false,
|
||||
// focus: false,
|
||||
// kind: WindowKind::PopUp,
|
||||
// is_movable: true,
|
||||
// screen: None,
|
||||
// };
|
||||
// let (_, _view) = cx.add_window(window_options, |_cx| {
|
||||
// CopilotCodeVerification::new(Status::SigningIn {
|
||||
// prompt: Some(PromptUserDeviceFlow {
|
||||
// user_code: "ABCD-1234".to_string(),
|
||||
// verification_uri: "https://github.com/login/device".to_string(),
|
||||
// }),
|
||||
// })
|
||||
// });
|
||||
use gpui::geometry::vector::vec2f;
|
||||
|
||||
// let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions();
|
||||
// let window_options = WindowOptions {
|
||||
// bounds: gpui::WindowBounds::Fixed(RectF::new(vec2f(window_size.x(), 0.), window_size)),
|
||||
// titlebar: None,
|
||||
// center: false,
|
||||
// focus: false,
|
||||
// kind: WindowKind::PopUp,
|
||||
// is_movable: true,
|
||||
// screen: None,
|
||||
// };
|
||||
// let (_, _view) = cx.add_window(window_options, |_cx| {
|
||||
// CopilotCodeVerification::new(Status::Authorized)
|
||||
// });
|
||||
let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions();
|
||||
let window_options = WindowOptions {
|
||||
bounds: gpui::WindowBounds::Fixed(RectF::new(vec2f(0., 0.), window_size)),
|
||||
titlebar: None,
|
||||
center: false,
|
||||
focus: false,
|
||||
kind: WindowKind::PopUp,
|
||||
is_movable: true,
|
||||
screen: None,
|
||||
};
|
||||
let (_, _view) = cx.add_window(window_options, |_cx| {
|
||||
CopilotCodeVerification::new(Status::Authorized)
|
||||
});
|
||||
|
||||
// let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions();
|
||||
// let window_options = WindowOptions {
|
||||
// bounds: gpui::WindowBounds::Fixed(RectF::new(vec2f(0., window_size.y()), window_size)),
|
||||
// titlebar: None,
|
||||
// center: false,
|
||||
// focus: false,
|
||||
// kind: WindowKind::PopUp,
|
||||
// is_movable: true,
|
||||
// screen: None,
|
||||
// };
|
||||
// let (_, _view) = cx.add_window(window_options, |_cx| {
|
||||
// CopilotCodeVerification::new(Status::Unauthorized)
|
||||
// });
|
||||
let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions();
|
||||
let window_options = WindowOptions {
|
||||
bounds: gpui::WindowBounds::Fixed(RectF::new(
|
||||
vec2f(window_size.x() + 10., 0.),
|
||||
window_size,
|
||||
)),
|
||||
titlebar: None,
|
||||
center: false,
|
||||
focus: false,
|
||||
kind: WindowKind::PopUp,
|
||||
is_movable: true,
|
||||
screen: None,
|
||||
};
|
||||
let (_, _view) = cx.add_window(window_options, |_cx| {
|
||||
CopilotCodeVerification::new(Status::SigningIn {
|
||||
prompt: Some(PromptUserDeviceFlow {
|
||||
user_code: "ABCD-1234".to_string(),
|
||||
verification_uri: "https://github.com/login/device".to_string(),
|
||||
}),
|
||||
})
|
||||
});
|
||||
|
||||
let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions();
|
||||
let window_options = WindowOptions {
|
||||
bounds: gpui::WindowBounds::Fixed(RectF::new(
|
||||
vec2f((window_size.x() + 10.) * 2., 0.),
|
||||
window_size,
|
||||
)),
|
||||
titlebar: None,
|
||||
center: false,
|
||||
focus: false,
|
||||
kind: WindowKind::PopUp,
|
||||
is_movable: true,
|
||||
screen: None,
|
||||
};
|
||||
let (_, _view) = cx.add_window(window_options, |_cx| {
|
||||
CopilotCodeVerification::new(Status::Unauthorized)
|
||||
});
|
||||
}
|
||||
|
||||
pub struct CopilotCodeVerification {
|
||||
|
|
@ -139,151 +147,43 @@ impl CopilotCodeVerification {
|
|||
.map(|item| item.text() == &data.user_code)
|
||||
.unwrap_or(false);
|
||||
|
||||
Flex::column()
|
||||
.with_children([
|
||||
MouseEventHandler::<Self>::new(0, cx, |state, _cx| {
|
||||
Flex::row()
|
||||
.with_children([
|
||||
Label::new(data.user_code.clone(), style.auth.device_code.clone())
|
||||
.aligned()
|
||||
.contained()
|
||||
.with_style(style.auth.device_code_left_container)
|
||||
.constrained()
|
||||
.with_width(style.auth.device_code_left)
|
||||
.boxed(),
|
||||
Empty::new()
|
||||
.constrained()
|
||||
.with_width(1.)
|
||||
.with_height(style.auth.device_code_seperator_height)
|
||||
.contained()
|
||||
.with_background_color(
|
||||
style
|
||||
.auth
|
||||
.cta_button
|
||||
.style_for(state, false)
|
||||
.container
|
||||
.border
|
||||
.color,
|
||||
)
|
||||
.boxed(),
|
||||
Label::new(
|
||||
if copied { "Copied!" } else { "Copy" },
|
||||
style.auth.cta_button.style_for(state, false).text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.contained()
|
||||
.with_style(style.auth.device_code_right_container)
|
||||
.constrained()
|
||||
.with_width(style.auth.device_code_right)
|
||||
.boxed(),
|
||||
])
|
||||
let device_code_style = &style.auth.prompting.device_code;
|
||||
|
||||
MouseEventHandler::<Self>::new(0, cx, |state, _cx| {
|
||||
Flex::row()
|
||||
.with_children([
|
||||
Label::new(data.user_code.clone(), device_code_style.text.clone())
|
||||
.aligned()
|
||||
.contained()
|
||||
.with_style(style.auth.device_code_cta.style_for(state, false).container)
|
||||
.with_style(device_code_style.left_container)
|
||||
.constrained()
|
||||
.with_width(style.auth.content_width)
|
||||
.boxed()
|
||||
})
|
||||
.on_click(gpui::MouseButton::Left, {
|
||||
let user_code = data.user_code.clone();
|
||||
move |_, cx| {
|
||||
cx.platform()
|
||||
.write_to_clipboard(ClipboardItem::new(user_code.clone()));
|
||||
cx.notify();
|
||||
}
|
||||
})
|
||||
.with_cursor_style(gpui::CursorStyle::PointingHand)
|
||||
.boxed(),
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"Paste this code into GitHub after",
|
||||
style.auth.hint.text.clone(),
|
||||
)
|
||||
.with_width(device_code_style.left)
|
||||
.boxed(),
|
||||
Label::new("clicking the button below.", style.auth.hint.text.clone())
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.hint.container.clone())
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.device_code_group)
|
||||
.aligned()
|
||||
.boxed()
|
||||
}
|
||||
|
||||
fn render_not_authorized_warning(style: &theme::Copilot) -> ElementBox {
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"You must have an active copilot",
|
||||
style.auth.warning.text.to_owned(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
Label::new(
|
||||
"license to use it in Zed.",
|
||||
style.auth.warning.text.to_owned(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.warning.container)
|
||||
.boxed(),
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"Try connecting again once you",
|
||||
style.auth.hint.text.to_owned(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
Label::new(
|
||||
"have activated a Copilot license.",
|
||||
style.auth.hint.text.to_owned(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.not_authorized_hint)
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.boxed()
|
||||
}
|
||||
|
||||
fn render_copilot_enabled(style: &theme::Copilot) -> ElementBox {
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"You can update your settings or",
|
||||
style.auth.hint.text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
Label::new(
|
||||
"sign out from the Copilot menu in",
|
||||
style.auth.hint.text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
Label::new("the status bar.", style.auth.hint.text.clone())
|
||||
Label::new(
|
||||
if copied { "Copied!" } else { "Copy" },
|
||||
device_code_style.cta.style_for(state, false).text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.contained()
|
||||
.with_style(*device_code_style.right_container.style_for(state, false))
|
||||
.constrained()
|
||||
.with_width(device_code_style.right)
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.enabled_hint)
|
||||
.boxed()
|
||||
])
|
||||
.contained()
|
||||
.with_style(device_code_style.cta.style_for(state, false).container)
|
||||
.boxed()
|
||||
})
|
||||
.on_click(gpui::MouseButton::Left, {
|
||||
let user_code = data.user_code.clone();
|
||||
move |_, cx| {
|
||||
cx.platform()
|
||||
.write_to_clipboard(ClipboardItem::new(user_code.clone()));
|
||||
cx.notify();
|
||||
}
|
||||
})
|
||||
.with_cursor_style(gpui::CursorStyle::PointingHand)
|
||||
.boxed()
|
||||
}
|
||||
|
||||
fn render_prompting_modal(
|
||||
|
|
@ -291,171 +191,172 @@ impl CopilotCodeVerification {
|
|||
style: &theme::Copilot,
|
||||
cx: &mut gpui::RenderContext<Self>,
|
||||
) -> ElementBox {
|
||||
theme::ui::modal("Connect Copilot to Zed", &style.modal, cx, |cx| {
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Flex::row()
|
||||
.with_children([
|
||||
theme::ui::svg(&style.auth.copilot_plus_zed_icon).boxed()
|
||||
])
|
||||
.boxed(),
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"Enable Copilot by connecting",
|
||||
style.auth.enable_text.clone(),
|
||||
)
|
||||
.boxed(),
|
||||
Label::new(
|
||||
"your existing license.",
|
||||
style.auth.enable_text.clone(),
|
||||
)
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.enable_group.clone())
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.header_group)
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"Enable Copilot by connecting",
|
||||
style.auth.prompting.subheading.text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
Self::render_device_code(data, &style, cx),
|
||||
Flex::column()
|
||||
.with_child(theme::ui::cta_button_with_click(
|
||||
"Connect to GitHub",
|
||||
style.auth.content_width,
|
||||
&style.auth.cta_button,
|
||||
cx,
|
||||
{
|
||||
let verification_uri = data.verification_uri.clone();
|
||||
move |_, cx| cx.platform().open_url(&verification_uri)
|
||||
},
|
||||
))
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.github_group)
|
||||
Label::new(
|
||||
"your existing license.",
|
||||
style.auth.prompting.subheading.text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.constrained()
|
||||
.with_width(style.auth.content_width)
|
||||
.aligned()
|
||||
.boxed()
|
||||
})
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.prompting.subheading.container)
|
||||
.boxed(),
|
||||
Self::render_device_code(data, &style, cx),
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"Paste this code into GitHub after",
|
||||
style.auth.prompting.hint.text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
Label::new(
|
||||
"clicking the button below.",
|
||||
style.auth.prompting.hint.text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.prompting.hint.container.clone())
|
||||
.boxed(),
|
||||
theme::ui::cta_button_with_click(
|
||||
"Connect to GitHub",
|
||||
style.auth.content_width,
|
||||
&style.auth.cta_button,
|
||||
cx,
|
||||
{
|
||||
let verification_uri = data.verification_uri.clone();
|
||||
move |_, cx| cx.platform().open_url(&verification_uri)
|
||||
},
|
||||
)
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.boxed()
|
||||
}
|
||||
fn render_enabled_modal(
|
||||
style: &theme::Copilot,
|
||||
cx: &mut gpui::RenderContext<Self>,
|
||||
) -> ElementBox {
|
||||
theme::ui::modal("Connect Copilot to Zed", &style.modal, cx, |cx| {
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Flex::row()
|
||||
.with_children([
|
||||
theme::ui::svg(&style.auth.copilot_plus_zed_icon).boxed()
|
||||
])
|
||||
.boxed(),
|
||||
Label::new("Copilot Enabled!", style.auth.enable_text.clone()).boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.header_group)
|
||||
let enabled_style = &style.auth.authorized;
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new("Copilot Enabled!", enabled_style.subheading.text.clone())
|
||||
.contained()
|
||||
.with_style(enabled_style.subheading.container)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"You can update your settings or",
|
||||
enabled_style.hint.text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
Self::render_copilot_enabled(&style),
|
||||
Flex::column()
|
||||
.with_child(theme::ui::cta_button_with_click(
|
||||
"Close",
|
||||
style.auth.content_width,
|
||||
&style.auth.cta_button,
|
||||
cx,
|
||||
|_, cx| {
|
||||
let window_id = cx.window_id();
|
||||
cx.remove_window(window_id)
|
||||
},
|
||||
))
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.github_group)
|
||||
Label::new(
|
||||
"sign out from the Copilot menu in",
|
||||
enabled_style.hint.text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.constrained()
|
||||
.with_width(style.auth.content_width)
|
||||
.aligned()
|
||||
.boxed()
|
||||
})
|
||||
Label::new("the status bar.", enabled_style.hint.text.clone())
|
||||
.aligned()
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(enabled_style.hint.container)
|
||||
.boxed(),
|
||||
theme::ui::cta_button_with_click(
|
||||
"Done",
|
||||
style.auth.content_width,
|
||||
&style.auth.cta_button,
|
||||
cx,
|
||||
|_, cx| {
|
||||
let window_id = cx.window_id();
|
||||
cx.remove_window(window_id)
|
||||
},
|
||||
)
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.boxed()
|
||||
}
|
||||
fn render_unauthorized_modal(
|
||||
style: &theme::Copilot,
|
||||
cx: &mut gpui::RenderContext<Self>,
|
||||
) -> ElementBox {
|
||||
theme::ui::modal("Connect Copilot to Zed", &style.modal, cx, |cx| {
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Flex::row()
|
||||
.with_children([
|
||||
theme::ui::svg(&style.auth.copilot_plus_zed_icon).boxed()
|
||||
])
|
||||
.boxed(),
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"Enable Copilot by connecting",
|
||||
style.auth.enable_text.clone(),
|
||||
)
|
||||
.boxed(),
|
||||
Label::new(
|
||||
"your existing license.",
|
||||
style.auth.enable_text.clone(),
|
||||
)
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.enable_group.clone())
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.header_group)
|
||||
let unauthorized_style = &style.auth.not_authorized;
|
||||
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"Enable Copilot by connecting",
|
||||
unauthorized_style.subheading.text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
Self::render_not_authorized_warning(&style),
|
||||
Flex::column()
|
||||
.with_child(theme::ui::cta_button_with_click(
|
||||
"Close",
|
||||
style.auth.content_width,
|
||||
&style.auth.cta_button,
|
||||
cx,
|
||||
|_, cx| {
|
||||
let window_id = cx.window_id();
|
||||
cx.remove_window(window_id)
|
||||
},
|
||||
))
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(style.auth.github_group)
|
||||
Label::new(
|
||||
"your existing license.",
|
||||
unauthorized_style.subheading.text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.constrained()
|
||||
.with_width(style.auth.content_width)
|
||||
.aligned()
|
||||
.boxed()
|
||||
})
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(unauthorized_style.subheading.container)
|
||||
.boxed(),
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Label::new(
|
||||
"You must have an active copilot",
|
||||
unauthorized_style.warning.text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
Label::new(
|
||||
"license to use it in Zed.",
|
||||
unauthorized_style.warning.text.clone(),
|
||||
)
|
||||
.aligned()
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.contained()
|
||||
.with_style(unauthorized_style.warning.container)
|
||||
.boxed(),
|
||||
theme::ui::cta_button_with_click(
|
||||
"Subscribe on GitHub",
|
||||
style.auth.content_width,
|
||||
&style.auth.cta_button,
|
||||
cx,
|
||||
|_, cx| {
|
||||
let window_id = cx.window_id();
|
||||
cx.remove_window(window_id);
|
||||
cx.platform().open_url(COPILOT_SIGN_UP_URL)
|
||||
},
|
||||
)
|
||||
.boxed(),
|
||||
])
|
||||
.align_children_center()
|
||||
.boxed()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -478,13 +379,22 @@ impl View for CopilotCodeVerification {
|
|||
|
||||
fn render(&mut self, cx: &mut gpui::RenderContext<'_, Self>) -> gpui::ElementBox {
|
||||
let style = cx.global::<Settings>().theme.clone();
|
||||
match &self.status {
|
||||
Status::SigningIn {
|
||||
prompt: Some(prompt),
|
||||
} => Self::render_prompting_modal(&prompt, &style.copilot, cx),
|
||||
Status::Unauthorized => Self::render_unauthorized_modal(&style.copilot, cx),
|
||||
Status::Authorized => Self::render_enabled_modal(&style.copilot, cx),
|
||||
_ => Empty::new().boxed(),
|
||||
}
|
||||
|
||||
modal("Connect Copilot to Zed", &style.copilot.modal, cx, |cx| {
|
||||
Flex::column()
|
||||
.with_children([
|
||||
theme::ui::icon(&style.copilot.auth.header).boxed(),
|
||||
match &self.status {
|
||||
Status::SigningIn {
|
||||
prompt: Some(prompt),
|
||||
} => Self::render_prompting_modal(&prompt, &style.copilot, cx),
|
||||
Status::Unauthorized => Self::render_unauthorized_modal(&style.copilot, cx),
|
||||
Status::Authorized => Self::render_enabled_modal(&style.copilot, cx),
|
||||
_ => Empty::new().boxed(),
|
||||
},
|
||||
])
|
||||
.align_children_center()
|
||||
.boxed()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -126,28 +126,43 @@ pub struct Copilot {
|
|||
|
||||
#[derive(Deserialize, Default, Clone)]
|
||||
pub struct CopilotAuth {
|
||||
pub enable_group: ContainerStyle,
|
||||
pub enable_text: TextStyle,
|
||||
pub instruction_text: TextStyle,
|
||||
pub cta_button: ButtonStyle,
|
||||
pub content_width: f32,
|
||||
pub copilot_plus_zed_icon: SvgStyle,
|
||||
pub device_code_group: ContainerStyle,
|
||||
pub github_group: ContainerStyle,
|
||||
pub header_group: ContainerStyle,
|
||||
pub device_code: TextStyle,
|
||||
pub device_code_cta: ButtonStyle,
|
||||
pub device_code_left: f32,
|
||||
pub device_code_left_container: ContainerStyle,
|
||||
pub device_code_right: f32,
|
||||
pub device_code_right_container: ContainerStyle,
|
||||
pub device_code_seperator_height: f32,
|
||||
pub prompting: CopilotAuthPrompting,
|
||||
pub not_authorized: CopilotAuthNotAuthorized,
|
||||
pub authorized: CopilotAuthAuthorized,
|
||||
pub cta_button: ButtonStyle,
|
||||
pub header: IconStyle,
|
||||
}
|
||||
|
||||
#[derive(Deserialize, Default, Clone)]
|
||||
pub struct CopilotAuthPrompting {
|
||||
pub subheading: ContainedText,
|
||||
pub hint: ContainedText,
|
||||
pub enabled_hint: ContainerStyle,
|
||||
pub not_authorized_hint: ContainerStyle,
|
||||
pub device_code: DeviceCode,
|
||||
}
|
||||
|
||||
#[derive(Deserialize, Default, Clone)]
|
||||
pub struct DeviceCode {
|
||||
pub text: TextStyle,
|
||||
pub cta: ButtonStyle,
|
||||
pub left: f32,
|
||||
pub left_container: ContainerStyle,
|
||||
pub right: f32,
|
||||
pub right_container: Interactive<ContainerStyle>,
|
||||
}
|
||||
|
||||
#[derive(Deserialize, Default, Clone)]
|
||||
pub struct CopilotAuthNotAuthorized {
|
||||
pub subheading: ContainedText,
|
||||
pub warning: ContainedText,
|
||||
}
|
||||
|
||||
#[derive(Deserialize, Default, Clone)]
|
||||
pub struct CopilotAuthAuthorized {
|
||||
pub subheading: ContainedText,
|
||||
pub hint: ContainedText,
|
||||
}
|
||||
|
||||
#[derive(Deserialize, Default)]
|
||||
pub struct ContactsPopover {
|
||||
#[serde(flatten)]
|
||||
|
|
|
|||
|
|
@ -186,6 +186,7 @@ where
|
|||
cta_button_with_click(label, max_width, style, cx, move |_, cx| {
|
||||
cx.dispatch_action(action.clone())
|
||||
})
|
||||
.boxed()
|
||||
}
|
||||
|
||||
pub fn cta_button_with_click<L, V, F>(
|
||||
|
|
@ -194,7 +195,7 @@ pub fn cta_button_with_click<L, V, F>(
|
|||
style: &ButtonStyle,
|
||||
cx: &mut RenderContext<V>,
|
||||
f: F,
|
||||
) -> ElementBox
|
||||
) -> MouseEventHandler<F>
|
||||
where
|
||||
L: Into<Cow<'static, str>>,
|
||||
V: View,
|
||||
|
|
@ -212,7 +213,6 @@ where
|
|||
})
|
||||
.on_click(MouseButton::Left, f)
|
||||
.with_cursor_style(gpui::CursorStyle::PointingHand)
|
||||
.boxed()
|
||||
}
|
||||
|
||||
#[derive(Clone, Deserialize, Default)]
|
||||
|
|
@ -241,7 +241,8 @@ where
|
|||
I: Into<Cow<'static, str>>,
|
||||
F: FnOnce(&mut gpui::RenderContext<V>) -> ElementBox,
|
||||
{
|
||||
let active = cx.window_is_active(cx.window_id());
|
||||
const TITLEBAR_HEIGHT: f32 = 28.;
|
||||
// let active = cx.window_is_active(cx.window_id());
|
||||
|
||||
Flex::column()
|
||||
.with_child(
|
||||
|
|
@ -251,13 +252,13 @@ where
|
|||
title,
|
||||
style
|
||||
.title_text
|
||||
.style_for(&mut MouseState::default(), active)
|
||||
.style_for(&mut MouseState::default(), false)
|
||||
.clone(),
|
||||
)
|
||||
.boxed(),
|
||||
// FIXME: Get a better tag type
|
||||
MouseEventHandler::<V>::new(999999, cx, |state, _cx| {
|
||||
let style = style.close_icon.style_for(state, active);
|
||||
let style = style.close_icon.style_for(state, false);
|
||||
icon(style).boxed()
|
||||
})
|
||||
.on_click(gpui::MouseButton::Left, move |_, cx| {
|
||||
|
|
@ -271,11 +272,18 @@ where
|
|||
])
|
||||
.contained()
|
||||
.with_style(style.titlebar)
|
||||
.constrained()
|
||||
.with_height(TITLEBAR_HEIGHT)
|
||||
.boxed(),
|
||||
)
|
||||
.with_child(
|
||||
Container::new(build_modal(cx))
|
||||
.with_style(style.container)
|
||||
.constrained()
|
||||
.with_width(style.dimensions().x())
|
||||
.with_height(style.dimensions().y() - TITLEBAR_HEIGHT)
|
||||
.boxed(),
|
||||
)
|
||||
.with_child(build_modal(cx))
|
||||
.contained()
|
||||
.with_style(style.container)
|
||||
.constrained()
|
||||
.with_height(style.dimensions().y())
|
||||
.boxed()
|
||||
|
|
|
|||
|
|
@ -3,17 +3,19 @@ import { background, border, foreground, svg, text } from "./components";
|
|||
|
||||
|
||||
export default function copilot(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.highest;
|
||||
let layer = colorScheme.middle;
|
||||
|
||||
let content_width = 304;
|
||||
let content_width = 264;
|
||||
|
||||
let ctaButton = { // Copied from welcome screen. FIXME: Move this into a ZDS component
|
||||
background: background(layer),
|
||||
border: border(layer, "active"),
|
||||
border: border(layer, "default"),
|
||||
cornerRadius: 4,
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
|
|
@ -42,155 +44,183 @@ export default function copilot(colorScheme: ColorScheme) {
|
|||
},
|
||||
modal: {
|
||||
titleText: {
|
||||
...text(layer, "sans", { size: "md", color: background(layer, "default") }),
|
||||
active: {
|
||||
...text(layer, "sans", { size: "md" }),
|
||||
}
|
||||
...text(layer, "sans", { size: "xs", "weight": "bold" })
|
||||
},
|
||||
titlebar: {
|
||||
background: background(colorScheme.lowest),
|
||||
border: border(layer, "active"),
|
||||
padding: {
|
||||
top: 8,
|
||||
bottom: 8,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
margin: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 16
|
||||
}
|
||||
},
|
||||
container: {
|
||||
background: background(colorScheme.highest),
|
||||
|
||||
background: background(colorScheme.lowest),
|
||||
padding: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 8,
|
||||
}
|
||||
},
|
||||
closeIcon: {
|
||||
icon: svg(background(layer, "on"), "icons/x_mark_16.svg", 16, 16),
|
||||
icon: svg(foreground(layer, "variant"), "icons/x_mark_8.svg", 8, 8),
|
||||
container: {
|
||||
cornerRadius: 2,
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 0,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
margin: {
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
active: {
|
||||
icon: svg(foreground(colorScheme.lowest, "warning"), "icons/x_mark_16.svg", 16, 16),
|
||||
hover: {
|
||||
icon: svg(foreground(layer, "on"), "icons/x_mark_8.svg", 8, 8),
|
||||
},
|
||||
hoverAndActive: {
|
||||
icon: svg(foreground(layer, "on", "hovered"), "icons/x_mark_16.svg", 16, 16),
|
||||
},
|
||||
clickedAndactive: {
|
||||
icon: svg(foreground(layer, "on", "pressed"), "icons/x_mark_16.svg", 16, 16),
|
||||
clicked: {
|
||||
icon: svg(foreground(layer, "base"), "icons/x_mark_8.svg", 8, 8),
|
||||
}
|
||||
},
|
||||
dimensions: {
|
||||
width: 400,
|
||||
height: 500,
|
||||
width: 280,
|
||||
height: 280,
|
||||
},
|
||||
},
|
||||
|
||||
auth: {
|
||||
content_width,
|
||||
|
||||
headerGroup: {
|
||||
margin: {
|
||||
top: 5,
|
||||
bottom: 5,
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
copilotPlusZedIcon: svg(foreground(layer, "default"), "icons/zed_plus_copilot_32.svg", 32, 92),
|
||||
enableText: text(layer, "sans", { size: "md" }),
|
||||
enableGroup: {
|
||||
margin: {
|
||||
top: 5,
|
||||
bottom: 5,
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
ctaButton,
|
||||
|
||||
instructionText: text(layer, "sans"),
|
||||
|
||||
deviceCodeGroup: {
|
||||
margin: {
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
deviceCode:
|
||||
text(layer, "mono", { size: "md" }),
|
||||
deviceCodeCta: {
|
||||
...ctaButton,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
header: {
|
||||
icon: svg(foreground(layer, "default"), "icons/zed_plus_copilot_32.svg", 92, 32),
|
||||
container: {
|
||||
margin: {
|
||||
top: 35,
|
||||
bottom: 5,
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
deviceCodeLeft: content_width * 2 / 3,
|
||||
deviceCodeLeftContainer: {
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 0,
|
||||
right: 0,
|
||||
|
||||
prompting: {
|
||||
subheading: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: {
|
||||
top: 6,
|
||||
bottom: 12,
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
|
||||
hint: {
|
||||
...text(layer, "sans", { size: "xs", color: "#838994" }),
|
||||
margin: {
|
||||
top: 6,
|
||||
bottom: 2
|
||||
}
|
||||
},
|
||||
|
||||
deviceCode: {
|
||||
text:
|
||||
text(layer, "mono", { size: "sm" }),
|
||||
cta: {
|
||||
...ctaButton,
|
||||
background: background(colorScheme.lowest),
|
||||
border: border(colorScheme.lowest, "inverted"),
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 16,
|
||||
right: 16,
|
||||
},
|
||||
margin: {
|
||||
left: 16,
|
||||
right: 16,
|
||||
}
|
||||
},
|
||||
left: content_width / 2,
|
||||
leftContainer: {
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 0,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
right: content_width * 1 / 3,
|
||||
rightContainer: {
|
||||
border: border(colorScheme.lowest, "inverted", { bottom: false, right: false, top: false, left: true }),
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 5,
|
||||
left: 8,
|
||||
right: 0,
|
||||
},
|
||||
hover: {
|
||||
border: border(layer, "active", { bottom: false, right: false, top: false, left: true }),
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
deviceCodeRight: content_width * 1 / 3,
|
||||
deviceCodeRightContainer: {
|
||||
border: border(layer, "active", { bottom: false, right: false, top: false, left: true }),
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 5,
|
||||
left: 0,
|
||||
right: 0,
|
||||
|
||||
notAuthorized: {
|
||||
subheading: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
|
||||
margin: {
|
||||
top: 16,
|
||||
bottom: 16,
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
|
||||
warning: {
|
||||
...text(layer, "sans", { size: "xs", color: foreground(layer, "warning") }),
|
||||
border: border(layer, "warning"),
|
||||
background: background(layer, "warning"),
|
||||
cornerRadius: 2,
|
||||
padding: {
|
||||
top: 4,
|
||||
left: 4,
|
||||
bottom: 4,
|
||||
right: 4,
|
||||
},
|
||||
margin: {
|
||||
bottom: 16,
|
||||
left: 8,
|
||||
right: 8
|
||||
}
|
||||
},
|
||||
},
|
||||
deviceCodeSeperatorHeight: 0,
|
||||
hint: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
margin: {
|
||||
top: -5,
|
||||
}
|
||||
},
|
||||
enabledHint: {
|
||||
margin: {
|
||||
top: 10,
|
||||
bottom: 10
|
||||
}
|
||||
},
|
||||
notAuthorizedHint: {
|
||||
margin: {
|
||||
top: 10,
|
||||
bottom: 10
|
||||
}
|
||||
},
|
||||
|
||||
warning: {
|
||||
...text(layer, "sans", { size: "md", color: foreground(layer, "warning") }),
|
||||
border: border(layer, "warning"),
|
||||
background_color: background(layer, "warning"),
|
||||
cornerRadius: 2,
|
||||
},
|
||||
authorized: {
|
||||
subheading: {
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
|
||||
githubGroup: {
|
||||
margin: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
margin: {
|
||||
top: 16,
|
||||
bottom: 16
|
||||
}
|
||||
},
|
||||
|
||||
ctaButton
|
||||
hint: {
|
||||
...text(layer, "sans", { size: "xs", color: "#838994" }),
|
||||
margin: {
|
||||
top: 24,
|
||||
bottom: 4
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue