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

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

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