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

Layer-based nodes redesign, just the basics so far (#1362)

Browse Source 
* Redesign the nodes

* Basic vertical stacking syntax sugar

* Fix node connections

* Primary output and line thickness

---------

Co-authored-by: 0hypercube <0hypercube@gmail.com>
This commit is contained in:
Keavon Chambers
2023-08-04 14:56:00 -07:00
committed by GitHub
co-authored by 0hypercube
parent 94a0f8282e
commit 3450d638a6
11 changed files with 491 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/floating-menus/ColorPicker.svelte
+7 -7
View File
@@ -285,12 +285,12 @@
</LayoutCol>
<LayoutCol class="hue-picker" on:pointerdown={onPointerDown} data-hue-picker>
{#if !isNone}
<div class="selection-pincers" style:top={`${(1 - hue) * 100}%`} />
<div class="selection-needle" style:top={`${(1 - hue) * 100}%`} />
{/if}
</LayoutCol>
<LayoutCol class="alpha-picker" on:pointerdown={onPointerDown} data-alpha-picker>
{#if !isNone}
<div class="selection-pincers" style:top={`${(1 - alpha) * 100}%`} />
<div class="selection-needle" style:top={`${(1 - alpha) * 100}%`} />
{/if}
</LayoutCol>
<LayoutCol class="details">
@@ -434,11 +434,12 @@
background-blend-mode: screen;
background: linear-gradient(to top, #ff0000ff 16.666%, #ff000000 33.333%, #ff000000 66.666%, #ff0000ff 83.333%),
linear-gradient(to top, #00ff0000 0%, #00ff00ff 16.666%, #00ff00ff 50%, #00ff0000 66.666%), linear-gradient(to top, #0000ff00 33.333%, #0000ffff 50%, #0000ffff 83.333%, #0000ff00 100%);
--selection-pincers-color: var(--hue-color-contrasting);
--selection-needle-color: var(--hue-color-contrasting);
}
.alpha-picker {
background: linear-gradient(to bottom, var(--opaque-color), transparent);
--selection-needle-color: var(--new-color-contrasting);
&::before {
content: "";
@@ -450,7 +451,6 @@
background-size: var(--color-transparent-checkered-background-size);
background-position: var(--color-transparent-checkered-background-position);
}
--selection-pincers-color: var(--new-color-contrasting);
}
.selection-circle {
@@ -475,7 +475,7 @@
}
}
.selection-pincers {
.selection-needle {
position: absolute;
top: 0%;
width: 100%;
@@ -489,7 +489,7 @@
left: 0;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent transparent transparent var(--selection-pincers-color);
border-color: transparent transparent transparent var(--selection-needle-color);
}
&::after {
@@ -499,7 +499,7 @@
right: 0;
border-style: solid;
border-width: 4px 4px 4px 0;
border-color: transparent var(--selection-pincers-color) transparent transparent;
border-color: transparent var(--selection-needle-color) transparent transparent;
}
}