T12a Data Display: badges, tags, avatars, statistics (review pending: codex 401)
This commit is contained in:
24 files changed
+1434
-83
No files matched your search
@@ -0,0 +1,304 @@
|
||||
use gpui::{
|
||||
AnyElement, App, ElementId, FontWeight, Hsla, ImageSource, IntoElement, ObjectFit,
|
||||
ParentElement, RenderOnce, SharedString, Styled, Window, div, prelude::*,
|
||||
};
|
||||
|
||||
use crate::{
|
||||
primitives::{Icon, IconName, Image},
|
||||
theme::{ActiveTheme, AvatarSize, IconSize, Palette, Radius, TextSize},
|
||||
};
|
||||
|
||||
/// Whether someone is around.
|
||||
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
|
||||
pub enum Presence {
|
||||
Online,
|
||||
Away,
|
||||
Busy,
|
||||
Offline,
|
||||
}
|
||||
|
||||
impl Presence {
|
||||
fn color(self, colors: &Palette) -> Hsla {
|
||||
match self {
|
||||
Self::Online => colors.success,
|
||||
Self::Away => colors.warning,
|
||||
Self::Busy => colors.danger,
|
||||
Self::Offline => colors.fg_subtle,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Up to two capitals from a name's first and last words.
|
||||
pub(crate) fn initials(name: &str) -> String {
|
||||
let words: Vec<&str> = name.split_whitespace().collect();
|
||||
let first = |word: &str| word.chars().next().into_iter().flat_map(char::to_uppercase);
|
||||
match words.as_slice() {
|
||||
[] => String::new(),
|
||||
[only] => first(only).collect(),
|
||||
[head, .., tail] => first(head).chain(first(tail)).collect(),
|
||||
}
|
||||
}
|
||||
|
||||
/// The chart color a name keeps, so the same person reads the same way everywhere.
|
||||
fn tint(name: &str, colors: &Palette) -> Hsla {
|
||||
let hash = name.bytes().fold(0u32, |hash, byte| {
|
||||
hash.wrapping_mul(31).wrapping_add(u32::from(byte))
|
||||
});
|
||||
colors.chart[hash as usize % colors.chart.len()]
|
||||
}
|
||||
|
||||
/// A person or a team at a glance: their picture, or their initials on a tone kept by the name, or an icon. A presence dot can sit on the corner; squares suit teams.
|
||||
#[derive(IntoElement)]
|
||||
pub struct Avatar {
|
||||
id: ElementId,
|
||||
name: SharedString,
|
||||
image: Option<ImageSource>,
|
||||
icon: Option<IconName>,
|
||||
size: AvatarSize,
|
||||
square: bool,
|
||||
ring: bool,
|
||||
presence: Option<Presence>,
|
||||
}
|
||||
|
||||
impl Avatar {
|
||||
/// The name gives the initials and the tone when there is no picture.
|
||||
pub fn new(id: impl Into<ElementId>, name: impl Into<SharedString>) -> Self {
|
||||
Self {
|
||||
id: id.into(),
|
||||
name: name.into(),
|
||||
image: None,
|
||||
icon: None,
|
||||
size: AvatarSize::default(),
|
||||
square: false,
|
||||
ring: false,
|
||||
presence: None,
|
||||
}
|
||||
}
|
||||
|
||||
/// A square picture: gpui clips pictures to rectangles, so a cropped one keeps square corners.
|
||||
pub fn image(mut self, source: impl Into<ImageSource>) -> Self {
|
||||
self.image = Some(source.into());
|
||||
self
|
||||
}
|
||||
|
||||
/// Shown instead of initials, for a bot or a place.
|
||||
pub fn icon(mut self, icon: IconName) -> Self {
|
||||
self.icon = Some(icon);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn size(mut self, size: AvatarSize) -> Self {
|
||||
self.size = size;
|
||||
self
|
||||
}
|
||||
|
||||
/// A rounded square, as teams and apps take.
|
||||
pub fn square(mut self) -> Self {
|
||||
self.square = true;
|
||||
self
|
||||
}
|
||||
|
||||
/// A ring in the page color, so avatars that overlap stay apart.
|
||||
pub fn ring(mut self) -> Self {
|
||||
self.ring = true;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn presence(mut self, presence: Presence) -> Self {
|
||||
self.presence = Some(presence);
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for Avatar {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let colors = &theme.colors;
|
||||
let side = theme.avatar_size(self.size);
|
||||
let rounded = |element: gpui::Div| {
|
||||
if self.square {
|
||||
element.rounded(theme.radius(Radius::Md))
|
||||
} else {
|
||||
element.rounded_full()
|
||||
}
|
||||
};
|
||||
let tone = tint(&self.name, colors);
|
||||
let text = match self.size {
|
||||
AvatarSize::Xs | AvatarSize::Sm => TextSize::Xs,
|
||||
AvatarSize::Md => TextSize::Sm,
|
||||
AvatarSize::Lg => TextSize::Md,
|
||||
AvatarSize::Xl => TextSize::Lg,
|
||||
};
|
||||
let face: AnyElement = match (self.image, self.icon) {
|
||||
(Some(source), _) => {
|
||||
let mut picture = Image::new((self.id.clone(), "picture"), source)
|
||||
.fit(ObjectFit::Cover)
|
||||
.size_full();
|
||||
picture = if self.square {
|
||||
picture.rounded(theme.radius(Radius::Md))
|
||||
} else {
|
||||
picture.rounded_full()
|
||||
};
|
||||
picture.into_any_element()
|
||||
}
|
||||
(None, Some(icon)) => Icon::new(icon)
|
||||
.size(IconSize::Md)
|
||||
.color(colors.fg_muted)
|
||||
.into_any_element(),
|
||||
(None, None) => initials(&self.name).into_any_element(),
|
||||
};
|
||||
let dot = self.presence.map(|presence| {
|
||||
div()
|
||||
.absolute()
|
||||
.right_0()
|
||||
.bottom_0()
|
||||
.size(side * 0.28)
|
||||
.rounded_full()
|
||||
.border_2()
|
||||
.border_color(colors.bg)
|
||||
.bg(presence.color(colors))
|
||||
});
|
||||
div()
|
||||
.relative()
|
||||
.flex_none()
|
||||
.size(side)
|
||||
.child(
|
||||
rounded(div())
|
||||
.size_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.bg(tone.opacity(0.16))
|
||||
.text_color(tone)
|
||||
.text_size(theme.text_size(text))
|
||||
.font_weight(FontWeight::SEMIBOLD)
|
||||
.when(self.ring, |face| face.border_2().border_color(colors.bg))
|
||||
.child(face),
|
||||
)
|
||||
.children(dot)
|
||||
}
|
||||
}
|
||||
|
||||
/// People side by side, each tucked under the next, and a count of the rest.
|
||||
#[derive(IntoElement)]
|
||||
pub struct AvatarGroup {
|
||||
people: Vec<Avatar>,
|
||||
max: usize,
|
||||
size: AvatarSize,
|
||||
}
|
||||
|
||||
impl AvatarGroup {
|
||||
pub fn new(people: impl IntoIterator<Item = Avatar>) -> Self {
|
||||
Self {
|
||||
people: people.into_iter().collect(),
|
||||
max: 4,
|
||||
size: AvatarSize::default(),
|
||||
}
|
||||
}
|
||||
|
||||
/// How many show before the rest become +N.
|
||||
pub fn max(mut self, max: usize) -> Self {
|
||||
assert!(max > 0, "a group shows at least one avatar");
|
||||
self.max = max;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn size(mut self, size: AvatarSize) -> Self {
|
||||
self.size = size;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for AvatarGroup {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let rest = self.people.len().saturating_sub(self.max);
|
||||
let size = self.size;
|
||||
let tuck = |element: gpui::Div, first: bool| match (first, size) {
|
||||
(true, _) => element,
|
||||
(false, AvatarSize::Xs | AvatarSize::Sm) => element.ml_neg_1(),
|
||||
(false, AvatarSize::Md) => element.ml_neg_2(),
|
||||
(false, AvatarSize::Lg | AvatarSize::Xl) => element.ml_neg_3(),
|
||||
};
|
||||
let shown = self
|
||||
.people
|
||||
.into_iter()
|
||||
.take(self.max)
|
||||
.enumerate()
|
||||
.map(|(ix, person)| tuck(div(), ix == 0).child(person.size(size).ring()));
|
||||
let more = (rest > 0).then(|| {
|
||||
tuck(div(), false).child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.size(theme.avatar_size(size))
|
||||
.rounded_full()
|
||||
.border_2()
|
||||
.border_color(theme.colors.bg)
|
||||
.bg(theme.colors.hover)
|
||||
.text_size(theme.text_size(TextSize::Xs))
|
||||
.font_weight(FontWeight::MEDIUM)
|
||||
.text_color(theme.colors.fg_muted)
|
||||
.child(format!("+{rest}")),
|
||||
)
|
||||
});
|
||||
div().flex().items_center().children(shown).children(more)
|
||||
}
|
||||
}
|
||||
|
||||
/// Someone named in a line or a field: a small avatar and the name, in a pill.
|
||||
#[derive(IntoElement)]
|
||||
pub struct UserChip {
|
||||
avatar: Avatar,
|
||||
name: SharedString,
|
||||
}
|
||||
|
||||
impl UserChip {
|
||||
pub fn new(id: impl Into<ElementId>, name: impl Into<SharedString>) -> Self {
|
||||
let name = name.into();
|
||||
Self {
|
||||
avatar: Avatar::new(id, name.clone()).size(AvatarSize::Xs),
|
||||
name,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn image(mut self, source: impl Into<ImageSource>) -> Self {
|
||||
self.avatar = self.avatar.image(source);
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for UserChip {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
div()
|
||||
.flex()
|
||||
.flex_none()
|
||||
.items_center()
|
||||
.gap_1p5()
|
||||
.pl_0p5()
|
||||
.pr_2()
|
||||
.py_0p5()
|
||||
.rounded_full()
|
||||
.bg(theme.colors.hover)
|
||||
.text_size(theme.text_size(TextSize::Sm))
|
||||
.text_color(theme.colors.fg)
|
||||
.child(self.avatar)
|
||||
.child(self.name)
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::initials;
|
||||
|
||||
#[test]
|
||||
fn initials_take_the_first_and_last_words() {
|
||||
assert_eq!(initials("Ada Lovelace"), "AL");
|
||||
assert_eq!(initials("Grace Brewster Murray Hopper"), "GH");
|
||||
assert_eq!(initials("mia"), "M");
|
||||
assert_eq!(initials(" "), "");
|
||||
assert_eq!(initials("élodie durand"), "ÉD");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,342 @@
|
||||
use std::rc::Rc;
|
||||
|
||||
use gpui::{
|
||||
AnyElement, App, ElementId, FontWeight, Hsla, InteractiveElement, IntoElement, MouseButton,
|
||||
ParentElement, RenderOnce, SharedString, StatefulInteractiveElement, Styled, Window, div,
|
||||
prelude::*,
|
||||
};
|
||||
|
||||
use crate::{
|
||||
primitives::{Icon, IconName, Severity},
|
||||
theme::{ActiveTheme, ControlSize, IconSize, Palette, Radius, TextSize},
|
||||
typography::AnimatedNumber,
|
||||
};
|
||||
|
||||
/// How a badge or a tag is tinted: quiet, the accent, or a severity.
|
||||
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
|
||||
pub enum Tone {
|
||||
#[default]
|
||||
Neutral,
|
||||
Accent,
|
||||
Info,
|
||||
Success,
|
||||
Warning,
|
||||
Danger,
|
||||
}
|
||||
|
||||
impl From<Severity> for Tone {
|
||||
fn from(severity: Severity) -> Self {
|
||||
match severity {
|
||||
Severity::Info => Self::Info,
|
||||
Severity::Success => Self::Success,
|
||||
Severity::Warning => Self::Warning,
|
||||
Severity::Danger => Self::Danger,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl Tone {
|
||||
/// The fill, then the text on it.
|
||||
fn colors(self, colors: &Palette) -> (Hsla, Hsla) {
|
||||
let severity = |severity: Severity| (severity.subtle(colors), severity.color(colors));
|
||||
match self {
|
||||
Self::Neutral => (colors.hover, colors.fg_muted),
|
||||
Self::Accent => (colors.accent, colors.on_accent),
|
||||
Self::Info => severity(Severity::Info),
|
||||
Self::Success => severity(Severity::Success),
|
||||
Self::Warning => severity(Severity::Warning),
|
||||
Self::Danger => severity(Severity::Danger),
|
||||
}
|
||||
}
|
||||
|
||||
/// The color a dot of this tone takes.
|
||||
fn dot(self, colors: &Palette) -> Hsla {
|
||||
match self {
|
||||
Self::Neutral => colors.fg_subtle,
|
||||
Self::Accent => colors.accent,
|
||||
other => other.colors(colors).1,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets `badge` on the top-right corner of `over`, just past its edge.
|
||||
fn corner(over: AnyElement, badge: impl IntoElement) -> AnyElement {
|
||||
div()
|
||||
.relative()
|
||||
.flex_none()
|
||||
.child(over)
|
||||
.child(div().absolute().top_neg_1().right_neg_1().child(badge))
|
||||
.into_any_element()
|
||||
}
|
||||
|
||||
/// A small label for a status or a kind, tinted by its tone, with a dot when it marks a state.
|
||||
#[derive(IntoElement)]
|
||||
pub struct Badge {
|
||||
label: SharedString,
|
||||
tone: Tone,
|
||||
dot: bool,
|
||||
}
|
||||
|
||||
impl Badge {
|
||||
pub fn new(label: impl Into<SharedString>) -> Self {
|
||||
Self {
|
||||
label: label.into(),
|
||||
tone: Tone::default(),
|
||||
dot: false,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn tone(mut self, tone: impl Into<Tone>) -> Self {
|
||||
self.tone = tone.into();
|
||||
self
|
||||
}
|
||||
|
||||
/// Leads with a dot of the tone's color, as a status does.
|
||||
pub fn dot(mut self) -> Self {
|
||||
self.dot = true;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for Badge {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let (fill, text) = self.tone.colors(&theme.colors);
|
||||
let dot = self.tone.dot(&theme.colors);
|
||||
div()
|
||||
.flex()
|
||||
.flex_none()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.px_1p5()
|
||||
.h(theme.control_height(ControlSize::Sm) * 0.75)
|
||||
.rounded(theme.radius(Radius::Sm))
|
||||
.bg(fill)
|
||||
.text_size(theme.text_size(TextSize::Xs))
|
||||
.font_weight(FontWeight::MEDIUM)
|
||||
.text_color(text)
|
||||
.when(self.dot, |badge| {
|
||||
badge.child(div().size(theme.status_dot()).rounded_full().bg(dot))
|
||||
})
|
||||
.child(self.label)
|
||||
}
|
||||
}
|
||||
|
||||
/// What a count badge reads past its cap, as 99+.
|
||||
fn capped(count: usize, max: usize) -> Option<String> {
|
||||
(count > max).then(|| format!("{max}+"))
|
||||
}
|
||||
|
||||
/// A number in a pill, for unread items or a queue. Its digits roll as it changes; past `max` it reads 99+. Zero hides it. Set `over` an icon or an avatar, it sits on the top-right corner.
|
||||
#[derive(IntoElement)]
|
||||
pub struct CountBadge {
|
||||
id: ElementId,
|
||||
count: usize,
|
||||
max: usize,
|
||||
over: Option<AnyElement>,
|
||||
}
|
||||
|
||||
impl CountBadge {
|
||||
pub fn new(id: impl Into<ElementId>, count: usize) -> Self {
|
||||
Self {
|
||||
id: id.into(),
|
||||
count,
|
||||
max: 99,
|
||||
over: None,
|
||||
}
|
||||
}
|
||||
|
||||
/// The largest count shown as is; above it reads `max+`.
|
||||
pub fn max(mut self, max: usize) -> Self {
|
||||
assert!(max > 0, "a count badge needs room for one");
|
||||
self.max = max;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn over(mut self, element: impl IntoElement) -> Self {
|
||||
self.over = Some(element.into_any_element());
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for CountBadge {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let (fill, text) = Tone::Accent.colors(&theme.colors);
|
||||
let height = theme.control_height(ControlSize::Sm) * 0.67;
|
||||
let pill = (self.count > 0).then(|| {
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.min_w(height)
|
||||
.h(height)
|
||||
.px_1()
|
||||
.rounded_full()
|
||||
.bg(fill)
|
||||
.text_color(text)
|
||||
.text_size(theme.text_size(TextSize::Xs))
|
||||
.font_weight(FontWeight::MEDIUM)
|
||||
.child(if let Some(capped) = capped(self.count, self.max) {
|
||||
capped.into_any_element()
|
||||
} else {
|
||||
AnimatedNumber::new(self.id, self.count as f64)
|
||||
.size(TextSize::Xs)
|
||||
.color(text)
|
||||
.into_any_element()
|
||||
})
|
||||
});
|
||||
match self.over {
|
||||
Some(over) => corner(over, div().children(pill)),
|
||||
None => div().children(pill).into_any_element(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// A small dot that says something is new or live. Set `over` an icon, it sits on the top-right corner.
|
||||
#[derive(IntoElement)]
|
||||
pub struct DotBadge {
|
||||
tone: Tone,
|
||||
over: Option<AnyElement>,
|
||||
}
|
||||
|
||||
impl DotBadge {
|
||||
pub fn new() -> Self {
|
||||
Self {
|
||||
tone: Tone::Accent,
|
||||
over: None,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn tone(mut self, tone: impl Into<Tone>) -> Self {
|
||||
self.tone = tone.into();
|
||||
self
|
||||
}
|
||||
|
||||
pub fn over(mut self, element: impl IntoElement) -> Self {
|
||||
self.over = Some(element.into_any_element());
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl Default for DotBadge {
|
||||
fn default() -> Self {
|
||||
Self::new()
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for DotBadge {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let dot = div()
|
||||
.size(theme.status_dot() * 1.34)
|
||||
.rounded_full()
|
||||
.border_1()
|
||||
.border_color(theme.colors.bg)
|
||||
.bg(self.tone.dot(&theme.colors));
|
||||
match self.over {
|
||||
Some(over) => corner(over, dot),
|
||||
None => dot.into_any_element(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
type OnRemove = Rc<dyn Fn(&mut Window, &mut App)>;
|
||||
|
||||
/// A short label for a kind, a topic or a filter: an optional icon, the label, and an x when it can be removed.
|
||||
#[derive(IntoElement)]
|
||||
pub struct Tag {
|
||||
id: ElementId,
|
||||
label: SharedString,
|
||||
icon: Option<IconName>,
|
||||
tone: Tone,
|
||||
on_remove: Option<OnRemove>,
|
||||
}
|
||||
|
||||
impl Tag {
|
||||
pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>) -> Self {
|
||||
Self {
|
||||
id: id.into(),
|
||||
label: label.into(),
|
||||
icon: None,
|
||||
tone: Tone::Neutral,
|
||||
on_remove: None,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon(mut self, icon: IconName) -> Self {
|
||||
self.icon = Some(icon);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn tone(mut self, tone: impl Into<Tone>) -> Self {
|
||||
self.tone = tone.into();
|
||||
self
|
||||
}
|
||||
|
||||
/// Adds an x that runs `handler`; the press stays out of focus.
|
||||
pub fn on_remove(mut self, handler: impl Fn(&mut Window, &mut App) + 'static) -> Self {
|
||||
self.on_remove = Some(Rc::new(handler));
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for Tag {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let colors = &theme.colors;
|
||||
let (fill, text) = match self.tone {
|
||||
Tone::Neutral => (colors.hover, colors.fg),
|
||||
other => other.colors(colors),
|
||||
};
|
||||
let remove = self.id.clone();
|
||||
div()
|
||||
.flex()
|
||||
.flex_none()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.pl_2()
|
||||
.when(self.on_remove.is_none(), |tag| tag.pr_2())
|
||||
.when(self.on_remove.is_some(), |tag| tag.pr_1())
|
||||
.h(theme.control_height(ControlSize::Sm))
|
||||
.rounded(theme.radius(Radius::Sm))
|
||||
.bg(fill)
|
||||
.text_size(theme.text_size(TextSize::Sm))
|
||||
.text_color(text)
|
||||
.when_some(self.icon, |tag, icon| {
|
||||
tag.child(Icon::new(icon).size(IconSize::Xs).color(text))
|
||||
})
|
||||
.child(self.label)
|
||||
.when_some(self.on_remove, |tag, remove_it| {
|
||||
tag.child(
|
||||
div()
|
||||
.id(remove)
|
||||
.rounded(theme.radius(Radius::Sm))
|
||||
.cursor_pointer()
|
||||
.hover(|style| style.bg(colors.active))
|
||||
.on_mouse_down(MouseButton::Left, |_, window, _| window.prevent_default())
|
||||
.on_click(move |_, window, cx| {
|
||||
cx.stop_propagation();
|
||||
remove_it(window, cx)
|
||||
})
|
||||
.child(
|
||||
Icon::new(IconName::X)
|
||||
.size(IconSize::Xs)
|
||||
.color(colors.fg_muted),
|
||||
),
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::capped;
|
||||
|
||||
#[test]
|
||||
fn a_count_past_its_cap_reads_the_cap_and_a_plus() {
|
||||
assert_eq!(capped(128, 99), Some("99+".to_string()));
|
||||
assert_eq!(capped(99, 99), None);
|
||||
assert_eq!(capped(10, 9), Some("9+".to_string()));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
mod avatar;
|
||||
mod badge;
|
||||
mod stat;
|
||||
|
||||
pub use avatar::{Avatar, AvatarGroup, Presence, UserChip};
|
||||
pub use badge::{Badge, CountBadge, DotBadge, Tag, Tone};
|
||||
pub use stat::{KpiCard, Statistic, TrendIndicator};
|
||||
@@ -0,0 +1,237 @@
|
||||
use gpui::{
|
||||
App, ElementId, FontWeight, IntoElement, ParentElement, RenderOnce, SharedString, Styled,
|
||||
Window, div, prelude::*,
|
||||
};
|
||||
|
||||
use crate::{
|
||||
primitives::{Icon, IconName},
|
||||
theme::{ActiveTheme, IconSize, Radius, TextSize},
|
||||
typography::{AnimatedNumber, format},
|
||||
};
|
||||
|
||||
/// Whether a move is good news; `None` when nothing moved.
|
||||
fn good(change: f64, down_is_good: bool) -> Option<bool> {
|
||||
(change != 0.0).then_some((change > 0.0) != down_is_good)
|
||||
}
|
||||
|
||||
/// Which way a figure moved, as a signed share, and whether down is the good way.
|
||||
#[derive(IntoElement, Clone, Copy)]
|
||||
pub struct TrendIndicator {
|
||||
change: f64,
|
||||
down_is_good: bool,
|
||||
}
|
||||
|
||||
impl TrendIndicator {
|
||||
/// `change` is a share: 0.124 reads +12.4%.
|
||||
pub fn new(change: f64) -> Self {
|
||||
assert!(
|
||||
change.is_finite(),
|
||||
"a trend needs a finite change, got {change}"
|
||||
);
|
||||
Self {
|
||||
change,
|
||||
down_is_good: false,
|
||||
}
|
||||
}
|
||||
|
||||
/// For costs and wait times, where falling is better.
|
||||
pub fn down_is_good(mut self) -> Self {
|
||||
self.down_is_good = true;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for TrendIndicator {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let colors = &cx.theme().colors;
|
||||
let icon = match self.change {
|
||||
change if change > 0.0 => IconName::TrendingUp,
|
||||
change if change < 0.0 => IconName::TrendingDown,
|
||||
_ => IconName::Minus,
|
||||
};
|
||||
let tone = match good(self.change, self.down_is_good) {
|
||||
None => colors.fg_muted,
|
||||
Some(true) => colors.success,
|
||||
Some(false) => colors.danger,
|
||||
};
|
||||
div()
|
||||
.flex()
|
||||
.flex_none()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.text_size(cx.theme().text_size(TextSize::Sm))
|
||||
.font_weight(FontWeight::MEDIUM)
|
||||
.text_color(tone)
|
||||
.child(Icon::new(icon).size(IconSize::Sm).color(tone))
|
||||
.child(format::percent(self.change, 1, true))
|
||||
}
|
||||
}
|
||||
|
||||
/// A figure that matters: its label, the number rolling to each new value, units around it, and how it moved.
|
||||
#[derive(IntoElement)]
|
||||
pub struct Statistic {
|
||||
id: ElementId,
|
||||
label: SharedString,
|
||||
value: f64,
|
||||
decimals: usize,
|
||||
prefix: Option<SharedString>,
|
||||
suffix: Option<SharedString>,
|
||||
trend: Option<TrendIndicator>,
|
||||
size: TextSize,
|
||||
}
|
||||
|
||||
impl Statistic {
|
||||
pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>, value: f64) -> Self {
|
||||
Self {
|
||||
id: id.into(),
|
||||
label: label.into(),
|
||||
value,
|
||||
decimals: 0,
|
||||
prefix: None,
|
||||
suffix: None,
|
||||
trend: None,
|
||||
size: TextSize::Xxl,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn decimals(mut self, decimals: usize) -> Self {
|
||||
self.decimals = decimals;
|
||||
self
|
||||
}
|
||||
|
||||
/// Before the number, as a currency sign.
|
||||
pub fn prefix(mut self, text: impl Into<SharedString>) -> Self {
|
||||
self.prefix = Some(text.into());
|
||||
self
|
||||
}
|
||||
|
||||
/// After the number, as a unit.
|
||||
pub fn suffix(mut self, text: impl Into<SharedString>) -> Self {
|
||||
self.suffix = Some(text.into());
|
||||
self
|
||||
}
|
||||
|
||||
pub fn trend(mut self, trend: TrendIndicator) -> Self {
|
||||
self.trend = Some(trend);
|
||||
self
|
||||
}
|
||||
|
||||
/// The number's size; a compact metric takes a smaller one.
|
||||
pub fn size(mut self, size: TextSize) -> Self {
|
||||
self.size = size;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for Statistic {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let unit = |text: SharedString| {
|
||||
div()
|
||||
.text_size(theme.text_size(TextSize::Md))
|
||||
.text_color(theme.colors.fg_muted)
|
||||
.child(text)
|
||||
};
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_1()
|
||||
.child(
|
||||
div()
|
||||
.text_size(theme.text_size(TextSize::Sm))
|
||||
.text_color(theme.colors.fg_muted)
|
||||
.child(self.label),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_baseline()
|
||||
.gap_1()
|
||||
.children(self.prefix.map(unit))
|
||||
.child(
|
||||
AnimatedNumber::new(self.id, self.value)
|
||||
.decimals(self.decimals)
|
||||
.size(self.size),
|
||||
)
|
||||
.children(self.suffix.map(unit)),
|
||||
)
|
||||
.children(self.trend)
|
||||
}
|
||||
}
|
||||
|
||||
/// A statistic on a quiet card, with an icon and a line of context.
|
||||
#[derive(IntoElement)]
|
||||
pub struct KpiCard {
|
||||
statistic: Statistic,
|
||||
icon: Option<IconName>,
|
||||
caption: Option<SharedString>,
|
||||
}
|
||||
|
||||
impl KpiCard {
|
||||
pub fn new(statistic: Statistic) -> Self {
|
||||
Self {
|
||||
statistic,
|
||||
icon: None,
|
||||
caption: None,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon(mut self, icon: IconName) -> Self {
|
||||
self.icon = Some(icon);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn caption(mut self, text: impl Into<SharedString>) -> Self {
|
||||
self.caption = Some(text.into());
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for KpiCard {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let theme = cx.theme();
|
||||
let colors = &theme.colors;
|
||||
div()
|
||||
.relative()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_3()
|
||||
.p_4()
|
||||
.rounded(theme.radius(Radius::Lg))
|
||||
.border_1()
|
||||
.border_color(colors.border)
|
||||
.bg(colors.surface)
|
||||
.when_some(self.icon, |card, icon| {
|
||||
card.child(
|
||||
div()
|
||||
.absolute()
|
||||
.top_4()
|
||||
.right_4()
|
||||
.child(Icon::new(icon).size(IconSize::Md).color(colors.fg_subtle)),
|
||||
)
|
||||
})
|
||||
.child(self.statistic)
|
||||
.when_some(self.caption, |card, caption| {
|
||||
card.child(
|
||||
div()
|
||||
.text_size(theme.text_size(TextSize::Xs))
|
||||
.text_color(colors.fg_subtle)
|
||||
.child(caption),
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::good;
|
||||
|
||||
#[test]
|
||||
fn a_trend_is_good_when_it_goes_the_right_way() {
|
||||
assert_eq!(good(0.12, false), Some(true));
|
||||
assert_eq!(good(-0.12, false), Some(false));
|
||||
assert_eq!(good(-0.08, true), Some(true));
|
||||
assert_eq!(good(0.08, true), Some(false));
|
||||
assert_eq!(good(0.0, true), None);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user