Merge pull request #393 from Budibase/colorpicker/fixing-broken-colorpicker
Fixing Colorpicker Duplication Issues
This commit is contained in:
commit
f6713053e8
|
@ -149,39 +149,6 @@
|
||||||
$: shrink = swatches.length > 0
|
$: shrink = swatches.length > 0
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="colorpicker-container">
|
|
||||||
|
|
||||||
<div class="palette-panel">
|
|
||||||
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="control-panel">
|
|
||||||
<div class="alpha-hue-panel">
|
|
||||||
<div>
|
|
||||||
<CheckedBackground borderRadius="50%" backgroundSize="8px">
|
|
||||||
<div class="selected-color" {style} />
|
|
||||||
</CheckedBackground>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
|
|
||||||
|
|
||||||
<CheckedBackground borderRadius="10px" backgroundSize="7px">
|
|
||||||
<Slider
|
|
||||||
type="alpha"
|
|
||||||
value={a}
|
|
||||||
on:change={alpha => setAlpha(alpha.detail)} />
|
|
||||||
</CheckedBackground>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="format-input-panel">
|
|
||||||
<ButtonGroup {format} onclick={changeFormatAndConvert} />
|
|
||||||
<Input {value} on:input={event => handleColorInput(event.target.value)} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
class="colorpicker-container"
|
class="colorpicker-container"
|
||||||
bind:clientHeight={pickerHeight}
|
bind:clientHeight={pickerHeight}
|
||||||
|
|
|
@ -2,9 +2,6 @@
|
||||||
export let value = ""
|
export let value = ""
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>
|
|
||||||
<input on:input type="text" {value} maxlength="25" />
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<input on:input on:change type="text" {value} maxlength="25" />
|
<input on:input on:change type="text" {value} maxlength="25" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -29,19 +29,6 @@
|
||||||
$: style = `transform: translateX(${thumbPosition - 6}px);`
|
$: style = `transform: translateX(${thumbPosition - 6}px);`
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
|
||||||
bind:this={slider}
|
|
||||||
bind:clientWidth={sliderWidth}
|
|
||||||
on:click={event => handleClick(event.clientX)}
|
|
||||||
class="color-format-slider"
|
|
||||||
class:hue={type === 'hue'}
|
|
||||||
class:alpha={type === 'alpha'}>
|
|
||||||
<div
|
|
||||||
use:dragable
|
|
||||||
on:drag={e => handleClick(e.detail)}
|
|
||||||
class="slider-thumb"
|
|
||||||
{style} />
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
bind:this={slider}
|
bind:this={slider}
|
||||||
bind:clientWidth={sliderWidth}
|
bind:clientWidth={sliderWidth}
|
||||||
|
|
Loading…
Reference in New Issue