Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: Add Scrollbar component (#18927)

Browse source 
Closes #ISSUE

Release Notes:

- N/A
This commit is contained in:
Piotr Osiewicz 2024-10-16 13:57:28 +02:00 • committed by GitHub
parent eddf70b5c4
commit 109ebc5f27
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 513 additions and 409 deletions
Download patch file Download diff file Expand all files Collapse all files

5
crates/gpui/src/elements/div.rs
View file

@ -2575,4 +2575,9 @@ impl ScrollHandle {
pub fn set_logical_scroll_top(&self, ix: usize, px: Pixels) {
self.0.borrow_mut().requested_scroll_top = Some((ix, px));
}
/// Get the count of children for scrollable item.
pub fn children_count(&self) -> usize {
self.0.borrow().child_bounds.len()
}
}

114
crates/project_panel/src/project_panel.rs
View file

@ -1,8 +1,8 @@
mod project_panel_settings;
mod scrollbar;
use client::{ErrorCode, ErrorExt};
use scrollbar::ProjectPanelScrollbar;
use settings::{Settings, SettingsStore};
use ui::{Scrollbar, ScrollbarState};
use db::kvp::KEY_VALUE_STORE;
use editor::{
@ -14,16 +14,14 @@ use file_icons::FileIcons;
use anyhow::{anyhow, Context as _, Result};
use collections::{hash_map, BTreeSet, HashMap};
use core::f32;
use git::repository::GitFileStatus;
use gpui::{
actions, anchored, deferred, div, impl_actions, px, uniform_list, Action, AnyElement,
AppContext, AssetSource, AsyncWindowContext, ClipboardItem, DismissEvent, Div, DragMoveEvent,
Entity, EventEmitter, ExternalPaths, FocusHandle, FocusableView, InteractiveElement,
KeyContext, ListHorizontalSizingBehavior, ListSizingBehavior, Model, MouseButton,
MouseDownEvent, ParentElement, Pixels, Point, PromptLevel, Render, Stateful, Styled,
Subscription, Task, UniformListScrollHandle, View, ViewContext, VisualContext as _, WeakView,
WindowContext,
EventEmitter, ExternalPaths, FocusHandle, FocusableView, InteractiveElement, KeyContext,
ListHorizontalSizingBehavior, ListSizingBehavior, Model, MouseButton, MouseDownEvent,
ParentElement, Pixels, Point, PromptLevel, Render, Stateful, Styled, Subscription, Task,
UniformListScrollHandle, View, ViewContext, VisualContext as _, WeakView, WindowContext,
};
use indexmap::IndexMap;
use menu::{Confirm, SelectFirst, SelectLast, SelectNext, SelectPrev};
@ -34,12 +32,11 @@ use project::{
use project_panel_settings::{ProjectPanelDockPosition, ProjectPanelSettings};
use serde::{Deserialize, Serialize};
use std::{
cell::{Cell, OnceCell},
cell::OnceCell,
collections::HashSet,
ffi::OsStr,
ops::Range,
path::{Path, PathBuf},
rc::Rc,
sync::Arc,
time::Duration,
};
@ -59,8 +56,8 @@ const NEW_ENTRY_ID: ProjectEntryId = ProjectEntryId::MAX;
pub struct ProjectPanel {
project: Model<Project>,
fs: Arc<dyn Fs>,
scroll_handle: UniformListScrollHandle,
focus_handle: FocusHandle,
scroll_handle: UniformListScrollHandle,
visible_entries: Vec<(WorktreeId, Vec<Entry>, OnceCell<HashSet<Arc<Path>>>)>,
/// Maps from leaf project entry ID to the currently selected ancestor.
/// Relevant only for auto-fold dirs, where a single project panel entry may actually consist of several
@ -82,8 +79,8 @@ pub struct ProjectPanel {
width: Option<Pixels>,
pending_serialization: Task<Option<()>>,
show_scrollbar: bool,
vertical_scrollbar_drag_thumb_offset: Rc<Cell<Option<f32>>>,
horizontal_scrollbar_drag_thumb_offset: Rc<Cell<Option<f32>>>,
vertical_scrollbar_state: ScrollbarState,
horizontal_scrollbar_state: ScrollbarState,
hide_scrollbar_task: Option<Task<()>>,
max_width_item_index: Option<usize>,
}
@ -297,10 +294,10 @@ impl ProjectPanel {
})
.detach();
let scroll_handle = UniformListScrollHandle::new();
let mut this = Self {
project: project.clone(),
fs: workspace.app_state().fs.clone(),
scroll_handle: UniformListScrollHandle::new(),
focus_handle,
visible_entries: Default::default(),
ancestors: Default::default(),
@ -320,9 +317,12 @@ impl ProjectPanel {
pending_serialization: Task::ready(None),
show_scrollbar: !Self::should_autohide_scrollbar(cx),
hide_scrollbar_task: None,
vertical_scrollbar_drag_thumb_offset: Default::default(),
horizontal_scrollbar_drag_thumb_offset: Default::default(),
vertical_scrollbar_state: ScrollbarState::new(scroll_handle.clone())
.parent_view(cx.view()),
horizontal_scrollbar_state: ScrollbarState::new(scroll_handle.clone())
.parent_view(cx.view()),
max_width_item_index: None,
scroll_handle,
};
this.update_visible_entries(None, cx);
@ -2606,37 +2606,11 @@ impl ProjectPanel {
}
fn render_vertical_scrollbar(&self, cx: &mut ViewContext<Self>) -> Option<Stateful<Div>> {
if !Self::should_show_scrollbar(cx) {
return None;
}
let scroll_handle = self.scroll_handle.0.borrow();
let total_list_length = scroll_handle
.last_item_size
.filter(|_| {
self.show_scrollbar || self.vertical_scrollbar_drag_thumb_offset.get().is_some()
})?
.contents
.height
.0 as f64;
let current_offset = scroll_handle.base_handle.offset().y.0.min(0.).abs() as f64;
let mut percentage = current_offset / total_list_length;
let end_offset = (current_offset + scroll_handle.base_handle.bounds().size.height.0 as f64)
/ total_list_length;
// Uniform scroll handle might briefly report an offset greater than the length of a list;
// in such case we'll adjust the starting offset as well to keep the scrollbar thumb length stable.
let overshoot = (end_offset - 1.).clamp(0., 1.);
if overshoot > 0. {
percentage -= overshoot;
}
const MINIMUM_SCROLLBAR_PERCENTAGE_HEIGHT: f64 = 0.005;
if percentage + MINIMUM_SCROLLBAR_PERCENTAGE_HEIGHT > 1.0 || end_offset > total_list_length
if !Self::should_show_scrollbar(cx)
|| !(self.show_scrollbar || self.vertical_scrollbar_state.is_dragging())
{
return None;
}
if total_list_length < scroll_handle.base_handle.bounds().size.height.0 as f64 {
return None;
}
let end_offset = end_offset.clamp(percentage + MINIMUM_SCROLLBAR_PERCENTAGE_HEIGHT, 1.);
Some(
div()
.occlude()
@ -2654,7 +2628,7 @@ impl ProjectPanel {
.on_mouse_up(
MouseButton::Left,
cx.listener(|this, _, cx| {
if this.vertical_scrollbar_drag_thumb_offset.get().is_none()
if !this.vertical_scrollbar_state.is_dragging()
&& !this.focus_handle.contains_focused(cx)
{
this.hide_scrollbar(cx);
@ -2674,48 +2648,20 @@ impl ProjectPanel {
.bottom_1()
.w(px(12.))
.cursor_default()
.child(ProjectPanelScrollbar::vertical(
percentage as f32..end_offset as f32,
self.scroll_handle.clone(),
self.vertical_scrollbar_drag_thumb_offset.clone(),
cx.view().entity_id(),
.children(Scrollbar::vertical(
// percentage as f32..end_offset as f32,
self.vertical_scrollbar_state.clone(),
)),
)
}
fn render_horizontal_scrollbar(&self, cx: &mut ViewContext<Self>) -> Option<Stateful<Div>> {
if !Self::should_show_scrollbar(cx) {
return None;
}
let scroll_handle = self.scroll_handle.0.borrow();
let longest_item_width = scroll_handle
.last_item_size
.filter(|_| {
self.show_scrollbar || self.horizontal_scrollbar_drag_thumb_offset.get().is_some()
})
.filter(|size| size.contents.width > size.item.width)?
.contents
.width
.0 as f64;
let current_offset = scroll_handle.base_handle.offset().x.0.min(0.).abs() as f64;
let mut percentage = current_offset / longest_item_width;
let end_offset = (current_offset + scroll_handle.base_handle.bounds().size.width.0 as f64)
/ longest_item_width;
// Uniform scroll handle might briefly report an offset greater than the length of a list;
// in such case we'll adjust the starting offset as well to keep the scrollbar thumb length stable.
let overshoot = (end_offset - 1.).clamp(0., 1.);
if overshoot > 0. {
percentage -= overshoot;
}
const MINIMUM_SCROLLBAR_PERCENTAGE_WIDTH: f64 = 0.005;
if percentage + MINIMUM_SCROLLBAR_PERCENTAGE_WIDTH > 1.0 || end_offset > longest_item_width
if !Self::should_show_scrollbar(cx)
|| !(self.show_scrollbar || self.horizontal_scrollbar_state.is_dragging())
{
return None;
}
if longest_item_width < scroll_handle.base_handle.bounds().size.width.0 as f64 {
return None;
}
let end_offset = end_offset.clamp(percentage + MINIMUM_SCROLLBAR_PERCENTAGE_WIDTH, 1.);
Some(
div()
.occlude()
@ -2733,7 +2679,7 @@ impl ProjectPanel {
.on_mouse_up(
MouseButton::Left,
cx.listener(|this, _, cx| {
if this.horizontal_scrollbar_drag_thumb_offset.get().is_none()
if !this.horizontal_scrollbar_state.is_dragging()
&& !this.focus_handle.contains_focused(cx)
{
this.hide_scrollbar(cx);
@ -2754,11 +2700,9 @@ impl ProjectPanel {
.h(px(12.))
.cursor_default()
.when(self.width.is_some(), |this| {
this.child(ProjectPanelScrollbar::horizontal(
percentage as f32..end_offset as f32,
self.scroll_handle.clone(),
self.horizontal_scrollbar_drag_thumb_offset.clone(),
cx.view().entity_id(),
this.children(Scrollbar::horizontal(
//percentage as f32..end_offset as f32,
self.horizontal_scrollbar_state.clone(),
))
}),
)

277
crates/project_panel/src/scrollbar.rs
View file

@ -1,277 +0,0 @@
use std::{cell::Cell, ops::Range, rc::Rc};
use gpui::{
point, quad, Bounds, ContentMask, Corners, Edges, EntityId, Hitbox, Hsla, MouseDownEvent,
MouseMoveEvent, MouseUpEvent, ScrollWheelEvent, Style, UniformListScrollHandle,
};
use ui::{prelude::*, px, relative, IntoElement};
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub(crate) enum ScrollbarKind {
Horizontal,
Vertical,
}
pub(crate) struct ProjectPanelScrollbar {
thumb: Range<f32>,
scroll: UniformListScrollHandle,
// If Some(), there's an active drag, offset by percentage from the top of thumb.
scrollbar_drag_state: Rc<Cell<Option<f32>>>,
kind: ScrollbarKind,
parent_id: EntityId,
}
impl ProjectPanelScrollbar {
pub(crate) fn vertical(
thumb: Range<f32>,
scroll: UniformListScrollHandle,
scrollbar_drag_state: Rc<Cell<Option<f32>>>,
parent_id: EntityId,
) -> Self {
Self {
thumb,
scroll,
scrollbar_drag_state,
kind: ScrollbarKind::Vertical,
parent_id,
}
}
pub(crate) fn horizontal(
thumb: Range<f32>,
scroll: UniformListScrollHandle,
scrollbar_drag_state: Rc<Cell<Option<f32>>>,
parent_id: EntityId,
) -> Self {
Self {
thumb,
scroll,
scrollbar_drag_state,
kind: ScrollbarKind::Horizontal,
parent_id,
}
}
}
impl gpui::Element for ProjectPanelScrollbar {
type RequestLayoutState = ();
type PrepaintState = Hitbox;
fn id(&self) -> Option<ui::ElementId> {
None
}
fn request_layout(
&mut self,
_id: Option<&gpui::GlobalElementId>,
cx: &mut ui::WindowContext,
) -> (gpui::LayoutId, Self::RequestLayoutState) {
let mut style = Style::default();
style.flex_grow = 1.;
style.flex_shrink = 1.;
if self.kind == ScrollbarKind::Vertical {
style.size.width = px(12.).into();
style.size.height = relative(1.).into();
} else {
style.size.width = relative(1.).into();
style.size.height = px(12.).into();
}
(cx.request_layout(style, None), ())
}
fn prepaint(
&mut self,
_id: Option<&gpui::GlobalElementId>,
bounds: Bounds<ui::Pixels>,
_request_layout: &mut Self::RequestLayoutState,
cx: &mut ui::WindowContext,
) -> Self::PrepaintState {
cx.with_content_mask(Some(ContentMask { bounds }), |cx| {
cx.insert_hitbox(bounds, false)
})
}
fn paint(
&mut self,
_id: Option<&gpui::GlobalElementId>,
bounds: Bounds<ui::Pixels>,
_request_layout: &mut Self::RequestLayoutState,
_prepaint: &mut Self::PrepaintState,
cx: &mut ui::WindowContext,
) {
cx.with_content_mask(Some(ContentMask { bounds }), |cx| {
let colors = cx.theme().colors();
let thumb_background = colors.scrollbar_thumb_background;
let is_vertical = self.kind == ScrollbarKind::Vertical;
let extra_padding = px(5.0);
let padded_bounds = if is_vertical {
Bounds::from_corners(
bounds.origin + point(Pixels::ZERO, extra_padding),
bounds.lower_right() - point(Pixels::ZERO, extra_padding * 3),
)
} else {
Bounds::from_corners(
bounds.origin + point(extra_padding, Pixels::ZERO),
bounds.lower_right() - point(extra_padding * 3, Pixels::ZERO),
)
};
let mut thumb_bounds = if is_vertical {
let thumb_offset = self.thumb.start * padded_bounds.size.height;
let thumb_end = self.thumb.end * padded_bounds.size.height;
let thumb_upper_left = point(
padded_bounds.origin.x,
padded_bounds.origin.y + thumb_offset,
);
let thumb_lower_right = point(
padded_bounds.origin.x + padded_bounds.size.width,
padded_bounds.origin.y + thumb_end,
);
Bounds::from_corners(thumb_upper_left, thumb_lower_right)
} else {
let thumb_offset = self.thumb.start * padded_bounds.size.width;
let thumb_end = self.thumb.end * padded_bounds.size.width;
let thumb_upper_left = point(
padded_bounds.origin.x + thumb_offset,
padded_bounds.origin.y,
);
let thumb_lower_right = point(
padded_bounds.origin.x + thumb_end,
padded_bounds.origin.y + padded_bounds.size.height,
);
Bounds::from_corners(thumb_upper_left, thumb_lower_right)
};
let corners = if is_vertical {
thumb_bounds.size.width /= 1.5;
Corners::all(thumb_bounds.size.width / 2.0)
} else {
thumb_bounds.size.height /= 1.5;
Corners::all(thumb_bounds.size.height / 2.0)
};
cx.paint_quad(quad(
thumb_bounds,
corners,
thumb_background,
Edges::default(),
Hsla::transparent_black(),
));
let scroll = self.scroll.clone();
let kind = self.kind;
let thumb_percentage_size = self.thumb.end - self.thumb.start;
cx.on_mouse_event({
let scroll = self.scroll.clone();
let is_dragging = self.scrollbar_drag_state.clone();
move |event: &MouseDownEvent, phase, _cx| {
if phase.bubble() && bounds.contains(&event.position) {
if !thumb_bounds.contains(&event.position) {
let scroll = scroll.0.borrow();
if let Some(item_size) = scroll.last_item_size {
match kind {
ScrollbarKind::Horizontal => {
let percentage = (event.position.x - bounds.origin.x)
/ bounds.size.width;
let max_offset = item_size.contents.width;
let percentage = percentage.min(1. - thumb_percentage_size);
scroll.base_handle.set_offset(point(
-max_offset * percentage,
scroll.base_handle.offset().y,
));
}
ScrollbarKind::Vertical => {
let percentage = (event.position.y - bounds.origin.y)
/ bounds.size.height;
let max_offset = item_size.contents.height;
let percentage = percentage.min(1. - thumb_percentage_size);
scroll.base_handle.set_offset(point(
scroll.base_handle.offset().x,
-max_offset * percentage,
));
}
}
}
} else {
let thumb_offset = if is_vertical {
(event.position.y - thumb_bounds.origin.y) / bounds.size.height
} else {
(event.position.x - thumb_bounds.origin.x) / bounds.size.width
};
is_dragging.set(Some(thumb_offset));
}
}
}
});
cx.on_mouse_event({
let scroll = self.scroll.clone();
move |event: &ScrollWheelEvent, phase, cx| {
if phase.bubble() && bounds.contains(&event.position) {
let scroll = scroll.0.borrow_mut();
let current_offset = scroll.base_handle.offset();
scroll
.base_handle
.set_offset(current_offset + event.delta.pixel_delta(cx.line_height()));
}
}
});
let drag_state = self.scrollbar_drag_state.clone();
let view_id = self.parent_id;
let kind = self.kind;
cx.on_mouse_event(move |event: &MouseMoveEvent, _, cx| {
if let Some(drag_state) = drag_state.get().filter(|_| event.dragging()) {
let scroll = scroll.0.borrow();
if let Some(item_size) = scroll.last_item_size {
match kind {
ScrollbarKind::Horizontal => {
let max_offset = item_size.contents.width;
let percentage = (event.position.x - bounds.origin.x)
/ bounds.size.width
- drag_state;
let percentage = percentage.min(1. - thumb_percentage_size);
scroll.base_handle.set_offset(point(
-max_offset * percentage,
scroll.base_handle.offset().y,
));
}
ScrollbarKind::Vertical => {
let max_offset = item_size.contents.height;
let percentage = (event.position.y - bounds.origin.y)
/ bounds.size.height
- drag_state;
let percentage = percentage.min(1. - thumb_percentage_size);
scroll.base_handle.set_offset(point(
scroll.base_handle.offset().x,
-max_offset * percentage,
));
}
};
cx.notify(view_id);
}
} else {
drag_state.set(None);
}
});
let is_dragging = self.scrollbar_drag_state.clone();
cx.on_mouse_event(move |_event: &MouseUpEvent, phase, cx| {
if phase.bubble() {
is_dragging.set(None);
cx.notify(view_id);
}
});
})
}
}
impl IntoElement for ProjectPanelScrollbar {
type Element = Self;
fn into_element(self) -> Self::Element {
self
}
}

128
crates/recent_projects/src/dev_servers.rs
View file

@ -34,6 +34,8 @@ use task::HideStrategy;
use task::RevealStrategy;
use task::SpawnInTerminal;
use terminal_view::terminal_panel::TerminalPanel;
use ui::Scrollbar;
use ui::ScrollbarState;
use ui::Section;
use ui::{prelude::*, IconButtonShape, List, ListItem, ListSeparator, Modal, ModalHeader, Tooltip};
use util::ResultExt;
@ -301,13 +303,19 @@ impl gpui::Render for ProjectPicker {
}
}
enum Mode {
Default,
Default(ScrollbarState),
ViewServerOptions(usize, SshConnection),
EditNickname(EditNicknameState),
ProjectPicker(View<ProjectPicker>),
CreateDevServer(CreateDevServer),
}
impl Mode {
fn default_mode() -> Self {
let handle = ScrollHandle::new();
Self::Default(ScrollbarState::new(handle))
}
}
impl DevServerProjects {
pub fn register(workspace: &mut Workspace, _: &mut ViewContext<Workspace>) {
workspace.register_action(|workspace, _: &OpenRemote, cx| {
@ -338,7 +346,7 @@ impl DevServerProjects {
});
Self {
mode: Mode::Default,
mode: Mode::default_mode(),
focus_handle,
scroll_handle: ScrollHandle::new(),
dev_server_store,
@ -349,13 +357,13 @@ impl DevServerProjects {
}
fn next_item(&mut self, _: &menu::SelectNext, cx: &mut ViewContext<Self>) {
if !matches!(self.mode, Mode::Default | Mode::ViewServerOptions(_, _)) {
if !matches!(self.mode, Mode::Default(_) | Mode::ViewServerOptions(_, _)) {
return;
}
self.selectable_items.next(cx);
}
fn prev_item(&mut self, _: &menu::SelectPrev, cx: &mut ViewContext<Self>) {
if !matches!(self.mode, Mode::Default | Mode::ViewServerOptions(_, _)) {
if !matches!(self.mode, Mode::Default(_) | Mode::ViewServerOptions(_, _)) {
return;
}
self.selectable_items.prev(cx);
@ -431,7 +439,7 @@ impl DevServerProjects {
});
this.add_ssh_server(connection_options, cx);
this.mode = Mode::Default;
this.mode = Mode::default_mode();
this.selectable_items.reset_selection();
cx.notify()
})
@ -535,7 +543,7 @@ impl DevServerProjects {
fn confirm(&mut self, _: &menu::Confirm, cx: &mut ViewContext<Self>) {
match &self.mode {
Mode::Default | Mode::ViewServerOptions(_, _) => {
Mode::Default(_) | Mode::ViewServerOptions(_, _) => {
let items = std::mem::take(&mut self.selectable_items);
items.confirm(self, cx);
self.selectable_items = items;
@ -566,7 +574,7 @@ impl DevServerProjects {
}
}
});
self.mode = Mode::Default;
self.mode = Mode::default_mode();
self.selectable_items.reset_selection();
self.focus_handle.focus(cx);
}
@ -575,14 +583,14 @@ impl DevServerProjects {
fn cancel(&mut self, _: &menu::Cancel, cx: &mut ViewContext<Self>) {
match &self.mode {
Mode::Default => cx.emit(DismissEvent),
Mode::Default(_) => cx.emit(DismissEvent),
Mode::CreateDevServer(state) if state.ssh_prompt.is_some() => {
self.mode = Mode::CreateDevServer(CreateDevServer::new(cx));
self.selectable_items.reset_selection();
cx.notify();
}
_ => {
self.mode = Mode::Default;
self.mode = Mode::default_mode();
self.selectable_items.reset_selection();
self.focus_handle(cx).focus(cx);
cx.notify();
@ -1012,7 +1020,7 @@ impl DevServerProjects {
move |cx| {
dev_servers.update(cx, |this, cx| {
this.delete_ssh_server(index, cx);
this.mode = Mode::Default;
this.mode = Mode::default_mode();
cx.notify();
})
},
@ -1055,7 +1063,7 @@ impl DevServerProjects {
.child({
self.selectable_items.add_item(Box::new({
move |this, cx| {
this.mode = Mode::Default;
this.mode = Mode::default_mode();
cx.notify();
}
}));
@ -1067,7 +1075,7 @@ impl DevServerProjects {
.start_slot(Icon::new(IconName::ArrowLeft).color(Color::Muted))
.child(Label::new("Go Back"))
.on_click(cx.listener(|this, _, cx| {
this.mode = Mode::Default;
this.mode = Mode::default_mode();
cx.notify()
}))
}),
@ -1099,7 +1107,12 @@ impl DevServerProjects {
.child(h_flex().p_2().child(state.editor.clone()))
}
fn render_default(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
fn render_default(
&mut self,
scroll_state: ScrollbarState,
cx: &mut ViewContext<Self>,
) -> impl IntoElement {
let scroll_state = scroll_state.parent_view(cx.view());
let dev_servers = self.dev_server_store.read(cx).dev_servers();
let ssh_connections = SshSettings::get_global(cx)
.ssh_connections()
@ -1124,27 +1137,37 @@ impl DevServerProjects {
cx.notify();
}));
let ui::ScrollableHandle::NonUniform(scroll_handle) = scroll_state.scroll_handle() else {
unreachable!()
};
let mut modal_section = v_flex()
.id("ssh-server-list")
.overflow_y_scroll()
.track_scroll(&scroll_handle)
.size_full()
.child(connect_button)
.child(
List::new()
.empty_message(
v_flex()
.child(ListSeparator)
.child(div().px_3().child(
Label::new("No dev servers registered yet.").color(Color::Muted),
))
.into_any_element(),
)
.children(ssh_connections.iter().cloned().enumerate().map(
|(ix, connection)| {
self.render_ssh_connection(ix, connection, cx)
.into_any_element()
},
)),
h_flex().child(
List::new()
.empty_message(
v_flex()
.child(ListSeparator)
.child(
div().px_3().child(
Label::new("No dev servers registered yet.")
.color(Color::Muted),
),
)
.into_any_element(),
)
.children(ssh_connections.iter().cloned().enumerate().map(
|(ix, connection)| {
self.render_ssh_connection(ix, connection, cx)
.into_any_element()
},
)),
),
)
.into_any_element();
@ -1162,26 +1185,37 @@ impl DevServerProjects {
)
.section(
Section::new().padded(false).child(
v_flex()
h_flex()
.min_h(rems(20.))
.flex_1()
.size_full()
.child(ListSeparator)
.child(
canvas(
|bounds, cx| {
modal_section.prepaint_as_root(
bounds.origin,
bounds.size.into(),
cx,
);
modal_section
},
|_, mut modal_section, cx| {
modal_section.paint(cx);
},
)
.size_full(),
v_flex().size_full().child(ListSeparator).child(
canvas(
|bounds, cx| {
modal_section.prepaint_as_root(
bounds.origin,
bounds.size.into(),
cx,
);
modal_section
},
|_, mut modal_section, cx| {
modal_section.paint(cx);
},
)
.size_full(),
),
)
.child(
div()
.occlude()
.h_full()
.absolute()
.right_1()
.top_1()
.bottom_1()
.w(px(12.))
.children(Scrollbar::vertical(scroll_state)),
),
),
)
@ -1217,13 +1251,13 @@ impl Render for DevServerProjects {
this.focus_handle(cx).focus(cx);
}))
.on_mouse_down_out(cx.listener(|this, _, cx| {
if matches!(this.mode, Mode::Default) {
if matches!(this.mode, Mode::Default(_)) {
cx.emit(DismissEvent)
}
}))
.w(rems(34.))
.child(match &self.mode {
Mode::Default => self.render_default(cx).into_any_element(),
Mode::Default(state) => self.render_default(state.clone(), cx).into_any_element(),
Mode::ViewServerOptions(index, connection) => self
.render_view_options(*index, connection.clone(), cx)
.into_any_element(),

2
crates/ui/src/components.rs
View file

@ -18,6 +18,7 @@ mod popover;
mod popover_menu;
mod radio;
mod right_click_menu;
mod scrollbar;
mod settings_container;
mod settings_group;
mod stack;
@ -49,6 +50,7 @@ pub use popover::*;
pub use popover_menu::*;
pub use radio::*;
pub use right_click_menu::*;
pub use scrollbar::*;
pub use settings_container::*;
pub use settings_group::*;
pub use stack::*;

396
crates/ui/src/components/scrollbar.rs Normal file
View file

@ -0,0 +1,396 @@
#![allow(missing_docs)]
use std::{cell::Cell, ops::Range, rc::Rc};
use crate::{prelude::*, px, relative, IntoElement};
use gpui::{
point, quad, Along, Axis as ScrollbarAxis, Bounds, ContentMask, Corners, Edges, Element,
ElementId, Entity, EntityId, GlobalElementId, Hitbox, Hsla, LayoutId, MouseDownEvent,
MouseMoveEvent, MouseUpEvent, Pixels, Point, ScrollHandle, ScrollWheelEvent, Size, Style,
UniformListScrollHandle, View, WindowContext,
};
pub struct Scrollbar {
thumb: Range<f32>,
state: ScrollbarState,
kind: ScrollbarAxis,
}
/// Wrapper around scroll handles.
#[derive(Clone)]
pub enum ScrollableHandle {
Uniform(UniformListScrollHandle),
NonUniform(ScrollHandle),
}
#[derive(Debug)]
struct ContentSize {
size: Size<Pixels>,
scroll_adjustment: Option<Point<Pixels>>,
}
impl ScrollableHandle {
fn content_size(&self) -> Option<ContentSize> {
match self {
ScrollableHandle::Uniform(handle) => Some(ContentSize {
size: handle.0.borrow().last_item_size.map(|size| size.contents)?,
scroll_adjustment: None,
}),
ScrollableHandle::NonUniform(handle) => {
let last_children_index = handle.children_count().checked_sub(1)?;
// todo: PO: this is slightly wrong for horizontal scrollbar, as the last item is not necessarily the longest one.
let mut last_item = handle.bounds_for_item(last_children_index)?;
last_item.size.height += last_item.origin.y;
last_item.size.width += last_item.origin.x;
let mut scroll_adjustment = None;
if last_children_index != 0 {
let first_item = handle.bounds_for_item(0)?;
scroll_adjustment = Some(first_item.origin);
last_item.size.height -= first_item.origin.y;
last_item.size.width -= first_item.origin.x;
}
Some(ContentSize {
size: last_item.size,
scroll_adjustment,
})
}
}
}
fn set_offset(&self, point: Point<Pixels>) {
let base_handle = match self {
ScrollableHandle::Uniform(handle) => &handle.0.borrow().base_handle,
ScrollableHandle::NonUniform(handle) => &handle,
};
base_handle.set_offset(point);
}
fn offset(&self) -> Point<Pixels> {
let base_handle = match self {
ScrollableHandle::Uniform(handle) => &handle.0.borrow().base_handle,
ScrollableHandle::NonUniform(handle) => &handle,
};
base_handle.offset()
}
fn viewport(&self) -> Bounds<Pixels> {
let base_handle = match self {
ScrollableHandle::Uniform(handle) => &handle.0.borrow().base_handle,
ScrollableHandle::NonUniform(handle) => &handle,
};
base_handle.bounds()
}
}
impl From<UniformListScrollHandle> for ScrollableHandle {
fn from(value: UniformListScrollHandle) -> Self {
Self::Uniform(value)
}
}
impl From<ScrollHandle> for ScrollableHandle {
fn from(value: ScrollHandle) -> Self {
Self::NonUniform(value)
}
}
/// A scrollbar state that should be persisted across frames.
#[derive(Clone)]
pub struct ScrollbarState {
// If Some(), there's an active drag, offset by percentage from the origin of a thumb.
drag: Rc<Cell<Option<f32>>>,
parent_id: Option<EntityId>,
scroll_handle: ScrollableHandle,
}
impl ScrollbarState {
pub fn new(scroll: impl Into<ScrollableHandle>) -> Self {
Self {
drag: Default::default(),
parent_id: None,
scroll_handle: scroll.into(),
}
}
/// Set a parent view which should be notified whenever this Scrollbar gets a scroll event.
pub fn parent_view<V: 'static>(mut self, v: &View<V>) -> Self {
self.parent_id = Some(v.entity_id());
self
}
pub fn scroll_handle(&self) -> ScrollableHandle {
self.scroll_handle.clone()
}
pub fn is_dragging(&self) -> bool {
self.drag.get().is_some()
}
fn thumb_range(&self, axis: ScrollbarAxis) -> Option<Range<f32>> {
const MINIMUM_SCROLLBAR_PERCENTAGE_SIZE: f32 = 0.005;
let ContentSize {
size: main_dimension_size,
scroll_adjustment,
} = self.scroll_handle.content_size()?;
let main_dimension_size = main_dimension_size.along(axis).0;
let mut current_offset = self.scroll_handle.offset().along(axis).min(px(0.)).abs().0;
if let Some(adjustment) = scroll_adjustment.and_then(|adjustment| {
let adjust = adjustment.along(axis).0;
if adjust < 0.0 {
Some(adjust)
} else {
None
}
}) {
current_offset -= adjustment;
}
let mut percentage = current_offset / main_dimension_size;
let viewport_size = self.scroll_handle.viewport().size;
let end_offset = (current_offset + viewport_size.along(axis).0) / main_dimension_size;
// Scroll handle might briefly report an offset greater than the length of a list;
// in such case we'll adjust the starting offset as well to keep the scrollbar thumb length stable.
let overshoot = (end_offset - 1.).clamp(0., 1.);
if overshoot > 0. {
percentage -= overshoot;
}
if percentage + MINIMUM_SCROLLBAR_PERCENTAGE_SIZE > 1.0 || end_offset > main_dimension_size
{
return None;
}
if main_dimension_size < viewport_size.along(axis).0 {
return None;
}
let end_offset = end_offset.clamp(percentage + MINIMUM_SCROLLBAR_PERCENTAGE_SIZE, 1.);
Some(percentage..end_offset)
}
}
impl Scrollbar {
pub fn vertical(state: ScrollbarState) -> Option<Self> {
Self::new(state, ScrollbarAxis::Vertical)
}
pub fn horizontal(state: ScrollbarState) -> Option<Self> {
Self::new(state, ScrollbarAxis::Horizontal)
}
fn new(state: ScrollbarState, kind: ScrollbarAxis) -> Option<Self> {
let thumb = state.thumb_range(kind)?;
Some(Self { thumb, state, kind })
}
}
impl Element for Scrollbar {
type RequestLayoutState = ();
type PrepaintState = Hitbox;
fn id(&self) -> Option<ElementId> {
None
}
fn request_layout(
&mut self,
_id: Option<&GlobalElementId>,
cx: &mut WindowContext,
) -> (LayoutId, Self::RequestLayoutState) {
let mut style = Style::default();
style.flex_grow = 1.;
style.flex_shrink = 1.;
if self.kind == ScrollbarAxis::Vertical {
style.size.width = px(12.).into();
style.size.height = relative(1.).into();
} else {
style.size.width = relative(1.).into();
style.size.height = px(12.).into();
}
(cx.request_layout(style, None), ())
}
fn prepaint(
&mut self,
_id: Option<&GlobalElementId>,
bounds: Bounds<Pixels>,
_request_layout: &mut Self::RequestLayoutState,
cx: &mut WindowContext,
) -> Self::PrepaintState {
cx.with_content_mask(Some(ContentMask { bounds }), |cx| {
cx.insert_hitbox(bounds, false)
})
}
fn paint(
&mut self,
_id: Option<&GlobalElementId>,
bounds: Bounds<Pixels>,
_request_layout: &mut Self::RequestLayoutState,
_prepaint: &mut Self::PrepaintState,
cx: &mut WindowContext,
) {
cx.with_content_mask(Some(ContentMask { bounds }), |cx| {
let colors = cx.theme().colors();
let thumb_background = colors.scrollbar_thumb_background;
let is_vertical = self.kind == ScrollbarAxis::Vertical;
let extra_padding = px(5.0);
let padded_bounds = if is_vertical {
Bounds::from_corners(
bounds.origin + point(Pixels::ZERO, extra_padding),
bounds.lower_right() - point(Pixels::ZERO, extra_padding * 3),
)
} else {
Bounds::from_corners(
bounds.origin + point(extra_padding, Pixels::ZERO),
bounds.lower_right() - point(extra_padding * 3, Pixels::ZERO),
)
};
let mut thumb_bounds = if is_vertical {
let thumb_offset = self.thumb.start * padded_bounds.size.height;
let thumb_end = self.thumb.end * padded_bounds.size.height;
let thumb_upper_left = point(
padded_bounds.origin.x,
padded_bounds.origin.y + thumb_offset,
);
let thumb_lower_right = point(
padded_bounds.origin.x + padded_bounds.size.width,
padded_bounds.origin.y + thumb_end,
);
Bounds::from_corners(thumb_upper_left, thumb_lower_right)
} else {
let thumb_offset = self.thumb.start * padded_bounds.size.width;
let thumb_end = self.thumb.end * padded_bounds.size.width;
let thumb_upper_left = point(
padded_bounds.origin.x + thumb_offset,
padded_bounds.origin.y,
);
let thumb_lower_right = point(
padded_bounds.origin.x + thumb_end,
padded_bounds.origin.y + padded_bounds.size.height,
);
Bounds::from_corners(thumb_upper_left, thumb_lower_right)
};
let corners = if is_vertical {
thumb_bounds.size.width /= 1.5;
Corners::all(thumb_bounds.size.width / 2.0)
} else {
thumb_bounds.size.height /= 1.5;
Corners::all(thumb_bounds.size.height / 2.0)
};
cx.paint_quad(quad(
thumb_bounds,
corners,
thumb_background,
Edges::default(),
Hsla::transparent_black(),
));
let scroll = self.state.scroll_handle.clone();
let kind = self.kind;
let thumb_percentage_size = self.thumb.end - self.thumb.start;
cx.on_mouse_event({
let scroll = scroll.clone();
let state = self.state.clone();
let axis = self.kind;
move |event: &MouseDownEvent, phase, _cx| {
if !(phase.bubble() && bounds.contains(&event.position)) {
return;
}
if thumb_bounds.contains(&event.position) {
let thumb_offset = (event.position.along(axis)
- thumb_bounds.origin.along(axis))
/ bounds.size.along(axis);
state.drag.set(Some(thumb_offset));
} else if let Some(ContentSize {
size: item_size, ..
}) = scroll.content_size()
{
match kind {
ScrollbarAxis::Horizontal => {
let percentage =
(event.position.x - bounds.origin.x) / bounds.size.width;
let max_offset = item_size.width;
let percentage = percentage.min(1. - thumb_percentage_size);
scroll
.set_offset(point(-max_offset * percentage, scroll.offset().y));
}
ScrollbarAxis::Vertical => {
let percentage =
(event.position.y - bounds.origin.y) / bounds.size.height;
let max_offset = item_size.height;
let percentage = percentage.min(1. - thumb_percentage_size);
scroll
.set_offset(point(scroll.offset().x, -max_offset * percentage));
}
}
}
}
});
cx.on_mouse_event({
let scroll = scroll.clone();
move |event: &ScrollWheelEvent, phase, cx| {
if phase.bubble() && bounds.contains(&event.position) {
let current_offset = scroll.offset();
scroll
.set_offset(current_offset + event.delta.pixel_delta(cx.line_height()));
}
}
});
let state = self.state.clone();
let kind = self.kind;
cx.on_mouse_event(move |event: &MouseMoveEvent, _, cx| {
if let Some(drag_state) = state.drag.get().filter(|_| event.dragging()) {
if let Some(ContentSize {
size: item_size, ..
}) = scroll.content_size()
{
match kind {
ScrollbarAxis::Horizontal => {
let max_offset = item_size.width;
let percentage = (event.position.x - bounds.origin.x)
/ bounds.size.width
- drag_state;
let percentage = percentage.min(1. - thumb_percentage_size);
scroll
.set_offset(point(-max_offset * percentage, scroll.offset().y));
}
ScrollbarAxis::Vertical => {
let max_offset = item_size.height;
let percentage = (event.position.y - bounds.origin.y)
/ bounds.size.height
- drag_state;
let percentage = percentage.min(1. - thumb_percentage_size);
scroll
.set_offset(point(scroll.offset().x, -max_offset * percentage));
}
};
if let Some(id) = state.parent_id {
cx.notify(id);
}
}
} else {
state.drag.set(None);
}
});
let state = self.state.clone();
cx.on_mouse_event(move |_event: &MouseUpEvent, phase, cx| {
if phase.bubble() {
state.drag.take();
if let Some(id) = state.parent_id {
cx.notify(id);
}
}
});
})
}
}
impl IntoElement for Scrollbar {
type Element = Self;
fn into_element(self) -> Self::Element {
self
}
}