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,8 +452,10 @@ impl ExtensionsPage {
) )
.child( .child(
h_flex() h_flex()
.gap_2()
.justify_between() .justify_between()
.child( .child(
div().overflow_x_hidden().text_ellipsis().child(
Label::new(format!( Label::new(format!(
"{}: {}", "{}: {}",
if extension.authors.len() > 1 { if extension.authors.len() > 1 {
@ -464,16 +466,20 @@ impl ExtensionsPage {
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| {
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),
)
})) }))
.children(repository_url.map(|repository_url| { .children(repository_url.map(|repository_url| {
IconButton::new( IconButton::new(
@ -547,8 +553,10 @@ impl ExtensionsPage {
) )
.child( .child(
h_flex() h_flex()
.gap_2()
.justify_between() .justify_between()
.child( .child(
div().overflow_x_hidden().text_ellipsis().child(
Label::new(format!( Label::new(format!(
"{}: {}", "{}: {}",
if extension.manifest.authors.len() > 1 { if extension.manifest.authors.len() > 1 {
@ -559,6 +567,7 @@ impl ExtensionsPage {
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),