From 32fb142b624aa06a998e68b3ad7543663b5edb76 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Mon, 27 Nov 2023 04:48:16 -0800 Subject: [PATCH] Redesign the ColorButton widget style --- .../utility_types/widgets/button_widgets.rs | 3 + .../floating-menus/ColorPicker.svelte | 29 +++-- .../widgets/buttons/ColorButton.svelte | 119 ++++++++++-------- frontend/src/wasm-communication/messages.ts | 6 +- 4 files changed, 91 insertions(+), 66 deletions(-) diff --git a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs b/editor/src/messages/layout/utility_types/widgets/button_widgets.rs index 7dae6667..1f907034 100644 --- a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs +++ b/editor/src/messages/layout/utility_types/widgets/button_widgets.rs @@ -125,10 +125,13 @@ pub struct ColorButton { #[widget_builder(constructor)] pub value: Option, + pub disabled: bool, + // TODO: Implement // #[serde(rename = "allowTransparency")] // #[derivative(Default(value = "false"))] // pub allow_transparency: bool, + // #[serde(rename = "allowNone")] #[derivative(Default(value = "true"))] pub allow_none: bool, diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte index c58c7a71..9cadccd9 100644 --- a/frontend/src/components/floating-menus/ColorPicker.svelte +++ b/frontend/src/components/floating-menus/ColorPicker.svelte @@ -10,7 +10,6 @@ import LayoutCol from "@graphite/components/layout/LayoutCol.svelte"; import LayoutRow from "@graphite/components/layout/LayoutRow.svelte"; import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte"; - import DropdownInput from "@graphite/components/widgets/inputs/DropdownInput.svelte"; import NumberInput from "@graphite/components/widgets/inputs/NumberInput.svelte"; import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte"; import Separator from "@graphite/components/widgets/labels/Separator.svelte"; @@ -29,7 +28,6 @@ blue: [0, 0, 1], magenta: [1, 0, 1], }; - const COLOR_SPACE_CHOICES = [[{ label: "sRGB" }]]; const editor = getContext("editor"); @@ -37,8 +35,8 @@ const dispatch = createEventDispatcher<{ color: Color }>(); export let color: Color; - // export let allowTransparency = false; // TODO: Implement export let allowNone = false; + // export let allowTransparency = false; // TODO: Implement export let direction: MenuDirection = "Bottom"; // TODO: See if this should be made to follow the pattern of DropdownInput.svelte so this could be removed export let open: boolean; @@ -62,6 +60,8 @@ let draggingPickerTrack: HTMLDivElement | undefined = undefined; let strayCloses = true; + let hexCodeInputWidget: TextInput | undefined; + $: watchOpen(open); $: watchColor(color); @@ -77,7 +77,11 @@ } function watchOpen(open: boolean) { - if (!open) setInitialHSVA(hue, saturation, value, alpha, isNone); + if (open) { + setTimeout(() => hexCodeInputWidget?.focus(), 0); + } else { + setInitialHSVA(hue, saturation, value, alpha, isNone); + } } function watchColor(color: Color) { @@ -302,9 +306,9 @@ Initial - + - Hex + Hex setColorCode(detail)} centered={true} tooltip={"Color code in hexadecimal format. 6 digits if opaque, 8 with alpha.\nAccepts input of CSS color values including named colors."} + bind:this={hexCodeInputWidget} /> @@ -338,9 +343,9 @@ - HSV + + HSV + {#each hsvChannels as [channel, strength], index} @@ -358,9 +363,9 @@ unit={channel === "h" ? "°" : "%"} minWidth={56} tooltip={{ - h: `Hue component, the "color" along the rainbow`, - s: `Saturation component, the "colorfulness" from gray to vivid`, - v: "Value (or Brightness), the distance away from being darkened to black", + h: `Hue component, the shade along the spectrum of the rainbow`, + s: `Saturation component, the vividness from grayscale to full color`, + v: "Value component, the brightness from black to full color", }[channel]} /> {/each} diff --git a/frontend/src/components/widgets/buttons/ColorButton.svelte b/frontend/src/components/widgets/buttons/ColorButton.svelte index 559599b1..d49534a1 100644 --- a/frontend/src/components/widgets/buttons/ColorButton.svelte +++ b/frontend/src/components/widgets/buttons/ColorButton.svelte @@ -13,31 +13,18 @@ let open = false; export let value: Color; - // TODO: Implement - // export let allowTransparency = false; - // export let disabled = false; + export let disabled = false; export let allowNone = false; + // export let allowTransparency = false; // TODO: Implement export let tooltip: string | undefined = undefined; export let sharpRightCorners = false; - - 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(" — "); - } - - + + + {#if disabled && !value.none} + sRGB + {/if} (open = detail)} @@ -48,59 +35,89 @@ }} {allowNone} /> - {colorLabel(value)} diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts index 4ead8f9a..36411871 100644 --- a/frontend/src/wasm-communication/messages.ts +++ b/frontend/src/wasm-communication/messages.ts @@ -770,11 +770,11 @@ export class ColorButton extends WidgetProps { ) value!: Color; + disabled!: boolean; + allowNone!: boolean; - // TODO: Implement - // allowTransparency!: boolean; - // disabled!: boolean; + // allowTransparency!: boolean; // TODO: Implement @Transform(({ value }: { value: string }) => value || undefined) tooltip!: string | undefined;