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 85b0d790a6
commit ff8ec8e033
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>

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

@ -7,9 +7,12 @@
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>

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

@ -1,72 +1,72 @@
<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)
@ -77,6 +77,40 @@
$: 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>

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

@ -3,15 +3,15 @@
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
@ -21,12 +21,15 @@
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()
@ -49,7 +52,9 @@
//Travel up dom tree from preview element to find parent elements that scroll //Travel up dom tree from preview element to find parent elements that scroll
while (!anchorEl.isSameNode(curEl)) { while (!anchorEl.isSameNode(curEl)) {
curEl = curEl.parentNode curEl = curEl.parentNode
let elOverflow = window.getComputedStyle(curEl).getPropertyValue("overflow") let elOverflow = window
.getComputedStyle(curEl)
.getPropertyValue("overflow")
if (/scroll|auto/.test(elOverflow)) { if (/scroll|auto/.test(elOverflow)) {
els.push(curEl) els.push(curEl)
} }
@ -58,31 +63,45 @@
} }
}) })
function openColorpicker(event) { function openColorpicker(event) {
if (colorPreview) { if (colorPreview) {
const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect() const {
top: spaceAbove,
width,
bottom,
right,
left: spaceLeft,
} = colorPreview.getBoundingClientRect()
const { innerHeight, innerWidth } = window const { innerHeight, innerWidth } = window
const { offsetLeft, offsetTop } = colorPreview const { offsetLeft, offsetTop } = colorPreview
//get the scrollTop value for all scrollable parent elements //get the scrollTop value for all scrollable parent elements
let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0); let scrollTop = parentNodes.reduce(
(scrollAcc, el) => (scrollAcc += el.scrollTop),
0
)
const spaceBelow = (innerHeight - spaceAbove) - previewHeight const spaceBelow = innerHeight - spaceAbove - previewHeight
const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop const top =
spaceAbove > spaceBelow
? offsetTop - pickerHeight - scrollTop
: offsetTop + previewHeight - scrollTop
//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) : offsetLeft - pickerWidth const left =
spaceRight > spaceLeft
? offsetLeft + previewWidth
: offsetLeft - pickerWidth
dimensions = { top, left } dimensions = { top, left }
open = true; open = true
} }
} }
function onColorChange(color) { function onColorChange(color) {
value = color.detail; value = color.detail
dispatch("change", color.detail) dispatch("change", color.detail)
} }
</script> </script>
@ -90,14 +109,24 @@
<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
bind:this={colorPreview}
bind:clientHeight={previewHeight}
bind:clientWidth={previewWidth}
class="color-preview"
style={previewStyle}
on:click={openColorpicker} />
</CheckedBackground> </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} />
</div> </div>
<div on:click|self={() => open = false} class="overlay"></div> <div on:click|self={() => (open = false)} class="overlay" />
{/if} {/if}
{:else} {:else}
<div class="color-preview preview-error" style={errorPreviewStyle}> <div class="color-preview preview-error" style={errorPreviewStyle}>
@ -106,7 +135,6 @@
{/if} {/if}
</div> </div>
<style> <style>
.color-preview-container { .color-preview-container {
display: flex; display: flex;
@ -143,4 +171,3 @@
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>

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

57
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;
@ -71,17 +82,3 @@
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>

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]} />

89
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",
@ -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>

6
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,14 +85,15 @@
</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;