CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-30 20:10:54 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #419 from Budibase/colorpicker/bugfixes

Browse source 
Minor bug fixes
This commit is contained in:
Conor_Mack 2020-07-03 16:22:41 +01:00 committed by GitHub
parent db56390251 787a49ee48
commit 647b33b167
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
View file

@ -154,7 +154,7 @@
}
function removeSwatch(idx) {
let removedSwatch = swatches.splice(idx, 1);
let [removedSwatch] = swatches.splice(idx, 1);
swatches = swatches;
dispatch("removeswatch", removedSwatch);
if (swatchesSetFromLocalStore) {

2
packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
View file

@ -114,8 +114,6 @@
cursor: pointer;
border-radius: 3px;
border: 1px solid #dedada;
position: absolute;
left: 110px;
}
.preview-error {

81
packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte
View file

@ -1,39 +1,15 @@
<script>
import { createEventDispatcher } from "svelte"
import { fade } from "svelte/transition"
import CheckedBackground from "./CheckedBackground.svelte"
import { keyevents } from "../actions"
import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
import CheckedBackground from "./CheckedBackground.svelte";
import { keyevents } from "../actions";
export let hovered = false
export let color = "#fff"
export let hovered = false;
export let color = "#fff";
const dispatch = createEventDispatcher()
const dispatch = createEventDispatcher();
</script>
<div class="space">
<CheckedBackground borderRadius="6px">
<div
tabindex="0"
use:keyevents={{ Enter: () => dispatch('click') }}
in:fade
title={color}
class="swatch"
style={`background: ${color};`}
on:click|self
on:mouseover={() => (hovered = true)}
on:mouseleave={() => (hovered = false)}>
{#if hovered}
<div
in:fade
class="remove-icon"
on:click|self={() => dispatch('removeswatch')}>
<span on:click|self={() => dispatch('removeswatch')}>&times;</span>
</div>
{/if}
</div>
</CheckedBackground>
</div>
<style>
.swatch {
position: relative;
@ -50,18 +26,43 @@
padding: 3px 5px;
}
.remove-icon {
span {
cursor: pointer;
position: absolute;
right: 0;
top: -5px;
right: -4px;
width: 10px;
height: 10px;
background: #800000;
color: white;
font-size: 12px;
border-radius: 50%;
background-color: #800000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 13px;
height: 13px;
}
span:after {
content: "\00d7";
position: relative;
left: 0;
bottom: 3px;
}
</style>
<div class="space">
<CheckedBackground borderRadius="6px">
<div
tabindex="0"
use:keyevents={{ Enter: () => dispatch('click') }}
in:fade
title={color}
class="swatch"
style={`background: ${color};`}
on:mouseover={() => (hovered = true)}
on:mouseleave={() => (hovered = false)}
on:click|self>
{#if hovered}
<span in:fade on:click={() => dispatch('removeswatch')} />
{/if}
</div>
</CheckedBackground>
</div>