Project panel horizontal scrollbar (#18513)
<img width="389" alt="image" src="https://github.com/user-attachments/assets/c6718c6e-0fe1-40ed-b3db-7d576c4d98c8"> https://github.com/user-attachments/assets/734f1f52-70d9-4308-b1fc-36c7cfd4dd76 Closes https://github.com/zed-industries/zed/issues/7001 Closes https://github.com/zed-industries/zed/issues/4427 Part of https://github.com/zed-industries/zed/issues/15324 Part of https://github.com/zed-industries/zed/issues/14551 * Adjusts a `UniformList` to have a horizontal sizing behavior: the old mode forced all items to have the size of the list exactly. A new mode (with corresponding `ListItems` having `overflow_x` enabled) lays out the uniform list elements with width of its widest element, setting the same width to the list itself too. * Using the new behavior, adds a new scrollbar into the project panel and enhances its file name editor to scroll it during editing of long file names * Also restyles the scrollbar a bit, making it narrower and removing its background * Changes the project_panel.scrollbar.show settings to accept `null` and be `null` by default, to inherit `editor`'s scrollbar settings. All editor scrollbar settings are supported now. Release Notes: - Added a horizontal scrollbar to project panel ([#7001](https://github.com/zed-industries/zed/issues/7001)) ([#4427](https://github.com/zed-industries/zed/issues/4427)) --------- Co-authored-by: Piotr Osiewicz <piotr@zed.dev>
This commit is contained in:
Kirill Bulatov
GitHub
parent
68d6177d37
commit
051627c449
12 changed files with 567 additions and 149 deletions
|
|
@ -2057,6 +2057,7 @@ impl Interactivity {
|
|||
fn paint_scroll_listener(&self, hitbox: &Hitbox, style: &Style, cx: &mut WindowContext) {
|
||||
if let Some(scroll_offset) = self.scroll_offset.clone() {
|
||||
let overflow = style.overflow;
|
||||
let allow_concurrent_scroll = style.allow_concurrent_scroll;
|
||||
let line_height = cx.line_height();
|
||||
let hitbox = hitbox.clone();
|
||||
cx.on_mouse_event(move |event: &ScrollWheelEvent, phase, cx| {
|
||||
|
|
@ -2065,27 +2066,31 @@ impl Interactivity {
|
|||
let old_scroll_offset = *scroll_offset;
|
||||
let delta = event.delta.pixel_delta(line_height);
|
||||
|
||||
let mut delta_x = Pixels::ZERO;
|
||||
if overflow.x == Overflow::Scroll {
|
||||
let mut delta_x = Pixels::ZERO;
|
||||
if !delta.x.is_zero() {
|
||||
delta_x = delta.x;
|
||||
} else if overflow.y != Overflow::Scroll {
|
||||
delta_x = delta.y;
|
||||
}
|
||||
|
||||
scroll_offset.x += delta_x;
|
||||
}
|
||||
|
||||
let mut delta_y = Pixels::ZERO;
|
||||
if overflow.y == Overflow::Scroll {
|
||||
let mut delta_y = Pixels::ZERO;
|
||||
if !delta.y.is_zero() {
|
||||
delta_y = delta.y;
|
||||
} else if overflow.x != Overflow::Scroll {
|
||||
delta_y = delta.x;
|
||||
}
|
||||
|
||||
scroll_offset.y += delta_y;
|
||||
}
|
||||
if !allow_concurrent_scroll && !delta_x.is_zero() && !delta_y.is_zero() {
|
||||
if delta_x.abs() > delta_y.abs() {
|
||||
delta_y = Pixels::ZERO;
|
||||
} else {
|
||||
delta_x = Pixels::ZERO;
|
||||
}
|
||||
}
|
||||
scroll_offset.y += delta_y;
|
||||
scroll_offset.x += delta_x;
|
||||
|
||||
cx.stop_propagation();
|
||||
if *scroll_offset != old_scroll_offset {
|
||||
|
|
|
|||
|
|
@ -89,6 +89,16 @@ pub enum ListSizingBehavior {
|
|||
Auto,
|
||||
}
|
||||
|
||||
/// The horizontal sizing behavior to apply during layout.
|
||||
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq, PartialOrd, Ord, Hash)]
|
||||
pub enum ListHorizontalSizingBehavior {
|
||||
/// List items' width can never exceed the width of the list.
|
||||
#[default]
|
||||
FitList,
|
||||
/// List items' width may go over the width of the list, if any item is wider.
|
||||
Unconstrained,
|
||||
}
|
||||
|
||||
struct LayoutItemsResponse {
|
||||
max_item_width: Pixels,
|
||||
scroll_top: ListOffset,
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
//! elements with uniform height.
|
||||
|
||||
use crate::{
|
||||
point, px, size, AnyElement, AvailableSpace, Bounds, ContentMask, Element, ElementId,
|
||||
GlobalElementId, Hitbox, InteractiveElement, Interactivity, IntoElement, LayoutId,
|
||||
point, size, AnyElement, AvailableSpace, Bounds, ContentMask, Element, ElementId,
|
||||
GlobalElementId, Hitbox, InteractiveElement, Interactivity, IntoElement, IsZero, LayoutId,
|
||||
ListSizingBehavior, Pixels, Render, ScrollHandle, Size, StyleRefinement, Styled, View,
|
||||
ViewContext, WindowContext,
|
||||
};
|
||||
|
|
@ -14,6 +14,8 @@ use smallvec::SmallVec;
|
|||
use std::{cell::RefCell, cmp, ops::Range, rc::Rc};
|
||||
use taffy::style::Overflow;
|
||||
|
||||
use super::ListHorizontalSizingBehavior;
|
||||
|
||||
/// uniform_list provides lazy rendering for a set of items that are of uniform height.
|
||||
/// When rendered into a container with overflow-y: hidden and a fixed (or max) height,
|
||||
/// uniform_list will only render the visible subset of items.
|
||||
|
|
@ -57,6 +59,7 @@ where
|
|||
},
|
||||
scroll_handle: None,
|
||||
sizing_behavior: ListSizingBehavior::default(),
|
||||
horizontal_sizing_behavior: ListHorizontalSizingBehavior::default(),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,11 +72,11 @@ pub struct UniformList {
|
|||
interactivity: Interactivity,
|
||||
scroll_handle: Option<UniformListScrollHandle>,
|
||||
sizing_behavior: ListSizingBehavior,
|
||||
horizontal_sizing_behavior: ListHorizontalSizingBehavior,
|
||||
}
|
||||
|
||||
/// Frame state used by the [UniformList].
|
||||
pub struct UniformListFrameState {
|
||||
item_size: Size<Pixels>,
|
||||
items: SmallVec<[AnyElement; 32]>,
|
||||
}
|
||||
|
||||
|
|
@ -87,7 +90,18 @@ pub struct UniformListScrollHandle(pub Rc<RefCell<UniformListScrollState>>);
|
|||
pub struct UniformListScrollState {
|
||||
pub base_handle: ScrollHandle,
|
||||
pub deferred_scroll_to_item: Option<usize>,
|
||||
pub last_item_height: Option<Pixels>,
|
||||
/// Size of the item, captured during last layout.
|
||||
pub last_item_size: Option<ItemSize>,
|
||||
}
|
||||
|
||||
#[derive(Copy, Clone, Debug, Default)]
|
||||
/// The size of the item and its contents.
|
||||
pub struct ItemSize {
|
||||
/// The size of the item.
|
||||
pub item: Size<Pixels>,
|
||||
/// The size of the item's contents, which may be larger than the item itself,
|
||||
/// if the item was bounded by a parent element.
|
||||
pub contents: Size<Pixels>,
|
||||
}
|
||||
|
||||
impl UniformListScrollHandle {
|
||||
|
|
@ -96,7 +110,7 @@ impl UniformListScrollHandle {
|
|||
Self(Rc::new(RefCell::new(UniformListScrollState {
|
||||
base_handle: ScrollHandle::new(),
|
||||
deferred_scroll_to_item: None,
|
||||
last_item_height: None,
|
||||
last_item_size: None,
|
||||
})))
|
||||
}
|
||||
|
||||
|
|
@ -170,7 +184,6 @@ impl Element for UniformList {
|
|||
(
|
||||
layout_id,
|
||||
UniformListFrameState {
|
||||
item_size,
|
||||
items: SmallVec::new(),
|
||||
},
|
||||
)
|
||||
|
|
@ -193,17 +206,30 @@ impl Element for UniformList {
|
|||
- point(border.right + padding.right, border.bottom + padding.bottom),
|
||||
);
|
||||
|
||||
let can_scroll_horizontally = matches!(
|
||||
self.horizontal_sizing_behavior,
|
||||
ListHorizontalSizingBehavior::Unconstrained
|
||||
);
|
||||
|
||||
let longest_item_size = self.measure_item(None, cx);
|
||||
let content_width = if can_scroll_horizontally {
|
||||
padded_bounds.size.width.max(longest_item_size.width)
|
||||
} else {
|
||||
padded_bounds.size.width
|
||||
};
|
||||
let content_size = Size {
|
||||
width: padded_bounds.size.width,
|
||||
height: frame_state.item_size.height * self.item_count + padding.top + padding.bottom,
|
||||
width: content_width,
|
||||
height: longest_item_size.height * self.item_count + padding.top + padding.bottom,
|
||||
};
|
||||
|
||||
let shared_scroll_offset = self.interactivity.scroll_offset.clone().unwrap();
|
||||
|
||||
let item_height = self.measure_item(Some(padded_bounds.size.width), cx).height;
|
||||
let item_height = longest_item_size.height;
|
||||
let shared_scroll_to_item = self.scroll_handle.as_mut().and_then(|handle| {
|
||||
let mut handle = handle.0.borrow_mut();
|
||||
handle.last_item_height = Some(item_height);
|
||||
handle.last_item_size = Some(ItemSize {
|
||||
item: padded_bounds.size,
|
||||
contents: content_size,
|
||||
});
|
||||
handle.deferred_scroll_to_item.take()
|
||||
});
|
||||
|
||||
|
|
@ -228,12 +254,19 @@ impl Element for UniformList {
|
|||
if self.item_count > 0 {
|
||||
let content_height =
|
||||
item_height * self.item_count + padding.top + padding.bottom;
|
||||
let min_scroll_offset = padded_bounds.size.height - content_height;
|
||||
let is_scrolled = scroll_offset.y != px(0.);
|
||||
let is_scrolled_vertically = !scroll_offset.y.is_zero();
|
||||
let min_vertical_scroll_offset = padded_bounds.size.height - content_height;
|
||||
if is_scrolled_vertically && scroll_offset.y < min_vertical_scroll_offset {
|
||||
shared_scroll_offset.borrow_mut().y = min_vertical_scroll_offset;
|
||||
scroll_offset.y = min_vertical_scroll_offset;
|
||||
}
|
||||
|
||||
if is_scrolled && scroll_offset.y < min_scroll_offset {
|
||||
shared_scroll_offset.borrow_mut().y = min_scroll_offset;
|
||||
scroll_offset.y = min_scroll_offset;
|
||||
let content_width = content_size.width + padding.left + padding.right;
|
||||
let is_scrolled_horizontally =
|
||||
can_scroll_horizontally && !scroll_offset.x.is_zero();
|
||||
if is_scrolled_horizontally && content_width <= padded_bounds.size.width {
|
||||
shared_scroll_offset.borrow_mut().x = Pixels::ZERO;
|
||||
scroll_offset.x = Pixels::ZERO;
|
||||
}
|
||||
|
||||
if let Some(ix) = shared_scroll_to_item {
|
||||
|
|
@ -263,9 +296,17 @@ impl Element for UniformList {
|
|||
cx.with_content_mask(Some(content_mask), |cx| {
|
||||
for (mut item, ix) in items.into_iter().zip(visible_range) {
|
||||
let item_origin = padded_bounds.origin
|
||||
+ point(px(0.), item_height * ix + scroll_offset.y + padding.top);
|
||||
+ point(
|
||||
scroll_offset.x + padding.left,
|
||||
item_height * ix + scroll_offset.y + padding.top,
|
||||
);
|
||||
let available_width = if can_scroll_horizontally {
|
||||
padded_bounds.size.width + scroll_offset.x.abs()
|
||||
} else {
|
||||
padded_bounds.size.width
|
||||
};
|
||||
let available_space = size(
|
||||
AvailableSpace::Definite(padded_bounds.size.width),
|
||||
AvailableSpace::Definite(available_width),
|
||||
AvailableSpace::Definite(item_height),
|
||||
);
|
||||
item.layout_as_root(available_space, cx);
|
||||
|
|
@ -318,6 +359,25 @@ impl UniformList {
|
|||
self
|
||||
}
|
||||
|
||||
/// Sets the horizontal sizing behavior, controlling the way list items laid out horizontally.
|
||||
/// With [`ListHorizontalSizingBehavior::Unconstrained`] behavior, every item and the list itself will
|
||||
/// have the size of the widest item and lay out pushing the `end_slot` to the right end.
|
||||
pub fn with_horizontal_sizing_behavior(
|
||||
mut self,
|
||||
behavior: ListHorizontalSizingBehavior,
|
||||
) -> Self {
|
||||
self.horizontal_sizing_behavior = behavior;
|
||||
match behavior {
|
||||
ListHorizontalSizingBehavior::FitList => {
|
||||
self.interactivity.base_style.overflow.x = None;
|
||||
}
|
||||
ListHorizontalSizingBehavior::Unconstrained => {
|
||||
self.interactivity.base_style.overflow.x = Some(Overflow::Scroll);
|
||||
}
|
||||
}
|
||||
self
|
||||
}
|
||||
|
||||
fn measure_item(&self, list_width: Option<Pixels>, cx: &mut WindowContext) -> Size<Pixels> {
|
||||
if self.item_count == 0 {
|
||||
return Size::default();
|
||||
|
|
|
|||
|
|
@ -156,6 +156,8 @@ pub struct Style {
|
|||
pub overflow: Point<Overflow>,
|
||||
/// How much space (in points) should be reserved for the scrollbars of `Overflow::Scroll` and `Overflow::Auto` nodes.
|
||||
pub scrollbar_width: f32,
|
||||
/// Whether both x and y axis should be scrollable at the same time.
|
||||
pub allow_concurrent_scroll: bool,
|
||||
|
||||
// Position properties
|
||||
/// What should the `position` value of this struct use as a base offset?
|
||||
|
|
@ -667,6 +669,7 @@ impl Default for Style {
|
|||
x: Overflow::Visible,
|
||||
y: Overflow::Visible,
|
||||
},
|
||||
allow_concurrent_scroll: false,
|
||||
scrollbar_width: 0.0,
|
||||
position: Position::Relative,
|
||||
inset: Edges::auto(),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue