menu: Fix Menu scrollbar will always showing bug. (#328)

- Improved Scrollbar size.
This commit is contained in:
Jason Lee 2024-10-10 18:10:28 +08:00 committed by GitHub
parent 5915618928
commit efa044f417
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 14 deletions

View file

@ -463,6 +463,7 @@ impl Render for PopupMenu {
.popover_style(cx) .popover_style(cx)
.text_color(cx.theme().popover_foreground) .text_color(cx.theme().popover_foreground)
.relative() .relative()
.p_1()
.child( .child(
div() div()
.id("popup-menu-items") .id("popup-menu-items")
@ -473,7 +474,6 @@ impl Render for PopupMenu {
}) })
.child( .child(
v_flex() v_flex()
.p_1()
.gap_y_0p5() .gap_y_0p5()
.min_w(self.min_width) .min_w(self.min_width)
.max_w(self.max_width) .max_w(self.max_width)
@ -645,10 +645,10 @@ impl Render for PopupMenu {
this.child( this.child(
div() div()
.absolute() .absolute()
.top_1() .top_0()
.left_1() .left_0()
.right_1() .right_0p5()
.bottom_1() .bottom_0()
.child(Scrollbar::vertical( .child(Scrollbar::vertical(
cx.entity_id(), cx.entity_id(),
self.scroll_state.clone(), self.scroll_state.clone(),

View file

@ -8,8 +8,8 @@ use gpui::{
}; };
const MIN_THUMB_SIZE: f32 = 80.; const MIN_THUMB_SIZE: f32 = 80.;
const THUMB_RADIUS: Pixels = Pixels(4.0); const THUMB_RADIUS: Pixels = Pixels(3.0);
const THUMB_INSET: Pixels = Pixels(2.); const THUMB_INSET: Pixels = Pixels(4.);
pub trait ScrollHandleOffsetable { pub trait ScrollHandleOffsetable {
fn offset(&self) -> Point<Pixels>; fn offset(&self) -> Point<Pixels>;
@ -162,7 +162,7 @@ impl Scrollbar {
state, state,
axis, axis,
scroll_size, scroll_size,
width: px(8.), width: px(12.),
scroll_handle: Rc::new(Box::new(scroll_handle)), scroll_handle: Rc::new(Box::new(scroll_handle)),
} }
} }
@ -367,17 +367,30 @@ impl Element for Scrollbar {
let thumb_bg = cx.theme().scrollbar_thumb; 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) = let (thumb_bg, bar_bg, bar_border, inset, radius) =
if state.get().dragged_axis == Some(axis) { if state.get().dragged_axis == Some(axis) {
(thumb_bg, cx.theme().scrollbar, cx.theme().border, px(1.)) (
thumb_bg,
cx.theme().scrollbar,
cx.theme().border,
THUMB_INSET - px(1.),
THUMB_RADIUS,
)
} else if state.get().hovered_axis == Some(axis) { } else if state.get().hovered_axis == Some(axis) {
(thumb_bg, cx.theme().scrollbar, cx.theme().border, px(1.)) (
thumb_bg,
cx.theme().scrollbar,
cx.theme().border,
THUMB_INSET - px(1.),
THUMB_RADIUS,
)
} else { } else {
( (
thumb_bg.opacity(0.3), thumb_bg.opacity(0.3),
cx.theme().transparent, cx.theme().transparent,
gpui::transparent_black(), gpui::transparent_black(),
THUMB_INSET, THUMB_INSET,
THUMB_RADIUS - px(1.),
) )
}; };
@ -431,9 +444,7 @@ impl Element for Scrollbar {
border_color: bar_border, border_color: bar_border,
}); });
cx.paint_quad( cx.paint_quad(fill(thumb_bounds, thumb_bg).corner_radii(radius));
fill(thumb_bounds, thumb_bg).corner_radii(THUMB_RADIUS - inset),
);
} }
cx.on_mouse_event({ cx.on_mouse_event({