dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

text_view: Add heading_base_font_size to TextViewStyle and fix text wrap for list item. (#670)

Browse source 
- Fix list item to wrap text.

<img width="797" alt="image"
src="https://github.com/user-attachments/assets/9e8156ad-bf58-4d7a-a850-69dfcb56c850"
/>
This commit is contained in:
Jason Lee 2025-02-28 11:43:08 +08:00 committed by GitHub
parent e443a219be
commit 7582ad3fb3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 30 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
crates/story/examples/markdown.md
View file

@ -37,8 +37,8 @@ Here is a link to [Google](https://www.google.com), and another to [Rust](https:
##### Bulleted List ##### Bulleted List
- Bullet 1 - Bullet 1, this is very long and needs to be wrapped to the next line, display should be wrapped to the next line as well.
- Bullet 2 - Bullet 2, the second bullet item is also long and needs to be wrapped to the next line.
- Bullet 2.1 - Bullet 2.1
- Bullet 2.1.1 - Bullet 2.1.1
- Bullet 2.1.1.1 - Bullet 2.1.1.1
@ -57,8 +57,8 @@ Here is a link to [Google](https://www.google.com), and another to [Rust](https:
##### To-Do List ##### To-Do List
- [x] Task 1 - [x] Task 1, a long long text task, this line is very long and needs to be wrapped to the next line, display should be wrapped to the next line as well.
- [ ] Task 2 - [ ] Task 2, going to do something if there is a long text that needs to be wrapped to the next line.
- [ ] Task 3 - [ ] Task 3
#### Heading for Code #### Heading for Code

33
crates/ui/src/text/element.rs
View file

@ -391,7 +391,10 @@ impl Node {
Node::Paragraph(_) => { Node::Paragraph(_) => {
items.push( items.push(
h_flex() h_flex()
.items_center() .relative()
.items_start()
.content_start()
.flex_1()
.when(!state.todo && checked.is_none(), |this| { .when(!state.todo && checked.is_none(), |this| {
this.child(list_item_prefix( this.child(list_item_prefix(
ix, ix,
@ -400,9 +403,11 @@ impl Node {
)) ))
}) })
.when_some(checked, |this, checked| { .when_some(checked, |this, checked| {
// Checkmark
this.child( this.child(
div() div()
.flex() .flex()
.mt(rems(0.4))
.mr_1p5() .mr_1p5()
.size(rems(0.875)) .size(rems(0.875))
.items_center() .items_center()
@ -419,16 +424,18 @@ impl Node {
}), }),
) )
}) })
.child(child.render( .child(div().flex_1().overflow_hidden().child(
Some(ListState { child.render(
depth: state.depth + 1, Some(ListState {
ordered: state.ordered, depth: state.depth + 1,
todo: checked.is_some(), ordered: state.ordered,
}), todo: checked.is_some(),
true, }),
text_view_style, true,
window, text_view_style,
cx, window,
cx,
),
)), )),
); );
} }
@ -578,8 +585,10 @@ impl Node {
_ => (rems(1.), FontWeight::NORMAL), _ => (rems(1.), FontWeight::NORMAL),
}; };
let text_size = text_size.to_pixels(text_view_style.heading_base_font_size);
h_flex() h_flex()
.mb(rems(0.5)) .mb(rems(0.3))
.whitespace_normal() .whitespace_normal()
.text_size(text_size) .text_size(text_size)
.font_weight(font_weight) .font_weight(font_weight)

6
crates/ui/src/text/text_view.rs
View file

@ -1,4 +1,4 @@
use gpui::{rems, App, ElementId, IntoElement, Rems, RenderOnce, SharedString, Window}; use gpui::{px, rems, App, ElementId, IntoElement, Pixels, Rems, RenderOnce, SharedString, Window};
use super::{html::HtmlElement, markdown::MarkdownElement}; use super::{html::HtmlElement, markdown::MarkdownElement};
@ -67,13 +67,17 @@ impl RenderOnce for Text {
/// TextViewStyle used to customize the style for [`TextView`]. /// TextViewStyle used to customize the style for [`TextView`].
#[derive(Copy, Clone)] #[derive(Copy, Clone)]
pub struct TextViewStyle { pub struct TextViewStyle {
/// Gap of each paragraphs, default is 1 rem.
pub paragraph_gap: Rems, pub paragraph_gap: Rems,
/// Base font size for headings, default is 14px.
pub heading_base_font_size: Pixels,
} }
impl Default for TextViewStyle { impl Default for TextViewStyle {
fn default() -> Self { fn default() -> Self {
Self { Self {
paragraph_gap: rems(1.), paragraph_gap: rems(1.),
heading_base_font_size: px(14.),
} }
} }
} }