Add note about the September 2025 release to the editor welcome screen

This commit is contained in:
Keavon Chambers
2025-09-20 05:20:20 -07:00
parent ac4665683b
commit f4a0f272dd
3 changed files with 94 additions and 54 deletions
@@ -84,5 +84,9 @@
flex: 0 0 30%; flex: 0 0 30%;
text-align: right; text-align: right;
} }
a {
color: inherit;
}
} }
</style> </style>
@@ -9,7 +9,7 @@
const fullscreen = getContext<FullscreenState>("fullscreen"); const fullscreen = getContext<FullscreenState>("fullscreen");
$: requestFullscreenHotkeys = fullscreen.keyboardLockApiSupported && !$fullscreen.keyboardLocked; $: requestFullscreenHotkeys = $fullscreen.keyboardLockApiSupported && !$fullscreen.keyboardLocked;
async function handleClick() { async function handleClick() {
if ($fullscreen.windowFullscreen) fullscreen.exitFullscreen(); if ($fullscreen.windowFullscreen) fullscreen.exitFullscreen();
@@ -159,42 +159,54 @@
<svelte:component this={PANEL_COMPONENTS[panelType]} /> <svelte:component this={PANEL_COMPONENTS[panelType]} />
{:else} {:else}
<LayoutCol class="empty-panel" on:dragover={(e) => e.preventDefault()} on:drop={dropFile}> <LayoutCol class="empty-panel" on:dragover={(e) => e.preventDefault()} on:drop={dropFile}>
<LayoutCol class="content"> <LayoutCol class="top-spacer"></LayoutCol>
<LayoutRow class="logotype"> <LayoutCol class="content-container">
<IconLabel icon="GraphiteLogotypeSolid" /> <LayoutCol class="content">
</LayoutRow> <LayoutRow class="logotype">
<LayoutRow class="actions"> <IconLabel icon="GraphiteLogotypeSolid" />
<table> </LayoutRow>
<tbody> <LayoutRow class="actions">
<tr> <table>
<td> <tbody>
<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} /> <tr>
</td> <td>
<td> <TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} /> </td>
</td> <td>
</tr> <UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
<tr> </td>
<td> </tr>
<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} /> <tr>
</td> <td>
<td> <TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} /> </td>
</td> <td>
</tr> <UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
<tr> </td>
<td colspan="2"> </tr>
<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} /> <tr>
</td> <td colspan="2">
</tr> <TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
<tr> </td>
<td colspan="2"> </tr>
<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} /> <tr>
</td> <td colspan="2">
</tr> <TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
</tbody> </td>
</table> </tr>
</LayoutRow> </tbody>
</table>
</LayoutRow>
</LayoutCol>
</LayoutCol>
<LayoutCol class="bottom-message">
{#if new Date().getFullYear() === 2025}
<TextLabel italic={true} disabled={true}>
September 2025 release — <a href="https://youtube.com/watch?v=Vl5BA4g3QXM" target="_blank">What's new? (video)</a>
— Note: some older documents may render differently and require manual fixes.
<a href="https://ec6796b4.graphite-editor.pages.dev/" target="_blank">Need the old version?</a>
</TextLabel>
{/if}
</LayoutCol> </LayoutCol>
</LayoutCol> </LayoutCol>
{/if} {/if}
@@ -211,6 +223,7 @@
height: 28px; height: 28px;
min-height: auto; min-height: auto;
background: var(--color-1-nearblack); // Needed for the viewport hole punch on desktop background: var(--color-1-nearblack); // Needed for the viewport hole punch on desktop
flex-shrink: 0;
&.min-widths .tab-group .tab { &.min-widths .tab-group .tab {
min-width: 120px; min-width: 120px;
@@ -333,30 +346,53 @@
background: var(--color-2-mildblack); background: var(--color-2-mildblack);
margin: 4px; margin: 4px;
border-radius: 2px; border-radius: 2px;
justify-content: center; justify-content: space-between;
.content { .content-container {
flex: 0 0 auto; flex: 0 0 auto;
align-items: center; justify-content: center;
.logotype { .content {
margin-bottom: 40px; flex: 0 0 auto;
align-items: center;
svg { .logotype {
width: auto; margin-top: 8px;
height: 120px; margin-bottom: 40px;
}
}
.actions { svg {
table { width: auto;
border-spacing: 8px; height: 120px;
margin: -8px;
td {
padding: 0;
} }
} }
.actions {
margin-bottom: 8px;
table {
border-spacing: 8px;
margin: -8px;
td {
padding: 0;
}
}
}
}
}
.top-spacer {
flex: 0 1 48px;
}
.bottom-message {
flex: 0 0 48px;
align-items: center;
justify-content: end;
.text-label {
white-space: wrap;
margin: 0 1em;
} }
} }
} }