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

Redesign ColorInput widget and rename it to ColorButton

Browse Source
This commit is contained in:
Keavon Chambers
2023-11-16 18:38:39 -08:00
parent 8a816cd701
commit e3f5e7001f
22 changed files with 142 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Editor.svelte
+21 -16
View File
@@ -125,29 +125,34 @@
--color-none-position: center center;
// 24px tall, 48px wide
--color-none-size-24px: 60px 24px;
--color-none-image-24px:
// Red diagonal slash (24px tall)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 24"><line stroke="red" stroke-width="4px" x1="0" y1="27" x2="60" y2="-3" /></svg>');
// Red diagonal slash (24px tall)
--color-none-image-24px: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 24"><line stroke="red" stroke-width="4px" x1="0" y1="27" x2="60" y2="-3" /></svg>\
');
// 32px tall, 64px wide
--color-none-size-32px: 80px 32px;
--color-none-image-32px:
// Red diagonal slash (32px tall)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32"><line stroke="red" stroke-width="4px" x1="0" y1="36" x2="80" y2="-4" /></svg>');
// Red diagonal slash (32px tall)
--color-none-image-32px: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32"><line stroke="red" stroke-width="4px" x1="0" y1="36" x2="80" y2="-4" /></svg>\
');
--color-transparent-checkered-background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(#ffffff, #ffffff);
--color-transparent-checkered-background-size: 16px 16px;
--color-transparent-checkered-background-position: 0 0, 8px 8px;
--icon-expand-collapse-arrow:
// Arrow triangle (#eee fill)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23eee" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>');
--icon-expand-collapse-arrow-hover:
// Arrow triangle (#fff fill)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23fff" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>');
--icon-expand-collapse-arrow-disabled:
// Arrow triangle (#888 fill)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23888" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>');
// Arrow triangle (#eee fill)
--icon-expand-collapse-arrow: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23eee" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>\
');
// Arrow triangle (#fff fill)
--icon-expand-collapse-arrow-hover: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23fff" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>\
');
// Arrow triangle (#888 fill)
--icon-expand-collapse-arrow-disabled: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23888" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>\
');
}
html,
@@ -265,7 +270,7 @@
.icon-button,
.text-button,
.popover-button,
.color-input > button,
.color-button > button,
.color-picker .preset-color,
.swatch-pair .swatch > button,
.radio-input button,
frontend/src/components/floating-menus/ColorPicker.svelte
+9 -9
View File
@@ -384,20 +384,20 @@
<LayoutRow class="leftover-space" />
<LayoutRow>
{#if allowNone}
<button class="preset-color none" on:click={() => setColorPreset("none")} title="Set none" tabindex="0" />
<button class="preset-color none" on:click={() => setColorPreset("none")} title="Set No Color" tabindex="0" />
<Separator type="Related" />
{/if}
<button class="preset-color black" on:click={() => setColorPreset("black")} title="Set black" tabindex="0" />
<button class="preset-color black" on:click={() => setColorPreset("black")} title="Set Black" tabindex="0" />
<Separator type="Related" />
<button class="preset-color white" on:click={() => setColorPreset("white")} title="Set white" tabindex="0" />
<button class="preset-color white" on:click={() => setColorPreset("white")} title="Set White" tabindex="0" />
<Separator type="Related" />
<button class="preset-color pure" on:click={setColorPresetSubtile} tabindex="-1">
<div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set red" />
<div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set yellow" />
<div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set green" />
<div data-pure-tile="cyan" style="--pure-color: #00ffff; --pure-color-gray: #b2b2b2" title="Set cyan" />
<div data-pure-tile="blue" style="--pure-color: #0000ff; --pure-color-gray: #1c1c1c" title="Set blue" />
<div data-pure-tile="magenta" style="--pure-color: #ff00ff; --pure-color-gray: #696969" title="Set magenta" />
<div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set Red" />
<div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set Yellow" />
<div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set Green" />
<div data-pure-tile="cyan" style="--pure-color: #00ffff; --pure-color-gray: #b2b2b2" title="Set Cyan" />
<div data-pure-tile="blue" style="--pure-color: #0000ff; --pure-color-gray: #1c1c1c" title="Set Blue" />
<div data-pure-tile="magenta" style="--pure-color: #ff00ff; --pure-color-gray: #696969" title="Set Magenta" />
</button>
<Separator type="Related" />
<IconButton icon="Eyedropper" size={24} action={activateEyedropperSample} tooltip="Sample a pixel color from the document" />
frontend/src/components/widgets/WidgetRow.svelte
+4 -3
View File
@@ -1,6 +1,8 @@
<script lang="ts">
import { getContext } from "svelte";
import ColorButton from "./buttons/ColorButton.svelte";
import { debouncer } from "@graphite/utility-functions/debounce";
import type { Editor } from "@graphite/wasm-communication/editor";
import type { Widget, WidgetColumn, WidgetRow } from "@graphite/wasm-communication/messages";
@@ -13,7 +15,6 @@
import PopoverButton from "@graphite/components/widgets/buttons/PopoverButton.svelte";
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
import CheckboxInput from "@graphite/components/widgets/inputs/CheckboxInput.svelte";
import ColorInput from "@graphite/components/widgets/inputs/ColorInput.svelte";
import CurveInput from "@graphite/components/widgets/inputs/CurveInput.svelte";
import DropdownInput from "@graphite/components/widgets/inputs/DropdownInput.svelte";
import FontInput from "@graphite/components/widgets/inputs/FontInput.svelte";
@@ -88,9 +89,9 @@
{#if checkboxInput}
<CheckboxInput {...exclude(checkboxInput)} on:checked={({ detail }) => updateLayout(index, detail)} />
{/if}
{@const colorInput = narrowWidgetProps(component.props, "ColorInput")}
{@const colorInput = narrowWidgetProps(component.props, "ColorButton")}
{#if colorInput}
<ColorInput {...exclude(colorInput)} on:value={({ detail }) => updateLayout(index, detail)} sharpRightCorners={nextIsSuffix} />
<ColorButton {...exclude(colorInput)} on:value={({ detail }) => updateLayout(index, detail)} sharpRightCorners={nextIsSuffix} />
{/if}
{@const curvesInput = narrowWidgetProps(component.props, "CurveInput")}
{#if curvesInput}
frontend/src/components/widgets/inputs/ColorInput.svelte → frontend/src/components/widgets/buttons/ColorButton.svelte
+25 -35
View File
@@ -4,7 +4,7 @@
import type { Color } from "@graphite/wasm-communication/messages";
import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
// emits: ["update:value"],
@@ -20,11 +20,16 @@
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;
// TODO: Implement
$: chip = undefined;
function colorLabel(value: Color): string {
if (value.none) return "No Color";
const type = "Color"; // TODO: Add "Gradient" type
const hex = value.toHexNoAlpha();
const alpha = value.alpha === 1 ? undefined : `${Math.floor(value.alpha * 100)}%`;
return [type, hex, alpha].filter((x) => x).join(" — ");
}
</script>
<LayoutRow class="color-input" classes={{ "sharp-right-corners": sharpRightCorners }} {tooltip}>
<LayoutCol class="color-button" classes={{ "sharp-right-corners": sharpRightCorners }} {tooltip}>
<button
class:none={value.none}
class:sharp-right-corners={sharpRightCorners}
@@ -32,11 +37,7 @@
on:click={() => (open = true)}
tabindex="0"
data-floating-menu-spawner
>
{#if chip}
<TextLabel class="chip" bold={true}>{chip}</TextLabel>
{/if}
</button>
></button>
<ColorPicker
{open}
on:open={({ detail }) => (open = detail)}
@@ -47,15 +48,12 @@
}}
{allowNone}
/>
</LayoutRow>
<TextLabel>{colorLabel(value)}</TextLabel>
</LayoutCol>
<style lang="scss" global>
.color-input {
box-sizing: border-box;
.color-button {
position: relative;
border: 1px solid var(--color-5-dullgray);
border-radius: 2px;
padding: 1px;
min-width: 80px;
> button {
@@ -65,8 +63,10 @@
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border-radius: 1px;
height: 16px;
// TODO: Find a way to work around Chrome's light-colored antialiasing artifacts around the rounded parts of the pill border most visible when the color is dark colored
border: 1px solid var(--color-5-dullgray);
border-radius: 10000px;
&::before {
content: "";
@@ -88,29 +88,19 @@
background-size: var(--color-none-size-24px);
background-image: var(--color-none-image-24px);
}
.chip {
position: absolute;
bottom: -1px;
right: 0;
height: 13px;
line-height: 13px;
background: var(--color-f-white);
color: var(--color-2-mildblack);
border-radius: 4px 0 0 0;
padding: 0 4px;
font-size: 10px;
box-shadow: 0 0 2px var(--color-3-darkgray);
}
}
&.color-input.color-input > button {
outline-offset: 0;
}
> .floating-menu {
left: 50%;
bottom: 0;
}
> .text-label {
margin-top: 1px;
height: 24px - 16px - 1px;
line-height: 24px - 16px - 1px;
font-size: 10px;
text-align: center;
}
}
</style>
frontend/src/components/widgets/inputs/SwatchPairInput.svelte
+7 -2
View File
@@ -37,11 +37,11 @@
<LayoutCol class="swatch-pair">
<LayoutRow class="primary swatch">
<button on:click={clickPrimarySwatch} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
<ColorPicker open={primaryOpen} on:open={({ detail }) => (primaryOpen = detail)} color={primary} on:color={({ detail }) => primaryColorChanged(detail)} direction="Right" />
</LayoutRow>
<LayoutRow class="secondary swatch">
<button on:click={clickSecondarySwatch} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
<ColorPicker open={secondaryOpen} on:open={({ detail }) => (secondaryOpen = detail)} color={secondary} on:color={({ detail }) => secondaryColorChanged(detail)} direction="Right" />
</LayoutRow>
</LayoutCol>
@@ -70,6 +70,11 @@
background-size: var(--color-transparent-checkered-background-size);
background-position: var(--color-transparent-checkered-background-position);
overflow: hidden;
&:hover,
&.open {
border-color: var(--color-6-lowergray);
}
}
.floating-menu {
frontend/src/wasm-communication/messages.ts
+2 -2
View File
@@ -762,7 +762,7 @@ export class CheckboxInput extends WidgetProps {
tooltip!: string | undefined;
}
export class ColorInput extends WidgetProps {
export class ColorButton extends WidgetProps {
@Transform(({ value }: { value: { red: number; green: number; blue: number; alpha: number } | undefined }) =>
value === undefined ? new Color("none") : new Color(value.red, value.green, value.blue, value.alpha),
)
@@ -1130,7 +1130,7 @@ export class PivotAssist extends WidgetProps {
const widgetSubTypes = [
{ value: BreadcrumbTrailButtons, name: "BreadcrumbTrailButtons" },
{ value: CheckboxInput, name: "CheckboxInput" },
{ value: ColorInput, name: "ColorInput" },
{ value: ColorButton, name: "ColorButton" },
{ value: CurveInput, name: "CurveInput" },
{ value: DropdownInput, name: "DropdownInput" },
{ value: FontInput, name: "FontInput" },