forked from tsai/budibase
Peter Clement
4 years ago
2 changed files with 177 additions and 0 deletions
@ -0,0 +1,176 @@ |
|||||
|
<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" |
||||
|
|
||||
|
export let value = "Anchor" |
||||
|
export let size = "M" |
||||
|
export let alignRight = false |
||||
|
|
||||
|
let open = false |
||||
|
|
||||
|
const dispatch = createEventDispatcher() |
||||
|
|
||||
|
const iconList = [ |
||||
|
{ |
||||
|
label: "Icons", |
||||
|
icons: [ |
||||
|
"Apps", |
||||
|
"Actions", |
||||
|
"ConversionFunnel", |
||||
|
"App", |
||||
|
"Briefcase", |
||||
|
"Money", |
||||
|
"ShoppingCart", |
||||
|
"Form", |
||||
|
"Help", |
||||
|
"Monitoring", |
||||
|
"Sandbox", |
||||
|
"Project", |
||||
|
"Organisations", |
||||
|
"Magnify", |
||||
|
"Launch", |
||||
|
"Car", |
||||
|
"Camera", |
||||
|
"Bug", |
||||
|
"Channel", |
||||
|
"Calculator", |
||||
|
"Calendar", |
||||
|
"GraphDonut", |
||||
|
"GraphBarHorizontal", |
||||
|
"Demographic", |
||||
|
], |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
const onChange = value => { |
||||
|
dispatch("change", value) |
||||
|
open = false |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="container"> |
||||
|
<div class="preview size--{size || 'M'}" on:click={() => (open = true)}> |
||||
|
<div |
||||
|
class="fill" |
||||
|
style={value ? `background: ${value};` : ""} |
||||
|
class:placeholder={!value} |
||||
|
> |
||||
|
<Icon name={value} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
{#if open} |
||||
|
<div |
||||
|
use:clickOutside={() => (open = false)} |
||||
|
transition:fly={{ y: -20, duration: 200 }} |
||||
|
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" |
||||
|
class:spectrum-Popover--align-right={alignRight} |
||||
|
> |
||||
|
{#each iconList as icon} |
||||
|
<div class="category"> |
||||
|
<div class="heading">{icon.label}</div> |
||||
|
<div class="icons"> |
||||
|
{#each icon.icons as icon} |
||||
|
<div |
||||
|
on:click={() => { |
||||
|
value = icon |
||||
|
}} |
||||
|
> |
||||
|
<Icon name={icon} /> |
||||
|
</div> |
||||
|
{/each} |
||||
|
</div> |
||||
|
</div> |
||||
|
{/each} |
||||
|
</div> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.container { |
||||
|
position: relative; |
||||
|
} |
||||
|
.preview { |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
position: relative; |
||||
|
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-400); |
||||
|
} |
||||
|
.preview:hover { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.fill { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
display: grid; |
||||
|
place-items: center; |
||||
|
} |
||||
|
.size--S { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
.size--M { |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
} |
||||
|
.size--L { |
||||
|
width: 48px; |
||||
|
height: 48px; |
||||
|
} |
||||
|
.spectrum-Popover { |
||||
|
width: 210px; |
||||
|
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); |
||||
|
} |
||||
|
.spectrum-Popover--align-right { |
||||
|
right: 0; |
||||
|
} |
||||
|
.icons { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; |
||||
|
gap: var(--spacing-m); |
||||
|
} |
||||
|
.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); |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
height: 16px; |
||||
|
width: 16px; |
||||
|
border-radius: 100%; |
||||
|
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300); |
||||
|
position: relative; |
||||
|
} |
||||
|
.icon: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); |
||||
|
} |
||||
|
|
||||
|
.spectrum-wrapper { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue