Add a draggable sidebar resize handle
User reports the sidebar can't be resized. Until now sidebar width was only mutable through the COLLAPSED/DEFAULT toggle and through typed settings. Real browsers (Arc, Dia, Zen) all let you drag the right edge of the sidebar to size it live. Wire it through the existing space.sidebar_width_px: * `ElyShell.sidebar_resize_origin: Option<(f32, u16)>` records the cursor-x and width-px at the moment the handle is grabbed. * `begin_sidebar_resize` / `end_sidebar_resize` set and clear it. * Window-level `on_mouse_move` consults the origin first; while held, it forwards the delta to `set_active_sidebar_width` clamped to 220–480 px so you can't accidentally annihilate either pane. * Window-level `on_mouse_up` releases the drag. * The handle itself is a 6 px transparent strip pinned to the right edge of the expanded sidebar, `cursor_col_resize`, with a soft white hover. mouse-down captures the origin; the rest is window events. cargo test --workspace: 440 passed, 0 failed.
This commit is contained in:
@@ -2,9 +2,9 @@ use ely_browser_core::BrowserSnapshot;
|
||||
use ely_design_system::{colors, spacing};
|
||||
use ely_domain::BrowserTab;
|
||||
use gpui::{
|
||||
AnyElement, BoxShadow, Context, InteractiveElement, IntoElement, ParentElement, SharedString,
|
||||
StatefulInteractiveElement, Styled, div, hsla, linear_color_stop, linear_gradient, point,
|
||||
prelude::FluentBuilder, px, rgb, rgba,
|
||||
AnyElement, BoxShadow, Context, InteractiveElement, IntoElement, MouseButton,
|
||||
ParentElement, SharedString, StatefulInteractiveElement, Styled, div, hsla,
|
||||
linear_color_stop, linear_gradient, point, prelude::FluentBuilder, px, rgb, rgba,
|
||||
};
|
||||
use gpui_component::{IconName, StyledExt, scroll::ScrollableElement};
|
||||
|
||||
@@ -22,6 +22,7 @@ impl ElyShell {
|
||||
div()
|
||||
.w(px(sidebar_width))
|
||||
.h_full()
|
||||
.relative()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.rounded(px(spacing::RADIUS_CARD))
|
||||
@@ -60,6 +61,7 @@ impl ElyShell {
|
||||
.child(self.render_new_tab_row(cx)),
|
||||
)
|
||||
.child(self.render_sidebar_footer(snapshot, cx))
|
||||
.child(render_sidebar_resize_handle(cx))
|
||||
.into_any_element()
|
||||
}
|
||||
|
||||
@@ -419,6 +421,31 @@ const UNREAD_BADGE_BG: u32 = 0x281e140f;
|
||||
/// never participates in hit testing.
|
||||
const HIGHLIGHT_BORDER: u32 = 0xffffff80;
|
||||
|
||||
/// Sidebar resize affordance pinned to the panel's right edge. The
|
||||
/// strip itself is invisible until hovered; on mouse-down it tells the
|
||||
/// shell to capture the drag origin so window-level mouse-move can
|
||||
/// compute the live width.
|
||||
fn render_sidebar_resize_handle(cx: &mut Context<ElyShell>) -> AnyElement {
|
||||
div()
|
||||
.id(SharedString::from("sidebar-resize-handle"))
|
||||
.absolute()
|
||||
.top_0()
|
||||
.bottom_0()
|
||||
.right(px(-2.0))
|
||||
.w(px(6.0))
|
||||
.cursor_col_resize()
|
||||
.hover(|style| style.bg(rgba(RESIZE_HANDLE_HOVER_BG)))
|
||||
.on_mouse_down(
|
||||
MouseButton::Left,
|
||||
cx.listener(|shell, event: &gpui::MouseDownEvent, _, cx| {
|
||||
shell.begin_sidebar_resize(f32::from(event.position.x), cx);
|
||||
}),
|
||||
)
|
||||
.into_any_element()
|
||||
}
|
||||
|
||||
const RESIZE_HANDLE_HOVER_BG: u32 = 0xffffff66;
|
||||
|
||||
/// Maps appearance translucency_pct to a panel rgba u32 tinted by the
|
||||
/// active wallpaper theme.
|
||||
///
|
||||
|
||||
Reference in New Issue
Block a user