ZIm/crates/gpui/examples/pattern.rs
Nate Butler e5943975f9
gpui & ui: Use shader for dashed dividers (#23839)
TODO:
- [x] BackgroundOrientation
- [x] PatternDash
- [x] `pattern_horizontal_dash` & `pattern_vertical_dash`
- [x] Metal dash shader
- [x] Blade dash shader
- [x] Update ui::Divider to use new pattern

---

This PR introduces proper dashed dividers using the new `PatternDash`
background shader.

![CleanShot 2025-01-29 at 09 33
06@2x](https://github.com/user-attachments/assets/2db5af58-1aa9-4ad7-aa52-b9046fbf8584)

Before this we were using 128 elements to create a dashed divider, which
is both expensive, and would not scale beyond a certain size. This
allows us to simplify the divider element as well.

Changes:

- Adds `BackgroundOrientation` to `gpui::color::Background` to allow
specifying a direction for a pattern
- Adds the PatternDash pattern variant
- Updates `ui::Divider`'s dashed variants to be more efficient

Misc:
- Documents the `ui::Divider` component
- Treat `.metal` files as `C` in the Zed project until we get some metal
syntax highlighting.

Release Notes:

- N/A
2025-01-29 12:18:34 -05:00

156 lines
5.6 KiB
Rust

use gpui::{
div, linear_color_stop, linear_gradient, pattern_horizontal_dash, pattern_slash,
pattern_vertical_dash, prelude::*, px, rgb, size, App, AppContext, Application, Bounds,
Context, Window, WindowBounds, WindowOptions,
};
struct PatternExample;
impl Render for PatternExample {
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
div()
.flex()
.flex_col()
.gap_3()
.bg(rgb(0xffffff))
.size(px(600.0))
.justify_center()
.items_center()
.shadow_lg()
.text_xl()
.text_color(rgb(0x000000))
.child("Pattern Example")
.child(
div()
.flex()
.gap_4()
.child(
div()
.flex()
.flex_col()
.gap_1()
.child(
div()
.w(px(160.0))
.h(px(1.0))
.bg(pattern_horizontal_dash(gpui::red())),
)
.child(
div()
.w(px(160.0))
.h(px(4.0))
.bg(pattern_horizontal_dash(gpui::red())),
)
.child(
div()
.w(px(160.0))
.h(px(8.0))
.bg(pattern_horizontal_dash(gpui::red())),
),
)
.child(
div()
.flex()
.gap_1()
.child(
div()
.w(px(1.0))
.h(px(160.0))
.bg(pattern_vertical_dash(gpui::blue())),
)
.child(
div()
.w(px(4.0))
.h(px(160.0))
.bg(pattern_vertical_dash(gpui::blue())),
)
.child(
div()
.w(px(8.0))
.h(px(160.0))
.bg(pattern_vertical_dash(gpui::blue())),
),
),
)
.child(
div()
.flex()
.flex_col()
.border_1()
.border_color(gpui::blue())
.child(div().w(px(54.0)).h(px(18.0)).bg(pattern_slash(gpui::red())))
.child(div().w(px(54.0)).h(px(18.0)).bg(pattern_slash(gpui::red())))
.child(div().w(px(54.0)).h(px(18.0)).bg(pattern_slash(gpui::red())))
.child(div().w(px(54.0)).h(px(18.0)).bg(pattern_slash(gpui::red()))),
)
.child(
div()
.flex()
.flex_col()
.border_1()
.border_color(gpui::blue())
.bg(gpui::green().opacity(0.16))
.child("Elements the same height should align")
.child(
div()
.w(px(256.0))
.h(px(56.0))
.bg(pattern_slash(gpui::red())),
)
.child(
div()
.w(px(256.0))
.h(px(56.0))
.bg(pattern_slash(gpui::green())),
)
.child(
div()
.w(px(256.0))
.h(px(56.0))
.bg(pattern_slash(gpui::blue())),
)
.child(
div()
.w(px(256.0))
.h(px(26.0))
.bg(pattern_slash(gpui::yellow())),
),
)
.child(
div()
.border_1()
.border_color(gpui::blue())
.w(px(240.0))
.h(px(40.0))
.bg(gpui::red()),
)
.child(
div()
.border_1()
.border_color(gpui::blue())
.w(px(240.0))
.h(px(40.0))
.bg(linear_gradient(
45.,
linear_color_stop(gpui::red(), 0.),
linear_color_stop(gpui::blue(), 1.),
)),
)
}
}
fn main() {
Application::new().run(|cx: &mut App| {
let bounds = Bounds::centered(None, size(px(600.0), px(600.0)), cx);
cx.open_window(
WindowOptions {
window_bounds: Some(WindowBounds::Windowed(bounds)),
..Default::default()
},
|_window, cx| cx.new(|_cx| PatternExample),
)
.unwrap();
cx.activate(true);
});
}