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

Redesign the ColorButton widget style

Browse Source
This commit is contained in:
Keavon Chambers
2023-11-27 04:48:16 -08:00
parent b2ca643e6e
commit 32fb142b62
4 changed files with 91 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/buttons/ColorButton.svelte
+68 -51
View File
@@ -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>