CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-02 13:01:09 +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) { function removeSwatch(idx) {
let removedSwatch = swatches.splice(idx, 1); let [removedSwatch] = swatches.splice(idx, 1);
swatches = swatches; swatches = swatches;
dispatch("removeswatch", removedSwatch); dispatch("removeswatch", removedSwatch);
if (swatchesSetFromLocalStore) { if (swatchesSetFromLocalStore) {

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

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

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

@ -1,39 +1,15 @@
<script> <script>
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition" import { fade } from "svelte/transition";
import CheckedBackground from "./CheckedBackground.svelte" import CheckedBackground from "./CheckedBackground.svelte";
import { keyevents } from "../actions" import { keyevents } from "../actions";
export let hovered = false export let hovered = false;
export let color = "#fff" export let color = "#fff";
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher();
</script> </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> <style>
.swatch { .swatch {
position: relative; position: relative;
@ -50,18 +26,43 @@
padding: 3px 5px; padding: 3px 5px;
} }
.remove-icon { span {
cursor: pointer;
position: absolute; position: absolute;
right: 0;
top: -5px; top: -5px;
right: -4px; right: -4px;
width: 10px; background: #800000;
height: 10px; color: white;
font-size: 12px;
border-radius: 50%; border-radius: 50%;
background-color: #800000; text-align: center;
color: #fff; width: 13px;
display: flex; height: 13px;
justify-content: center; }
align-items: center;
span:after {
content: "\00d7";
position: relative;
left: 0;
bottom: 3px;
} }
</style> </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>