T10a feedback: toasts with undo and a hover-held clock, notifications and their center, alert, banner, callout, inline and status messages, empty state; root focus scopes take lost focus
This commit is contained in:
19 files changed
+1966
-16
No files matched your search
@@ -0,0 +1,360 @@
|
||||
use std::rc::Rc;
|
||||
|
||||
use gpui::{
|
||||
Animation, AnimationExt, AnyElement, App, ElementId, FontWeight, IntoElement, ParentElement,
|
||||
RenderOnce, SharedString, Styled, Window, div, prelude::*,
|
||||
};
|
||||
use smallvec::SmallVec;
|
||||
|
||||
use crate::{
|
||||
buttons::{Button, ButtonVariant, IconButton},
|
||||
forms::Run,
|
||||
motion,
|
||||
primitives::{Icon, IconName, Severity},
|
||||
theme::{ActiveTheme, ControlSize, IconSize, Radius, TextSize},
|
||||
};
|
||||
|
||||
/// A ghost close button that keeps its row's height.
|
||||
fn dismiss(id: ElementId, run: Run) -> impl IntoElement {
|
||||
div().my_neg_1().child(
|
||||
IconButton::new(id, IconName::X)
|
||||
.variant(ButtonVariant::Ghost)
|
||||
.size(ControlSize::Sm)
|
||||
.on_click(move |_, window, cx| run(window, cx)),
|
||||
)
|
||||
}
|
||||
|
||||
/// A message in a page's flow: the severity's icon on its tint, a title, a line, actions and a close button.
|
||||
#[derive(IntoElement)]
|
||||
pub struct Alert {
|
||||
id: ElementId,
|
||||
severity: Severity,
|
||||
title: SharedString,
|
||||
body: Option<SharedString>,
|
||||
actions: SmallVec<[AnyElement; 2]>,
|
||||
on_dismiss: Option<Run>,
|
||||
}
|
||||
|
||||
impl Alert {
|
||||
pub fn new(
|
||||
id: impl Into<ElementId>,
|
||||
severity: Severity,
|
||||
title: impl Into<SharedString>,
|
||||
) -> Self {
|
||||
Self {
|
||||
id: id.into(),
|
||||
severity,
|
||||
title: title.into(),
|
||||
body: None,
|
||||
actions: SmallVec::new(),
|
||||
on_dismiss: None,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn body(mut self, text: impl Into<SharedString>) -> Self {
|
||||
self.body = Some(text.into());
|
||||
self
|
||||
}
|
||||
|
||||
pub fn action(mut self, action: impl IntoElement) -> Self {
|
||||
self.actions.push(action.into_any_element());
|
||||
self
|
||||
}
|
||||
|
||||
pub fn on_dismiss(mut self, handler: impl Fn(&mut Window, &mut App) + 'static) -> Self {
|
||||
self.on_dismiss = Some(Rc::new(handler));
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for Alert {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let colors = &theme.colors;
|
||||
let close = (self.id.clone(), "dismiss");
|
||||
div()
|
||||
.id(self.id)
|
||||
.flex()
|
||||
.items_start()
|
||||
.gap_3()
|
||||
.p_3()
|
||||
.rounded(theme.radius(Radius::Lg))
|
||||
.bg(self.severity.subtle(colors))
|
||||
.text_size(theme.text_size(TextSize::Base))
|
||||
.child(
|
||||
div().mt_0p5().child(
|
||||
Icon::new(self.severity.icon())
|
||||
.size(IconSize::Md)
|
||||
.color(self.severity.color(colors)),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.flex_1()
|
||||
.min_w_0()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_1()
|
||||
.child(
|
||||
div()
|
||||
.font_weight(FontWeight::MEDIUM)
|
||||
.text_color(colors.fg)
|
||||
.child(self.title),
|
||||
)
|
||||
.when_some(self.body, |text, body| {
|
||||
text.child(div().text_color(colors.fg_muted).child(body))
|
||||
})
|
||||
.when(!self.actions.is_empty(), |text| {
|
||||
text.child(div().flex().gap_2().pt_1().children(self.actions))
|
||||
}),
|
||||
)
|
||||
.when_some(self.on_dismiss, |alert, run| {
|
||||
alert.child(dismiss(close.into(), run))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/// A strip across the top of a window or page: an icon, one line, a link and a close button.
|
||||
#[derive(IntoElement)]
|
||||
pub struct Banner {
|
||||
id: ElementId,
|
||||
severity: Severity,
|
||||
message: SharedString,
|
||||
action: Option<(SharedString, Run)>,
|
||||
on_dismiss: Option<Run>,
|
||||
}
|
||||
|
||||
impl Banner {
|
||||
pub fn new(
|
||||
id: impl Into<ElementId>,
|
||||
severity: Severity,
|
||||
message: impl Into<SharedString>,
|
||||
) -> Self {
|
||||
Self {
|
||||
id: id.into(),
|
||||
severity,
|
||||
message: message.into(),
|
||||
action: None,
|
||||
on_dismiss: None,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn action(
|
||||
mut self,
|
||||
label: impl Into<SharedString>,
|
||||
handler: impl Fn(&mut Window, &mut App) + 'static,
|
||||
) -> Self {
|
||||
self.action = Some((label.into(), Rc::new(handler)));
|
||||
self
|
||||
}
|
||||
|
||||
pub fn on_dismiss(mut self, handler: impl Fn(&mut Window, &mut App) + 'static) -> Self {
|
||||
self.on_dismiss = Some(Rc::new(handler));
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for Banner {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let colors = &theme.colors;
|
||||
let (link, close) = ((self.id.clone(), "action"), (self.id.clone(), "dismiss"));
|
||||
div()
|
||||
.id(self.id)
|
||||
.relative()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.gap_2()
|
||||
.w_full()
|
||||
.min_h(theme.control_height(ControlSize::Lg))
|
||||
.py_1()
|
||||
.px_10()
|
||||
.bg(self.severity.subtle(colors))
|
||||
.border_b_1()
|
||||
.border_color(colors.border)
|
||||
.text_size(theme.text_size(TextSize::Base))
|
||||
.text_color(colors.fg)
|
||||
.child(
|
||||
Icon::new(self.severity.icon())
|
||||
.size(IconSize::Sm)
|
||||
.color(self.severity.color(colors)),
|
||||
)
|
||||
.child(self.message)
|
||||
.when_some(self.action, |banner, (label, run)| {
|
||||
banner.child(
|
||||
Button::new(link, label)
|
||||
.variant(ButtonVariant::Link)
|
||||
.on_click(move |_, window, cx| run(window, cx)),
|
||||
)
|
||||
})
|
||||
.when_some(self.on_dismiss, |banner, run| {
|
||||
banner.child(
|
||||
div()
|
||||
.absolute()
|
||||
.right_1()
|
||||
.top_0()
|
||||
.bottom_0()
|
||||
.flex()
|
||||
.items_center()
|
||||
.child(dismiss(close.into(), run)),
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/// A note set apart in reading: a rule in the severity's color, a labeled icon, then the text.
|
||||
#[derive(IntoElement)]
|
||||
pub struct Callout {
|
||||
severity: Severity,
|
||||
title: SharedString,
|
||||
body: SmallVec<[AnyElement; 2]>,
|
||||
}
|
||||
|
||||
impl Callout {
|
||||
/// Titled Note, Tip, Warning or Danger until `title` says otherwise.
|
||||
pub fn new(severity: Severity) -> Self {
|
||||
let title = match severity {
|
||||
Severity::Info => "Note",
|
||||
Severity::Success => "Tip",
|
||||
Severity::Warning => "Warning",
|
||||
Severity::Danger => "Danger",
|
||||
};
|
||||
Self {
|
||||
severity,
|
||||
title: title.into(),
|
||||
body: SmallVec::new(),
|
||||
}
|
||||
}
|
||||
|
||||
pub fn title(mut self, title: impl Into<SharedString>) -> Self {
|
||||
self.title = title.into();
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl ParentElement for Callout {
|
||||
fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
|
||||
self.body.extend(elements);
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for Callout {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let colors = &theme.colors;
|
||||
let tone = self.severity.color(colors);
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_1()
|
||||
.py_1()
|
||||
.pl_4()
|
||||
.border_l_2()
|
||||
.border_color(tone)
|
||||
.text_size(theme.text_size(TextSize::Base))
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_2()
|
||||
.font_weight(FontWeight::MEDIUM)
|
||||
.text_color(tone)
|
||||
.child(
|
||||
Icon::new(self.severity.icon())
|
||||
.size(IconSize::Sm)
|
||||
.color(tone),
|
||||
)
|
||||
.child(self.title),
|
||||
)
|
||||
.child(div().text_color(colors.fg).children(self.body))
|
||||
}
|
||||
}
|
||||
|
||||
/// One line beside what it is about, in the severity's color.
|
||||
#[derive(IntoElement)]
|
||||
pub struct InlineMessage {
|
||||
severity: Severity,
|
||||
text: SharedString,
|
||||
}
|
||||
|
||||
impl InlineMessage {
|
||||
pub fn new(severity: Severity, text: impl Into<SharedString>) -> Self {
|
||||
Self {
|
||||
severity,
|
||||
text: text.into(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for InlineMessage {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let tone = self.severity.color(&theme.colors);
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.text_size(theme.text_size(TextSize::Sm))
|
||||
.text_color(tone)
|
||||
.child(
|
||||
Icon::new(self.severity.icon())
|
||||
.size(IconSize::Xs)
|
||||
.color(tone),
|
||||
)
|
||||
.child(self.text)
|
||||
}
|
||||
}
|
||||
|
||||
/// A line that says what just happened. Each new message rises in; the first stays still.
|
||||
#[derive(IntoElement)]
|
||||
pub struct StatusMessage {
|
||||
id: ElementId,
|
||||
text: SharedString,
|
||||
icon: Option<IconName>,
|
||||
}
|
||||
|
||||
impl StatusMessage {
|
||||
pub fn new(id: impl Into<ElementId>, text: impl Into<SharedString>) -> Self {
|
||||
Self {
|
||||
id: id.into(),
|
||||
text: text.into(),
|
||||
icon: None,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon(mut self, icon: IconName) -> Self {
|
||||
self.icon = Some(icon);
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for StatusMessage {
|
||||
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let turn = motion::changes((self.id.clone(), "text"), self.text.clone(), window, cx);
|
||||
let theme = cx.theme();
|
||||
let muted = theme.colors.fg_muted;
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1p5()
|
||||
.text_size(theme.text_size(TextSize::Sm))
|
||||
.text_color(muted)
|
||||
.when_some(self.icon, |line, icon| {
|
||||
line.child(Icon::new(icon).size(IconSize::Xs).color(muted))
|
||||
})
|
||||
.child(self.text)
|
||||
.with_animation(
|
||||
(self.id, format!("turn-{turn}")),
|
||||
Animation::new(motion::duration(motion::BASE, cx))
|
||||
.with_easing(motion::ease_out_cubic),
|
||||
move |line, t| {
|
||||
if turn == 0 {
|
||||
line
|
||||
} else {
|
||||
line.opacity(t).mt(motion::NUDGE * (1.0 - t))
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user