fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-23 15:28:11 +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/widgets/inputs/ColorInput.svelte
-116
View File
@@ -1,116 +0,0 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
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 TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
// emits: ["update:value"],
const dispatch = createEventDispatcher<{ value: Color }>();
let open = false;
export let value: Color;
// TODO: Implement
// export let allowTransparency = false;
// export let disabled = false;
export let allowNone = false;
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;
// TODO: Implement
$: chip = undefined;
</script>
<LayoutRow class="color-input" 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
>
{#if chip}
<TextLabel class="chip" bold={true}>{chip}</TextLabel>
{/if}
</button>
<ColorPicker
{open}
on:open={({ detail }) => (open = detail)}
color={value}
on:color={({ detail }) => {
value = detail;
dispatch("value", detail);
}}
{allowNone}
/>
</LayoutRow>
<style lang="scss" global>
.color-input {
box-sizing: border-box;
position: relative;
border: 1px solid var(--color-5-dullgray);
border-radius: 2px;
padding: 1px;
min-width: 80px;
> button {
position: relative;
overflow: hidden;
border: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border-radius: 1px;
&::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 {
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);
}
.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;
}
}
</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 {