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

formatting and linting

This commit is contained in:
Joe 2020-06-24 15:41:33 +01:00
parent 027d81be29
commit 5b4132a8e6
16 changed files with 420 additions and 361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,21 @@
<script> <script>
import FlatButton from "./FlatButton.svelte"; import FlatButton from "./FlatButton.svelte"
export let format = "hex"; export let format = "hex"
export let onclick = format => {}; export let onclick = format => {}
let colorFormats = ["hex", "rgb", "hsl"]; let colorFormats = ["hex", "rgb", "hsl"]
</script> </script>
<div class="flatbutton-group">
{#each colorFormats as text}
<FlatButton
selected={format === text}
{text}
on:click={() => onclick(text)} />
{/each}
</div>
<style> <style>
.flatbutton-group { .flatbutton-group {
font-weight: 500; font-weight: 500;
@ -18,12 +27,3 @@
align-self: center; align-self: center;
} }
</style> </style>
<div class="flatbutton-group">
{#each colorFormats as text}
<FlatButton
selected={format === text}
{text}
on:click={() => onclick(text)} />
{/each}
</div>

21
packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
View File

@ -1,15 +1,18 @@
<script> <script>
import {buildStyle} from "./helpers.js" import { buildStyle } from "./helpers.js"
export let backgroundSize = "10px" export let backgroundSize = "10px"
export let borderRadius = "" export let borderRadius = ""
export let height = "" export let height = ""
export let width = "" export let width = ""
$: style = buildStyle({backgroundSize, borderRadius, height, width})
$: style = buildStyle({ backgroundSize, borderRadius, height, width })
</script> </script>
<div {style}>
<slot />
</div>
<style> <style>
div { 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>'); 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; width: fit-content;
} }
</style> </style>
<div {style}>
<slot />
</div>

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

@ -1,82 +1,116 @@
<script> <script>
import { onMount, createEventDispatcher } from "svelte"; import { onMount, createEventDispatcher } from "svelte"
import CheckedBackground from "./CheckedBackground.svelte" import CheckedBackground from "./CheckedBackground.svelte"
import {buildStyle} from "./helpers.js" import { buildStyle } from "./helpers.js"
import { import {
getColorFormat, getColorFormat,
convertToHSVA, convertToHSVA,
convertHsvaToFormat convertHsvaToFormat,
} from "./utils.js"; } from "./utils.js"
import Slider from "./Slider.svelte"; import Slider from "./Slider.svelte"
import Palette from "./Palette.svelte"; import Palette from "./Palette.svelte"
import ButtonGroup from "./ButtonGroup.svelte"; import ButtonGroup from "./ButtonGroup.svelte"
import Input from "./Input.svelte"; import Input from "./Input.svelte"
export let value = "#3ec1d3ff"; export let value = "#3ec1d3ff"
export let format = "hexa"; export let format = "hexa"
let h = null; let h = null
let s = null; let s = null
let v = null; let v = null
let a = null; let a = null
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher()
onMount(() => { onMount(() => {
if (format) { if (format) {
convertAndSetHSVA() convertAndSetHSVA()
} }
}); })
function convertAndSetHSVA() { function convertAndSetHSVA() {
let hsva = convertToHSVA(value, format); let hsva = convertToHSVA(value, format)
setHSVA(hsva); setHSVA(hsva)
} }
function setHSVA([hue, sat, val, alpha]) { function setHSVA([hue, sat, val, alpha]) {
h = hue; h = hue
s = sat; s = sat
v = val; v = val
a = alpha; a = alpha
} }
//fired by choosing a color from the palette //fired by choosing a color from the palette
function setSaturationAndValue({ detail }) { function setSaturationAndValue({ detail }) {
s = detail.s; s = detail.s
v = detail.v; v = detail.v
value = convertHsvaToFormat([h, s, v, a], format); value = convertHsvaToFormat([h, s, v, a], format)
dispatch("change", value) dispatch("change", value)
} }
function setHue(hue) { function setHue(hue) {
h = hue; h = hue
value = convertHsvaToFormat([h, s, v, a], format); value = convertHsvaToFormat([h, s, v, a], format)
} }
function setAlpha(alpha) { function setAlpha(alpha) {
a = alpha === "1.00" ? "1" :alpha; a = alpha === "1.00" ? "1" : alpha
value = convertHsvaToFormat([h, s, v, a], format); value = convertHsvaToFormat([h, s, v, a], format)
} }
function changeFormatAndConvert(f) { function changeFormatAndConvert(f) {
format = f; format = f
value = convertHsvaToFormat([h, s, v, a], format); value = convertHsvaToFormat([h, s, v, a], format)
} }
function handleColorInput(text) { function handleColorInput(text) {
let f = getColorFormat(text) let f = getColorFormat(text)
if(f) { if (f) {
format = f; format = f
value = text value = text
convertAndSetHSVA() convertAndSetHSVA()
dispatch("change", value) dispatch("change", value)
} }
} }
$: border = s < 10 ? "1px dashed #dedada" : "" $: border = s < 10 ? "1px dashed #dedada" : ""
$: style = buildStyle({background: value, border}) $: style = buildStyle({ background: value, border })
</script> </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> <style>
.colorpicker-container { .colorpicker-container {
display: flex; display: flex;
@ -87,7 +121,8 @@
width: 220px; 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, 0.1),
0 0 1em 0 rgba(0, 0, 0, 0.03);
} }
.palette-panel { .palette-panel {
@ -124,37 +159,3 @@
justify-content: center; justify-content: center;
} }
</style> </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>

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

