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

gpui & ui: Use shader for dashed dividers (#23839)

Browse source 
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
This commit is contained in:
Nate Butler 2025-01-29 12:18:34 -05:00 • committed by GitHub
parent 8442e2b9d8
commit e5943975f9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 210 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

57
crates/gpui/examples/pattern.rs
View file

@ -1,6 +1,7 @@
use gpui::{
div, linear_color_stop, linear_gradient, pattern_slash, prelude::*, px, rgb, size, App,
AppContext, Application, Bounds, Context, Window, WindowBounds, WindowOptions,
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;
@ -19,6 +20,58 @@ impl Render for PatternExample {
.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()