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