Files: a tile's name keeps its ends; the ellipses share one line cutter

gpui's line_clamp wraps once and lays the rest of a long name on the
second line, which a centered tile then clipped at both ends. A tile's
name is now one line, cut in the middle so the front and the extension
stay. MiddleEllipsis draws like Ellipsis: in the text style around it,
sized by its text, so a short name centers; the two share one cutter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ZacharyZhang-NYandClaude Opus 5.5 committed 2026-09-26 19:51:43 -04:00
1 parent ebad5328ed
commit 906e6c8ac1
6 files changed
+87 -59

No files matched your search

+5 -4
View File
@@ -13,7 +13,7 @@ use crate::{
lists::DirEntry,
primitives::{FocusRing, tab_stop},
theme::{ActiveTheme, IconSize, Radius, TextSize},
typography::LEADING,
typography::{LEADING, MiddleEllipsis},
};
type OnEntry = Rc<dyn Fn(&DirEntry, &mut Window, &mut App)>;
@@ -157,13 +157,14 @@ impl RenderOnce for FileGrid {
.child(FileIcon::entry(entry).size(IconSize::Xxl))
.child(
div()
.debug_selector(|| format!("file-name {ix}"))
.w_full()
.text_center()
.flex()
.justify_center()
.text_size(theme.text_size(TextSize::Sm))
.line_height(relative(LEADING))
.text_color(colors.fg)
.line_clamp(2)
.child(entry.name().clone()),
.child(MiddleEllipsis::new(entry.name().clone())),
)
.on_click(move |event, window, cx| {
pick(ix, window, cx);
+28
View File
@@ -156,3 +156,31 @@ fn a_name_is_listed_once() {
fn the_pick_is_one_of_the_entries() {
let _ = FileGrid::new("grid", [DirEntry::file("a", 1, then())]).selected("z");
}
/// One tile whose name runs long.
struct Named;
impl Render for Named {
fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
let name = "A very long file name that keeps going past two whole lines.pdf";
div()
.w(px(280.0))
.child(FileGrid::new("grid", [DirEntry::file(name, 10, then())]))
}
}
#[gpui::test]
fn a_long_name_takes_one_line_inside_its_tile(cx: &mut TestAppContext) {
setup(cx);
let (_, cx) = cx.add_window_view(|_, _| Named);
settle(cx);
let (name, grid) = (
cx.debug_bounds("file-name 0").expect("the name draws"),
cx.debug_bounds("file-grid").expect("the grid draws"),
);
assert!(name.size.height < px(24.0), "one line: {name:?}");
assert!(
name.left() >= grid.left() && name.right() <= grid.right(),
"{name:?} in {grid:?}"
);
}