fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-23 06:08: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/views/Graph.svelte
+6 -47
View File
@@ -741,7 +741,7 @@
</div>
<div class="details">
<!-- TODO: Allow the user to edit the name, just like in the Layers panel -->
<TextLabel tooltip={editor.instance.inDevelopmentMode() ? `Node ID: ${node.id}` : undefined} italic={!node.alias}>{node.alias || "Layer"}</TextLabel>
<TextLabel tooltip={editor.instance.inDevelopmentMode() ? `Node ID: ${node.id}` : undefined}>{node.alias || "Layer"}</TextLabel>
</div>
<svg class="border-mask" width="0" height="0">
@@ -773,14 +773,13 @@
<div class="primary" class:no-parameter-section={exposedInputsOutputs.length === 0}>
<IconLabel icon={nodeIcon(node.name)} />
<!-- TODO: Allow the user to edit the name, just like in the Layers panel -->
<TextLabel tooltip={editor.instance.inDevelopmentMode() ? `Node ID: ${node.id}` : undefined} italic={!node.alias}>{node.alias || node.name}</TextLabel>
<TextLabel tooltip={editor.instance.inDevelopmentMode() ? `Node ID: ${node.id}` : undefined}>{node.alias || node.name}</TextLabel>
</div>
<!-- Parameter rows -->
{#if exposedInputsOutputs.length > 0}
<div class="parameters">
{#each exposedInputsOutputs as parameter, index}
<div class={`parameter expanded ${index < node.exposedInputs.length ? "input" : "output"}`}>
<div class="expand-arrow" />
<TextLabel tooltip={parameter.name}>{parameter.name}</TextLabel>
</div>
{/each}
@@ -1005,10 +1004,6 @@
.icon-label {
fill: var(--color-a-softgray);
}
.expand-arrow::after {
background: var(--icon-expand-collapse-arrow-disabled);
}
}
&.previewed::after {
@@ -1035,34 +1030,6 @@
height: 8px;
}
.expand-arrow {
width: 16px;
height: 16px;
margin: 0;
padding: 0;
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
&::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: var(--icon-expand-collapse-arrow);
}
&:hover::after {
background: var(--icon-expand-collapse-arrow-hover);
}
}
.expanded .expand-arrow::after {
transform: rotate(90deg);
}
.text-label {
overflow: hidden;
text-overflow: ellipsis;
@@ -1201,8 +1168,8 @@
}
.text-label {
margin-left: 8px; // Remove after reenabling icon-label
margin-right: 4px;
// margin-right: 4px; // Restore after reenabling icon-label
margin: 0 8px;
}
}
@@ -1216,7 +1183,8 @@
position: relative;
display: flex;
align-items: center;
width: 100%;
margin: 0 8px;
width: calc(100% - 8px - 8px);
height: 24px;
&:last-of-type {
@@ -1227,19 +1195,10 @@
width: 100%;
}
&.input {
.expand-arrow {
margin-left: 4px;
}
}
&.output {
flex-direction: row-reverse;
text-align: right;
.expand-arrow {
margin-right: 4px;
}
svg {
width: 30px;
height: 20px;