formatting and linting
This commit is contained in:
Joe
parent
027d81be29
commit
5b4132a8e6
16 changed files with 420 additions and 361 deletions
|
|
@ -1,12 +1,21 @@
|
|||
<script>
|
||||
import FlatButton from "./FlatButton.svelte";
|
||||
import FlatButton from "./FlatButton.svelte"
|
||||
|
||||
export let format = "hex";
|
||||
export let onclick = format => {};
|
||||
export let format = "hex"
|
||||
export let onclick = format => {}
|
||||
|
||||
let colorFormats = ["hex", "rgb", "hsl"];
|
||||
let colorFormats = ["hex", "rgb", "hsl"]
|
||||
</script>
|
||||
|
||||
<div class="flatbutton-group">
|
||||
{#each colorFormats as text}
|
||||
<FlatButton
|
||||
selected={format === text}
|
||||
{text}
|
||||
on:click={() => onclick(text)} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.flatbutton-group {
|
||||
font-weight: 500;
|
||||
|
|
@ -18,12 +27,3 @@
|
|||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="flatbutton-group">
|
||||
{#each colorFormats as text}
|
||||
<FlatButton
|
||||
selected={format === text}
|
||||
{text}
|
||||
on:click={() => onclick(text)} />
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
<script>
|
||||
import {buildStyle} from "./helpers.js"
|
||||
import { buildStyle } from "./helpers.js"
|
||||
|
||||
export let backgroundSize = "10px"
|
||||
export let borderRadius = ""
|
||||
export let height = ""
|
||||
export let width = ""
|
||||
|
||||
$: style = buildStyle({backgroundSize, borderRadius, height, width})
|
||||
export let backgroundSize = "10px"
|
||||
export let borderRadius = ""
|
||||
export let height = ""
|
||||
export let width = ""
|
||||
|
||||
$: style = buildStyle({ backgroundSize, borderRadius, height, width })
|
||||
</script>
|
||||
|
||||
<div {style}>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<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>');
|
||||
|
|
@ -17,7 +20,3 @@
|
|||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div {style}>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -1,82 +1,116 @@
|
|||
<script>
|
||||
import { onMount, createEventDispatcher } from "svelte";
|
||||
import { onMount, createEventDispatcher } from "svelte"
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
import {buildStyle} from "./helpers.js"
|
||||
import { buildStyle } from "./helpers.js"
|
||||
import {
|
||||
getColorFormat,
|
||||
convertToHSVA,
|
||||
convertHsvaToFormat
|
||||
} from "./utils.js";
|
||||
import Slider from "./Slider.svelte";
|
||||
import Palette from "./Palette.svelte";
|
||||
import ButtonGroup from "./ButtonGroup.svelte";
|
||||
import Input from "./Input.svelte";
|
||||
convertHsvaToFormat,
|
||||
} from "./utils.js"
|
||||
import Slider from "./Slider.svelte"
|
||||
import Palette from "./Palette.svelte"
|
||||
import ButtonGroup from "./ButtonGroup.svelte"
|
||||
import Input from "./Input.svelte"
|
||||
|
||||
export let value = "#3ec1d3ff";
|
||||
export let format = "hexa";
|
||||
export let value = "#3ec1d3ff"
|
||||
export let format = "hexa"
|
||||
|
||||
let h = null;
|
||||
let s = null;
|
||||
let v = null;
|
||||
let a = null;
|
||||
let h = null
|
||||
let s = null
|
||||
let v = null
|
||||
let a = null
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
onMount(() => {
|
||||
if (format) {
|
||||
convertAndSetHSVA()
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
function convertAndSetHSVA() {
|
||||
let hsva = convertToHSVA(value, format);
|
||||
setHSVA(hsva);
|
||||
let hsva = convertToHSVA(value, format)
|
||||
setHSVA(hsva)
|
||||
}
|
||||
|
||||
function setHSVA([hue, sat, val, alpha]) {
|
||||
h = hue;
|
||||
s = sat;
|
||||
v = val;
|
||||
a = alpha;
|
||||
h = hue
|
||||
s = sat
|
||||
v = val
|
||||
a = alpha
|
||||
}
|
||||
|
||||
//fired by choosing a color from the palette
|
||||
function setSaturationAndValue({ detail }) {
|
||||
s = detail.s;
|
||||
v = detail.v;
|
||||
value = convertHsvaToFormat([h, s, v, a], format);
|
||||
s = detail.s
|
||||
v = detail.v
|
||||
value = convertHsvaToFormat([h, s, v, a], format)
|
||||
dispatch("change", value)
|
||||
}
|
||||
|
||||
function setHue(hue) {
|
||||
h = hue;
|
||||
value = convertHsvaToFormat([h, s, v, a], format);
|
||||
h = hue
|
||||
value = convertHsvaToFormat([h, s, v, a], format)
|
||||
}
|
||||
|
||||
function setAlpha(alpha) {
|
||||
a = alpha === "1.00" ? "1" :alpha;
|
||||
value = convertHsvaToFormat([h, s, v, a], format);
|
||||
a = alpha === "1.00" ? "1" : alpha
|
||||
value = convertHsvaToFormat([h, s, v, a], format)
|
||||
}
|
||||
|
||||
function changeFormatAndConvert(f) {
|
||||
format = f;
|
||||
value = convertHsvaToFormat([h, s, v, a], format);
|
||||
format = f
|
||||
value = convertHsvaToFormat([h, s, v, a], format)
|
||||
}
|
||||
|
||||
function handleColorInput(text) {
|
||||
let f = getColorFormat(text)
|
||||
if(f) {
|
||||
format = f;
|
||||
if (f) {
|
||||
format = f
|
||||
value = text
|
||||
convertAndSetHSVA()
|
||||
dispatch("change", value)
|
||||
}
|
||||
}
|
||||
|
||||
$: border = s < 10 ? "1px dashed #dedada" : ""
|
||||
$: style = buildStyle({background: value, border})
|
||||
$: border = s < 10 ? "1px dashed #dedada" : ""
|
||||
$: style = buildStyle({ background: value, border })
|
||||
</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>
|
||||
|
||||
<style>
|
||||
.colorpicker-container {
|
||||
display: flex;
|
||||
|
|
@ -87,7 +121,8 @@
|
|||
width: 220px;
|
||||
background: #ffffff;
|
||||
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, 0.1),
|
||||
0 0 1em 0 rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.palette-panel {
|
||||
|
|
@ -124,37 +159,3 @@
|
|||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,146 +1,173 @@
|
|||
<script>
|
||||
import Colorpicker from "./Colorpicker.svelte"
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
|
||||
import {buildStyle} from "./helpers.js"
|
||||
import { fade } from 'svelte/transition';
|
||||
import {getColorFormat} from "./utils.js"
|
||||
import Colorpicker from "./Colorpicker.svelte"
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
import { createEventDispatcher, afterUpdate, beforeUpdate } from "svelte"
|
||||
import { buildStyle } from "./helpers.js"
|
||||
import { fade } from "svelte/transition"
|
||||
import { getColorFormat } from "./utils.js"
|
||||
|
||||
export let value = "#3ec1d3ff"
|
||||
export let open = false;
|
||||
export let width = "25px"
|
||||
export let height = "25px"
|
||||
export let value = "#3ec1d3ff"
|
||||
export let open = false
|
||||
export let width = "25px"
|
||||
export let height = "25px"
|
||||
|
||||
let format = "hexa";
|
||||
let dimensions = {top: 0, left: 0}
|
||||
let colorPreview = null
|
||||
let format = "hexa"
|
||||
let dimensions = { top: 0, left: 0 }
|
||||
let colorPreview = null
|
||||
|
||||
let previewHeight = null
|
||||
let previewWidth = null
|
||||
let pickerWidth = 250
|
||||
let pickerHeight = 300
|
||||
let previewHeight = null
|
||||
let previewWidth = null
|
||||
let pickerWidth = 250
|
||||
let pickerHeight = 300
|
||||
|
||||
let anchorEl = null
|
||||
let parentNodes = [];
|
||||
let errorMsg = null
|
||||
let anchorEl = null
|
||||
let parentNodes = []
|
||||
let errorMsg = null
|
||||
|
||||
$: previewStyle = buildStyle({width, height, background: value})
|
||||
$: errorPreviewStyle = buildStyle({width, height})
|
||||
$: pickerStyle = buildStyle({top: `${dimensions.top}px`, left: `${dimensions.left}px`})
|
||||
$: previewStyle = buildStyle({ width, height, background: value })
|
||||
$: errorPreviewStyle = buildStyle({ width, height })
|
||||
$: pickerStyle = buildStyle({
|
||||
top: `${dimensions.top}px`,
|
||||
left: `${dimensions.left}px`,
|
||||
})
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
beforeUpdate(() => {
|
||||
format = getColorFormat(value)
|
||||
if(!format) {
|
||||
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
|
||||
console.error(errorMsg)
|
||||
}else{
|
||||
errorMsg = null
|
||||
}
|
||||
})
|
||||
|
||||
afterUpdate(() => {
|
||||
if(colorPreview && colorPreview.offsetParent && !anchorEl) {
|
||||
//Anchor relative to closest positioned ancestor element. If none, then anchor to body
|
||||
anchorEl = colorPreview.offsetParent
|
||||
let curEl = colorPreview
|
||||
let els = []
|
||||
//Travel up dom tree from preview element to find parent elements that scroll
|
||||
while(!anchorEl.isSameNode(curEl)) {
|
||||
curEl = curEl.parentNode
|
||||
let elOverflow = window.getComputedStyle(curEl).getPropertyValue("overflow")
|
||||
if(/scroll|auto/.test(elOverflow)) {
|
||||
els.push(curEl)
|
||||
}
|
||||
}
|
||||
parentNodes = els
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function openColorpicker(event) {
|
||||
if(colorPreview) {
|
||||
const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()
|
||||
const {innerHeight, innerWidth} = window
|
||||
|
||||
const {offsetLeft, offsetTop} = colorPreview
|
||||
//get the scrollTop value for all scrollable parent elements
|
||||
let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
|
||||
|
||||
const spaceBelow = (innerHeight - spaceAbove) - previewHeight
|
||||
const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop
|
||||
|
||||
//TOO: Testing and Scroll Awareness for x Scroll
|
||||
const spaceRight = (innerWidth - spaceLeft) + previewWidth
|
||||
const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
|
||||
|
||||
dimensions = {top, left}
|
||||
|
||||
open = true;
|
||||
}
|
||||
beforeUpdate(() => {
|
||||
format = getColorFormat(value)
|
||||
if (!format) {
|
||||
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
|
||||
console.error(errorMsg)
|
||||
} else {
|
||||
errorMsg = null
|
||||
}
|
||||
})
|
||||
|
||||
function onColorChange(color) {
|
||||
value = color.detail;
|
||||
dispatch("change", color.detail)
|
||||
afterUpdate(() => {
|
||||
if (colorPreview && colorPreview.offsetParent && !anchorEl) {
|
||||
//Anchor relative to closest positioned ancestor element. If none, then anchor to body
|
||||
anchorEl = colorPreview.offsetParent
|
||||
let curEl = colorPreview
|
||||
let els = []
|
||||
//Travel up dom tree from preview element to find parent elements that scroll
|
||||
while (!anchorEl.isSameNode(curEl)) {
|
||||
curEl = curEl.parentNode
|
||||
let elOverflow = window
|
||||
.getComputedStyle(curEl)
|
||||
.getPropertyValue("overflow")
|
||||
if (/scroll|auto/.test(elOverflow)) {
|
||||
els.push(curEl)
|
||||
}
|
||||
}
|
||||
parentNodes = els
|
||||
}
|
||||
})
|
||||
|
||||
function openColorpicker(event) {
|
||||
if (colorPreview) {
|
||||
const {
|
||||
top: spaceAbove,
|
||||
width,
|
||||
bottom,
|
||||
right,
|
||||
left: spaceLeft,
|
||||
} = colorPreview.getBoundingClientRect()
|
||||
const { innerHeight, innerWidth } = window
|
||||
|
||||
const { offsetLeft, offsetTop } = colorPreview
|
||||
//get the scrollTop value for all scrollable parent elements
|
||||
let scrollTop = parentNodes.reduce(
|
||||
(scrollAcc, el) => (scrollAcc += el.scrollTop),
|
||||
0
|
||||
)
|
||||
|
||||
const spaceBelow = innerHeight - spaceAbove - previewHeight
|
||||
const top =
|
||||
spaceAbove > spaceBelow
|
||||
? offsetTop - pickerHeight - scrollTop
|
||||
: offsetTop + previewHeight - scrollTop
|
||||
|
||||
//TOO: Testing and Scroll Awareness for x Scroll
|
||||
const spaceRight = innerWidth - spaceLeft + previewWidth
|
||||
const left =
|
||||
spaceRight > spaceLeft
|
||||
? offsetLeft + previewWidth
|
||||
: offsetLeft - pickerWidth
|
||||
|
||||
dimensions = { top, left }
|
||||
|
||||
open = true
|
||||
}
|
||||
}
|
||||
|
||||
function onColorChange(color) {
|
||||
value = color.detail
|
||||
dispatch("change", color.detail)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="color-preview-container">
|
||||
{#if !errorMsg}
|
||||
<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 !errorMsg}
|
||||
<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}
|
||||
<div class="picker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth} style={pickerStyle}>
|
||||
<Colorpicker on:change={onColorChange} {format} {value} />
|
||||
</div>
|
||||
<div on:click|self={() => open = false} class="overlay"></div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="color-preview preview-error" style={errorPreviewStyle}>
|
||||
<span>×</span>
|
||||
</div>
|
||||
{#if open}
|
||||
<div
|
||||
class="picker-container"
|
||||
bind:clientHeight={pickerHeight}
|
||||
bind:clientWidth={pickerWidth}
|
||||
style={pickerStyle}>
|
||||
<Colorpicker on:change={onColorChange} {format} {value} />
|
||||
</div>
|
||||
<div on:click|self={() => (open = false)} class="overlay" />
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="color-preview preview-error" style={errorPreviewStyle}>
|
||||
<span>×</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.color-preview-container{
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
height: fit-content;
|
||||
}
|
||||
.color-preview-container {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.color-preview {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #dedada;
|
||||
}
|
||||
.color-preview {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #dedada;
|
||||
}
|
||||
|
||||
.preview-error {
|
||||
background: #cccccc;
|
||||
color: #808080;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.preview-error {
|
||||
background: #cccccc;
|
||||
color: #808080;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.picker-container {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
.picker-container {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.overlay{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<script>
|
||||
export let text = "";
|
||||
export let selected = false;
|
||||
export let text = ""
|
||||
export let selected = false
|
||||
</script>
|
||||
|
||||
<div class="flatbutton" class:selected on:click>{text}</div>
|
||||
|
||||
<style>
|
||||
.flatbutton {
|
||||
cursor: pointer;
|
||||
|
|
@ -25,5 +27,3 @@
|
|||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="flatbutton" class:selected on:click>{text}</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<script>
|
||||
export let value = "";
|
||||
export let value = ""
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<input on:input type="text" {value} maxlength="25" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
|
|
@ -22,7 +26,3 @@
|
|||
font-weight: 550;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<input on:input type="text" {value} maxlength="25" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,57 @@
|
|||
<script>
|
||||
import { onMount, createEventDispatcher } from "svelte";
|
||||
import { onMount, createEventDispatcher } from "svelte"
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let h = 0;
|
||||
export let s = 0;
|
||||
export let v = 0;
|
||||
export let a = 1;
|
||||
export let h = 0
|
||||
export let s = 0
|
||||
export let v = 0
|
||||
export let a = 1
|
||||
|
||||
let palette;
|
||||
|
||||
let paletteHeight, paletteWidth = 0;
|
||||
let palette
|
||||
|
||||
let paletteHeight,
|
||||
paletteWidth = 0
|
||||
|
||||
function handleClick(event) {
|
||||
const { left, top } = palette.getBoundingClientRect();
|
||||
let clickX = (event.clientX - left)
|
||||
let clickY = (event.clientY - top)
|
||||
if((clickX > 0 && clickY > 0) && (clickX < paletteWidth && clickY < paletteHeight)) {
|
||||
const { left, top } = palette.getBoundingClientRect()
|
||||
let clickX = event.clientX - left
|
||||
let clickY = event.clientY - top
|
||||
if (
|
||||
clickX > 0 &&
|
||||
clickY > 0 &&
|
||||
clickX < paletteWidth && clickY < paletteHeight
|
||||
) {
|
||||
let s = (clickX / paletteWidth) * 100
|
||||
let v = 100 - ((clickY / paletteHeight) * 100)
|
||||
dispatch("change", {s, v})
|
||||
let v = 100 - (clickY / paletteHeight) * 100
|
||||
dispatch("change", { s, v })
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$: pickerX = (s * paletteWidth) / 100;
|
||||
$: pickerY = paletteHeight * ((100 - v) / 100)
|
||||
$: pickerX = (s * paletteWidth) / 100
|
||||
$: pickerY = paletteHeight * ((100 - v) / 100)
|
||||
|
||||
$: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
|
||||
linear-gradient(to left, hsla(${h}, 100%, 50%, ${a}), rgba(255, 255, 255, ${a}))
|
||||
`;
|
||||
$: style = `background: ${paletteGradient};`;
|
||||
`
|
||||
$: style = `background: ${paletteGradient};`
|
||||
|
||||
$: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
|
||||
</script>
|
||||
|
||||
<CheckedBackground width="100%">
|
||||
<div
|
||||
bind:this={palette}
|
||||
bind:clientHeight={paletteHeight}
|
||||
bind:clientWidth={paletteWidth}
|
||||
on:click={handleClick}
|
||||
class="palette"
|
||||
{style}>
|
||||
<div class="picker" style={pickerStyle} />
|
||||
</div>
|
||||
</CheckedBackground>
|
||||
|
||||
<style>
|
||||
.palette {
|
||||
position: relative;
|
||||
|
|
@ -55,9 +70,3 @@
|
|||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<CheckedBackground width="100%">
|
||||
<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
|
||||
<div class="picker" style={pickerStyle} />
|
||||
</div>
|
||||
</CheckedBackground>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,47 @@
|
|||
<script>
|
||||
import { onMount, createEventDispatcher } from "svelte";
|
||||
import dragable from "./drag.js";
|
||||
import { onMount, createEventDispatcher } from "svelte"
|
||||
import dragable from "./drag.js"
|
||||
|
||||
export let value = 1;
|
||||
export let type = "hue";
|
||||
export let value = 1
|
||||
export let type = "hue"
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let slider;
|
||||
let sliderWidth = 0;
|
||||
let slider
|
||||
let sliderWidth = 0
|
||||
|
||||
function handleClick(mouseX) {
|
||||
const { left, width } = slider.getBoundingClientRect();
|
||||
let clickPosition = mouseX - left;
|
||||
const { left, width } = slider.getBoundingClientRect()
|
||||
let clickPosition = mouseX - left
|
||||
|
||||
let percentageClick = (clickPosition / sliderWidth).toFixed(2)
|
||||
|
||||
|
||||
if (percentageClick >= 0 && percentageClick <= 1) {
|
||||
let value =
|
||||
type === "hue"
|
||||
? 360 * percentageClick
|
||||
: percentageClick;
|
||||
dispatch("change", value);
|
||||
let value = type === "hue" ? 360 * percentageClick : percentageClick
|
||||
dispatch("change", value)
|
||||
}
|
||||
}
|
||||
|
||||
$: thumbPosition =
|
||||
type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value;
|
||||
type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
|
||||
|
||||
$: style = `transform: translateX(${thumbPosition - 6}px);`;
|
||||
$: 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>
|
||||
|
||||
<style>
|
||||
.color-format-slider {
|
||||
position: relative;
|
||||
|
|
@ -68,20 +79,6 @@
|
|||
border: 1px solid #777676;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor:grab;
|
||||
cursor: grab;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -30,26 +30,26 @@
|
|||
<FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
|
||||
</div>
|
||||
|
||||
<div class="positioned-wrapper">
|
||||
<div class="design-view-property-groups">
|
||||
{#if propertyGroupNames.length > 0}
|
||||
{#each propertyGroupNames as groupName}
|
||||
<PropertyGroup
|
||||
name={groupName}
|
||||
properties={getProperties(groupName)}
|
||||
styleCategory={selectedCategory}
|
||||
{onStyleChanged}
|
||||
{componentDefinition}
|
||||
{componentInstance} />
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="no-design">
|
||||
<span>This component does not have any design properties</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="positioned-wrapper">
|
||||
<div class="design-view-property-groups">
|
||||
{#if propertyGroupNames.length > 0}
|
||||
{#each propertyGroupNames as groupName}
|
||||
<PropertyGroup
|
||||
name={groupName}
|
||||
properties={getProperties(groupName)}
|
||||
styleCategory={selectedCategory}
|
||||
{onStyleChanged}
|
||||
{componentDefinition}
|
||||
{componentInstance} />
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="no-design">
|
||||
<span>This component does not have any design properties</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.design-view-container {
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
.positioned-wrapper{
|
||||
.positioned-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
|
|
|
|||
|
|
@ -9,10 +9,7 @@
|
|||
$: useIcon = !!icon
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flatbutton"
|
||||
class:selected
|
||||
on:click={() => onClick(value || text)}>
|
||||
<div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
|
||||
{#if useIcon}
|
||||
<i class={icon} />
|
||||
{:else}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
<style>
|
||||
.flatbutton-group {
|
||||
display: flex;
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
|
|
|
|||
|
|
@ -14,9 +14,7 @@
|
|||
|
||||
<PagesList />
|
||||
|
||||
<button class="newscreen" on:click={newScreen}>
|
||||
Create New Screen
|
||||
</button>
|
||||
<button class="newscreen" on:click={newScreen}>Create New Screen</button>
|
||||
|
||||
<PageLayout layout={$store.pages[$store.currentPageName]} />
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
if (v.target) {
|
||||
let val = props.valueKey ? v.target[props.valueKey] : v.target.value
|
||||
onChange(key, val)
|
||||
}else if(v.detail) {
|
||||
} else if (v.detail) {
|
||||
onChange(key, v.detail)
|
||||
} else {
|
||||
onChange(key, v)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import Input from "../common/Input.svelte"
|
||||
import OptionSelect from "./OptionSelect.svelte"
|
||||
import InputGroup from "../common/Inputs/InputGroup.svelte"
|
||||
import FlatButtonGroup from "./FlatButtonGroup.svelte"
|
||||
import Colorpicker from "./Colorpicker"
|
||||
/*
|
||||
|
|
@ -73,13 +72,6 @@ export const layout = [
|
|||
},
|
||||
]
|
||||
|
||||
const spacingMeta = [
|
||||
{ placeholder: "T" },
|
||||
{ placeholder: "R" },
|
||||
{ placeholder: "B" },
|
||||
{ placeholder: "L" },
|
||||
]
|
||||
|
||||
export const margin = [
|
||||
{
|
||||
label: "All sides",
|
||||
|
|
@ -378,7 +370,20 @@ export const typography = [
|
|||
label: "size",
|
||||
key: "font-size",
|
||||
control: OptionSelect,
|
||||
options: ["8px", "10px", "12px", "14px", "16px", "18px", "20px", "24px", "32px", "48px", "60px", "72px"],
|
||||
options: [
|
||||
"8px",
|
||||
"10px",
|
||||
"12px",
|
||||
"14px",
|
||||
"16px",
|
||||
"18px",
|
||||
"20px",
|
||||
"24px",
|
||||
"32px",
|
||||
"48px",
|
||||
"60px",
|
||||
"72px",
|
||||
],
|
||||
textAlign: "center",
|
||||
},
|
||||
{
|
||||
|
|
@ -444,17 +449,50 @@ export const background = [
|
|||
defaultValue: "None",
|
||||
options: [
|
||||
{ label: "None", value: "None" },
|
||||
{ label: "Warm Flame", value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);" },
|
||||
{ label: "Night Fade", value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);" },
|
||||
{ label: "Spring Warmth", value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);" },
|
||||
{ label: "Sunny Morning", value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);" },
|
||||
{ label: "Winter Neva", value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);" },
|
||||
{ label: "Tempting Azure", value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);" },
|
||||
{ label: "Heavy Rain", value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);" },
|
||||
{ label: "Deep Blue", value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);" },
|
||||
{ label: "Near Moon", value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);" },
|
||||
{ label: "Wild Apple", value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);" },
|
||||
{ label: "Plum Plate", value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);" },
|
||||
{
|
||||
label: "Warm Flame",
|
||||
value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
|
||||
},
|
||||
{
|
||||
label: "Night Fade",
|
||||
value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
|
||||
},
|
||||
{
|
||||
label: "Spring Warmth",
|
||||
value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);",
|
||||
},
|
||||
{
|
||||
label: "Sunny Morning",
|
||||
value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
|
||||
},
|
||||
{
|
||||
label: "Winter Neva",
|
||||
value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
|
||||
},
|
||||
{
|
||||
label: "Tempting Azure",
|
||||
value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
|
||||
},
|
||||
{
|
||||
label: "Heavy Rain",
|
||||
value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);",
|
||||
},
|
||||
{
|
||||
label: "Deep Blue",
|
||||
value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
|
||||
},
|
||||
{
|
||||
label: "Near Moon",
|
||||
value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);",
|
||||
},
|
||||
{
|
||||
label: "Wild Apple",
|
||||
value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);",
|
||||
},
|
||||
{
|
||||
label: "Plum Plate",
|
||||
value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -528,14 +566,7 @@ export const effects = [
|
|||
key: "opacity",
|
||||
control: OptionSelect,
|
||||
textAlign: "center",
|
||||
options: [
|
||||
"0",
|
||||
"0.2",
|
||||
"0.4",
|
||||
"0.6",
|
||||
"0.8",
|
||||
"1",
|
||||
],
|
||||
options: ["0", "0.2", "0.4", "0.6", "0.8", "1"],
|
||||
},
|
||||
{
|
||||
label: "Rotate",
|
||||
|
|
@ -544,16 +575,16 @@ export const effects = [
|
|||
defaultValue: "0",
|
||||
options: [
|
||||
{ label: "None", value: "0" },
|
||||
{ label: "45 deg", value:"rotate(45deg)" },
|
||||
{ label: "90 deg", value:"rotate(90deg)" },
|
||||
{ label: "135 deg", value:"rotate(135deg)" },
|
||||
{ label: "180 deg", value:"rotate(180deg)" },
|
||||
{ label: "225 deg", value:"rotate(225deg)" },
|
||||
{ label: "270 deg", value:"rotate(270deg)" },
|
||||
{ label: "315 deg", value:"rotate(315deg)" },
|
||||
{ label: "360 deg", value:"rotate(360deg)" },
|
||||
{ label: "45 deg", value: "rotate(45deg)" },
|
||||
{ label: "90 deg", value: "rotate(90deg)" },
|
||||
{ label: "135 deg", value: "rotate(135deg)" },
|
||||
{ label: "180 deg", value: "rotate(180deg)" },
|
||||
{ label: "225 deg", value: "rotate(225deg)" },
|
||||
{ label: "270 deg", value: "rotate(270deg)" },
|
||||
{ label: "315 deg", value: "rotate(315deg)" },
|
||||
{ label: "360 deg", value: "rotate(360deg)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Shadow",
|
||||
key: "box-shadow",
|
||||
|
|
@ -613,7 +644,7 @@ export const transitions = [
|
|||
control: OptionSelect,
|
||||
textAlign: "center",
|
||||
placeholder: "sec",
|
||||
options: ["0.2ms", "0.4ms", "0.8ms", "1s", "2s", "4s",],
|
||||
options: ["0.2ms", "0.4ms", "0.8ms", "1s", "2s", "4s"],
|
||||
},
|
||||
{
|
||||
label: "Ease",
|
||||
|
|
|
|||
|
|
@ -43,9 +43,7 @@
|
|||
{#if $backendUiStore.selectedDatabase._id && $backendUiStore.selectedModel.name}
|
||||
<ModelDataTable {selectRecord} />
|
||||
{:else}
|
||||
<i style="color: var(--grey-4)">
|
||||
create your first model to start building
|
||||
</i>
|
||||
<i style="color: var(--grey-4)">create your first model to start building</i>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="root">
|
||||
<div class="content">
|
||||
|
|
@ -84,22 +85,23 @@
|
|||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="incorrect-details-panel">Incorrect username or password</div>
|
||||
<div class="incorrect-details-panel">
|
||||
Incorrect username or password
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
.root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in a new issue