gpui: Add interval in pattern (#26459)

Closes #ISSUE

[git: Use font size to determine pattern slash width
#26446](https://github.com/zed-industries/zed/pull/26446)

This PR only uses font size as the slant line width, and here it further
uses line height as the slant line interval control.

before


![image](https://github.com/user-attachments/assets/a8f2406e-5eed-4528-a9a2-867513613fc7)


now


![image](https://github.com/user-attachments/assets/9b8ccca9-8023-4cb2-a6fe-0e42e19642a4)

big line height


![image](https://github.com/user-attachments/assets/4498e858-4f25-432c-80ee-355726d9c41b)


Release Notes:

- N/A *or* Added/Fixed/Improved ...
This commit is contained in:
0x2CA 2025-03-15 03:51:09 +08:00 committed by GitHub
parent 685536c27e
commit ba8b9ec2c7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 55 additions and 53 deletions

View file

@ -25,30 +25,26 @@ impl Render for PatternExample {
.flex_col()
.border_1()
.border_color(gpui::blue())
.child(
div()
.w(px(54.0))
.h(px(18.0))
.bg(pattern_slash(gpui::red(), 18.0 / 2.0)),
)
.child(
div()
.w(px(54.0))
.h(px(18.0))
.bg(pattern_slash(gpui::red(), 18.0 / 2.0)),
)
.child(
div()
.w(px(54.0))
.h(px(18.0))
.bg(pattern_slash(gpui::red(), 18.0 / 2.0)),
)
.child(
div()
.w(px(54.0))
.h(px(18.0))
.bg(pattern_slash(gpui::red(), 18.0 / 2.0)),
),
.child(div().w(px(54.0)).h(px(18.0)).bg(pattern_slash(
gpui::red(),
18.0 / 4.0,
18.0 / 4.0,
)))
.child(div().w(px(54.0)).h(px(18.0)).bg(pattern_slash(
gpui::red(),
18.0 / 4.0,
18.0 / 4.0,
)))
.child(div().w(px(54.0)).h(px(18.0)).bg(pattern_slash(
gpui::red(),
18.0 / 4.0,
18.0 / 4.0,
)))
.child(div().w(px(54.0)).h(px(18.0)).bg(pattern_slash(
gpui::red(),
18.0 / 4.0,
18.0 / 2.0,
))),
)
.child(
div()
@ -58,30 +54,26 @@ impl Render for PatternExample {
.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(), 56.0 / 3.0)),
)
.child(
div()
.w(px(256.0))
.h(px(56.0))
.bg(pattern_slash(gpui::green(), 56.0 / 3.0)),
)
.child(
div()
.w(px(256.0))
.h(px(56.0))
.bg(pattern_slash(gpui::blue(), 56.0 / 3.0)),
)
.child(
div()
.w(px(256.0))
.h(px(26.0))
.bg(pattern_slash(gpui::yellow(), 56.0 / 3.0)),
),
.child(div().w(px(256.0)).h(px(56.0)).bg(pattern_slash(
gpui::red(),
56.0 / 6.0,
56.0 / 6.0,
)))
.child(div().w(px(256.0)).h(px(56.0)).bg(pattern_slash(
gpui::green(),
56.0 / 6.0,
56.0 / 6.0,
)))
.child(div().w(px(256.0)).h(px(56.0)).bg(pattern_slash(
gpui::blue(),
56.0 / 6.0,
56.0 / 6.0,
)))
.child(div().w(px(256.0)).h(px(26.0)).bg(pattern_slash(
gpui::yellow(),
56.0 / 6.0,
56.0 / 6.0,
))),
)
.child(
div()