Fix vertical Divider

This commit is contained in:
Jason Lee 2024-07-17 13:59:20 +08:00
parent 3467522714
commit ac3d6760ed
2 changed files with 25 additions and 10 deletions

View file

@ -65,7 +65,7 @@ impl Render for ScrollableStory {
.gap_4()
.child(
h_flex()
.gap_1()
.gap_2()
.child(
Button::new("test-0", cx)
.label("Size 0")
@ -87,7 +87,7 @@ impl Render for ScrollableStory {
view.change_test_cases(2, cx);
})),
)
.child(Divider::vertical())
.child(Divider::vertical().px_2())
.child(
Button::new("test-axis-both", cx)
.label("Both Scrollbar")
@ -105,7 +105,7 @@ impl Render for ScrollableStory {
})),
)
.child(
Button::new("test-axis-both", cx)
Button::new("test-axis-horizontal", cx)
.label("Horizontal")
.on_click(cx.listener(|view, _, cx| {
view.change_axis(ScrollbarAxis::Horizontal, cx)

View file

@ -1,5 +1,5 @@
use gpui::IntoElement;
use gpui::{div, prelude::FluentBuilder as _, RenderOnce, Styled as _};
use gpui::{div, prelude::FluentBuilder as _, RenderOnce};
use gpui::{Div, IntoElement, ParentElement, Styled};
use crate::theme::ActiveTheme;
use crate::StyledExt as _;
@ -11,33 +11,48 @@ enum Orientation {
#[derive(IntoElement)]
pub struct Divider {
base: Div,
orientation: Orientation,
}
impl Divider {
pub fn vertical() -> Self {
Self {
base: div(),
orientation: Orientation::Vertical,
}
}
pub fn horizontal() -> Self {
Self {
base: div(),
orientation: Orientation::Horizontal,
}
}
}
impl Styled for Divider {
fn style(&mut self) -> &mut gpui::StyleRefinement {
self.base.style()
}
}
impl RenderOnce for Divider {
fn render(self, cx: &mut gpui::WindowContext) -> impl gpui::IntoElement {
let theme = cx.theme();
div()
self.base
.map(|this| match self.orientation {
Orientation::Vertical => this.v_flex().w_0().h_full(),
Orientation::Horizontal => this.h_flex().h_0().w_full(),
Orientation::Vertical => this.v_flex().h_full(),
Orientation::Horizontal => this.h_flex().w_full(),
})
.border_b_1()
.border_color(theme.border)
.child(
div()
.map(|this| match self.orientation {
Orientation::Vertical => this.v_flex().w_0().h_full().border_l_1(),
Orientation::Horizontal => this.h_flex().h_0().w_full().border_b_1(),
})
.border_color(theme.border),
)
}
}