MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add wrapper to color picker and fix helper import

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 { fly } from "svelte/transition"
import Icon from "../Icon/Icon.svelte" import Icon from "../Icon/Icon.svelte"
import Input from "../Form/Input.svelte" import Input from "../Form/Input.svelte"
import { capitalise } from "helpers" import { capitalise } from "../utils/helpers"
export let value export let value
@ -108,55 +108,65 @@
} }
</script> </script>
<div <div class="container">
class="preview"
style="background: {color};"
on:click={() => (open = true)}
/>
{#if open}
<div <div
use:clickOutside={() => (open = false)} class="preview"
transition:fly={{ y: -20, duration: 200 }} style="background: {color};"
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" on:click={() => (open = true)}
> />
{#each categories as category} {#if open}
<div class="category"> <div
<div class="heading">{category.label}</div> use:clickOutside={() => (open = false)}
<div class="colors"> transition:fly={{ y: -20, duration: 200 }}
{#each category.colors as color} class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
<div >
on:click={() => { {#each categories as category}
onChange(`var(--spectrum-global-color-static-${color})`) <div class="category">
}} <div class="heading">{category.label}</div>
class="color" <div class="colors">
style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};" {#each category.colors as color}
title={prettyPrint(color)} <div
> on:click={() => {
{#if value === `var(--spectrum-global-color-static-${color})`} onChange(`var(--spectrum-global-color-static-${color})`)
<Icon name="Checkmark" size="S" /> }}
{/if} class="color"
</div> style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};"
{/each} 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> </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>
</div> {/if}
{/if} </div>
<style> <style>
.container {
position: relative;
}
.preview { .preview {
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -169,7 +179,7 @@
box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300); box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
} }
.spectrum-Popover { .spectrum-Popover {
width: 100%; width: 210px;
z-index: 999; z-index: 999;
top: 100%; top: 100%;
padding: var(--spacing-l) var(--spacing-xl); 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 // Starts with a letter so that its a valid DOM ID
return `A${rand}` return `A${rand}`
} }
export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)