jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix the ellipses of a long document name causing the tab's unsaved asterisk to be hidden (#3146) 

* Fix unsaved indicator

* Change isSaved to isUnsaved to prevent showing star on tabs like Properties

* Fix CSS

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Flo 2025-09-08 05:40:49 +02:00 committed by GitHub
parent 3e50d177b7
commit cf2e525ea9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/window/workspace/Panel.svelte
View File

@ -36,7 +36,7 @@
export let tabMinWidths = false; export let tabMinWidths = false;
export let tabCloseButtons = false; export let tabCloseButtons = false;
export let tabLabels: { name: string; tooltip?: string }[]; export let tabLabels: { name: string; unsaved?: boolean; tooltip?: string }[];
export let tabActiveIndex: number; export let tabActiveIndex: number;
export let panelType: PanelType | undefined = undefined; export let panelType: PanelType | undefined = undefined;
export let clickAction: ((index: number) => void) | undefined = undefined; export let clickAction: ((index: number) => void) | undefined = undefined;
@ -130,7 +130,12 @@
}} }}
bind:this={tabElements[tabIndex]} bind:this={tabElements[tabIndex]}
> >
<TextLabel>{tabLabel.name}</TextLabel> <LayoutRow class="name">
<TextLabel class="text">{tabLabel.name}</TextLabel>
{#if tabLabel.unsaved}
<TextLabel>*</TextLabel>
{/if}
</LayoutRow>
{#if tabCloseButtons} {#if tabCloseButtons}
<IconButton <IconButton
action={(e) => { action={(e) => {
@ -260,14 +265,22 @@
} }
} }
.text-label { .name {
flex: 1 1 100%; flex: 1 1 100%;
overflow-x: hidden;
white-space: nowrap; .text-label {
text-overflow: ellipsis; // Height and line-height required because https://stackoverflow.com/a/21611191/775283
// Height and line-height required because https://stackoverflow.com/a/21611191/775283 height: 28px;
height: 28px; line-height: 28px;
line-height: 28px; flex: 0 0 auto;
&.text {
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex-shrink: 1;
}
}
} }
.icon-button { .icon-button {

8
frontend/src/components/window/workspace/Workspace.svelte
View File

@ -30,12 +30,12 @@
$: documentPanel?.scrollTabIntoView($portfolio.activeDocumentIndex); $: documentPanel?.scrollTabIntoView($portfolio.activeDocumentIndex);
$: documentTabLabels = $portfolio.documents.map((doc: OpenDocument) => { $: documentTabLabels = $portfolio.documents.map((doc: OpenDocument) => {
const name = doc.displayName; const name = doc.details.name;
const unsaved = !doc.details.isSaved;
if (!editor.handle.inDevelopmentMode()) return { name }; if (!editor.handle.inDevelopmentMode()) return { name, unsaved };
const tooltip = `Document ID: ${doc.id}`; const tooltip = `Document ID: ${doc.id}`;
return { name, tooltip }; return { name, unsaved, tooltip };
}); });
const editor = getContext<Editor>("editor"); const editor = getContext<Editor>("editor");