Updates for Colorpicker Component
This commit is contained in:
parent
06f3c1db77
commit
ad0840545e
8 changed files with 79 additions and 30 deletions
|
@ -12,8 +12,10 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row nowrap;
|
flex-flow: row nowrap;
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
width: 170px;
|
||||||
|
height: 30px;
|
||||||
|
align-self: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
<script>
|
||||||
|
import {buildStyle} from "./helpers.js"
|
||||||
|
|
||||||
|
export let backgroundSize = "10px"
|
||||||
|
export let borderRadius = ""
|
||||||
|
export let height = ""
|
||||||
|
export let width = ""
|
||||||
|
|
||||||
|
$: style = buildStyle({backgroundSize, borderRadius, height, width})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
|
||||||
|
height: fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div {style}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount, createEventDispatcher } from "svelte";
|
import { onMount, createEventDispatcher } from "svelte";
|
||||||
|
import CheckedBackground from "./CheckedBackground.svelte"
|
||||||
|
import {buildStyle} from "./helpers.js"
|
||||||
import {
|
import {
|
||||||
getColorFormat,
|
getColorFormat,
|
||||||
convertToHSVA,
|
convertToHSVA,
|
||||||
|
@ -59,7 +60,6 @@
|
||||||
|
|
||||||
function changeFormatAndConvert(f) {
|
function changeFormatAndConvert(f) {
|
||||||
format = f;
|
format = f;
|
||||||
console.log(f)
|
|
||||||
value = convertHsvaToFormat([h, s, v, a], format);
|
value = convertHsvaToFormat([h, s, v, a], format);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -73,6 +73,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: border = s < 10 ? "1px dashed #dedada" : ""
|
||||||
|
$: style = buildStyle({background: value, border})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -81,19 +83,25 @@
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 300px;
|
height: 265px;
|
||||||
width: 250px;
|
width: 220px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
box-shadow: 0 0.15em 1.5em 0 rgba(0,0,0,.1), 0 0 1em 0 rgba(0,0,0,.03);
|
box-shadow: 0 0.15em 1.5em 0 rgba(0,0,0,.1), 0 0 1em 0 rgba(0,0,0,.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.palette-panel {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.control-panel {
|
.control-panel {
|
||||||
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
background: white;
|
background: white;
|
||||||
border: 1px solid #d2d2d2
|
border: 1px solid #d2d2d2;
|
||||||
|
color: #777373;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alpha-hue-panel {
|
.alpha-hue-panel {
|
||||||
|
@ -108,7 +116,6 @@
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid #dedada;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.format-input-panel {
|
.format-input-panel {
|
||||||
|
@ -120,19 +127,27 @@
|
||||||
|
|
||||||
<div class="colorpicker-container">
|
<div class="colorpicker-container">
|
||||||
|
|
||||||
|
<div class="palette-panel">
|
||||||
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
|
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="control-panel">
|
<div class="control-panel">
|
||||||
<div class="alpha-hue-panel">
|
<div class="alpha-hue-panel">
|
||||||
<div>
|
<div>
|
||||||
<div class="selected-color" style={`background: ${value}`} />
|
<CheckedBackground borderRadius="50%" backgroundSize="8px">
|
||||||
|
<div class="selected-color" {style} />
|
||||||
|
</CheckedBackground>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
|
<Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
|
||||||
|
|
||||||
|
<CheckedBackground borderRadius="10px" backgroundSize="7px">
|
||||||
<Slider
|
<Slider
|
||||||
type="alpha"
|
type="alpha"
|
||||||
value={a}
|
value={a}
|
||||||
on:change={alpha => setAlpha(alpha.detail)} />
|
on:change={alpha => setAlpha(alpha.detail)} />
|
||||||
|
</CheckedBackground>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import Colorpicker from "./Colorpicker.svelte"
|
import Colorpicker from "./Colorpicker.svelte"
|
||||||
|
import CheckedBackground from "./CheckedBackground.svelte"
|
||||||
import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
|
import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
|
||||||
import {buildStyle} from "./helpers.js"
|
import {buildStyle} from "./helpers.js"
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
|
@ -72,7 +73,7 @@
|
||||||
|
|
||||||
//TOO: Testing and Scroll Awareness for x Scroll
|
//TOO: Testing and Scroll Awareness for x Scroll
|
||||||
const spaceRight = (innerWidth - spaceLeft) + previewWidth
|
const spaceRight = (innerWidth - spaceLeft) + previewWidth
|
||||||
const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) + pickerWidth : offsetLeft - pickerWidth
|
const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
|
||||||
|
|
||||||
dimensions = {top, left}
|
dimensions = {top, left}
|
||||||
|
|
||||||
|
@ -88,7 +89,10 @@
|
||||||
|
|
||||||
<div class="color-preview-container">
|
<div class="color-preview-container">
|
||||||
{#if !errorMsg}
|
{#if !errorMsg}
|
||||||
<div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker}></div>
|
<CheckedBackground borderRadius="3px" backgroundSize="8px">
|
||||||
|
<div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker} />
|
||||||
|
</CheckedBackground>
|
||||||
|
|
||||||
{#if open}
|
{#if open}
|
||||||
<div class="picker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth} style={pickerStyle}>
|
<div class="picker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth} style={pickerStyle}>
|
||||||
<Colorpicker on:change={onColorChange} {format} {value} />
|
<Colorpicker on:change={onColorChange} {format} {value} />
|
||||||
|
@ -111,7 +115,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-preview {
|
.color-preview {
|
||||||
flex: 1;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid #dedada;
|
border: 1px solid #dedada;
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,15 +5,18 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.flatbutton {
|
.flatbutton {
|
||||||
padding: 3px 15px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: black;
|
|
||||||
background-color: #dadada;
|
|
||||||
border: 1px solid #d4d4d4;
|
border: 1px solid #d4d4d4;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
font-size: 10px;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: #f1f3f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
|
|
|
@ -10,16 +10,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
width: 185px;
|
width: 175px;
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
background: #f1f3f4;
|
background: #f1f3f4;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
height: 27px;
|
height: 20px;
|
||||||
outline-color: #003cb0;
|
outline-color: #003cb0;
|
||||||
color: #565252;
|
color: inherit;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
/* border: none; */
|
|
||||||
border: 1px solid #dadada;
|
border: 1px solid #dadada;
|
||||||
|
font-weight: 550;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount, createEventDispatcher } from "svelte";
|
import { onMount, createEventDispatcher } from "svelte";
|
||||||
|
import CheckedBackground from "./CheckedBackground.svelte"
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
@ -40,7 +41,7 @@
|
||||||
.palette {
|
.palette {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 175px;
|
height: 140px;
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
@ -55,6 +56,8 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<CheckedBackground width="100%">
|
||||||
<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
|
<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
|
||||||
<div class="picker" style={pickerStyle} />
|
<div class="picker" style={pickerStyle} />
|
||||||
</div>
|
</div>
|
||||||
|
</CheckedBackground>
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
width: 185px;
|
width: 150px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin: 10px 0px;
|
margin: 10px 0px;
|
||||||
border: 1px solid #e8e8ef;
|
border: 1px solid #e8e8ef;
|
||||||
|
|
Loading…
Reference in a new issue