badge: Add icon variant to Badge. (#1029)

<img width="1248" alt="image"
src="https://github.com/user-attachments/assets/5d80a3d9-4d4e-4eea-89c9-cea9ab33be9e"
/>
This commit is contained in:
Jason Lee 2025-07-03 11:13:39 +08:00 committed by GitHub
parent 66a9b3e9df
commit b80d3a95b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 170 additions and 290 deletions

256
Cargo.lock generated
View file

@ -724,7 +724,7 @@ dependencies = [
"bitflags 2.9.1", "bitflags 2.9.1",
"cexpr", "cexpr",
"clang-sys", "clang-sys",
"itertools 0.10.5", "itertools 0.11.0",
"lazy_static", "lazy_static",
"lazycell", "lazycell",
"log", "log",
@ -747,7 +747,7 @@ dependencies = [
"bitflags 2.9.1", "bitflags 2.9.1",
"cexpr", "cexpr",
"clang-sys", "clang-sys",
"itertools 0.10.5", "itertools 0.11.0",
"log", "log",
"prettyplease", "prettyplease",
"proc-macro2", "proc-macro2",
@ -812,7 +812,7 @@ dependencies = [
[[package]] [[package]]
name = "blade-graphics" name = "blade-graphics"
version = "0.6.0" 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 = [ dependencies = [
"ash", "ash",
"ash-window", "ash-window",
@ -845,7 +845,7 @@ dependencies = [
[[package]] [[package]]
name = "blade-macros" name = "blade-macros"
version = "0.3.0" 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 = [ dependencies = [
"proc-macro2", "proc-macro2",
"quote", "quote",
@ -855,7 +855,7 @@ dependencies = [
[[package]] [[package]]
name = "blade-util" name = "blade-util"
version = "0.2.0" 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 = [ dependencies = [
"blade-graphics", "blade-graphics",
"bytemuck", "bytemuck",
@ -1417,7 +1417,7 @@ dependencies = [
[[package]] [[package]]
name = "collections" name = "collections"
version = "0.1.0" 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 = [ dependencies = [
"indexmap 2.9.0", "indexmap 2.9.0",
"rustc-hash 2.1.0", "rustc-hash 2.1.0",
@ -1595,19 +1595,6 @@ dependencies = [
"libc", "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]] [[package]]
name = "core-graphics-types" name = "core-graphics-types"
version = "0.1.3" version = "0.1.3"
@ -1850,16 +1837,6 @@ version = "0.0.5"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "4f211af61d8efdd104f96e57adf5e426ba1bc3ed7a4ead616e15e5881fd79c4d" 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]] [[package]]
name = "cursor-icon" name = "cursor-icon"
version = "1.2.0" version = "1.2.0"
@ -1975,7 +1952,7 @@ dependencies = [
[[package]] [[package]]
name = "derive_refineable" name = "derive_refineable"
version = "0.1.0" 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 = [ dependencies = [
"proc-macro2", "proc-macro2",
"quote", "quote",
@ -3121,7 +3098,7 @@ dependencies = [
[[package]] [[package]]
name = "gpui" name = "gpui"
version = "0.1.0" 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 = [ dependencies = [
"anyhow", "anyhow",
"as-raw-xcb-connection", "as-raw-xcb-connection",
@ -3177,7 +3154,6 @@ dependencies = [
"raw-window-handle", "raw-window-handle",
"refineable", "refineable",
"resvg", "resvg",
"scap",
"schemars", "schemars",
"seahash", "seahash",
"semantic_version", "semantic_version",
@ -3304,7 +3280,7 @@ dependencies = [
[[package]] [[package]]
name = "gpui_macros" name = "gpui_macros"
version = "0.1.0" 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 = [ dependencies = [
"heck 0.5.0", "heck 0.5.0",
"proc-macro2", "proc-macro2",
@ -3574,7 +3550,7 @@ dependencies = [
[[package]] [[package]]
name = "http_client" name = "http_client"
version = "0.1.0" 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 = [ dependencies = [
"anyhow", "anyhow",
"bytes", "bytes",
@ -3591,7 +3567,7 @@ dependencies = [
[[package]] [[package]]
name = "http_client_tls" name = "http_client_tls"
version = "0.1.0" 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 = [ dependencies = [
"rustls", "rustls",
"rustls-platform-verifier", "rustls-platform-verifier",
@ -4417,7 +4393,7 @@ dependencies = [
[[package]] [[package]]
name = "media" name = "media"
version = "0.1.0" 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 = [ dependencies = [
"anyhow", "anyhow",
"bindgen 0.71.1", "bindgen 0.71.1",
@ -4701,15 +4677,6 @@ dependencies = [
"windows-sys 0.59.0", "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]] [[package]]
name = "nu-ansi-term" name = "nu-ansi-term"
version = "0.46.0" version = "0.46.0"
@ -4873,18 +4840,6 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "915b1b472bc21c53464d6c8461c9d3af805ba1ef837e1cac254428f4a77177b1" checksum = "915b1b472bc21c53464d6c8461c9d3af805ba1ef837e1cac254428f4a77177b1"
dependencies = [ dependencies = [
"malloc_buf", "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]] [[package]]
@ -5188,24 +5143,6 @@ dependencies = [
"objc2-foundation 0.2.2", "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]] [[package]]
name = "object" name = "object"
version = "0.36.7" version = "0.36.7"
@ -5970,15 +5907,6 @@ version = "2.0.1"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a993555f31e5a609f617c12db6250dedcac1b0a85076912c436e6fc9b2c8e6a3" 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]] [[package]]
name = "quick-xml" name = "quick-xml"
version = "0.32.0" version = "0.32.0"
@ -6342,7 +6270,7 @@ dependencies = [
[[package]] [[package]]
name = "refineable" name = "refineable"
version = "0.1.0" 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 = [ dependencies = [
"derive_refineable", "derive_refineable",
"workspace-hack", "workspace-hack",
@ -6497,7 +6425,7 @@ dependencies = [
[[package]] [[package]]
name = "reqwest_client" name = "reqwest_client"
version = "0.1.0" 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 = [ dependencies = [
"anyhow", "anyhow",
"bytes", "bytes",
@ -6898,27 +6826,6 @@ dependencies = [
"winapi-util", "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]] [[package]]
name = "schannel" name = "schannel"
version = "0.1.27" version = "0.1.27"
@ -6966,29 +6873,6 @@ version = "1.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49" 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]] [[package]]
name = "sctk-adwaita" name = "sctk-adwaita"
version = "0.10.1" version = "0.10.1"
@ -7073,7 +6957,7 @@ checksum = "d369a96f978623eb3dc28807c4852d6cc617fed53da5d3c400feff1ef34a714a"
[[package]] [[package]]
name = "semantic_version" name = "semantic_version"
version = "0.1.0" 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 = [ dependencies = [
"anyhow", "anyhow",
"serde", "serde",
@ -7655,7 +7539,7 @@ checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
[[package]] [[package]]
name = "sum_tree" name = "sum_tree"
version = "0.1.0" 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 = [ dependencies = [
"arrayvec", "arrayvec",
"log", "log",
@ -7808,20 +7692,6 @@ dependencies = [
"libc", "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]] [[package]]
name = "system-configuration" name = "system-configuration"
version = "0.6.1" version = "0.6.1"
@ -7875,18 +7745,6 @@ version = "0.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8bdb6fa0dfa67b38c1e66b7041ba9dcf23b99d8121907cd31c807a332f7a0bbb" 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]] [[package]]
name = "tao-macros" name = "tao-macros"
version = "0.1.3" version = "0.1.3"
@ -8883,7 +8741,7 @@ checksum = "06abde3611657adf66d383f00b093d7faecc7fa57071cce2578660c9f1010821"
[[package]] [[package]]
name = "util" name = "util"
version = "0.1.0" 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 = [ dependencies = [
"anyhow", "anyhow",
"async-fs 2.1.2", "async-fs 2.1.2",
@ -9486,16 +9344,6 @@ version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f" 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]] [[package]]
name = "windows" name = "windows"
version = "0.58.0" version = "0.58.0"
@ -9519,21 +9367,6 @@ dependencies = [
"windows-numerics", "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]] [[package]]
name = "windows-collections" name = "windows-collections"
version = "0.2.0" version = "0.2.0"
@ -9552,18 +9385,6 @@ dependencies = [
"windows-targets 0.52.6", "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]] [[package]]
name = "windows-core" name = "windows-core"
version = "0.58.0" version = "0.58.0"
@ -9600,17 +9421,6 @@ dependencies = [
"windows-link", "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]] [[package]]
name = "windows-implement" name = "windows-implement"
version = "0.58.0" version = "0.58.0"
@ -9633,17 +9443,6 @@ dependencies = [
"syn 2.0.101", "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]] [[package]]
name = "windows-interface" name = "windows-interface"
version = "0.58.0" version = "0.58.0"
@ -9704,15 +9503,6 @@ dependencies = [
"windows-strings 0.4.0", "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]] [[package]]
name = "windows-result" name = "windows-result"
version = "0.2.0" version = "0.2.0"
@ -10273,18 +10063,6 @@ dependencies = [
"rustix 1.0.7", "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]] [[package]]
name = "xcursor" name = "xcursor"
version = "0.3.8" version = "0.3.8"

View file

@ -1,10 +1,10 @@
use gpui::{ use gpui::{
img, App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Render,
Render, Styled, Window, Styled, Window,
}; };
use gpui_component::{ use gpui_component::{
badge::Badge, blue_500, dock::PanelControl, v_flex, yellow_500, ActiveTheme, Icon, IconName, avatar::Avatar, badge::Badge, blue_500, dock::PanelControl, green_500, red_500, sky_500,
Sizable as _, v_flex, yellow_500, Icon, IconName, Sizable as _,
}; };
use crate::section; use crate::section;
@ -50,11 +50,11 @@ impl Focusable for BadgeStory {
} }
impl Render for BadgeStory { impl Render for BadgeStory {
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement { fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
v_flex() v_flex()
.gap_4() .gap_4()
.child( .child(
section("Badge on Icon") section("Badge on icon")
.max_w_md() .max_w_md()
.child( .child(
Badge::new() Badge::new()
@ -68,57 +68,94 @@ impl Render for BadgeStory {
), ),
) )
.child( .child(
section("Badge on Avatar") section("Badge with count")
.max_w_md() .max_w_md()
.child( .child(Badge::new().count(3).child(
Badge::new().count(3).child( Avatar::new().src("https://avatars.githubusercontent.com/u/5518?v=4"),
img("https://avatars.githubusercontent.com/u/5518?v=4") ))
.size_10() .child(Badge::new().count(103).child(
.border_1() Avatar::new().src("https://avatars.githubusercontent.com/u/28998859?v=4"),
.border_color(cx.theme().border) )),
.rounded_full(), )
), .child(
) section("Badge with icon")
.child( .max_w_md()
Badge::new().count(103).child( .child(Badge::new().icon(IconName::Check).color(sky_500()).child(
img("https://avatars.githubusercontent.com/u/28998859?v=4") Avatar::new().src("https://avatars.githubusercontent.com/u/5518?v=4"),
.size_10() ))
.border_1() .child(Badge::new().icon(IconName::Star).color(yellow_500()).child(
.border_color(cx.theme().border) Avatar::new().src("https://avatars.githubusercontent.com/u/20092316?v=4"),
.rounded_full(), )),
),
),
) )
.child( .child(
section("Badge with dot").max_w_md().child( section("Badge with dot").max_w_md().child(
Badge::new().dot().count(1).child( Badge::new().dot().count(1).child(
img("https://avatars.githubusercontent.com/u/5518?v=4") Avatar::new().src("https://avatars.githubusercontent.com/u/5518?v=4"),
.size_10()
.border_1()
.border_color(cx.theme().border)
.rounded_full(),
), ),
), ),
) )
.child( .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() .max_w_md()
.child( .child(
Badge::new().count(3).color(blue_500()).child( Badge::new().count(212).large().child(
img("https://avatars.githubusercontent.com/u/5518?v=4") Badge::new()
.size_10() .icon(IconName::Check)
.border_1() .large()
.border_color(cx.theme().border) .color(sky_500())
.rounded_full(), .child(
Avatar::new()
.large()
.src("https://avatars.githubusercontent.com/u/5518?v=4"),
),
), ),
) )
.child( .child(
Badge::new().dot().color(yellow_500()).count(1).child( Badge::new().count(2).color(green_500()).large().child(
img("https://avatars.githubusercontent.com/u/5518?v=4") Badge::new()
.size_10() .icon(IconName::Star)
.border_1() .large()
.border_color(cx.theme().border) .color(yellow_500())
.rounded_full(), .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",
),
),
), ),
), ),
) )

View file

@ -3,15 +3,30 @@ use gpui::{
RenderOnce, StyleRefinement, Styled, Window, 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 { enum BadgeVariant {
Dot,
#[default] #[default]
Number, Number,
Dot,
Icon(Box<Icon>),
} }
#[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)] #[derive(IntoElement)]
pub struct Badge { pub struct Badge {
style: StyleRefinement, style: StyleRefinement,
@ -20,9 +35,11 @@ pub struct Badge {
variant: BadgeVariant, variant: BadgeVariant,
children: Vec<AnyElement>, children: Vec<AnyElement>,
color: Hsla, color: Hsla,
size: Size,
} }
impl Badge { impl Badge {
/// Create a new badge.
pub fn new() -> Self { pub fn new() -> Self {
Self { Self {
style: StyleRefinement::default(), style: StyleRefinement::default(),
@ -31,24 +48,37 @@ impl Badge {
variant: Default::default(), variant: Default::default(),
color: red_500(), color: red_500(),
children: Vec::new(), children: Vec::new(),
size: Size::default(),
} }
} }
/// Set to use [`BadgeVariant::Dot`] to show a dot.
pub fn dot(mut self) -> Self { pub fn dot(mut self) -> Self {
self.variant = BadgeVariant::Dot; self.variant = BadgeVariant::Dot;
self 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 { pub fn count(mut self, count: usize) -> Self {
self.count = count; self.count = count;
self self
} }
/// Set to use [`BadgeVariant::Icon`] to show an icon.
pub fn icon(mut self, icon: impl Into<Icon>) -> 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 { pub fn max(mut self, max: usize) -> Self {
self.max = max; self.max = max;
self self
} }
/// Set the color (background) of the badge.
pub fn color(mut self, color: impl Into<Hsla>) -> Self { pub fn color(mut self, color: impl Into<Hsla>) -> Self {
self.color = color.into(); self.color = color.into();
self self
@ -61,19 +91,40 @@ impl ParentElement for Badge {
} }
} }
impl Sizable for Badge {
fn with_size(mut self, size: impl Into<Size>) -> Self {
self.size = size.into();
self
}
}
impl RenderOnce for Badge { 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() div()
.relative() .relative()
.refine_style(&self.style) .refine_style(&self.style)
.children(self.children) .children(self.children)
.when(self.count > 0, |this| { .when(visible, |this| {
this.child( this.child(
h_flex() h_flex()
.absolute() .absolute()
.justify_center() .justify_center()
.items_center()
.rounded_full() .rounded_full()
.bg(self.color) .bg(self.color)
.text_color(white())
.text_size(text_size)
.map(|this| match self.variant { .map(|this| match self.variant {
BadgeVariant::Dot => this.top_0().right_0().size(px(6.)), BadgeVariant::Dot => this.top_0().right_0().size(px(6.)),
BadgeVariant::Number => { BadgeVariant::Number => {
@ -83,16 +134,30 @@ impl RenderOnce for Badge {
self.count.to_string() self.count.to_string()
}; };
this.top(px(-3.)) let (top, left) = match self.size {
.right(-px(3. * count.len() as f32)) 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() .py_0p5()
.px_0p5() .px_0p5()
.min_w_3p5() .min_w_3p5()
.text_color(white())
.text_size(px(10.)) .text_size(px(10.))
.line_height(relative(1.)) .line_height(relative(1.))
.child(count) .child(count)
} }
BadgeVariant::Icon(icon) => this
.right_0()
.bottom_0()
.size(size)
.border_1()
.border_color(cx.theme().background)
.child(*icon),
}), }),
) )
}) })