|
159 | 159 | <svelte:component this={PANEL_COMPONENTS[panelType]} /> |
160 | 160 | {:else} |
161 | 161 | <LayoutCol class="empty-panel" on:dragover={(e) => e.preventDefault()} on:drop={dropFile}> |
162 | | - <LayoutCol class="content"> |
163 | | - <LayoutRow class="logotype"> |
164 | | - <IconLabel icon="GraphiteLogotypeSolid" /> |
165 | | - </LayoutRow> |
166 | | - <LayoutRow class="actions"> |
167 | | - <table> |
168 | | - <tbody> |
169 | | - <tr> |
170 | | - <td> |
171 | | - <TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} /> |
172 | | - </td> |
173 | | - <td> |
174 | | - <UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} /> |
175 | | - </td> |
176 | | - </tr> |
177 | | - <tr> |
178 | | - <td> |
179 | | - <TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} /> |
180 | | - </td> |
181 | | - <td> |
182 | | - <UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} /> |
183 | | - </td> |
184 | | - </tr> |
185 | | - <tr> |
186 | | - <td colspan="2"> |
187 | | - <TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} /> |
188 | | - </td> |
189 | | - </tr> |
190 | | - <tr> |
191 | | - <td colspan="2"> |
192 | | - <TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} /> |
193 | | - </td> |
194 | | - </tr> |
195 | | - </tbody> |
196 | | - </table> |
197 | | - </LayoutRow> |
| 162 | + <LayoutCol class="top-spacer"></LayoutCol> |
| 163 | + <LayoutCol class="content-container"> |
| 164 | + <LayoutCol class="content"> |
| 165 | + <LayoutRow class="logotype"> |
| 166 | + <IconLabel icon="GraphiteLogotypeSolid" /> |
| 167 | + </LayoutRow> |
| 168 | + <LayoutRow class="actions"> |
| 169 | + <table> |
| 170 | + <tbody> |
| 171 | + <tr> |
| 172 | + <td> |
| 173 | + <TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} /> |
| 174 | + </td> |
| 175 | + <td> |
| 176 | + <UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} /> |
| 177 | + </td> |
| 178 | + </tr> |
| 179 | + <tr> |
| 180 | + <td> |
| 181 | + <TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} /> |
| 182 | + </td> |
| 183 | + <td> |
| 184 | + <UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} /> |
| 185 | + </td> |
| 186 | + </tr> |
| 187 | + <tr> |
| 188 | + <td colspan="2"> |
| 189 | + <TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} /> |
| 190 | + </td> |
| 191 | + </tr> |
| 192 | + <tr> |
| 193 | + <td colspan="2"> |
| 194 | + <TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} /> |
| 195 | + </td> |
| 196 | + </tr> |
| 197 | + </tbody> |
| 198 | + </table> |
| 199 | + </LayoutRow> |
| 200 | + </LayoutCol> |
| 201 | + </LayoutCol> |
| 202 | + <LayoutCol class="bottom-message"> |
| 203 | + {#if new Date().getFullYear() === 2025} |
| 204 | + <TextLabel italic={true} disabled={true}> |
| 205 | + September 2025 release — <a href="https://youtube.com/watch?v=Vl5BA4g3QXM" target="_blank">What's new? (video)</a> |
| 206 | + — Note: some older documents may render differently and require manual fixes. |
| 207 | + <a href="https://ec6796b4.graphite-editor.pages.dev/" target="_blank">Need the old version?</a> |
| 208 | + </TextLabel> |
| 209 | + {/if} |
198 | 210 | </LayoutCol> |
199 | 211 | </LayoutCol> |
200 | 212 | {/if} |
|
211 | 223 | height: 28px; |
212 | 224 | min-height: auto; |
213 | 225 | background: var(--color-1-nearblack); // Needed for the viewport hole punch on desktop |
| 226 | + flex-shrink: 0; |
214 | 227 |
|
215 | 228 | &.min-widths .tab-group .tab { |
216 | 229 | min-width: 120px; |
|
333 | 346 | background: var(--color-2-mildblack); |
334 | 347 | margin: 4px; |
335 | 348 | border-radius: 2px; |
336 | | - justify-content: center; |
| 349 | + justify-content: space-between; |
337 | 350 |
|
338 | | - .content { |
| 351 | + .content-container { |
339 | 352 | flex: 0 0 auto; |
340 | | - align-items: center; |
| 353 | + justify-content: center; |
| 354 | +
|
| 355 | + .content { |
| 356 | + flex: 0 0 auto; |
| 357 | + align-items: center; |
341 | 358 |
|
342 | | - .logotype { |
343 | | - margin-bottom: 40px; |
| 359 | + .logotype { |
| 360 | + margin-top: 8px; |
| 361 | + margin-bottom: 40px; |
344 | 362 |
|
345 | | - svg { |
346 | | - width: auto; |
347 | | - height: 120px; |
| 363 | + svg { |
| 364 | + width: auto; |
| 365 | + height: 120px; |
| 366 | + } |
348 | 367 | } |
349 | | - } |
350 | 368 |
|
351 | | - .actions { |
352 | | - table { |
353 | | - border-spacing: 8px; |
354 | | - margin: -8px; |
| 369 | + .actions { |
| 370 | + margin-bottom: 8px; |
355 | 371 |
|
356 | | - td { |
357 | | - padding: 0; |
| 372 | + table { |
| 373 | + border-spacing: 8px; |
| 374 | + margin: -8px; |
| 375 | +
|
| 376 | + td { |
| 377 | + padding: 0; |
| 378 | + } |
358 | 379 | } |
359 | 380 | } |
360 | 381 | } |
361 | 382 | } |
| 383 | +
|
| 384 | + .top-spacer { |
| 385 | + flex: 0 1 48px; |
| 386 | + } |
| 387 | +
|
| 388 | + .bottom-message { |
| 389 | + flex: 0 0 48px; |
| 390 | + align-items: center; |
| 391 | + justify-content: end; |
| 392 | +
|
| 393 | + .text-label { |
| 394 | + white-space: wrap; |
| 395 | + margin: 0 1em; |
| 396 | + } |
| 397 | + } |
362 | 398 | } |
363 | 399 | } |
364 | 400 |
|
|
0 commit comments