fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-21 05:38:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Many subtle improvements to the UI design system (#1537)

Browse Source
This commit is contained in:
Keavon Chambers
2023-12-28 04:35:20 -08:00
committed by GitHub
parent 34f952bad1
commit 96b5d7b520
62 changed files with 326 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/window/status-bar/StatusBar.svelte
+2 -1
View File
@@ -57,7 +57,8 @@
overflow: hidden;
.separator.section {
margin: 0;
// Width of section separator (12px) minus the margin of the surrounding user input labels (8px)
margin: 0 calc(12px - 8px);
}
.plus,
frontend/src/components/window/title-bar/TitleBar.svelte
+1 -1
View File
@@ -77,7 +77,7 @@
<WindowButtonsMac {maximized} />
{:else}
{#each entries as entry}
<TextButton label={entry.label} icon={entry.icon} menuListChildren={entry.children} action={entry.action} noBackground={true} />
<TextButton label={entry.label} icon={entry.icon} menuListChildren={entry.children} action={entry.action} flush={true} />
{/each}
{/if}
</LayoutRow>
frontend/src/components/window/workspace/Panel.svelte
+12 -9
View File
@@ -3,7 +3,6 @@
import Layers from "@graphite/components/panels/Layers.svelte";
import Properties from "@graphite/components/panels/Properties.svelte";
import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
import PopoverButton from "@graphite/components/widgets/buttons/PopoverButton.svelte";
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
const PANEL_COMPONENTS = {
@@ -102,10 +101,10 @@
</LayoutRow>
{/each}
</LayoutRow>
<PopoverButton icon="VerticalEllipsis">
<!-- <PopoverButton style="VerticalEllipsis">
<TextLabel bold={true}>Panel Options</TextLabel>
<TextLabel multiline={true}>Coming soon</TextLabel>
</PopoverButton>
</PopoverButton> -->
</LayoutRow>
<LayoutCol class="panel-body">
{#if panelType}
@@ -120,7 +119,7 @@
<table>
<tr>
<td>
<TextButton label="New Document" icon="File" noBackground={true} action={() => editor.instance.newDocumentDialog()} />
<TextButton label="New Document" icon="File" flush={true} action={() => editor.instance.newDocumentDialog()} />
</td>
<td>
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
@@ -128,7 +127,7 @@
</tr>
<tr>
<td>
<TextButton label="Open Document" icon="Folder" noBackground={true} action={() => editor.instance.openDocument()} />
<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.instance.openDocument()} />
</td>
<td>
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
@@ -136,7 +135,7 @@
</tr>
<tr>
<td colspan="2">
<TextButton label="Open Demo Artwork" icon="Image" noBackground={true} action={() => editor.instance.demoArtworkDialog()} />
<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.instance.demoArtworkDialog()} />
</td>
</tr>
</table>
@@ -252,9 +251,9 @@
}
}
.popover-button {
margin: 2px 4px;
}
// .popover-button {
// margin: 2px 4px;
// }
}
.panel-body {
@@ -262,6 +261,10 @@
flex: 1 1 100%;
flex-direction: column;
> div {
padding-bottom: 4px;
}
.empty-panel {
background: var(--color-2-mildblack);
margin: 4px;