extensions_ui: Truncate long text with an ellipsis (#17007)

This PR updates the extensions UI to truncate long text with an
ellipsis.

| Before | After |
|
--------------------------------------------------------------------------------------------------------------------------------------------------
|
--------------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="538" alt="Screenshot 2024-08-28 at 10 25 29 AM"
src="https://github.com/user-attachments/assets/98fda7b9-aac0-4c1b-903b-0d72070a166b">
| <img width="538" alt="Screenshot 2024-08-28 at 10 21 42 AM"
src="https://github.com/user-attachments/assets/948b1e66-3822-4c52-8483-522c28f393c7">
|

Release Notes:

- Improved the truncation of long author lists and descriptions in the
extensions view.
This commit is contained in:
Marshall Bowers 2024-08-28 10:47:43 -04:00 committed by GitHub
parent ace8734b63
commit 950e698834
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -452,28 +452,34 @@ impl ExtensionsPage {
) )
.child( .child(
h_flex() h_flex()
.gap_2()
.justify_between() .justify_between()
.child( .child(
Label::new(format!( div().overflow_x_hidden().text_ellipsis().child(
"{}: {}", Label::new(format!(
if extension.authors.len() > 1 { "{}: {}",
"Authors" if extension.authors.len() > 1 {
} else { "Authors"
"Author" } else {
}, "Author"
extension.authors.join(", ") },
)) extension.authors.join(", ")
.size(LabelSize::Small), ))
.size(LabelSize::Small),
),
) )
.child(Label::new("<>").size(LabelSize::Small)), .child(Label::new("<>").size(LabelSize::Small)),
) )
.child( .child(
h_flex() h_flex()
.gap_2()
.justify_between() .justify_between()
.children(extension.description.as_ref().map(|description| { .children(extension.description.as_ref().map(|description| {
Label::new(description.clone()) div().overflow_x_hidden().text_ellipsis().child(
.size(LabelSize::Small) Label::new(description.clone())
.color(Color::Default) .size(LabelSize::Small)
.color(Color::Default),
)
})) }))
.children(repository_url.map(|repository_url| { .children(repository_url.map(|repository_url| {
IconButton::new( IconButton::new(
@ -547,18 +553,21 @@ impl ExtensionsPage {
) )
.child( .child(
h_flex() h_flex()
.gap_2()
.justify_between() .justify_between()
.child( .child(
Label::new(format!( div().overflow_x_hidden().text_ellipsis().child(
"{}: {}", Label::new(format!(
if extension.manifest.authors.len() > 1 { "{}: {}",
"Authors" if extension.manifest.authors.len() > 1 {
} else { "Authors"
"Author" } else {
}, "Author"
extension.manifest.authors.join(", ") },
)) extension.manifest.authors.join(", ")
.size(LabelSize::Small), ))
.size(LabelSize::Small),
),
) )
.child( .child(
Label::new(format!( Label::new(format!(
@ -573,7 +582,7 @@ impl ExtensionsPage {
.gap_2() .gap_2()
.justify_between() .justify_between()
.children(extension.manifest.description.as_ref().map(|description| { .children(extension.manifest.description.as_ref().map(|description| {
h_flex().overflow_x_hidden().child( div().overflow_x_hidden().text_ellipsis().child(
Label::new(description.clone()) Label::new(description.clone())
.size(LabelSize::Small) .size(LabelSize::Small)
.color(Color::Default), .color(Color::Default),