ffdf725f32
Release Notes: - N/A --- Fix this long-standing issue so that we can support Link hover colors. And renamed `text_layout` example to `text_style`. --- I spent some time studying the process of this text style change and found it a bit complicated. At first, I thought there was a problem with refine and it was not passed properly. After changing it, I found that it was not the problem. Then I found that it was because `TextRun` had already stored the `color`, `background`, `underline`, `strikethrough` in TextRun in the `request_layout` stage. They area calculate at the `request_layout` stage, but request_layout stage there was no `hitbox`, so the hover state was not obtained. ```bash cargo run -p gpui --example text_style ``` https://github.com/user-attachments/assets/24f88f73-775e-41d3-a502-75a7a39ac82b --------- Co-authored-by: Mikayla Maki <mikayla.c.maki@gmail.com>
110 lines
3.7 KiB
Rust
110 lines
3.7 KiB
Rust
use gpui::{
|
|
App, Application, Bounds, Context, Window, WindowBounds, WindowOptions, div, prelude::*, px,
|
|
size,
|
|
};
|
|
|
|
struct HelloWorld {}
|
|
|
|
impl Render for HelloWorld {
|
|
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
|
|
div()
|
|
.font_family(".SystemUIFont")
|
|
.bg(gpui::white())
|
|
.flex()
|
|
.flex_col()
|
|
.gap_2()
|
|
.p_4()
|
|
.gap_4()
|
|
.size_full()
|
|
.child(div().child("Text left"))
|
|
.child(div().text_center().child("Text center"))
|
|
.child(div().text_right().child("Text right"))
|
|
.child(div().text_decoration_1().child("Text left (underline)"))
|
|
.child(
|
|
div()
|
|
.text_center()
|
|
.text_decoration_1()
|
|
.child("Text center (underline)"),
|
|
)
|
|
.child(
|
|
div()
|
|
.text_right()
|
|
.text_decoration_1()
|
|
.child("Text right (underline)"),
|
|
)
|
|
.child(div().line_through().child("Text left (line_through)"))
|
|
.child(
|
|
div()
|
|
.text_center()
|
|
.line_through()
|
|
.child("Text center (line_through)"),
|
|
)
|
|
.child(
|
|
div()
|
|
.text_right()
|
|
.line_through()
|
|
.child("Text right (line_through)"),
|
|
)
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.gap_2()
|
|
.justify_between()
|
|
.child(
|
|
div()
|
|
.w(px(400.))
|
|
.border_1()
|
|
.border_color(gpui::blue())
|
|
.p_1()
|
|
.whitespace_nowrap()
|
|
.overflow_hidden()
|
|
.text_center()
|
|
.child("A long non-wrapping text align center"),
|
|
)
|
|
.child(
|
|
div()
|
|
.w_32()
|
|
.border_1()
|
|
.border_color(gpui::blue())
|
|
.p_1()
|
|
.whitespace_nowrap()
|
|
.overflow_hidden()
|
|
.text_right()
|
|
.child("100%"),
|
|
),
|
|
)
|
|
.child(
|
|
div()
|
|
.id("Text Link")
|
|
.text_color(gpui::blue())
|
|
.cursor_pointer()
|
|
.active(|this| {
|
|
this.text_color(gpui::white())
|
|
.bg(gpui::blue())
|
|
.text_decoration_1()
|
|
.text_decoration_wavy()
|
|
})
|
|
.hover(|this| {
|
|
this.text_color(gpui::rgb(0x973717))
|
|
.bg(gpui::yellow())
|
|
.text_decoration_1()
|
|
})
|
|
.child("Text with hover, active styles"),
|
|
)
|
|
}
|
|
}
|
|
|
|
fn main() {
|
|
Application::new().run(|cx: &mut App| {
|
|
let bounds = Bounds::centered(None, size(px(800.0), px(600.0)), cx);
|
|
cx.open_window(
|
|
WindowOptions {
|
|
window_bounds: Some(WindowBounds::Windowed(bounds)),
|
|
..Default::default()
|
|
},
|
|
|_, cx| cx.new(|_| HelloWorld {}),
|
|
)
|
|
.unwrap();
|
|
cx.activate(true);
|
|
});
|
|
}
|