dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

scrollbar: Adjust scrollbar style and add scrollbar_thumb_hover to theme. (#482)

Browse source 
<img width="297" alt="image"
src="https://github.com/user-attachments/assets/1779bf6c-2d01-4a12-9052-2ba571bff68b">

<img width="301" alt="image"
src="https://github.com/user-attachments/assets/9971b248-9a48-47ff-847c-00eafff17fe1">
This commit is contained in:
Jason Lee 2024-12-10 17:08:09 +08:00 committed by GitHub
parent 2836540260
commit 9f0f05af2d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 153 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

159
Cargo.lock generated
View file

@ -139,9 +139,9 @@ dependencies = [
[[package]] [[package]]
name = "ashpd" name = "ashpd"
version = "0.9.2" version = "0.10.2"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "4d43c03d9e36dd40cab48435be0b09646da362c278223ca535493877b2c1dee9" checksum = "e9c39d707614dbcc6bed00015539f488d8e3fe3e66ed60961efc0c90f4b380b3"
dependencies = [ dependencies = [
"async-fs 2.1.2", "async-fs 2.1.2",
"async-net 2.0.0", "async-net 2.0.0",
@ -152,7 +152,7 @@ dependencies = [
"serde", "serde",
"serde_repr", "serde_repr",
"url", "url",
"zbus", "zbus 5.1.1",
] ]
[[package]] [[package]]
@ -474,7 +474,7 @@ dependencies = [
"bitflags 2.6.0", "bitflags 2.6.0",
"cexpr", "cexpr",
"clang-sys", "clang-sys",
"itertools 0.13.0", "itertools 0.11.0",
"log", "log",
"prettyplease", "prettyplease",
"proc-macro2", "proc-macro2",
@ -950,7 +950,7 @@ dependencies = [
[[package]] [[package]]
name = "collections" name = "collections"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#54853c7ea3142578a9666c6723c09e92670aec71" source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#3612f36f8ade77ec19f22d0122edb653c8492a1b"
dependencies = [ dependencies = [
"rustc-hash", "rustc-hash",
] ]
@ -1313,7 +1313,7 @@ dependencies = [
[[package]] [[package]]
name = "derive_refineable" name = "derive_refineable"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#54853c7ea3142578a9666c6723c09e92670aec71" source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#3612f36f8ade77ec19f22d0122edb653c8492a1b"
dependencies = [ dependencies = [
"proc-macro2", "proc-macro2",
"quote", "quote",
@ -1458,9 +1458,9 @@ checksum = "60b1af1c220855b6ceac025d3f6ecdd2b7c4894bfe9cd9bda4fbb4bc7c0d4cf0"
[[package]] [[package]]
name = "embed-resource" name = "embed-resource"
version = "2.5.0" version = "3.0.1"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f4e24052d7be71f0efb50c201557f6fe7d237cfd5a64fd5bcd7fd8fe32dbbffa" checksum = "4762ce03154ba57ebaeee60cc631901ceae4f18219cbb874e464347471594742"
dependencies = [ dependencies = [
"cc", "cc",
"memchr", "memchr",
@ -2266,7 +2266,7 @@ dependencies = [
[[package]] [[package]]
name = "gpui" name = "gpui"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#54853c7ea3142578a9666c6723c09e92670aec71" source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#3612f36f8ade77ec19f22d0122edb653c8492a1b"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"as-raw-xcb-connection", "as-raw-xcb-connection",
@ -2366,7 +2366,7 @@ dependencies = [
[[package]] [[package]]
name = "gpui_macros" name = "gpui_macros"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#54853c7ea3142578a9666c6723c09e92670aec71" source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#3612f36f8ade77ec19f22d0122edb653c8492a1b"
dependencies = [ dependencies = [
"proc-macro2", "proc-macro2",
"quote", "quote",
@ -2556,7 +2556,7 @@ dependencies = [
[[package]] [[package]]
name = "http_client" name = "http_client"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#54853c7ea3142578a9666c6723c09e92670aec71" source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#3612f36f8ade77ec19f22d0122edb653c8492a1b"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"bytes", "bytes",
@ -3072,11 +3072,12 @@ dependencies = [
[[package]] [[package]]
name = "media" name = "media"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#54853c7ea3142578a9666c6723c09e92670aec71" source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#3612f36f8ade77ec19f22d0122edb653c8492a1b"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"bindgen", "bindgen",
"core-foundation 0.9.4", "core-foundation 0.9.4",
"ctor",
"foreign-types", "foreign-types",
"metal", "metal",
"objc", "objc",
@ -3380,7 +3381,7 @@ version = "0.7.3"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "af1844ef2428cc3e1cb900be36181049ef3d3193c63e43026cfe202983b27a56" checksum = "af1844ef2428cc3e1cb900be36181049ef3d3193c63e43026cfe202983b27a56"
dependencies = [ dependencies = [
"proc-macro-crate 3.2.0", "proc-macro-crate 1.3.1",
"proc-macro2", "proc-macro2",
"quote", "quote",
"syn 2.0.86", "syn 2.0.86",
@ -3647,9 +3648,9 @@ dependencies = [
"serde", "serde",
"sha2", "sha2",
"subtle", "subtle",
"zbus", "zbus 4.4.0",
"zeroize", "zeroize",
"zvariant", "zvariant 4.2.0",
] ]
[[package]] [[package]]
@ -4351,7 +4352,7 @@ dependencies = [
[[package]] [[package]]
name = "refineable" name = "refineable"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#54853c7ea3142578a9666c6723c09e92670aec71" source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#3612f36f8ade77ec19f22d0122edb653c8492a1b"
dependencies = [ dependencies = [
"derive_refineable", "derive_refineable",
] ]
@ -4672,7 +4673,7 @@ checksum = "d369a96f978623eb3dc28807c4852d6cc617fed53da5d3c400feff1ef34a714a"
[[package]] [[package]]
name = "semantic_version" name = "semantic_version"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#54853c7ea3142578a9666c6723c09e92670aec71" source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#3612f36f8ade77ec19f22d0122edb653c8492a1b"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"serde", "serde",
@ -5091,7 +5092,7 @@ checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
[[package]] [[package]]
name = "sum_tree" name = "sum_tree"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#54853c7ea3142578a9666c6723c09e92670aec71" source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#3612f36f8ade77ec19f22d0122edb653c8492a1b"
dependencies = [ dependencies = [
"arrayvec", "arrayvec",
"log", "log",
@ -5756,12 +5757,13 @@ checksum = "09cc8ee72d2a9becf2f2febe0205bbed8fc6615b7cb429ad062dc7b7ddd036a9"
[[package]] [[package]]
name = "util" name = "util"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#54853c7ea3142578a9666c6723c09e92670aec71" source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#3612f36f8ade77ec19f22d0122edb653c8492a1b"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"async-fs 1.6.0", "async-fs 1.6.0",
"collections", "collections",
"dirs 4.0.0", "dirs 4.0.0",
"dunce",
"futures", "futures",
"futures-lite 1.13.0", "futures-lite 1.13.0",
"globset", "globset",
@ -6705,9 +6707,45 @@ dependencies = [
"uds_windows", "uds_windows",
"windows-sys 0.52.0", "windows-sys 0.52.0",
"xdg-home", "xdg-home",
"zbus_macros", "zbus_macros 4.4.0",
"zbus_names", "zbus_names 3.0.0",
"zvariant", "zvariant 4.2.0",
]
[[package]]
name = "zbus"
version = "5.1.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1162094dc63b1629fcc44150bcceeaa80798cd28bcbe7fa987b65a034c258608"
dependencies = [
"async-broadcast",
"async-executor",
"async-fs 2.1.2",
"async-io 2.3.4",
"async-lock 3.4.0",
"async-process 2.3.0",
"async-recursion",
"async-task",
"async-trait",
"blocking",
"enumflags2",
"event-listener 5.3.1",
"futures-core",
"futures-util",
"hex",
"nix",
"ordered-stream",
"serde",
"serde_repr",
"static_assertions",
"tracing",
"uds_windows",
"windows-sys 0.59.0",
"winnow 0.6.20",
"xdg-home",
"zbus_macros 5.1.1",
"zbus_names 4.1.0",
"zvariant 5.1.0",
] ]
[[package]] [[package]]
@ -6720,7 +6758,22 @@ dependencies = [
"proc-macro2", "proc-macro2",
"quote", "quote",
"syn 2.0.86", "syn 2.0.86",
"zvariant_utils", "zvariant_utils 2.1.0",
]
[[package]]
name = "zbus_macros"
version = "5.1.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2cd2dcdce3e2727f7d74b7e33b5a89539b3cc31049562137faf7ae4eb86cd16d"
dependencies = [
"proc-macro-crate 3.2.0",
"proc-macro2",
"quote",
"syn 2.0.86",
"zbus_names 4.1.0",
"zvariant 5.1.0",
"zvariant_utils 3.0.2",
] ]
[[package]] [[package]]
@ -6731,7 +6784,19 @@ checksum = "4b9b1fef7d021261cc16cba64c351d291b715febe0fa10dc3a443ac5a5022e6c"
dependencies = [ dependencies = [
"serde", "serde",
"static_assertions", "static_assertions",
"zvariant", "zvariant 4.2.0",
]
[[package]]
name = "zbus_names"
version = "4.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "856b7a38811f71846fd47856ceee8bccaec8399ff53fb370247e66081ace647b"
dependencies = [
"serde",
"static_assertions",
"winnow 0.6.20",
"zvariant 5.1.0",
] ]
[[package]] [[package]]
@ -6810,13 +6875,28 @@ name = "zvariant"
version = "4.2.0" version = "4.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2084290ab9a1c471c38fc524945837734fbf124487e105daec2bb57fd48c81fe" checksum = "2084290ab9a1c471c38fc524945837734fbf124487e105daec2bb57fd48c81fe"
dependencies = [
"endi",
"enumflags2",
"serde",
"static_assertions",
"zvariant_derive 4.2.0",
]
[[package]]
name = "zvariant"
version = "5.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a1200ee6ac32f1e5a312e455a949a4794855515d34f9909f4a3e082d14e1a56f"
dependencies = [ dependencies = [
"endi", "endi",
"enumflags2", "enumflags2",
"serde", "serde",
"static_assertions", "static_assertions",
"url", "url",
"zvariant_derive", "winnow 0.6.20",
"zvariant_derive 5.1.0",
"zvariant_utils 3.0.2",
] ]
[[package]] [[package]]
@ -6829,7 +6909,20 @@ dependencies = [
"proc-macro2", "proc-macro2",
"quote", "quote",
"syn 2.0.86", "syn 2.0.86",
"zvariant_utils", "zvariant_utils 2.1.0",
]
[[package]]
name = "zvariant_derive"
version = "5.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "687e3b97fae6c9104fbbd36c73d27d149abf04fb874e2efbd84838763daa8916"
dependencies = [
"proc-macro-crate 3.2.0",
"proc-macro2",
"quote",
"syn 2.0.86",
"zvariant_utils 3.0.2",
] ]
[[package]] [[package]]
@ -6842,3 +6935,17 @@ dependencies = [
"quote", "quote",
"syn 2.0.86", "syn 2.0.86",
] ]
[[package]]
name = "zvariant_utils"
version = "3.0.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "20d1d011a38f12360e5fcccceeff5e2c42a8eb7f27f0dcba97a0862ede05c9c6"
dependencies = [
"proc-macro2",
"quote",
"serde",
"static_assertions",
"syn 2.0.86",
"winnow 0.6.20",
]

24
crates/ui/src/scroll/scrollbar.rs
View file

@ -27,7 +27,6 @@ const THUMB_RADIUS: Pixels = Pixels(3.0);
const THUMB_INSET: Pixels = Pixels(4.); const THUMB_INSET: Pixels = Pixels(4.);
const FADE_OUT_DURATION: f32 = 3.0; const FADE_OUT_DURATION: f32 = 3.0;
const FADE_OUT_DELAY: f32 = 2.0; const FADE_OUT_DELAY: f32 = 2.0;
const NORMAL_OPACITY: f32 = 0.6;
pub trait ScrollHandleOffsetable { pub trait ScrollHandleOffsetable {
fn offset(&self) -> Point<Pixels>; fn offset(&self) -> Point<Pixels>;
@ -294,9 +293,9 @@ impl Scrollbar {
self self
} }
fn style_for_default(cx: &AppContext) -> (Hsla, Hsla, Hsla, Pixels, Pixels) { fn style_for_active(cx: &AppContext) -> (Hsla, Hsla, Hsla, Pixels, Pixels) {
( (
cx.theme().scrollbar_thumb, cx.theme().scrollbar_thumb_hover,
cx.theme().scrollbar, cx.theme().scrollbar,
cx.theme().border, cx.theme().border,
THUMB_INSET - px(1.), THUMB_INSET - px(1.),
@ -306,7 +305,7 @@ impl Scrollbar {
fn style_for_hovered_thumb(cx: &AppContext) -> (Hsla, Hsla, Hsla, Pixels, Pixels) { fn style_for_hovered_thumb(cx: &AppContext) -> (Hsla, Hsla, Hsla, Pixels, Pixels) {
( (
cx.theme().scrollbar_thumb, cx.theme().scrollbar_thumb_hover,
cx.theme().scrollbar, cx.theme().scrollbar,
cx.theme().border, cx.theme().border,
THUMB_INSET - px(1.), THUMB_INSET - px(1.),
@ -322,8 +321,8 @@ impl Scrollbar {
}; };
( (
cx.theme().scrollbar_thumb.opacity(NORMAL_OPACITY), cx.theme().scrollbar_thumb,
gpui::transparent_black(), cx.theme().scrollbar,
gpui::transparent_black(), gpui::transparent_black(),
inset, inset,
radius, radius,
@ -477,7 +476,7 @@ impl Element for Scrollbar {
let (thumb_bg, bar_bg, bar_border, inset, radius) = let (thumb_bg, bar_bg, bar_border, inset, radius) =
if state.get().dragged_axis == Some(axis) { if state.get().dragged_axis == Some(axis) {
Self::style_for_default(cx) Self::style_for_active(cx)
} else if is_hover_to_show && is_hovered_on_bar { } else if is_hover_to_show && is_hovered_on_bar {
if is_hovered_on_thumb { if is_hovered_on_thumb {
Self::style_for_hovered_thumb(cx) Self::style_for_hovered_thumb(cx)
@ -498,13 +497,14 @@ impl Element for Scrollbar {
Self::style_for_hovered_bar(cx) Self::style_for_hovered_bar(cx)
}; };
} else { } else {
let y_value = if elapsed < FADE_OUT_DELAY { if elapsed < FADE_OUT_DELAY {
NORMAL_OPACITY idle_state.0 = cx.theme().scrollbar_thumb;
} else { } else {
// y = 1 - (x - 2)^10 // opacity = 1 - (x - 2)^10
NORMAL_OPACITY - (elapsed - FADE_OUT_DELAY).powi(10) let opacity = 1.0 - (elapsed - FADE_OUT_DELAY).powi(10);
idle_state.0 = cx.theme().scrollbar_thumb.opacity(opacity);
}; };
idle_state.0 = cx.theme().scrollbar_thumb.opacity(y_value);
cx.request_animation_frame(); cx.request_animation_frame();
} }
} }

12
crates/ui/src/theme.rs
View file

@ -183,6 +183,7 @@ pub struct ThemeColor {
pub ring: Hsla, pub ring: Hsla,
pub scrollbar: Hsla, pub scrollbar: Hsla,
pub scrollbar_thumb: Hsla, pub scrollbar_thumb: Hsla,
pub scrollbar_thumb_hover: Hsla,
pub secondary: Hsla, pub secondary: Hsla,
pub secondary_active: Hsla, pub secondary_active: Hsla,
pub secondary_foreground: Hsla, pub secondary_foreground: Hsla,
@ -255,8 +256,9 @@ impl ThemeColor {
primary_hover: hsl(223.0, 5.9, 15.0), primary_hover: hsl(223.0, 5.9, 15.0),
progress_bar: hsl(223.0, 5.9, 10.0), progress_bar: hsl(223.0, 5.9, 10.0),
ring: hsl(240.0, 5.9, 65.0), ring: hsl(240.0, 5.9, 65.0),
scrollbar: hsl(0., 0., 97.).opacity(0.3), scrollbar: hsl(0., 0., 97.).opacity(0.75),
scrollbar_thumb: hsl(0., 0., 69.), scrollbar_thumb: hsl(0., 0., 69.).opacity(0.9),
scrollbar_thumb_hover: hsl(0., 0., 59.),
secondary: hsl(240.0, 5.9, 96.9), secondary: hsl(240.0, 5.9, 96.9),
secondary_active: hsl(240.0, 5.9, 93.), secondary_active: hsl(240.0, 5.9, 93.),
secondary_foreground: hsl(240.0, 59.0, 10.), secondary_foreground: hsl(240.0, 59.0, 10.),
@ -329,8 +331,9 @@ impl ThemeColor {
primary_hover: hsl(223.0, 0.0, 90.0), primary_hover: hsl(223.0, 0.0, 90.0),
progress_bar: hsl(223.0, 0.0, 98.0), progress_bar: hsl(223.0, 0.0, 98.0),
ring: hsl(240.0, 4.9, 83.9), ring: hsl(240.0, 4.9, 83.9),
scrollbar: hsl(240., 1., 15.).opacity(0.3), scrollbar: hsl(240., 1., 15.).opacity(0.75),
scrollbar_thumb: hsl(0., 0., 68.), scrollbar_thumb: hsl(0., 0., 48.).opacity(0.9),
scrollbar_thumb_hover: hsl(0., 0., 68.),
secondary: hsl(240.0, 0., 13.0), secondary: hsl(240.0, 0., 13.0),
secondary_active: hsl(240.0, 0., 10.), secondary_active: hsl(240.0, 0., 10.),
secondary_foreground: hsl(0.0, 0.0, 78.0), secondary_foreground: hsl(0.0, 0.0, 78.0),
@ -438,6 +441,7 @@ impl Theme {
// self.selection = self.selection.apply(mask_color); // self.selection = self.selection.apply(mask_color);
self.scrollbar = self.scrollbar.apply(mask_color); self.scrollbar = self.scrollbar.apply(mask_color);
self.scrollbar_thumb = self.scrollbar_thumb.apply(mask_color); self.scrollbar_thumb = self.scrollbar_thumb.apply(mask_color);
self.scrollbar_thumb_hover = self.scrollbar_thumb_hover.apply(mask_color);
self.panel = self.panel.apply(mask_color); self.panel = self.panel.apply(mask_color);
self.drag_border = self.drag_border.apply(mask_color); self.drag_border = self.drag_border.apply(mask_color);
self.drop_target = self.drop_target.apply(mask_color); self.drop_target = self.drop_target.apply(mask_color);