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

Merge pull request #366 from Budibase/property-panel/colorpicker 

UI Updates for Colorpicker Component
This commit is contained in:
Conor_Mack 2020-06-18 16:17:35 +01:00 committed by GitHub
parent b5cb6a2aea ad0840545e
commit 1f719cba9d
8 changed files with 79 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
View File

@ -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>

23
packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte Normal file
View File

@ -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>

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

@ -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">
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} /> <div class="palette-panel">
<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)} />
<Slider
type="alpha" <CheckedBackground borderRadius="10px" backgroundSize="7px">
value={a} <Slider
on:change={alpha => setAlpha(alpha.detail)} /> type="alpha"
value={a}
on:change={alpha => setAlpha(alpha.detail)} />
</CheckedBackground>
</div> </div>
</div> </div>

11
packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
View File

@ -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,9 +115,8 @@
} }
.color-preview { .color-preview {
flex: 1;
border-radius: 3px; border-radius: 3px;
border: 1px solid #dedada; border: 1px solid #dedada;
} }
.preview-error { .preview-error {

9
packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
View File

@ -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
packages/builder/src/components/userInterface/Colorpicker/Input.svelte
View File

@ -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>

11
packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
View File

@ -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>
<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}> <CheckedBackground width="100%">
<div class="picker" style={pickerStyle} /> <div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
</div> <div class="picker" style={pickerStyle} />
</div>
</CheckedBackground>

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

@ -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;