CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-01 09:38:55 +13:00
Code Issues Projects Releases Wiki Activity

Add wrapper to color picker and fix helper import

Browse source
This commit is contained in:
Andrew Kingston 2021-06-23 11:47:07 +01:00
parent 4b9a863c68
commit 997efa62b3
2 changed files with 57 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
packages/bbui/src/ColorPicker/ColorPicker.svelte
View file

@ -5,7 +5,7 @@
import { fly } from "svelte/transition"
import Icon from "../Icon/Icon.svelte"
import Input from "../Form/Input.svelte"
import { capitalise } from "helpers"
import { capitalise } from "../utils/helpers"
export let value
@ -108,55 +108,65 @@
}
</script>
<div
class="preview"
style="background: {color};"
on:click={() => (open = true)}
/>
{#if open}
<div class="container">
<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}
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>
{/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}
{/if}
</div>
<style>
.container {
position: relative;
}
.preview {
width: 32px;
height: 32px;
@ -169,7 +179,7 @@
box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
}
.spectrum-Popover {
width: 100%;
width: 210px;
z-index: 999;
top: 100%;
padding: var(--spacing-l) var(--spacing-xl);

2
packages/bbui/src/utils/helpers.js
View file

@ -4,3 +4,5 @@ export const generateID = () => {
// Starts with a letter so that its a valid DOM ID
return `A${rand}`
}
export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)