5e504d10bb
Wait https://github.com/zed-industries/zed/pull/33008, https://github.com/zed-industries/zed/pull/34804 to merge. https://github.com/user-attachments/assets/3c21ebc9-44a0-4311-bb0f-5f63fe8d4bb3 - Improved `focus_ring` to render like an outline. - Added to support press `Enter`, `Space` key to trigger Checkbox, Button, Radio. ## Break Changes - The `FocusableExt` has been changed to only for crate internal. - The `FocusableCycle` has been removed, now GPUI has it own tab stop implementation.
118 lines
4 KiB
Rust
118 lines
4 KiB
Rust
use gpui::{
|
|
div, px, AnyElement, App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement,
|
|
ParentElement as _, Pixels, Render, SharedString, Styled, Window,
|
|
};
|
|
use gpui_component::{
|
|
resizable::{h_resizable, resizable_panel, v_resizable, ResizableState},
|
|
v_flex, ActiveTheme,
|
|
};
|
|
|
|
pub struct ResizableStory {
|
|
focus_handle: FocusHandle,
|
|
state1: Entity<ResizableState>,
|
|
state2: Entity<ResizableState>,
|
|
state3: Entity<ResizableState>,
|
|
}
|
|
|
|
impl super::Story for ResizableStory {
|
|
fn title() -> &'static str {
|
|
"Resizable"
|
|
}
|
|
|
|
fn description() -> &'static str {
|
|
"The resizable panels."
|
|
}
|
|
|
|
fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render> {
|
|
Self::view(window, cx)
|
|
}
|
|
}
|
|
|
|
impl Focusable for ResizableStory {
|
|
fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {
|
|
self.focus_handle.clone()
|
|
}
|
|
}
|
|
|
|
impl ResizableStory {
|
|
pub fn view(window: &mut Window, cx: &mut App) -> Entity<Self> {
|
|
cx.new(|cx| Self::new(window, cx))
|
|
}
|
|
|
|
fn new(_: &mut Window, cx: &mut App) -> Self {
|
|
let state1 = ResizableState::new(cx);
|
|
let state2 = ResizableState::new(cx);
|
|
let state3 = ResizableState::new(cx);
|
|
|
|
Self {
|
|
focus_handle: cx.focus_handle(),
|
|
state1,
|
|
state2,
|
|
state3,
|
|
}
|
|
}
|
|
}
|
|
|
|
fn panel_box(content: impl Into<SharedString>, _: &App) -> AnyElement {
|
|
div()
|
|
.p_4()
|
|
.size_full()
|
|
.child(content.into())
|
|
.into_any_element()
|
|
}
|
|
|
|
impl Render for ResizableStory {
|
|
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
|
|
v_flex()
|
|
.size_full()
|
|
.gap_6()
|
|
.child(
|
|
div()
|
|
.h(px(600.))
|
|
.border_1()
|
|
.border_color(cx.theme().border)
|
|
.child(
|
|
v_resizable("resizable-1", self.state1.clone())
|
|
.group(
|
|
h_resizable("resizable-1.1", self.state2.clone())
|
|
.size(px(150.))
|
|
.child(
|
|
resizable_panel()
|
|
.size(px(150.))
|
|
.size_range(px(120.)..px(300.))
|
|
.child(panel_box("Left (120px .. 300px)", cx)),
|
|
)
|
|
.child(resizable_panel().child(panel_box("Center", cx)))
|
|
.child(
|
|
resizable_panel()
|
|
.size(px(300.))
|
|
.child(panel_box("Right", cx)),
|
|
),
|
|
)
|
|
.child(resizable_panel().child(panel_box("Center", cx)))
|
|
.child(
|
|
resizable_panel()
|
|
.size(px(80.))
|
|
.size_range(px(80.)..Pixels::MAX)
|
|
.child(panel_box("Bottom (80px .. 150px)", cx)),
|
|
),
|
|
),
|
|
)
|
|
.child(
|
|
div()
|
|
.h(px(400.))
|
|
.border_1()
|
|
.border_color(cx.theme().border)
|
|
.child(
|
|
h_resizable("resizable-3", self.state3.clone())
|
|
.child(
|
|
resizable_panel()
|
|
.size(px(200.))
|
|
.size_range(px(200.)..px(400.))
|
|
.child(panel_box("Left 2", cx)),
|
|
)
|
|
.child(resizable_panel().child(panel_box("Right (Grow)", cx))),
|
|
),
|
|
)
|
|
}
|
|
}
|