From b80d3a95b1147b26cf42bb1a8df3c3d28166738f Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Thu, 3 Jul 2025 11:13:39 +0800 Subject: [PATCH] badge: Add `icon` variant to Badge. (#1029) image --- Cargo.lock | 256 +++----------------------------- crates/story/src/badge_story.rs | 123 +++++++++------ crates/ui/src/badge.rs | 81 +++++++++- 3 files changed, 170 insertions(+), 290 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 23fc9f9e..44ddf818 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -724,7 +724,7 @@ dependencies = [ "bitflags 2.9.1", "cexpr", "clang-sys", - "itertools 0.10.5", + "itertools 0.11.0", "lazy_static", "lazycell", "log", @@ -747,7 +747,7 @@ dependencies = [ "bitflags 2.9.1", "cexpr", "clang-sys", - "itertools 0.10.5", + "itertools 0.11.0", "log", "prettyplease", "proc-macro2", @@ -812,7 +812,7 @@ dependencies = [ [[package]] name = "blade-graphics" version = "0.6.0" -source = "git+https://github.com/kvark/blade?rev=e0ec4e720957edd51b945b64dd85605ea54bcfe5#e0ec4e720957edd51b945b64dd85605ea54bcfe5" +source = "git+https://github.com/kvark/blade?rev=416375211bb0b5826b3584dccdb6a43369e499ad#416375211bb0b5826b3584dccdb6a43369e499ad" dependencies = [ "ash", "ash-window", @@ -845,7 +845,7 @@ dependencies = [ [[package]] name = "blade-macros" version = "0.3.0" -source = "git+https://github.com/kvark/blade?rev=e0ec4e720957edd51b945b64dd85605ea54bcfe5#e0ec4e720957edd51b945b64dd85605ea54bcfe5" +source = "git+https://github.com/kvark/blade?rev=416375211bb0b5826b3584dccdb6a43369e499ad#416375211bb0b5826b3584dccdb6a43369e499ad" dependencies = [ "proc-macro2", "quote", @@ -855,7 +855,7 @@ dependencies = [ [[package]] name = "blade-util" version = "0.2.0" -source = "git+https://github.com/kvark/blade?rev=e0ec4e720957edd51b945b64dd85605ea54bcfe5#e0ec4e720957edd51b945b64dd85605ea54bcfe5" +source = "git+https://github.com/kvark/blade?rev=416375211bb0b5826b3584dccdb6a43369e499ad#416375211bb0b5826b3584dccdb6a43369e499ad" dependencies = [ "blade-graphics", "bytemuck", @@ -1417,7 +1417,7 @@ dependencies = [ [[package]] name = "collections" version = "0.1.0" -source = "git+https://github.com/zed-industries/zed.git#faca128304dd175b9b9441572bb7b827e380c0cf" +source = "git+https://github.com/zed-industries/zed.git#6cd4dbdea11bd124241fd6de106535ac8e73df55" dependencies = [ "indexmap 2.9.0", "rustc-hash 2.1.0", @@ -1595,19 +1595,6 @@ dependencies = [ "libc", ] -[[package]] -name = "core-graphics-helmer-fork" -version = "0.24.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "32eb7c354ae9f6d437a6039099ce7ecd049337a8109b23d73e48e8ffba8e9cd5" -dependencies = [ - "bitflags 2.9.1", - "core-foundation 0.9.4", - "core-graphics-types 0.1.3", - "foreign-types 0.5.0", - "libc", -] - [[package]] name = "core-graphics-types" version = "0.1.3" @@ -1850,16 +1837,6 @@ version = "0.0.5" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "4f211af61d8efdd104f96e57adf5e426ba1bc3ed7a4ead616e15e5881fd79c4d" -[[package]] -name = "ctrlc" -version = "3.4.6" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "697b5419f348fd5ae2478e8018cb016c00a5881c7f46c717de98ffd135a5651c" -dependencies = [ - "nix 0.29.0", - "windows-sys 0.59.0", -] - [[package]] name = "cursor-icon" version = "1.2.0" @@ -1975,7 +1952,7 @@ dependencies = [ [[package]] name = "derive_refineable" version = "0.1.0" -source = "git+https://github.com/zed-industries/zed.git#faca128304dd175b9b9441572bb7b827e380c0cf" +source = "git+https://github.com/zed-industries/zed.git#6cd4dbdea11bd124241fd6de106535ac8e73df55" dependencies = [ "proc-macro2", "quote", @@ -3121,7 +3098,7 @@ dependencies = [ [[package]] name = "gpui" version = "0.1.0" -source = "git+https://github.com/zed-industries/zed.git#faca128304dd175b9b9441572bb7b827e380c0cf" +source = "git+https://github.com/zed-industries/zed.git#6cd4dbdea11bd124241fd6de106535ac8e73df55" dependencies = [ "anyhow", "as-raw-xcb-connection", @@ -3177,7 +3154,6 @@ dependencies = [ "raw-window-handle", "refineable", "resvg", - "scap", "schemars", "seahash", "semantic_version", @@ -3304,7 +3280,7 @@ dependencies = [ [[package]] name = "gpui_macros" version = "0.1.0" -source = "git+https://github.com/zed-industries/zed.git#faca128304dd175b9b9441572bb7b827e380c0cf" +source = "git+https://github.com/zed-industries/zed.git#6cd4dbdea11bd124241fd6de106535ac8e73df55" dependencies = [ "heck 0.5.0", "proc-macro2", @@ -3574,7 +3550,7 @@ dependencies = [ [[package]] name = "http_client" version = "0.1.0" -source = "git+https://github.com/zed-industries/zed.git#faca128304dd175b9b9441572bb7b827e380c0cf" +source = "git+https://github.com/zed-industries/zed.git#6cd4dbdea11bd124241fd6de106535ac8e73df55" dependencies = [ "anyhow", "bytes", @@ -3591,7 +3567,7 @@ dependencies = [ [[package]] name = "http_client_tls" version = "0.1.0" -source = "git+https://github.com/zed-industries/zed.git#faca128304dd175b9b9441572bb7b827e380c0cf" +source = "git+https://github.com/zed-industries/zed.git#6cd4dbdea11bd124241fd6de106535ac8e73df55" dependencies = [ "rustls", "rustls-platform-verifier", @@ -4417,7 +4393,7 @@ dependencies = [ [[package]] name = "media" version = "0.1.0" -source = "git+https://github.com/zed-industries/zed.git#faca128304dd175b9b9441572bb7b827e380c0cf" +source = "git+https://github.com/zed-industries/zed.git#6cd4dbdea11bd124241fd6de106535ac8e73df55" dependencies = [ "anyhow", "bindgen 0.71.1", @@ -4701,15 +4677,6 @@ dependencies = [ "windows-sys 0.59.0", ] -[[package]] -name = "ntapi" -version = "0.4.1" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "e8a3895c6391c39d7fe7ebc444a87eb2991b2a0bc718fdabd071eec617fc68e4" -dependencies = [ - "winapi", -] - [[package]] name = "nu-ansi-term" version = "0.46.0" @@ -4873,18 +4840,6 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "915b1b472bc21c53464d6c8461c9d3af805ba1ef837e1cac254428f4a77177b1" dependencies = [ "malloc_buf", - "objc_exception", -] - -[[package]] -name = "objc-foundation" -version = "0.1.1" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "1add1b659e36c9607c7aab864a76c7a4c2760cd0cd2e120f3fb8b952c7e22bf9" -dependencies = [ - "block", - "objc", - "objc_id", ] [[package]] @@ -5188,24 +5143,6 @@ dependencies = [ "objc2-foundation 0.2.2", ] -[[package]] -name = "objc_exception" -version = "0.1.2" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "ad970fb455818ad6cba4c122ad012fae53ae8b4795f86378bce65e4f6bab2ca4" -dependencies = [ - "cc", -] - -[[package]] -name = "objc_id" -version = "0.1.1" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "c92d4ddb4bd7b50d730c215ff871754d0da6b2178849f8a2a2ab69712d0c073b" -dependencies = [ - "objc", -] - [[package]] name = "object" version = "0.36.7" @@ -5970,15 +5907,6 @@ version = "2.0.1" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "a993555f31e5a609f617c12db6250dedcac1b0a85076912c436e6fc9b2c8e6a3" -[[package]] -name = "quick-xml" -version = "0.30.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "eff6510e86862b57b210fd8cbe8ed3f0d7d600b9c2863cd4549a2e033c66e956" -dependencies = [ - "memchr", -] - [[package]] name = "quick-xml" version = "0.32.0" @@ -6342,7 +6270,7 @@ dependencies = [ [[package]] name = "refineable" version = "0.1.0" -source = "git+https://github.com/zed-industries/zed.git#faca128304dd175b9b9441572bb7b827e380c0cf" +source = "git+https://github.com/zed-industries/zed.git#6cd4dbdea11bd124241fd6de106535ac8e73df55" dependencies = [ "derive_refineable", "workspace-hack", @@ -6497,7 +6425,7 @@ dependencies = [ [[package]] name = "reqwest_client" version = "0.1.0" -source = "git+https://github.com/zed-industries/zed.git#faca128304dd175b9b9441572bb7b827e380c0cf" +source = "git+https://github.com/zed-industries/zed.git#6cd4dbdea11bd124241fd6de106535ac8e73df55" dependencies = [ "anyhow", "bytes", @@ -6898,27 +6826,6 @@ dependencies = [ "winapi-util", ] -[[package]] -name = "scap" -version = "0.0.8" -source = "git+https://github.com/zed-industries/scap?rev=08f0a01417505cc0990b9931a37e5120db92e0d0#08f0a01417505cc0990b9931a37e5120db92e0d0" -dependencies = [ - "anyhow", - "cocoa 0.25.0", - "core-graphics-helmer-fork", - "log", - "objc", - "rand 0.8.5", - "screencapturekit", - "screencapturekit-sys", - "sysinfo", - "tao-core-video-sys", - "windows 0.61.1", - "windows-capture", - "x11", - "xcb", -] - [[package]] name = "schannel" version = "0.1.27" @@ -6966,29 +6873,6 @@ version = "1.2.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49" -[[package]] -name = "screencapturekit" -version = "0.2.8" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "1a5eeeb57ac94960cfe5ff4c402be6585ae4c8d29a2cf41b276048c2e849d64e" -dependencies = [ - "screencapturekit-sys", -] - -[[package]] -name = "screencapturekit-sys" -version = "0.2.8" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "22411b57f7d49e7fe08025198813ee6fd65e1ee5eff4ebc7880c12c82bde4c60" -dependencies = [ - "block", - "dispatch", - "objc", - "objc-foundation", - "objc_id", - "once_cell", -] - [[package]] name = "sctk-adwaita" version = "0.10.1" @@ -7073,7 +6957,7 @@ checksum = "d369a96f978623eb3dc28807c4852d6cc617fed53da5d3c400feff1ef34a714a" [[package]] name = "semantic_version" version = "0.1.0" -source = "git+https://github.com/zed-industries/zed.git#faca128304dd175b9b9441572bb7b827e380c0cf" +source = "git+https://github.com/zed-industries/zed.git#6cd4dbdea11bd124241fd6de106535ac8e73df55" dependencies = [ "anyhow", "serde", @@ -7655,7 +7539,7 @@ checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292" [[package]] name = "sum_tree" version = "0.1.0" -source = "git+https://github.com/zed-industries/zed.git#faca128304dd175b9b9441572bb7b827e380c0cf" +source = "git+https://github.com/zed-industries/zed.git#6cd4dbdea11bd124241fd6de106535ac8e73df55" dependencies = [ "arrayvec", "log", @@ -7808,20 +7692,6 @@ dependencies = [ "libc", ] -[[package]] -name = "sysinfo" -version = "0.31.4" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "355dbe4f8799b304b05e1b0f05fc59b2a18d36645cf169607da45bde2f69a1be" -dependencies = [ - "core-foundation-sys", - "libc", - "memchr", - "ntapi", - "rayon", - "windows 0.57.0", -] - [[package]] name = "system-configuration" version = "0.6.1" @@ -7875,18 +7745,6 @@ version = "0.2.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "8bdb6fa0dfa67b38c1e66b7041ba9dcf23b99d8121907cd31c807a332f7a0bbb" -[[package]] -name = "tao-core-video-sys" -version = "0.2.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "271450eb289cb4d8d0720c6ce70c72c8c858c93dd61fc625881616752e6b98f6" -dependencies = [ - "cfg-if", - "core-foundation-sys", - "libc", - "objc", -] - [[package]] name = "tao-macros" version = "0.1.3" @@ -8883,7 +8741,7 @@ checksum = "06abde3611657adf66d383f00b093d7faecc7fa57071cce2578660c9f1010821" [[package]] name = "util" version = "0.1.0" -source = "git+https://github.com/zed-industries/zed.git#faca128304dd175b9b9441572bb7b827e380c0cf" +source = "git+https://github.com/zed-industries/zed.git#6cd4dbdea11bd124241fd6de106535ac8e73df55" dependencies = [ "anyhow", "async-fs 2.1.2", @@ -9486,16 +9344,6 @@ version = "0.4.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f" -[[package]] -name = "windows" -version = "0.57.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "12342cb4d8e3b046f3d80effd474a7a02447231330ef77d71daa6fbc40681143" -dependencies = [ - "windows-core 0.57.0", - "windows-targets 0.52.6", -] - [[package]] name = "windows" version = "0.58.0" @@ -9519,21 +9367,6 @@ dependencies = [ "windows-numerics", ] -[[package]] -name = "windows-capture" -version = "1.4.3" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "59d10b4be8b907c7055bc7270dd68d2b920978ffacc1599dcb563a79f0e68d16" -dependencies = [ - "clap", - "ctrlc", - "parking_lot", - "rayon", - "thiserror 2.0.12", - "windows 0.61.1", - "windows-future", -] - [[package]] name = "windows-collections" version = "0.2.0" @@ -9552,18 +9385,6 @@ dependencies = [ "windows-targets 0.52.6", ] -[[package]] -name = "windows-core" -version = "0.57.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "d2ed2439a290666cd67ecce2b0ffaad89c2a56b976b736e6ece670297897832d" -dependencies = [ - "windows-implement 0.57.0", - "windows-interface 0.57.0", - "windows-result 0.1.2", - "windows-targets 0.52.6", -] - [[package]] name = "windows-core" version = "0.58.0" @@ -9600,17 +9421,6 @@ dependencies = [ "windows-link", ] -[[package]] -name = "windows-implement" -version = "0.57.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "9107ddc059d5b6fbfbffdfa7a7fe3e22a226def0b2608f72e9d552763d3e1ad7" -dependencies = [ - "proc-macro2", - "quote", - "syn 2.0.101", -] - [[package]] name = "windows-implement" version = "0.58.0" @@ -9633,17 +9443,6 @@ dependencies = [ "syn 2.0.101", ] -[[package]] -name = "windows-interface" -version = "0.57.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "29bee4b38ea3cde66011baa44dba677c432a78593e202392d1e9070cf2a7fca7" -dependencies = [ - "proc-macro2", - "quote", - "syn 2.0.101", -] - [[package]] name = "windows-interface" version = "0.58.0" @@ -9704,15 +9503,6 @@ dependencies = [ "windows-strings 0.4.0", ] -[[package]] -name = "windows-result" -version = "0.1.2" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "5e383302e8ec8515204254685643de10811af0ed97ea37210dc26fb0032647f8" -dependencies = [ - "windows-targets 0.52.6", -] - [[package]] name = "windows-result" version = "0.2.0" @@ -10273,18 +10063,6 @@ dependencies = [ "rustix 1.0.7", ] -[[package]] -name = "xcb" -version = "1.5.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "f1e2f212bb1a92cd8caac8051b829a6582ede155ccb60b5d5908b81b100952be" -dependencies = [ - "bitflags 1.3.2", - "libc", - "quick-xml 0.30.0", - "x11", -] - [[package]] name = "xcursor" version = "0.3.8" diff --git a/crates/story/src/badge_story.rs b/crates/story/src/badge_story.rs index 56b14402..1e11a46c 100644 --- a/crates/story/src/badge_story.rs +++ b/crates/story/src/badge_story.rs @@ -1,10 +1,10 @@ use gpui::{ - img, App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, - Render, Styled, Window, + App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Render, + Styled, Window, }; use gpui_component::{ - badge::Badge, blue_500, dock::PanelControl, v_flex, yellow_500, ActiveTheme, Icon, IconName, - Sizable as _, + avatar::Avatar, badge::Badge, blue_500, dock::PanelControl, green_500, red_500, sky_500, + v_flex, yellow_500, Icon, IconName, Sizable as _, }; use crate::section; @@ -50,11 +50,11 @@ impl Focusable for BadgeStory { } impl Render for BadgeStory { - fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement { + fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement { v_flex() .gap_4() .child( - section("Badge on Icon") + section("Badge on icon") .max_w_md() .child( Badge::new() @@ -68,57 +68,94 @@ impl Render for BadgeStory { ), ) .child( - section("Badge on Avatar") + section("Badge with count") .max_w_md() - .child( - Badge::new().count(3).child( - img("https://avatars.githubusercontent.com/u/5518?v=4") - .size_10() - .border_1() - .border_color(cx.theme().border) - .rounded_full(), - ), - ) - .child( - Badge::new().count(103).child( - img("https://avatars.githubusercontent.com/u/28998859?v=4") - .size_10() - .border_1() - .border_color(cx.theme().border) - .rounded_full(), - ), - ), + .child(Badge::new().count(3).child( + Avatar::new().src("https://avatars.githubusercontent.com/u/5518?v=4"), + )) + .child(Badge::new().count(103).child( + Avatar::new().src("https://avatars.githubusercontent.com/u/28998859?v=4"), + )), + ) + .child( + section("Badge with icon") + .max_w_md() + .child(Badge::new().icon(IconName::Check).color(sky_500()).child( + Avatar::new().src("https://avatars.githubusercontent.com/u/5518?v=4"), + )) + .child(Badge::new().icon(IconName::Star).color(yellow_500()).child( + Avatar::new().src("https://avatars.githubusercontent.com/u/20092316?v=4"), + )), ) .child( section("Badge with dot").max_w_md().child( Badge::new().dot().count(1).child( - img("https://avatars.githubusercontent.com/u/5518?v=4") - .size_10() - .border_1() - .border_color(cx.theme().border) - .rounded_full(), + Avatar::new().src("https://avatars.githubusercontent.com/u/5518?v=4"), ), ), ) .child( - section("Badge with Color") + section("Badge with color") + .max_w_md() + .child(Badge::new().count(3).color(blue_500()).child( + Avatar::new().src("https://avatars.githubusercontent.com/u/5518?v=4"), + )) + .child(Badge::new().dot().color(green_500()).count(1).child( + Avatar::new().src("https://avatars.githubusercontent.com/u/5518?v=4"), + )), + ) + .child( + section("Complex use") .max_w_md() .child( - Badge::new().count(3).color(blue_500()).child( - img("https://avatars.githubusercontent.com/u/5518?v=4") - .size_10() - .border_1() - .border_color(cx.theme().border) - .rounded_full(), + Badge::new().count(212).large().child( + Badge::new() + .icon(IconName::Check) + .large() + .color(sky_500()) + .child( + Avatar::new() + .large() + .src("https://avatars.githubusercontent.com/u/5518?v=4"), + ), ), ) .child( - Badge::new().dot().color(yellow_500()).count(1).child( - img("https://avatars.githubusercontent.com/u/5518?v=4") - .size_10() - .border_1() - .border_color(cx.theme().border) - .rounded_full(), + Badge::new().count(2).color(green_500()).large().child( + Badge::new() + .icon(IconName::Star) + .large() + .color(yellow_500()) + .child( + Avatar::new().large().src( + "https://avatars.githubusercontent.com/u/20092316?v=4", + ), + ), + ), + ) + .child( + Badge::new().count(3).color(green_500()).child( + Badge::new() + .icon(IconName::Asterisk) + .color(green_500()) + .child( + Avatar::new().src( + "https://avatars.githubusercontent.com/u/22312482?v=4", + ), + ), + ), + ) + .child( + Badge::new().dot().child( + Badge::new() + .icon(IconName::Sun) + .small() + .color(red_500()) + .child( + Avatar::new().small().src( + "https://avatars.githubusercontent.com/u/150917089?v=4", + ), + ), ), ), ) diff --git a/crates/ui/src/badge.rs b/crates/ui/src/badge.rs index e100e436..5ed83b4c 100644 --- a/crates/ui/src/badge.rs +++ b/crates/ui/src/badge.rs @@ -3,15 +3,30 @@ use gpui::{ RenderOnce, StyleRefinement, Styled, Window, }; -use crate::{h_flex, red_500, white, StyledExt}; +use crate::{h_flex, red_500, white, ActiveTheme, Icon, Sizable, Size, StyledExt}; -#[derive(Default)] +#[derive(Default, Clone)] enum BadgeVariant { - Dot, #[default] Number, + Dot, + Icon(Box), } +#[allow(unused)] +impl BadgeVariant { + #[inline] + fn is_icon(&self) -> bool { + matches!(self, BadgeVariant::Icon(_)) + } + + #[inline] + fn is_number(&self) -> bool { + matches!(self, BadgeVariant::Number) + } +} + +/// A badge for displaying a count, dot, or icon on an element. #[derive(IntoElement)] pub struct Badge { style: StyleRefinement, @@ -20,9 +35,11 @@ pub struct Badge { variant: BadgeVariant, children: Vec, color: Hsla, + size: Size, } impl Badge { + /// Create a new badge. pub fn new() -> Self { Self { style: StyleRefinement::default(), @@ -31,24 +48,37 @@ impl Badge { variant: Default::default(), color: red_500(), children: Vec::new(), + size: Size::default(), } } + /// Set to use [`BadgeVariant::Dot`] to show a dot. pub fn dot(mut self) -> Self { self.variant = BadgeVariant::Dot; self } + /// Set to use [`BadgeVariant::Number`] to show a count. + /// + /// If count is 0, the badge will be hidden. pub fn count(mut self, count: usize) -> Self { self.count = count; self } + /// Set to use [`BadgeVariant::Icon`] to show an icon. + pub fn icon(mut self, icon: impl Into) -> Self { + self.variant = BadgeVariant::Icon(Box::new(icon.into())); + self + } + + /// Set the maximum count to show (Only if [`BadgeVariant::Number`] is used). pub fn max(mut self, max: usize) -> Self { self.max = max; self } + /// Set the color (background) of the badge. pub fn color(mut self, color: impl Into) -> Self { self.color = color.into(); self @@ -61,19 +91,40 @@ impl ParentElement for Badge { } } +impl Sizable for Badge { + fn with_size(mut self, size: impl Into) -> Self { + self.size = size.into(); + self + } +} + impl RenderOnce for Badge { - fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement { + fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement { + let visible = match self.variant { + BadgeVariant::Number => self.count > 0, + BadgeVariant::Dot | BadgeVariant::Icon(_) => true, + }; + + let (size, text_size) = match self.size { + Size::Large => (px(24.), px(14.)), + Size::Medium | Size::Size(_) => (px(16.), px(10.)), + Size::Small | Size::XSmall => (px(10.), px(8.)), + }; + div() .relative() .refine_style(&self.style) .children(self.children) - .when(self.count > 0, |this| { + .when(visible, |this| { this.child( h_flex() .absolute() .justify_center() + .items_center() .rounded_full() .bg(self.color) + .text_color(white()) + .text_size(text_size) .map(|this| match self.variant { BadgeVariant::Dot => this.top_0().right_0().size(px(6.)), BadgeVariant::Number => { @@ -83,16 +134,30 @@ impl RenderOnce for Badge { self.count.to_string() }; - this.top(px(-3.)) - .right(-px(3. * count.len() as f32)) + let (top, left) = match self.size { + Size::Large => (px(2.), -px(count.len() as f32)), + Size::Medium | Size::Size(_) => { + (-px(3.), -px(3.) * count.len()) + } + Size::Small | Size::XSmall => (-px(4.), -px(4.) * count.len()), + }; + + this.top(top) + .right(left) .py_0p5() .px_0p5() .min_w_3p5() - .text_color(white()) .text_size(px(10.)) .line_height(relative(1.)) .child(count) } + BadgeVariant::Icon(icon) => this + .right_0() + .bottom_0() + .size(size) + .border_1() + .border_color(cx.theme().background) + .child(*icon), }), ) })