mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-08-03 21:08:18 +00:00
Redesign the ColorButton widget style
This commit is contained in:
Keavon Chambers
parent
b2ca643e6e
commit
32fb142b62
4 changed files with 91 additions and 66 deletions
|
|
@ -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>("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 @@
|
|||
<TextLabel>Initial</TextLabel>
|
||||
</LayoutCol>
|
||||
</LayoutRow>
|
||||
<DropdownInput entries={COLOR_SPACE_CHOICES} selectedIndex={0} disabled={true} tooltip="Color Space and HDR (coming soon)" />
|
||||
<!-- <DropdownInput entries={[[{ label: "sRGB" }]]} selectedIndex={0} disabled={true} tooltip="Color model, color space, and HDR (coming soon)" /> -->
|
||||
<LayoutRow>
|
||||
<TextLabel tooltip="Color code in hexadecimal format">Hex</TextLabel>
|
||||
<TextLabel tooltip={"Color code in hexadecimal format. 6 digits if opaque, 8 with alpha.\nAccepts input of CSS color values including named colors."}>Hex</TextLabel>
|
||||
<Separator />
|
||||
<LayoutRow>
|
||||
<TextInput
|
||||
|
|
@ -312,6 +316,7 @@
|
|||
on:commitText={({ detail }) => 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}
|
||||
/>
|
||||
</LayoutRow>
|
||||
</LayoutRow>
|
||||
|
|
@ -338,9 +343,9 @@
|
|||
</LayoutRow>
|
||||
</LayoutRow>
|
||||
<LayoutRow>
|
||||
<TextLabel tooltip={"Hue/Saturation/Value, also known as Hue/Saturation/Brightness (HSB).\nNot to be confused with Hue/Saturation/Lightness (HSL), a different color model."}
|
||||
>HSV</TextLabel
|
||||
>
|
||||
<TextLabel tooltip={"Hue/Saturation/Value, also known as Hue/Saturation/Brightness (HSB).\nNot to be confused with Hue/Saturation/Lightness (HSL), a different color model."}>
|
||||
HSV
|
||||
</TextLabel>
|
||||
<Separator />
|
||||
<LayoutRow>
|
||||
{#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}
|
||||
|
|
|
|||
|
|
@ -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(" — ");
|
||||
}
|
||||
</script>
|
||||
|
||||
<LayoutCol class="color-button" classes={{ "sharp-right-corners": sharpRightCorners }} {tooltip}>
|
||||
<button
|
||||
class:none={value.none}
|
||||
class:sharp-right-corners={sharpRightCorners}
|
||||
style:--chosen-color={value.toHexOptionalAlpha()}
|
||||
on:click={() => (open = true)}
|
||||
tabindex="0"
|
||||
data-floating-menu-spawner
|
||||
></button>
|
||||
<LayoutCol class="color-button" classes={{ disabled, none: value.none, open, "sharp-right-corners": sharpRightCorners }} {tooltip}>
|
||||
<button {disabled} style:--chosen-color={value.toHexOptionalAlpha()} on:click={() => (open = true)} tabindex="0" data-floating-menu-spawner></button>
|
||||
{#if disabled && !value.none}
|
||||
<TextLabel>sRGB</TextLabel>
|
||||
{/if}
|
||||
<ColorPicker
|
||||
{open}
|
||||
on:open={({ detail }) => (open = detail)}
|
||||
|
|
@ -48,59 +35,89 @@
|
|||
}}
|
||||
{allowNone}
|
||||
/>
|
||||
<TextLabel>{colorLabel(value)}</TextLabel>
|
||||
</LayoutCol>
|
||||
|
||||
<style lang="scss" global>
|
||||
.color-button {
|
||||
position: relative;
|
||||
min-width: 80px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-5-dullgray);
|
||||
|
||||
&:hover,
|
||||
&.open {
|
||||
&,
|
||||
> .text-label {
|
||||
background: rgba(var(--color-6-lowergray-rgb), 50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
&,
|
||||
> .text-label {
|
||||
background: var(--color-4-dimgray);
|
||||
color: var(--color-8-uppergray);
|
||||
}
|
||||
}
|
||||
|
||||
&.sharp-right-corners {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
> button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
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;
|
||||
margin: 0;
|
||||
margin-left: 2px;
|
||||
margin-top: 2px;
|
||||
width: calc(100% - 4px);
|
||||
height: calc(100% - 4px);
|
||||
background: linear-gradient(var(--chosen-color), var(--chosen-color)), var(--color-transparent-checkered-background);
|
||||
background-size: var(--color-transparent-checkered-background-size);
|
||||
background-position: var(--color-transparent-checkered-background-position);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 2px;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
background: linear-gradient(var(--chosen-color), var(--chosen-color)), var(--color-transparent-checkered-background);
|
||||
background-size: var(--color-transparent-checkered-background-size);
|
||||
background-position: var(--color-transparent-checkered-background-position);
|
||||
}
|
||||
|
||||
&.none {
|
||||
&.none {
|
||||
> button {
|
||||
background: var(--color-none);
|
||||
background-repeat: var(--color-none-repeat);
|
||||
background-position: var(--color-none-position);
|
||||
background-size: var(--color-none-size-24px);
|
||||
background-image: var(--color-none-image-24px);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
> button::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(var(--color-4-dimgray-rgb), 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .text-label {
|
||||
background: rgba(var(--color-5-dullgray-rgb), 50%);
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px 0 0 6px;
|
||||
padding-right: 2px;
|
||||
padding-left: 4px;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue