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

scrollbar: Do not show scrollbar event mouse is in Element rect, only show when hovered on scrollbar area or scrolled (#333)

Browse source 
Let the scrollbar only display when hovering and scrolling. The effect
comparison is on the left GPUI and on the right mac. I guess they used
the 10th power ease-in function, and the effect is similar.

Fixes https://github.com/huacnlee/gpui-component/issues/260

![2024-10-11 22 06
51](https://github.com/user-attachments/assets/4fa35150-2f93-4b79-bdbb-d8b7783e4b5a)
This commit is contained in:
xda 2024-10-13 11:53:53 +09:00 committed by GitHub
parent 5f1b68a431
commit 5c8d0d7eb4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 75 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,10 @@
use std::{cell::Cell, rc::Rc}; use std::{cell::Cell, rc::Rc, time::Instant};
use crate::theme::ActiveTheme; use crate::theme::ActiveTheme;
use gpui::{ use gpui::{
fill, point, px, relative, Bounds, ContentMask, Edges, Element, EntityId, Hitbox, IntoElement, fill, point, px, relative, Bounds, ContentMask, Edges, Element, EntityId, Hitbox, IntoElement,
MouseDownEvent, MouseMoveEvent, MouseUpEvent, PaintQuad, Pixels, Point, Position, ScrollHandle, MouseDownEvent, MouseMoveEvent, MouseUpEvent, PaintQuad, Pixels, Point, Position, ScrollHandle,
Style, UniformListScrollHandle, ScrollWheelEvent, Style, UniformListScrollHandle,
}; };
const MIN_THUMB_SIZE: f32 = 80.; const MIN_THUMB_SIZE: f32 = 80.;
@ -48,7 +48,8 @@ pub struct ScrollbarState {
hovered_axis: Option<ScrollbarAxis>, hovered_axis: Option<ScrollbarAxis>,
dragged_axis: Option<ScrollbarAxis>, dragged_axis: Option<ScrollbarAxis>,
drag_pos: Point<Pixels>, drag_pos: Point<Pixels>,
visible: bool, last_scroll_offset: Point<Pixels>,
last_scroll_time: Option<Instant>,
} }
impl Default for ScrollbarState { impl Default for ScrollbarState {
@ -57,7 +58,8 @@ impl Default for ScrollbarState {
hovered_axis: None, hovered_axis: None,
dragged_axis: None, dragged_axis: None,
drag_pos: point(px(0.), px(0.)), drag_pos: point(px(0.), px(0.)),
visible: false, last_scroll_offset: point(px(0.), px(0.)),
last_scroll_time: None,
} }
} }
} }
@ -91,9 +93,14 @@ impl ScrollbarState {
state state
} }
fn with_visiable(&self, visiable: bool) -> Self { fn with_last_scroll(
&self,
last_scroll_offset: Point<Pixels>,
last_scroll_time: Option<Instant>,
) -> Self {
let mut state = *self; let mut state = *self;
state.visible = visiable; state.last_scroll_offset = last_scroll_offset;
state.last_scroll_time = last_scroll_time;
state state
} }
} }
@ -365,34 +372,28 @@ impl Element for Scrollbar {
}, },
}; };
let thumb_bg = cx.theme().scrollbar_thumb;
let state = self.state.clone(); let state = self.state.clone();
let (thumb_bg, bar_bg, bar_border, inset, radius) = let mut thumb_bg = cx.theme().transparent;
if state.get().dragged_axis == Some(axis) { let mut bar_bg = cx.theme().transparent;
(
thumb_bg, if state.get().dragged_axis == Some(axis)
cx.theme().scrollbar, || state.get().hovered_axis == Some(axis)
cx.theme().border, {
THUMB_INSET - px(1.), thumb_bg = cx.theme().scrollbar_thumb;
THUMB_RADIUS, bar_bg = cx.theme().scrollbar;
)
} else if state.get().hovered_axis == Some(axis) {
(
thumb_bg,
cx.theme().scrollbar,
cx.theme().border,
THUMB_INSET - px(1.),
THUMB_RADIUS,
)
} else { } else {
( if let Some(last_time) = state.get().last_scroll_time {
thumb_bg.opacity(0.3), let elapsed = Instant::now().duration_since(last_time).as_secs_f32();
cx.theme().transparent, if elapsed < 1.0 {
gpui::transparent_black(), thumb_bg =
THUMB_INSET, cx.theme().scrollbar_thumb.opacity(1.0 - elapsed.powi(10));
THUMB_RADIUS - px(1.), cx.request_animation_frame();
) }
}; }
}
let bar_border = cx.theme().border;
let inset = THUMB_INSET - px(1.);
let radius = THUMB_RADIUS;
let border_width = px(0.); let border_width = px(0.);
let thumb_bounds = if is_vertical { let thumb_bounds = if is_vertical {
@ -419,7 +420,6 @@ impl Element for Scrollbar {
) )
}; };
if state.get().visible {
cx.paint_quad(fill(bounds, bar_bg)); cx.paint_quad(fill(bounds, bar_bg));
cx.paint_quad(PaintQuad { cx.paint_quad(PaintQuad {
@ -445,7 +445,24 @@ impl Element for Scrollbar {
}); });
cx.paint_quad(fill(thumb_bounds, thumb_bg).corner_radii(radius)); cx.paint_quad(fill(thumb_bounds, thumb_bg).corner_radii(radius));
cx.on_mouse_event({
let state = self.state.clone();
let view_id = self.view_id;
let scroll_handle = self.scroll_handle.clone();
move |event: &ScrollWheelEvent, phase, cx| {
if phase.bubble() && hitbox_bounds.contains(&event.position) {
if scroll_handle.offset() != state.get().last_scroll_offset {
state.set(state.get().with_last_scroll(
scroll_handle.offset(),
Some(Instant::now()),
));
cx.notify(view_id);
} }
}
}
});
cx.on_mouse_event({ cx.on_mouse_event({
let state = self.state.clone(); let state = self.state.clone();
@ -514,21 +531,6 @@ impl Element for Scrollbar {
} }
} }
// If mouse out of the bounds, hide scrollbar
if hitbox_bounds.contains(&event.position)
|| state.get().dragged_axis.is_some()
{
if !state.get().visible {
state.set(state.get().with_visiable(true));
cx.notify(view_id);
}
} else {
if state.get().visible {
state.set(state.get().with_visiable(false));
cx.notify(view_id);
}
}
// Move thumb position on dragging // Move thumb position on dragging
if state.get().dragged_axis == Some(axis) && event.dragging() { if state.get().dragged_axis == Some(axis) && event.dragging() {
// drag_pos is the position of the mouse down event // drag_pos is the position of the mouse down event