@ -1,146 +1,173 @@
<script> <script>
import Colorpicker from "./Colorpicker.svelte" import Colorpicker from "./Colorpicker.svelte"
import CheckedBackground from "./CheckedBackground.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"
import {getColorFormat} from "./utils.js" import { getColorFormat } from "./utils.js"
export let value = "#3ec1d3ff" export let value = "#3ec1d3ff"
export let open = false; export let open = false
export let width = "25px" export let width = "25px"
export let height = "25px" export let height = "25px"
let format = "hexa"; let format = "hexa"
let dimensions = {top: 0, left: 0} let dimensions = { top: 0, left: 0 }
let colorPreview = null let colorPreview = null
let previewHeight = null let previewHeight = null
let previewWidth = null let previewWidth = null
let pickerWidth = 250 let pickerWidth = 250
let pickerHeight = 300 let pickerHeight = 300
let anchorEl = null let anchorEl = null
let parentNodes = []; let parentNodes = []
let errorMsg = null let errorMsg = null
$: previewStyle = buildStyle({width, height, background: value}) $: previewStyle = buildStyle({ width, height, background: value })
$: errorPreviewStyle = buildStyle({width, height}) $: errorPreviewStyle = buildStyle({ width, height })
$: pickerStyle = buildStyle({top: `${dimensions.top}px`, left: `${dimensions.left}px`}) $: pickerStyle = buildStyle({
top: `${dimensions.top}px`,
left: `${dimensions.left}px`,
})
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
beforeUpdate(() => { beforeUpdate(() => {
format = getColorFormat(value) format = getColorFormat(value)
if(!format) { if (!format) {
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value` errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
console.error(errorMsg) console.error(errorMsg)
}else{ } else {
errorMsg = null 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;
}
} }
})
function onColorChange(color) { afterUpdate(() => {
value = color.detail; if (colorPreview && colorPreview.offsetParent && !anchorEl) {
dispatch("change", color.detail) //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> </script>
<div class="color-preview-container"> <div class="color-preview-container">
{#if !errorMsg} {#if !errorMsg}
<CheckedBackground borderRadius="3px" backgroundSize="8px"> <CheckedBackground borderRadius="3px" backgroundSize="8px">
<div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker} /> <div
</CheckedBackground> 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
<Colorpicker on:change={onColorChange} {format} {value} /> class="picker-container"
</div> bind:clientHeight={pickerHeight}
<div on:click|self={() => open = false} class="overlay"></div> bind:clientWidth={pickerWidth}
{/if} style={pickerStyle}>
{:else} <Colorpicker on:change={onColorChange} {format} {value} />
<div class="color-preview preview-error" style={errorPreviewStyle}> </div>
<span>&times;</span> <div on:click|self={() => (open = false)} class="overlay" />
</div>
{/if} {/if}
{:else}
<div class="color-preview preview-error" style={errorPreviewStyle}>
<span>&times;</span>
</div>
{/if}
</div> </div>
<style> <style>
.color-preview-container{ .color-preview-container {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
height: fit-content; height: fit-content;
} }
.color-preview { .color-preview {
border-radius: 3px; border-radius: 3px;
border: 1px solid #dedada; border: 1px solid #dedada;
} }
.preview-error { .preview-error {
background: #cccccc; background: #cccccc;
color: #808080; color: #808080;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
cursor: not-allowed; cursor: not-allowed;
} }
.picker-container { .picker-container {
position: absolute; position: absolute;
z-index: 3; z-index: 3;
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
} }
.overlay{ .overlay {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 2; z-index: 2;
} }
</style> </style>

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

@ -1,8 +1,10 @@
<script> <script>
export let text = ""; export let text = ""
export let selected = false; export let selected = false
</script> </script>
<div class="flatbutton" class:selected on:click>{text}</div>
<style> <style>
.flatbutton { .flatbutton {
cursor: pointer; cursor: pointer;
@ -25,5 +27,3 @@
border: none; border: none;
} }
</style> </style>
<div class="flatbutton" class:selected on:click>{text}</div>

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

@ -1,7 +1,11 @@
<script> <script>
export let value = ""; export let value = ""
</script> </script>
<div>
<input on:input type="text" {value} maxlength="25" />
</div>
<style> <style>
div { div {
display: flex; display: flex;
@ -22,7 +26,3 @@
font-weight: 550; font-weight: 550;
} }
</style> </style>
<div>
<input on:input type="text" {value} maxlength="25" />
</div>

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

@ -1,42 +1,57 @@
<script> <script>
import { onMount, createEventDispatcher } from "svelte"; import { onMount, createEventDispatcher } from "svelte"
import CheckedBackground from "./CheckedBackground.svelte" import CheckedBackground from "./CheckedBackground.svelte"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
export let h = 0; export let h = 0
export let s = 0; export let s = 0
export let v = 0; export let v = 0
export let a = 1; export let a = 1
let palette; let palette
let paletteHeight, paletteWidth = 0;
let paletteHeight,
paletteWidth = 0
function handleClick(event) { function handleClick(event) {
const { left, top } = palette.getBoundingClientRect(); const { left, top } = palette.getBoundingClientRect()
let clickX = (event.clientX - left) let clickX = event.clientX - left
let clickY = (event.clientY - top) let clickY = event.clientY - top
if((clickX > 0 && clickY > 0) && (clickX < paletteWidth && clickY < paletteHeight)) { if (
clickX > 0 &&
clickY > 0 &&
clickX < paletteWidth && clickY < paletteHeight
) {
let s = (clickX / paletteWidth) * 100 let s = (clickX / paletteWidth) * 100
let v = 100 - ((clickY / paletteHeight) * 100) let v = 100 - (clickY / paletteHeight) * 100
dispatch("change", {s, v}) dispatch("change", { s, v })
} }
} }
$: pickerX = (s * paletteWidth) / 100; $: pickerX = (s * paletteWidth) / 100
$: pickerY = paletteHeight * ((100 - v) / 100) $: pickerY = paletteHeight * ((100 - v) / 100)
$: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent), $: 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})) 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);` $: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
</script> </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> <style>
.palette { .palette {
position: relative; position: relative;
@ -55,9 +70,3 @@
border-radius: 50%; border-radius: 50%;
} }
</style> </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>

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

@ -1,36 +1,47 @@
<script> <script>
import { onMount, createEventDispatcher } from "svelte"; import { onMount, createEventDispatcher } from "svelte"
import dragable from "./drag.js"; import dragable from "./drag.js"
export let value = 1; export let value = 1
export let type = "hue"; export let type = "hue"
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher()
let slider; let slider
let sliderWidth = 0; let sliderWidth = 0
function handleClick(mouseX) { function handleClick(mouseX) {
const { left, width } = slider.getBoundingClientRect(); const { left, width } = slider.getBoundingClientRect()
let clickPosition = mouseX - left; let clickPosition = mouseX - left
let percentageClick = (clickPosition / sliderWidth).toFixed(2) let percentageClick = (clickPosition / sliderWidth).toFixed(2)
if (percentageClick >= 0 && percentageClick <= 1) { if (percentageClick >= 0 && percentageClick <= 1) {
let value = let value = type === "hue" ? 360 * percentageClick : percentageClick
type === "hue" dispatch("change", value)
? 360 * percentageClick
: percentageClick;
dispatch("change", value);
} }
} }
$: thumbPosition = $: 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> </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> <style>
.color-format-slider { .color-format-slider {
position: relative; position: relative;
@ -68,20 +79,6 @@
border: 1px solid #777676; border: 1px solid #777676;
border-radius: 50%; border-radius: 50%;
background-color: #ffffff; background-color: #ffffff;
cursor:grab; cursor: grab;
} }
</style> </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>

38
packages/builder/src/components/userInterface/DesignView.svelte
View File

@ -30,26 +30,26 @@
<FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} /> <FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
</div> </div>
<div class="positioned-wrapper"> <div class="positioned-wrapper">
<div class="design-view-property-groups"> <div class="design-view-property-groups">
{#if propertyGroupNames.length > 0} {#if propertyGroupNames.length > 0}
{#each propertyGroupNames as groupName} {#each propertyGroupNames as groupName}
<PropertyGroup <PropertyGroup
name={groupName} name={groupName}
properties={getProperties(groupName)} properties={getProperties(groupName)}
styleCategory={selectedCategory} styleCategory={selectedCategory}
{onStyleChanged} {onStyleChanged}
{componentDefinition} {componentDefinition}
{componentInstance} /> {componentInstance} />
{/each} {/each}
{:else} {:else}
<div class="no-design"> <div class="no-design">
<span>This component does not have any design properties</span> <span>This component does not have any design properties</span>
</div> </div>
{/if} {/if}
</div>
</div> </div>
</div> </div>
</div>
<style> <style>
.design-view-container { .design-view-container {
@ -63,7 +63,7 @@
flex: 0 0 50px; flex: 0 0 50px;
} }
.positioned-wrapper{ .positioned-wrapper {
position: relative; position: relative;
display: flex; display: flex;
min-height: 0; min-height: 0;

5
packages/builder/src/components/userInterface/FlatButton.svelte
View File

@ -9,10 +9,7 @@
$: useIcon = !!icon $: useIcon = !!icon
</script> </script>
<div <div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
class="flatbutton"
class:selected
on:click={() => onClick(value || text)}>
{#if useIcon} {#if useIcon}
<i class={icon} /> <i class={icon} />
{:else} {:else}

2
packages/builder/src/components/userInterface/FlatButtonGroup.svelte
View File

@ -46,7 +46,7 @@
<style> <style>
.flatbutton-group { .flatbutton-group {
display: flex; display: flex;
width: 100% width: 100%;
} }
.button-container { .button-container {

4
packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
View File

@ -14,9 +14,7 @@
<PagesList /> <PagesList />
<button class="newscreen" on:click={newScreen}> <button class="newscreen" on:click={newScreen}>Create New Screen</button>
Create New Screen
</button>
<PageLayout layout={$store.pages[$store.currentPageName]} /> <PageLayout layout={$store.pages[$store.currentPageName]} />

2
packages/builder/src/components/userInterface/PropertyControl.svelte
View File

@ -12,7 +12,7 @@
if (v.target) { if (v.target) {
let val = props.valueKey ? v.target[props.valueKey] : v.target.value let val = props.valueKey ? v.target[props.valueKey] : v.target.value
onChange(key, val) onChange(key, val)
}else if(v.detail) { } else if (v.detail) {
onChange(key, v.detail) onChange(key, v.detail)
} else { } else {
onChange(key, v) onChange(key, v)

107
packages/builder/src/components/userInterface/propertyCategories.js
View File

@ -1,6 +1,5 @@
import Input from "../common/Input.svelte" import Input from "../common/Input.svelte"
import OptionSelect from "./OptionSelect.svelte" import OptionSelect from "./OptionSelect.svelte"
import InputGroup from "../common/Inputs/InputGroup.svelte"
import FlatButtonGroup from "./FlatButtonGroup.svelte" import FlatButtonGroup from "./FlatButtonGroup.svelte"
import Colorpicker from "./Colorpicker" import Colorpicker from "./Colorpicker"
/* /*
@ -73,13 +72,6 @@ export const layout = [
}, },
] ]
const spacingMeta = [
{ placeholder: "T" },
{ placeholder: "R" },
{ placeholder: "B" },
{ placeholder: "L" },
]
export const margin = [ export const margin = [
{ {
label: "All sides", label: "All sides",
@ -378,7 +370,20 @@ export const typography = [
label: "size", label: "size",
key: "font-size", key: "font-size",
control: OptionSelect, 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", textAlign: "center",
}, },
{ {
@ -444,17 +449,50 @@ export const background = [
defaultValue: "None", defaultValue: "None",
options: [ options: [
{ label: "None", value: "None" }, { 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: "Warm Flame",
{ label: "Spring Warmth", value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);" }, value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 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: "Night Fade",
{ label: "Heavy Rain", value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);" }, value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 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: "Spring Warmth",
{ label: "Plum Plate", value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);" }, 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", key: "opacity",
control: OptionSelect, control: OptionSelect,
textAlign: "center", textAlign: "center",
options: [ options: ["0", "0.2", "0.4", "0.6", "0.8", "1"],
"0",
"0.2",
"0.4",
"0.6",
"0.8",
"1",
],
}, },
{ {
label: "Rotate", label: "Rotate",
@ -544,16 +575,16 @@ export const effects = [
defaultValue: "0", defaultValue: "0",
options: [ options: [
{ label: "None", value: "0" }, { label: "None", value: "0" },
{ label: "45 deg", value:"rotate(45deg)" }, { label: "45 deg", value: "rotate(45deg)" },
{ label: "90 deg", value:"rotate(90deg)" }, { label: "90 deg", value: "rotate(90deg)" },
{ label: "135 deg", value:"rotate(135deg)" }, { label: "135 deg", value: "rotate(135deg)" },
{ label: "180 deg", value:"rotate(180deg)" }, { label: "180 deg", value: "rotate(180deg)" },
{ label: "225 deg", value:"rotate(225deg)" }, { label: "225 deg", value: "rotate(225deg)" },
{ label: "270 deg", value:"rotate(270deg)" }, { label: "270 deg", value: "rotate(270deg)" },
{ label: "315 deg", value:"rotate(315deg)" }, { label: "315 deg", value: "rotate(315deg)" },
{ label: "360 deg", value:"rotate(360deg)" }, { label: "360 deg", value: "rotate(360deg)" },
], ],
}, },
{ {
label: "Shadow", label: "Shadow",
key: "box-shadow", key: "box-shadow",
@ -613,7 +644,7 @@ export const transitions = [
control: OptionSelect, control: OptionSelect,
textAlign: "center", textAlign: "center",
placeholder: "sec", placeholder: "sec",
options: ["0.2ms", "0.4ms", "0.8ms", "1s", "2s", "4s",], options: ["0.2ms", "0.4ms", "0.8ms", "1s", "2s", "4s"],
}, },
{ {
label: "Ease", label: "Ease",

4
packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
View File

@ -43,9 +43,7 @@
{#if $backendUiStore.selectedDatabase._id && $backendUiStore.selectedModel.name} {#if $backendUiStore.selectedDatabase._id && $backendUiStore.selectedModel.name}
<ModelDataTable {selectRecord} /> <ModelDataTable {selectRecord} />
{:else} {:else}
<i style="color: var(--grey-4)"> <i style="color: var(--grey-4)">create your first model to start building</i>
create your first model to start building
</i>
{/if} {/if}
<style> <style>

22
packages/standard-components/src/Login.svelte
View File

@ -48,6 +48,7 @@
} }
} }
</script> </script>
<div class="container"> <div class="container">
<div class="root"> <div class="root">
<div class="content"> <div class="content">
@ -84,22 +85,23 @@
</div> </div>
{#if error} {#if error}
<div class="incorrect-details-panel">Incorrect username or password</div> <div class="incorrect-details-panel">
Incorrect username or password
</div>
{/if} {/if}
</div> </div>
</div> </div>
</div> </div>
<style> <style>
.container {
.container { display: flex;
display: flex; justify-content: center;
justify-content: center; align-items: center;
align-items: center; height: 100%;
height: 100%; width: 100%;
width: 100%; position: absolute;
position: absolute; }
}
.root { .root {
height: 100%; height: 100%;
display: flex; display: flex;