mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
5 years ago
5 changed files with 230 additions and 77 deletions
@ -0,0 +1,218 @@ |
|||
<script> |
|||
import { createEventDispatcher } from "svelte" |
|||
import "@spectrum-css/popover/dist/index-vars.css" |
|||
import clickOutside from "../Actions/click_outside" |
|||
import { fly } from "svelte/transition" |
|||
import Icon from "../Icon/Icon.svelte" |
|||
import Input from "../Form/Input.svelte" |
|||
import { capitalise } from "helpers" |
|||
|
|||
export let value |
|||
|
|||
let open = false |
|||
|
|||
$: color = value || "transparent" |
|||
$: customValue = getCustomValue(value) |
|||
$: checkColor = getCheckColor(value) |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
const categories = [ |
|||
{ |
|||
label: "Grays", |
|||
colors: [ |
|||
"white", |
|||
"gray-50", |
|||
"gray-75", |
|||
"gray-100", |
|||
"gray-200", |
|||
"gray-300", |
|||
"gray-400", |
|||
"gray-500", |
|||
"gray-600", |
|||
"gray-700", |
|||
"gray-800", |
|||
"gray-900", |
|||
"black", |
|||
], |
|||
}, |
|||
{ |
|||
label: "Colors", |
|||
colors: [ |
|||
"red-400", |
|||
"orange-400", |
|||
"yellow-400", |
|||
"green-400", |
|||
"seafoam-400", |
|||
"blue-400", |
|||
"indigo-400", |
|||
"magenta-400", |
|||
|
|||
"red-500", |
|||
"orange-500", |
|||
"yellow-500", |
|||
"green-500", |
|||
"seafoam-500", |
|||
"blue-500", |
|||
"indigo-500", |
|||
"magenta-500", |
|||
|
|||
"red-600", |
|||
"orange-600", |
|||
"yellow-600", |
|||
"green-600", |
|||
"seafoam-600", |
|||
"blue-600", |
|||
"indigo-600", |
|||
"magenta-600", |
|||
|
|||
"red-700", |
|||
"orange-700", |
|||
"yellow-700", |
|||
"green-700", |
|||
"seafoam-700", |
|||
"blue-700", |
|||
"indigo-700", |
|||
"magenta-700", |
|||
], |
|||
}, |
|||
] |
|||
|
|||
const onChange = value => { |
|||
dispatch("change", value) |
|||
open = false |
|||
} |
|||
|
|||
const getCustomValue = value => { |
|||
if (!value) { |
|||
return value |
|||
} |
|||
let found = false |
|||
const comparisonValue = value.substring(35, value.length - 1) |
|||
for (let category of categories) { |
|||
found = category.colors.includes(comparisonValue) |
|||
if (found) { |
|||
break |
|||
} |
|||
} |
|||
return found ? null : value |
|||
} |
|||
|
|||
const prettyPrint = color => { |
|||
return capitalise(color.split("-").join(" ")) |
|||
} |
|||
|
|||
const getCheckColor = value => { |
|||
return /^.*(white|(gray-(50|75|100|200|300|400|500)))\)$/.test(value) |
|||
? "black" |
|||
: "white" |
|||
} |
|||
</script> |
|||
|
|||
<div |
|||
class="preview" |
|||
style="background: {color};" |
|||
on:click={() => (open = true)} |
|||
/> |
|||
{#if open} |
|||
<div |
|||
use:clickOutside={() => (open = false)} |
|||
transition:fly={{ y: -20, duration: 200 }} |
|||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" |
|||
> |
|||
{#each categories as category} |
|||
<div class="category"> |
|||
<div class="heading">{category.label}</div> |
|||
<div class="colors"> |
|||
{#each category.colors as color} |
|||
<div |
|||
on:click={() => { |
|||
onChange(`var(--spectrum-global-color-static-${color})`) |
|||
}} |
|||
class="color" |
|||
style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};" |
|||
title={prettyPrint(color)} |
|||
> |
|||
{#if value === `var(--spectrum-global-color-static-${color})`} |
|||
<Icon name="Checkmark" size="S" /> |
|||
{/if} |
|||
</div> |
|||
{/each} |
|||
</div> |
|||
</div> |
|||
{/each} |
|||
<div class="category category--custom"> |
|||
<div class="heading">Custom</div> |
|||
<div class="custom"> |
|||
<Input |
|||
updateOnChange={false} |
|||
quiet |
|||
placeholder="Hex, RGB, HSL..." |
|||
value={customValue} |
|||
on:change |
|||
/> |
|||
<Icon size="S" name="Close" hoverable on:click={() => onChange(null)} /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
{/if} |
|||
|
|||
<style> |
|||
.preview { |
|||
width: 32px; |
|||
height: 32px; |
|||
border-radius: 100%; |
|||
transition: border-color 130ms ease-in-out; |
|||
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300); |
|||
} |
|||
.preview:hover { |
|||
cursor: pointer; |
|||
box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300); |
|||
} |
|||
.spectrum-Popover { |
|||
width: 100%; |
|||
z-index: 999; |
|||
top: 100%; |
|||
padding: var(--spacing-l) var(--spacing-xl); |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
gap: var(--spacing-xl); |
|||
} |
|||
.colors { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; |
|||
gap: var(--spacing-xs); |
|||
} |
|||
.heading { |
|||
font-size: var(--font-size-s); |
|||
font-weight: 600; |
|||
letter-spacing: 0.14px; |
|||
flex: 1 1 auto; |
|||
text-transform: uppercase; |
|||
grid-column: 1 / 5; |
|||
margin-bottom: var(--spacing-s); |
|||
} |
|||
.color { |
|||
height: 16px; |
|||
width: 16px; |
|||
border-radius: 100%; |
|||
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300); |
|||
display: grid; |
|||
place-items: center; |
|||
} |
|||
.color:hover { |
|||
cursor: pointer; |
|||
box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300); |
|||
} |
|||
.custom { |
|||
display: grid; |
|||
grid-template-columns: 1fr auto; |
|||
align-items: center; |
|||
gap: var(--spacing-m); |
|||
margin-right: var(--spacing-xs); |
|||
} |
|||
.category--custom .heading { |
|||
margin-bottom: var(--spacing-xs); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue