recent projects: cleanup ui (#7528)
As the ui for the file finder was recently changed in #7364, I think it makes sense to also update the ui of the recent projects overlay. Before:  After:  Release Notes: - Improved UI of recent project overlay
This commit is contained in:
Bennet Bo Fenner
GitHub
parent
2b56c43f2d
commit
c33efe8cd0
16 changed files with 430 additions and 212 deletions
|
|
@ -7,20 +7,22 @@
|
|||
//! If all of your elements are the same height, see [`UniformList`] for a simpler API
|
||||
|
||||
use crate::{
|
||||
point, px, AnyElement, AvailableSpace, Bounds, ContentMask, DispatchPhase, Element,
|
||||
IntoElement, Pixels, Point, ScrollWheelEvent, Size, Style, StyleRefinement, Styled,
|
||||
WindowContext,
|
||||
point, px, size, AnyElement, AvailableSpace, Bounds, ContentMask, DispatchPhase, Edges,
|
||||
Element, ElementContext, IntoElement, Pixels, Point, ScrollWheelEvent, Size, Style,
|
||||
StyleRefinement, Styled, WindowContext,
|
||||
};
|
||||
use collections::VecDeque;
|
||||
use refineable::Refineable as _;
|
||||
use std::{cell::RefCell, ops::Range, rc::Rc};
|
||||
use sum_tree::{Bias, SumTree};
|
||||
use taffy::style::Overflow;
|
||||
|
||||
/// Construct a new list element
|
||||
pub fn list(state: ListState) -> List {
|
||||
List {
|
||||
state,
|
||||
style: StyleRefinement::default(),
|
||||
sizing_behavior: ListSizingBehavior::default(),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -28,6 +30,15 @@ pub fn list(state: ListState) -> List {
|
|||
pub struct List {
|
||||
state: ListState,
|
||||
style: StyleRefinement,
|
||||
sizing_behavior: ListSizingBehavior,
|
||||
}
|
||||
|
||||
impl List {
|
||||
/// Set the sizing behavior for the list.
|
||||
pub fn with_sizing_behavior(mut self, behavior: ListSizingBehavior) -> Self {
|
||||
self.sizing_behavior = behavior;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
/// The list state that views must hold on behalf of the list element.
|
||||
|
|
@ -36,6 +47,7 @@ pub struct ListState(Rc<RefCell<StateInner>>);
|
|||
|
||||
struct StateInner {
|
||||
last_layout_bounds: Option<Bounds<Pixels>>,
|
||||
last_padding: Option<Edges<Pixels>>,
|
||||
render_item: Box<dyn FnMut(usize, &mut WindowContext) -> AnyElement>,
|
||||
items: SumTree<ListItem>,
|
||||
logical_scroll_top: Option<ListOffset>,
|
||||
|
|
@ -67,10 +79,27 @@ pub struct ListScrollEvent {
|
|||
pub is_scrolled: bool,
|
||||
}
|
||||
|
||||
/// The sizing behavior to apply during layout.
|
||||
#[derive(Clone, Copy, Debug, Default, PartialEq)]
|
||||
pub enum ListSizingBehavior {
|
||||
/// The list should calculate its size based on the size of its items.
|
||||
Infer,
|
||||
/// The list should not calculate a fixed size.
|
||||
#[default]
|
||||
Auto,
|
||||
}
|
||||
|
||||
struct LayoutItemsResponse {
|
||||
max_item_width: Pixels,
|
||||
scroll_top: ListOffset,
|
||||
available_item_space: Size<AvailableSpace>,
|
||||
item_elements: VecDeque<AnyElement>,
|
||||
}
|
||||
|
||||
#[derive(Clone)]
|
||||
enum ListItem {
|
||||
Unrendered,
|
||||
Rendered { height: Pixels },
|
||||
Rendered { size: Size<Pixels> },
|
||||
}
|
||||
|
||||
#[derive(Clone, Debug, Default, PartialEq)]
|
||||
|
|
@ -112,6 +141,7 @@ impl ListState {
|
|||
items.extend((0..element_count).map(|_| ListItem::Unrendered), &());
|
||||
Self(Rc::new(RefCell::new(StateInner {
|
||||
last_layout_bounds: None,
|
||||
last_padding: None,
|
||||
render_item: Box::new(render_item),
|
||||
items,
|
||||
logical_scroll_top: None,
|
||||
|
|
@ -202,6 +232,7 @@ impl ListState {
|
|||
let height = state
|
||||
.last_layout_bounds
|
||||
.map_or(px(0.), |bounds| bounds.size.height);
|
||||
let padding = state.last_padding.unwrap_or_default();
|
||||
|
||||
if ix <= scroll_top.item_ix {
|
||||
scroll_top.item_ix = ix;
|
||||
|
|
@ -209,7 +240,7 @@ impl ListState {
|
|||
} else {
|
||||
let mut cursor = state.items.cursor::<ListItemSummary>();
|
||||
cursor.seek(&Count(ix + 1), Bias::Right, &());
|
||||
let bottom = cursor.start().height;
|
||||
let bottom = cursor.start().height + padding.top;
|
||||
let goal_top = px(0.).max(bottom - height);
|
||||
|
||||
cursor.seek(&Height(goal_top), Bias::Left, &());
|
||||
|
|
@ -242,13 +273,13 @@ impl ListState {
|
|||
let scroll_top = cursor.start().1 .0 + scroll_top.offset_in_item;
|
||||
|
||||
cursor.seek_forward(&Count(ix), Bias::Right, &());
|
||||
if let Some(&ListItem::Rendered { height }) = cursor.item() {
|
||||
if let Some(&ListItem::Rendered { size }) = cursor.item() {
|
||||
let &(Count(count), Height(top)) = cursor.start();
|
||||
if count == ix {
|
||||
let top = bounds.top() + top - scroll_top;
|
||||
return Some(Bounds::from_corners(
|
||||
point(bounds.left(), top),
|
||||
point(bounds.right(), top + height),
|
||||
point(bounds.right(), top + size.height),
|
||||
));
|
||||
}
|
||||
}
|
||||
|
|
@ -271,6 +302,7 @@ impl StateInner {
|
|||
height: Pixels,
|
||||
delta: Point<Pixels>,
|
||||
cx: &mut WindowContext,
|
||||
padding: Edges<Pixels>,
|
||||
) {
|
||||
// Drop scroll events after a reset, since we can't calculate
|
||||
// the new logical scroll top without the item heights
|
||||
|
|
@ -278,7 +310,8 @@ impl StateInner {
|
|||
return;
|
||||
}
|
||||
|
||||
let scroll_max = (self.items.summary().height - height).max(px(0.));
|
||||
let scroll_max =
|
||||
(self.items.summary().height + padding.top + padding.bottom - height).max(px(0.));
|
||||
let new_scroll_top = (self.scroll_top(scroll_top) - delta.y)
|
||||
.max(px(0.))
|
||||
.min(scroll_max);
|
||||
|
|
@ -330,15 +363,144 @@ impl StateInner {
|
|||
cursor.seek(&Count(logical_scroll_top.item_ix), Bias::Right, &());
|
||||
cursor.start().height + logical_scroll_top.offset_in_item
|
||||
}
|
||||
|
||||
fn layout_items(
|
||||
&mut self,
|
||||
available_width: Option<Pixels>,
|
||||
available_height: Pixels,
|
||||
padding: &Edges<Pixels>,
|
||||
cx: &mut ElementContext,
|
||||
) -> LayoutItemsResponse {
|
||||
let old_items = self.items.clone();
|
||||
let mut measured_items = VecDeque::new();
|
||||
let mut item_elements = VecDeque::new();
|
||||
let mut rendered_height = padding.top;
|
||||
let mut max_item_width = px(0.);
|
||||
let mut scroll_top = self.logical_scroll_top();
|
||||
|
||||
let available_item_space = size(
|
||||
available_width.map_or(AvailableSpace::MinContent, |width| {
|
||||
AvailableSpace::Definite(width)
|
||||
}),
|
||||
AvailableSpace::MinContent,
|
||||
);
|
||||
|
||||
let mut cursor = old_items.cursor::<Count>();
|
||||
|
||||
// Render items after the scroll top, including those in the trailing overdraw
|
||||
cursor.seek(&Count(scroll_top.item_ix), Bias::Right, &());
|
||||
for (ix, item) in cursor.by_ref().enumerate() {
|
||||
let visible_height = rendered_height - scroll_top.offset_in_item;
|
||||
if visible_height >= available_height + self.overdraw {
|
||||
break;
|
||||
}
|
||||
|
||||
// Use the previously cached height if available
|
||||
let mut size = if let ListItem::Rendered { size } = item {
|
||||
Some(*size)
|
||||
} else {
|
||||
None
|
||||
};
|
||||
|
||||
// If we're within the visible area or the height wasn't cached, render and measure the item's element
|
||||
if visible_height < available_height || size.is_none() {
|
||||
let mut element = (self.render_item)(scroll_top.item_ix + ix, cx);
|
||||
let element_size = element.measure(available_item_space, cx);
|
||||
size = Some(element_size);
|
||||
if visible_height < available_height {
|
||||
item_elements.push_back(element);
|
||||
}
|
||||
}
|
||||
|
||||
let size = size.unwrap();
|
||||
rendered_height += size.height;
|
||||
max_item_width = max_item_width.max(size.width);
|
||||
measured_items.push_back(ListItem::Rendered { size });
|
||||
}
|
||||
rendered_height += padding.bottom;
|
||||
|
||||
// Prepare to start walking upward from the item at the scroll top.
|
||||
cursor.seek(&Count(scroll_top.item_ix), Bias::Right, &());
|
||||
|
||||
// If the rendered items do not fill the visible region, then adjust
|
||||
// the scroll top upward.
|
||||
if rendered_height - scroll_top.offset_in_item < available_height {
|
||||
while rendered_height < available_height {
|
||||
cursor.prev(&());
|
||||
if cursor.item().is_some() {
|
||||
let mut element = (self.render_item)(cursor.start().0, cx);
|
||||
let element_size = element.measure(available_item_space, cx);
|
||||
|
||||
rendered_height += element_size.height;
|
||||
measured_items.push_front(ListItem::Rendered { size: element_size });
|
||||
item_elements.push_front(element)
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
scroll_top = ListOffset {
|
||||
item_ix: cursor.start().0,
|
||||
offset_in_item: rendered_height - available_height,
|
||||
};
|
||||
|
||||
match self.alignment {
|
||||
ListAlignment::Top => {
|
||||
scroll_top.offset_in_item = scroll_top.offset_in_item.max(px(0.));
|
||||
self.logical_scroll_top = Some(scroll_top);
|
||||
}
|
||||
ListAlignment::Bottom => {
|
||||
scroll_top = ListOffset {
|
||||
item_ix: cursor.start().0,
|
||||
offset_in_item: rendered_height - available_height,
|
||||
};
|
||||
self.logical_scroll_top = None;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Measure items in the leading overdraw
|
||||
let mut leading_overdraw = scroll_top.offset_in_item;
|
||||
while leading_overdraw < self.overdraw {
|
||||
cursor.prev(&());
|
||||
if let Some(item) = cursor.item() {
|
||||
let size = if let ListItem::Rendered { size } = item {
|
||||
*size
|
||||
} else {
|
||||
let mut element = (self.render_item)(cursor.start().0, cx);
|
||||
element.measure(available_item_space, cx)
|
||||
};
|
||||
|
||||
leading_overdraw += size.height;
|
||||
measured_items.push_front(ListItem::Rendered { size });
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
let measured_range = cursor.start().0..(cursor.start().0 + measured_items.len());
|
||||
let mut cursor = old_items.cursor::<Count>();
|
||||
let mut new_items = cursor.slice(&Count(measured_range.start), Bias::Right, &());
|
||||
new_items.extend(measured_items, &());
|
||||
cursor.seek(&Count(measured_range.end), Bias::Right, &());
|
||||
new_items.append(cursor.suffix(&()), &());
|
||||
|
||||
self.items = new_items;
|
||||
|
||||
LayoutItemsResponse {
|
||||
max_item_width,
|
||||
scroll_top,
|
||||
available_item_space,
|
||||
item_elements,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl std::fmt::Debug for ListItem {
|
||||
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
|
||||
match self {
|
||||
Self::Unrendered => write!(f, "Unrendered"),
|
||||
Self::Rendered { height, .. } => {
|
||||
f.debug_struct("Rendered").field("height", height).finish()
|
||||
}
|
||||
Self::Rendered { size, .. } => f.debug_struct("Rendered").field("size", size).finish(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -361,11 +523,67 @@ impl Element for List {
|
|||
_state: Option<Self::State>,
|
||||
cx: &mut crate::ElementContext,
|
||||
) -> (crate::LayoutId, Self::State) {
|
||||
let mut style = Style::default();
|
||||
style.refine(&self.style);
|
||||
let layout_id = cx.with_text_style(style.text_style().cloned(), |cx| {
|
||||
cx.request_layout(&style, None)
|
||||
});
|
||||
let layout_id = match self.sizing_behavior {
|
||||
ListSizingBehavior::Infer => {
|
||||
let mut style = Style::default();
|
||||
style.overflow.y = Overflow::Scroll;
|
||||
style.refine(&self.style);
|
||||
cx.with_text_style(style.text_style().cloned(), |cx| {
|
||||
let state = &mut *self.state.0.borrow_mut();
|
||||
|
||||
let available_height = if let Some(last_bounds) = state.last_layout_bounds {
|
||||
last_bounds.size.height
|
||||
} else {
|
||||
// If we don't have the last layout bounds (first render),
|
||||
// we might just use the overdraw value as the available height to layout enough items.
|
||||
state.overdraw
|
||||
};
|
||||
let padding = style.padding.to_pixels(
|
||||
state.last_layout_bounds.unwrap_or_default().size.into(),
|
||||
cx.rem_size(),
|
||||
);
|
||||
|
||||
let layout_response = state.layout_items(None, available_height, &padding, cx);
|
||||
let max_element_width = layout_response.max_item_width;
|
||||
|
||||
let summary = state.items.summary();
|
||||
let total_height = summary.height;
|
||||
let all_rendered = summary.unrendered_count == 0;
|
||||
|
||||
if all_rendered {
|
||||
cx.request_measured_layout(
|
||||
style,
|
||||
move |known_dimensions, available_space, _cx| {
|
||||
let width = known_dimensions.width.unwrap_or(match available_space
|
||||
.width
|
||||
{
|
||||
AvailableSpace::Definite(x) => x,
|
||||
AvailableSpace::MinContent | AvailableSpace::MaxContent => {
|
||||
max_element_width
|
||||
}
|
||||
});
|
||||
let height = match available_space.height {
|
||||
AvailableSpace::Definite(height) => total_height.min(height),
|
||||
AvailableSpace::MinContent | AvailableSpace::MaxContent => {
|
||||
total_height
|
||||
}
|
||||
};
|
||||
size(width, height)
|
||||
},
|
||||
)
|
||||
} else {
|
||||
cx.request_layout(&style, None)
|
||||
}
|
||||
})
|
||||
}
|
||||
ListSizingBehavior::Auto => {
|
||||
let mut style = Style::default();
|
||||
style.refine(&self.style);
|
||||
cx.with_text_style(style.text_style().cloned(), |cx| {
|
||||
cx.request_layout(&style, None)
|
||||
})
|
||||
}
|
||||
};
|
||||
(layout_id, ())
|
||||
}
|
||||
|
||||
|
|
@ -376,9 +594,11 @@ impl Element for List {
|
|||
cx: &mut crate::ElementContext,
|
||||
) {
|
||||
let state = &mut *self.state.0.borrow_mut();
|
||||
|
||||
state.reset = false;
|
||||
|
||||
let mut style = Style::default();
|
||||
style.refine(&self.style);
|
||||
|
||||
// If the width of the list has changed, invalidate all cached item heights
|
||||
if state.last_layout_bounds.map_or(true, |last_bounds| {
|
||||
last_bounds.size.width != bounds.size.width
|
||||
|
|
@ -389,130 +609,28 @@ impl Element for List {
|
|||
)
|
||||
}
|
||||
|
||||
let old_items = state.items.clone();
|
||||
let mut measured_items = VecDeque::new();
|
||||
let mut item_elements = VecDeque::new();
|
||||
let mut rendered_height = px(0.);
|
||||
let mut scroll_top = state.logical_scroll_top();
|
||||
let padding = style.padding.to_pixels(bounds.size.into(), cx.rem_size());
|
||||
let mut layout_response =
|
||||
state.layout_items(Some(bounds.size.width), bounds.size.height, &padding, cx);
|
||||
|
||||
let available_item_space = Size {
|
||||
width: AvailableSpace::Definite(bounds.size.width),
|
||||
height: AvailableSpace::MinContent,
|
||||
};
|
||||
|
||||
let mut cursor = old_items.cursor::<Count>();
|
||||
|
||||
// Render items after the scroll top, including those in the trailing overdraw
|
||||
cursor.seek(&Count(scroll_top.item_ix), Bias::Right, &());
|
||||
for (ix, item) in cursor.by_ref().enumerate() {
|
||||
let visible_height = rendered_height - scroll_top.offset_in_item;
|
||||
if visible_height >= bounds.size.height + state.overdraw {
|
||||
break;
|
||||
}
|
||||
|
||||
// Use the previously cached height if available
|
||||
let mut height = if let ListItem::Rendered { height } = item {
|
||||
Some(*height)
|
||||
} else {
|
||||
None
|
||||
};
|
||||
|
||||
// If we're within the visible area or the height wasn't cached, render and measure the item's element
|
||||
if visible_height < bounds.size.height || height.is_none() {
|
||||
let mut element = (state.render_item)(scroll_top.item_ix + ix, cx);
|
||||
let element_size = element.measure(available_item_space, cx);
|
||||
height = Some(element_size.height);
|
||||
if visible_height < bounds.size.height {
|
||||
item_elements.push_back(element);
|
||||
// Only paint the visible items, if there is actually any space for them (taking padding into account)
|
||||
if bounds.size.height > padding.top + padding.bottom {
|
||||
// Paint the visible items
|
||||
cx.with_content_mask(Some(ContentMask { bounds }), |cx| {
|
||||
let mut item_origin = bounds.origin + Point::new(px(0.), padding.top);
|
||||
item_origin.y -= layout_response.scroll_top.offset_in_item;
|
||||
for item_element in &mut layout_response.item_elements {
|
||||
let item_height = item_element
|
||||
.measure(layout_response.available_item_space, cx)
|
||||
.height;
|
||||
item_element.draw(item_origin, layout_response.available_item_space, cx);
|
||||
item_origin.y += item_height;
|
||||
}
|
||||
}
|
||||
|
||||
let height = height.unwrap();
|
||||
rendered_height += height;
|
||||
measured_items.push_back(ListItem::Rendered { height });
|
||||
});
|
||||
}
|
||||
|
||||
// Prepare to start walking upward from the item at the scroll top.
|
||||
cursor.seek(&Count(scroll_top.item_ix), Bias::Right, &());
|
||||
|
||||
// If the rendered items do not fill the visible region, then adjust
|
||||
// the scroll top upward.
|
||||
if rendered_height - scroll_top.offset_in_item < bounds.size.height {
|
||||
while rendered_height < bounds.size.height {
|
||||
cursor.prev(&());
|
||||
if cursor.item().is_some() {
|
||||
let mut element = (state.render_item)(cursor.start().0, cx);
|
||||
let element_size = element.measure(available_item_space, cx);
|
||||
|
||||
rendered_height += element_size.height;
|
||||
measured_items.push_front(ListItem::Rendered {
|
||||
height: element_size.height,
|
||||
});
|
||||
item_elements.push_front(element)
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
scroll_top = ListOffset {
|
||||
item_ix: cursor.start().0,
|
||||
offset_in_item: rendered_height - bounds.size.height,
|
||||
};
|
||||
|
||||
match state.alignment {
|
||||
ListAlignment::Top => {
|
||||
scroll_top.offset_in_item = scroll_top.offset_in_item.max(px(0.));
|
||||
state.logical_scroll_top = Some(scroll_top);
|
||||
}
|
||||
ListAlignment::Bottom => {
|
||||
scroll_top = ListOffset {
|
||||
item_ix: cursor.start().0,
|
||||
offset_in_item: rendered_height - bounds.size.height,
|
||||
};
|
||||
state.logical_scroll_top = None;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Measure items in the leading overdraw
|
||||
let mut leading_overdraw = scroll_top.offset_in_item;
|
||||
while leading_overdraw < state.overdraw {
|
||||
cursor.prev(&());
|
||||
if let Some(item) = cursor.item() {
|
||||
let height = if let ListItem::Rendered { height } = item {
|
||||
*height
|
||||
} else {
|
||||
let mut element = (state.render_item)(cursor.start().0, cx);
|
||||
element.measure(available_item_space, cx).height
|
||||
};
|
||||
|
||||
leading_overdraw += height;
|
||||
measured_items.push_front(ListItem::Rendered { height });
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
let measured_range = cursor.start().0..(cursor.start().0 + measured_items.len());
|
||||
let mut cursor = old_items.cursor::<Count>();
|
||||
let mut new_items = cursor.slice(&Count(measured_range.start), Bias::Right, &());
|
||||
new_items.extend(measured_items, &());
|
||||
cursor.seek(&Count(measured_range.end), Bias::Right, &());
|
||||
new_items.append(cursor.suffix(&()), &());
|
||||
|
||||
// Paint the visible items
|
||||
cx.with_content_mask(Some(ContentMask { bounds }), |cx| {
|
||||
let mut item_origin = bounds.origin;
|
||||
item_origin.y -= scroll_top.offset_in_item;
|
||||
for item_element in &mut item_elements {
|
||||
let item_height = item_element.measure(available_item_space, cx).height;
|
||||
item_element.draw(item_origin, available_item_space, cx);
|
||||
item_origin.y += item_height;
|
||||
}
|
||||
});
|
||||
|
||||
state.items = new_items;
|
||||
state.last_layout_bounds = Some(bounds);
|
||||
state.last_padding = Some(padding);
|
||||
|
||||
let list_state = self.state.clone();
|
||||
let height = bounds.size.height;
|
||||
|
|
@ -523,10 +641,11 @@ impl Element for List {
|
|||
&& cx.was_top_layer(&event.position, cx.stacking_order())
|
||||
{
|
||||
list_state.0.borrow_mut().scroll(
|
||||
&scroll_top,
|
||||
&layout_response.scroll_top,
|
||||
height,
|
||||
event.delta.pixel_delta(px(20.)),
|
||||
cx,
|
||||
padding,
|
||||
)
|
||||
}
|
||||
});
|
||||
|
|
@ -562,11 +681,11 @@ impl sum_tree::Item for ListItem {
|
|||
unrendered_count: 1,
|
||||
height: px(0.),
|
||||
},
|
||||
ListItem::Rendered { height } => ListItemSummary {
|
||||
ListItem::Rendered { size } => ListItemSummary {
|
||||
count: 1,
|
||||
rendered_count: 1,
|
||||
unrendered_count: 0,
|
||||
height: *height,
|
||||
height: size.height,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue