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

Merge pull request #393 from Budibase/colorpicker/fixing-broken-colorpicker 

Fixing Colorpicker Duplication Issues
This commit is contained in:
Conor_Mack 2020-06-26 12:03:09 +01:00 committed by GitHub
parent 5b7e310ff6 1c1dfb1dfe
commit 5f78d599fc
3 changed files with 0 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
View File

@ -149,39 +149,6 @@
$: shrink = swatches.length > 0
</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
class="colorpicker-container"
bind:clientHeight={pickerHeight}

3
packages/builder/src/components/userInterface/Colorpicker/Input.svelte
View File

@ -2,9 +2,6 @@
export let value = ""
</script>
<div>
<input on:input type="text" {value} maxlength="25" />
</div>
<div>
<input on:input on:change type="text" {value} maxlength="25" />
</div>

13
packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
View File

@ -29,19 +29,6 @@
$: style = `transform: translateX(${thumbPosition - 6}px);`
</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
bind:this={slider}
bind:clientWidth={sliderWidth}