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

Tidy up the UI with clearer Layers panel selection marks and removal of most "coming soon" UI elements

Browse Source
This commit is contained in:
Keavon Chambers
2024-12-14 20:49:21 -08:00
parent 287ef26f64
commit 1264ea8246
11 changed files with 143 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Editor.svelte
+4 -1
View File
@@ -152,7 +152,7 @@
--color-transparent-checkered-background-position-mini: 0 0, 4px 4px, 4px 4px;
--color-transparent-checkered-background-repeat: repeat, repeat, repeat;
--background-inactive-stripes: repeating-linear-gradient(
--inheritance-stripes-background: repeating-linear-gradient(
-45deg,
transparent 0px,
transparent calc((3px * sqrt(2) / 2) - 0.5px),
@@ -161,6 +161,9 @@
transparent calc((3px * sqrt(2) / 2) + 0.5px),
transparent calc(6px * sqrt(2) / 2)
);
--inheritance-dots-background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6" width="6px" height="6px" fill="%23444"><rect width="1" height="1" /><rect x="3" y="3" width="1" height="1" /></svg>\
');
// Array of 2x3 dots (fill: --color-e-nearwhite)
--icon-drag-grip: url('data:image/svg+xml;utf8,\
frontend/src/components/layout/FloatingMenu.svelte
+1 -1
View File
@@ -473,7 +473,7 @@
.floating-menu-content {
background: var(--color-2-mildblack);
box-shadow: rgba(var(--color-0-black-rgb), 50%) 0 2px 4px;
box-shadow: rgba(var(--color-0-black-rgb), 0.5) 0 2px 4px;
border-radius: 4px;
color: var(--color-e-nearwhite);
font-size: inherit;
frontend/src/components/panels/Layers.svelte
+27 -17
View File
@@ -43,7 +43,7 @@
// Interactive dragging
let draggable = true;
let draggingData: undefined | DraggingData = undefined;
let fakeHighlight: undefined | bigint = undefined;
let fakeHighlightOfNotYetSelectedLayerBeingDragged: undefined | bigint = undefined;
let dragInPanel = false;
// Layouts
@@ -285,7 +285,7 @@
const layer = listing.entry;
dragInPanel = true;
if (!$nodeGraph.selected.includes(layer.id)) {
fakeHighlight = layer.id;
fakeHighlightOfNotYetSelectedLayerBeingDragged = layer.id;
}
const select = () => {
if (!$nodeGraph.selected.includes(layer.id)) selectLayer(listing, false, false);
@@ -358,7 +358,7 @@
}
draggingData = undefined;
fakeHighlight = undefined;
fakeHighlightOfNotYetSelectedLayerBeingDragged = undefined;
dragInPanel = false;
}
@@ -409,11 +409,14 @@
<LayoutRow class="list-area" scrollableY={true}>
<LayoutCol class="list" data-layer-panel bind:this={list} on:click={() => deselectAllLayers()} on:dragover={updateInsertLine} on:dragend={drop} on:drop={drop}>
{#each layers as listing, index}
{@const selected = fakeHighlightOfNotYetSelectedLayerBeingDragged !== undefined ? fakeHighlightOfNotYetSelectedLayerBeingDragged === listing.entry.id : listing.entry.selected}
<LayoutRow
class="layer"
classes={{
selected: fakeHighlight !== undefined ? fakeHighlight === listing.entry.id : listing.entry.selected,
"full-highlight": listing.entry.inSelectedNetwork && !listing.entry.selectedParent,
selected,
"ancestor-of-selected": listing.entry.ancestorOfSelected,
"descendant-of-selected": listing.entry.descendantOfSelected,
"selected-but-not-in-selected-network": selected && !listing.entry.inSelectedNetwork,
"insert-folder": (draggingData?.highlightFolder || false) && draggingData?.insertParentId === listing.entry.id,
}}
styles={{ "--layer-indent-levels": `${listing.entry.depth - 1}` }}
@@ -429,6 +432,7 @@
class="expand-arrow"
class:expanded={listing.entry.expanded}
disabled={!listing.entry.childrenPresent}
title={listing.entry.expanded ? "Collapse" : `Expand${listing.entry.ancestorOfSelected ? "\n(A selected layer is contained within)" : ""}`}
on:click|stopPropagation={() => handleExpandArrowClick(listing.entry.id)}
tabindex="0"
/>
@@ -457,22 +461,22 @@
{#if !listing.entry.unlocked || !listing.entry.parentsUnlocked}
<IconButton
class={"status-toggle"}
classes={{ inactive: !listing.entry.parentsUnlocked }}
classes={{ inherited: !listing.entry.parentsUnlocked }}
action={(e) => (toggleLayerLock(listing.entry.id), e?.stopPropagation())}
size={24}
icon={listing.entry.unlocked ? "PadlockUnlocked" : "PadlockLocked"}
hoverIcon={listing.entry.unlocked ? "PadlockLocked" : "PadlockUnlocked"}
tooltip={listing.entry.unlocked ? "Lock" : "Unlock"}
tooltip={(listing.entry.unlocked ? "Lock" : "Unlock") + (!listing.entry.parentsUnlocked ? "\n(A parent of this layer is locked and that status is being inherited)" : "")}
/>
{/if}
<IconButton
class={"status-toggle"}
classes={{ inactive: !listing.entry.parentsVisible }}
classes={{ inherited: !listing.entry.parentsVisible }}
action={(e) => (toggleNodeVisibilityLayerPanel(listing.entry.id), e?.stopPropagation())}
size={24}
icon={listing.entry.visible ? "EyeVisible" : "EyeHidden"}
hoverIcon={listing.entry.visible ? "EyeHide" : "EyeShow"}
tooltip={listing.entry.visible ? "Hide" : "Show"}
tooltip={(listing.entry.visible ? "Hide" : "Show") + (!listing.entry.parentsVisible ? "\n(A parent of this layer is hidden and that status is being inherited)" : "")}
/>
</LayoutRow>
{/each}
@@ -537,13 +541,19 @@
// Dimming
&.selected {
// 1/3 between 3-darkgray and 4-dimgray (this interpolation approach only works on grayscale values)
--component: calc((Max(var(--color-3-darkgray-rgb)) * 2 + Max(var(--color-4-dimgray-rgb))) / 3);
background: rgb(var(--component), var(--component), var(--component));
background: var(--color-4-dimgray);
}
&.full-highlight {
background: var(--color-4-dimgray);
}
&.ancestor-of-selected .expand-arrow:not(.expanded) {
background-image: var(--inheritance-stripes-background);
}
&.descendant-of-selected {
background-image: var(--inheritance-dots-background);
}
&.selected-but-not-in-selected-network {
background: rgba(var(--color-4-dimgray-rgb), 0.5);
}
&.insert-folder {
@@ -664,8 +674,8 @@
align-items: center;
height: 100%;
&.inactive {
background-image: var(--background-inactive-stripes);
&.inherited {
background-image: var(--inheritance-stripes-background);
}
.icon-button {
frontend/src/components/widgets/buttons/ColorButton.svelte
+3 -3
View File
@@ -54,7 +54,7 @@
&.open {
&,
> .text-label {
background: rgba(var(--color-6-lowergray-rgb), 50%);
background: rgba(var(--color-6-lowergray-rgb), 0.5);
}
}
@@ -101,13 +101,13 @@
bottom: 0;
left: 0;
right: 0;
background: rgba(var(--color-4-dimgray-rgb), 50%);
background: rgba(var(--color-4-dimgray-rgb), 0.5);
}
}
}
> .text-label {
background: rgba(var(--color-5-dullgray-rgb), 50%);
background: rgba(var(--color-5-dullgray-rgb), 0.5);
font-size: 10px;
line-height: 12px;
height: 12px;
frontend/src/components/widgets/inputs/NumberInput.svelte
+3 -3
View File
@@ -651,12 +651,12 @@
&.increment {
// Widen the label and input margins from the edges by an extra 8px to make room for the increment arrows
label {
margin-left: 16px;
margin-left: 8px;
}
// Keep the right-aligned input element from overlapping the increment arrow on the right
input[type="text"]:not(:focus).has-label {
margin-right: 16px;
margin-right: 8px;
}
// Hide the increment arrows when entering text, disabled, or not hovered
@@ -680,7 +680,7 @@
padding: 9px 0;
border: none;
border-radius: 2px;
background: none;
background: rgba(var(--color-1-nearblack-rgb), 0.5);
&:hover {
background: var(--color-4-dimgray);