add IconPicker component
This commit is contained in:
Peter Clement
parent
a2ba6ddbac
commit
b3227fe51e
|
|
@ -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>
|
||||||
|
|
@ -58,6 +58,7 @@ export { default as Pagination } from "./Pagination/Pagination.svelte"
|
||||||
export { default as Badge } from "./Badge/Badge.svelte"
|
export { default as Badge } from "./Badge/Badge.svelte"
|
||||||
export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
|
export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
|
||||||
export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
|
export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
|
||||||
|
export { default as IconPicker } from "./IconPicker/IconPicker.svelte"
|
||||||
export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
|
export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
|
||||||
export { default as Banner } from "./Banner/Banner.svelte"
|
export { default as Banner } from "./Banner/Banner.svelte"
|
||||||
export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
|
export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue