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 16:20:15 +01:00
parent 6259cdc7e6
commit 9b8cc2a18f
11 changed files with 300 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
View File

@ -55,14 +55,12 @@
$: { $: {
if ($backendUiStore.selectedView) { if ($backendUiStore.selectedView) {
api api.fetchDataForView($backendUiStore.selectedView).then(records => {
.fetchDataForView($backendUiStore.selectedView) data = records || []
.then(records => { headers = Object.keys($backendUiStore.selectedModel.schema).filter(
data = records || [] key => !INTERNAL_HEADERS.includes(key)
headers = Object.keys($backendUiStore.selectedModel.schema).filter( )
key => !INTERNAL_HEADERS.includes(key) })
)
})
} }
} }

1
packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
View File

@ -5,7 +5,6 @@
export let record export let record
export let onClosed export let onClosed
</script> </script>
<section> <section>

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

@ -1,14 +1,14 @@
<script> <script>
import {buildStyle} from "./helpers.js" import { buildStyle } from "./helpers.js"
import {fade} from "svelte/transition" import { fade } from "svelte/transition"
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 = ""
export let margin = "" export let margin = ""
$: style = buildStyle({backgroundSize, borderRadius, height, width, margin}) $: style = buildStyle({ backgroundSize, borderRadius, height, width, margin })
$: style = buildStyle({ backgroundSize, borderRadius, height, width }) $: style = buildStyle({ backgroundSize, borderRadius, height, width })
</script> </script>
@ -16,6 +16,9 @@
<div {style}> <div {style}>
<slot /> <slot />
</div> </div>
<div in:fade {style}>
<slot />
</div>
<style> <style>
div { div {
@ -24,7 +27,3 @@
width: fit-content; width: fit-content;
} }
</style> </style>
<div in:fade {style}>
<slot />
</div>

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

@ -1,7 +1,7 @@
<script> <script>
import { onMount, createEventDispatcher } from "svelte"; import { onMount, createEventDispatcher } from "svelte"
import { fade } from 'svelte/transition'; import { fade } from "svelte/transition"
import Swatch from "./Swatch.svelte"; import Swatch from "./Swatch.svelte"
import CheckedBackground from "./CheckedBackground.svelte" import CheckedBackground from "./CheckedBackground.svelte"
import { buildStyle } from "./helpers.js" import { buildStyle } from "./helpers.js"
import { import {
@ -14,16 +14,16 @@
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 swatches = [] //TODO: Safe swatches - limit to 12. warn in console export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
export let disableSwatches = false export let disableSwatches = false
export let format = "hexa"; export let format = "hexa"
export let open = false; export let open = false
export let pickerHeight = 0;
export let pickerWidth = 0;
let adder = null; export let pickerHeight = 0
export let pickerWidth = 0
let adder = null
let h = null let h = null
let s = null let s = null
@ -33,7 +33,7 @@
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
onMount(() => { onMount(() => {
if(!swatches.length > 0) { if (!swatches.length > 0) {
//Don't use locally stored recent colors if swatches have been passed as props //Don't use locally stored recent colors if swatches have been passed as props
getRecentColors() getRecentColors()
} }
@ -46,7 +46,7 @@
function getRecentColors() { function getRecentColors() {
let colorStore = localStorage.getItem("cp:recent-colors") let colorStore = localStorage.getItem("cp:recent-colors")
if (colorStore) { if (colorStore) {
swatches = JSON.parse(colorStore) swatches = JSON.parse(colorStore)
} }
} }
@ -74,26 +74,26 @@
//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)
dispatchValue() dispatchValue()
} }
function setHue({color, isDrag}) { function setHue({ color, isDrag }) {
h = color; h = color
value = convertHsvaToFormat([h, s, v, a], format); value = convertHsvaToFormat([h, s, v, a], format)
if(!isDrag) { if (!isDrag) {
dispatchValue() dispatchValue()
} }
} }
function setAlpha({color, isDrag}) { function setAlpha({ color, isDrag }) {
a = color === "1.00" ? "1" : color; a = color === "1.00" ? "1" : color
value = convertHsvaToFormat([h, s, v, a], format); value = convertHsvaToFormat([h, s, v, a], format)
if(!isDrag) { if (!isDrag) {
dispatchValue() dispatchValue()
} }
} }
function dispatchValue() { function dispatchValue() {
@ -107,37 +107,36 @@
function handleColorInput(text) { function handleColorInput(text) {
let format = getColorFormat(text) let format = getColorFormat(text)
if(format) { if (format) {
value = text value = text
convertAndSetHSVA() convertAndSetHSVA()
} }
} }
function dispatchInputChange() { function dispatchInputChange() {
if(format) { if (format) {
dispatchValue() dispatchValue()
} }
} }
function addSwatch() { function addSwatch() {
if(format) { if (format) {
dispatch("addswatch", value) dispatch("addswatch", value)
setRecentColor(value) setRecentColor(value)
} }
} }
function removeSwatch(idx) { function removeSwatch(idx) {
let removedSwatch = swatches.splice(idx, 1); let removedSwatch = swatches.splice(idx, 1)
swatches = swatches swatches = swatches
dispatch("removeswatch", removedSwatch) dispatch("removeswatch", removedSwatch)
localStorage.setItem("cp:recent-colors", JSON.stringify(swatches)) localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
} }
function applySwatch(color) { function applySwatch(color) {
if(value !== color) { if (value !== color) {
format = getColorFormat(color) format = getColorFormat(color)
if(format) { if (format) {
value = color value = color
convertAndSetHSVA() convertAndSetHSVA()
dispatchValue() dispatchValue()
@ -145,9 +144,9 @@
} }
} }
$: border = (v > 90 && s < 5) ? "1px dashed #dedada" : "" $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
$: style = buildStyle({background: value, border}) $: style = buildStyle({ background: value, border })
$: shrink = swatches.length > 0 $: shrink = swatches.length > 0
</script> </script>
<div class="colorpicker-container"> <div class="colorpicker-container">
@ -182,6 +181,73 @@
</div> </div>
</div> </div>
</div>
<div
class="colorpicker-container"
bind:clientHeight={pickerHeight}
bind:clientWidth={pickerWidth}>
<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)}
on:dragend={dispatchValue} />
<CheckedBackground borderRadius="10px" backgroundSize="7px">
<Slider
type="alpha"
value={a}
on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
on:dragend={dispatchValue} />
</CheckedBackground>
</div>
</div>
{#if !disableSwatches}
<div transition:fade class="swatch-panel">
{#if swatches.length > 0}
{#each swatches as color, idx}
<Swatch
{color}
on:click={() => applySwatch(color)}
on:removeswatch={() => removeSwatch(idx)} />
{/each}
{/if}
{#if swatches.length !== 12}
<div
bind:this={adder}
transition:fade
class="adder"
on:click={addSwatch}
class:shrink>
<span>&plus;</span>
</div>
{/if}
</div>
{/if}
<div class="format-input-panel">
<ButtonGroup {format} onclick={changeFormatAndConvert} />
<Input
{value}
on:input={event => handleColorInput(event.target.value)}
on:change={dispatchInputChange} />
</div>
</div>
</div> </div>
<style> <style>
@ -227,7 +293,7 @@
border-radius: 50%; border-radius: 50%;
} }
.swatch-panel { .swatch-panel {
flex: 0 0 15px; flex: 0 0 15px;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -238,7 +304,7 @@
.adder { .adder {
flex: 1; flex: 1;
height: 20px; height: 20px;
display: flex; display: flex;
transition: flex 0.5s; transition: flex 0.5s;
justify-content: center; justify-content: center;
@ -252,7 +318,7 @@
font-weight: 500; font-weight: 500;
} }
.shrink { .shrink {
flex: 0 0 20px; flex: 0 0 20px;
} }
@ -263,54 +329,3 @@
padding-top: 3px; padding-top: 3px;
} }
</style> </style>
<div class="colorpicker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth}>
<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)} on:dragend={dispatchValue} />
<CheckedBackground borderRadius="10px" backgroundSize="7px">
<Slider
type="alpha"
value={a}
on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
on:dragend={dispatchValue}
/>
</CheckedBackground>
</div>
</div>
{#if !disableSwatches}
<div transition:fade class="swatch-panel">
{#if swatches.length > 0}
{#each swatches as color, idx}
<Swatch {color} on:click={() => applySwatch(color)} on:removeswatch={() => removeSwatch(idx)} />
{/each}
{/if}
{#if swatches.length !== 12}
<div bind:this={adder} transition:fade class="adder" on:click={addSwatch} class:shrink>
<span>&plus;</span>
</div>
{/if}
</div>
{/if}
<div class="format-input-panel">
<ButtonGroup {format} onclick={changeFormatAndConvert} />
<Input {value} on:input={event => handleColorInput(event.target.value)} on:change={dispatchInputChange} />
</div>
</div>
</div>

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

@ -1,146 +1,143 @@
<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 swatches = [] export let swatches = []
export let disableSwatches = false export let disableSwatches = false
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 = 0 let pickerWidth = 0
let pickerHeight = 0 let pickerHeight = 0
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) {
open = true;
}
} }
})
$: if(open && colorPreview) { afterUpdate(() => {
const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect() if (colorPreview && colorPreview.offsetParent && !anchorEl) {
const {innerHeight, innerWidth} = window //Anchor relative to closest positioned ancestor element. If none, then anchor to body
anchorEl = colorPreview.offsetParent
const {offsetLeft, offsetTop} = colorPreview let curEl = colorPreview
//get the scrollTop value for all scrollable parent elements let els = []
let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0); //Travel up dom tree from preview element to find parent elements that scroll
while (!anchorEl.isSameNode(curEl)) {
const spaceBelow = (innerHeight - spaceAbove) - previewHeight curEl = curEl.parentNode
const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop let elOverflow = window
.getComputedStyle(curEl)
//TOO: Testing and Scroll Awareness for x Scroll .getPropertyValue("overflow")
const spaceRight = (innerWidth - spaceLeft) + previewWidth if (/scroll|auto/.test(elOverflow)) {
const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth els.push(curEl)
}
dimensions = {top, left} }
parentNodes = els
} }
}) })
function openColorpicker(event) { function openColorpicker(event) {
if (colorPreview) { 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 open = true
} }
}
$: if (open && 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 }
}
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 transition:fade class="picker-container" style={pickerStyle}> <div transition:fade class="picker-container" style={pickerStyle}>
<Colorpicker on:change={onColorChange} on:addswatch on:removeswatch bind:format bind:value bind:pickerHeight bind:pickerWidth {swatches} {disableSwatches} {open} /> <Colorpicker
</div> on:change={onColorChange}
<div on:click|self={() => open = false} class="overlay"></div> on:addswatch
{/if} on:removeswatch
{:else} bind:format
<div class="color-preview preview-error" style={errorPreviewStyle}> bind:value
<span>&times;</span> bind:pickerHeight
</div> bind:pickerWidth
{swatches}
{disableSwatches}
{open} />
</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}>

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

@ -5,6 +5,9 @@
<div> <div>
<input on:input type="text" {value} maxlength="25" /> <input on:input type="text" {value} maxlength="25" />
</div> </div>
<div>
<input on:input on:change type="text" {value} maxlength="25" />
</div>
<style> <style>
div { div {
@ -26,7 +29,3 @@
font-weight: 550; font-weight: 550;
} }
</style> </style>
<div>
<input on:input on:change type="text" {value} maxlength="25" />
</div>

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

@ -21,7 +21,8 @@
if ( if (
clickX > 0 && clickX > 0 &&
clickY > 0 && clickY > 0 &&
clickX < paletteWidth && clickY < paletteHeight 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

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

@ -11,18 +11,15 @@
let sliderWidth = 0 let sliderWidth = 0
function onSliderChange(mouseX, isDrag = false) { function onSliderChange(mouseX, isDrag = false) {
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"
? 360 * percentageClick dispatch("change", { color: value, isDrag })
: percentageClick;
dispatch("change", {color: value, isDrag});
} }
} }
@ -45,6 +42,20 @@
class="slider-thumb" class="slider-thumb"
{style} /> {style} />
</div> </div>
<div
bind:this={slider}
bind:clientWidth={sliderWidth}
on:click={event => onSliderChange(event.clientX)}
class="color-format-slider"
class:hue={type === 'hue'}
class:alpha={type === 'alpha'}>
<div
use:dragable
on:drag={e => onSliderChange(e.detail, true)}
on:dragend
class="slider-thumb"
{style} />
</div>
<style> <style>
.color-format-slider { .color-format-slider {
@ -86,18 +97,3 @@
cursor: grab; cursor: grab;
} }
</style> </style>
<div
bind:this={slider}
bind:clientWidth={sliderWidth}
on:click={event => onSliderChange(event.clientX)}
class="color-format-slider"
class:hue={type === 'hue'}
class:alpha={type === 'alpha'}>
<div
use:dragable
on:drag={e => onSliderChange(e.detail, true)}
on:dragend
class="slider-thumb"
{style} />
</div>

54
packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
View File

@ -1,27 +1,47 @@
<script> <script>
import {createEventDispatcher} from "svelte" import { createEventDispatcher } from "svelte"
import { fade } from 'svelte/transition'; import { fade } from "svelte/transition"
import CheckedBackground from "./CheckedBackground.svelte" import CheckedBackground from "./CheckedBackground.svelte"
export let hovered = false export let hovered = false
export let color = "#fff" export let color = "#fff"
const dispatch = createEventDispatcher()
const dispatch = createEventDispatcher()
</script> </script>
<div class="space">
<CheckedBackground borderRadius="6px">
<div
in:fade
class="swatch"
style={`background: ${color};`}
on:click|self
on:mouseover={() => (hovered = true)}
on:mouseleave={() => (hovered = false)}>
{#if hovered}
<div
in:fade
class="remove-icon"
on:click|self={() => dispatch('removeswatch')}>
<span on:click|self={() => dispatch('removeswatch')}>&times;</span>
</div>
{/if}
</div>
</CheckedBackground>
</div>
<style> <style>
.swatch { .swatch {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
border-radius: 6px; border-radius: 6px;
border: 1px solid #dedada; border: 1px solid #dedada;
height: 20px; height: 20px;
width: 20px; width: 20px;
} }
.space { .space {
padding: 3px 5px; padding: 3px 5px;
} }
.remove-icon { .remove-icon {
@ -29,7 +49,7 @@
right: 0; right: 0;
top: -5px; top: -5px;
right: -4px; right: -4px;
width:10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
background-color: #800000; background-color: #800000;
@ -39,15 +59,3 @@
align-items: center; align-items: center;
} }
</style> </style>
<div class="space">
<CheckedBackground borderRadius="6px">
<div in:fade class="swatch" style={`background: ${color};`} on:click|self on:mouseover={() => hovered = true} on:mouseleave={() => hovered = false}>
{#if hovered}
<div in:fade class="remove-icon" on:click|self={()=> dispatch("removeswatch")}>
<span on:click|self={()=> dispatch("removeswatch")}>&times;</span>
</div>
{/if}
</div>
</CheckedBackground>
</div>

1
packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
View File

@ -15,7 +15,6 @@
} }
</script> </script>
<div <div
class="workflow-block hoverable" class="workflow-block hoverable"
on:click={addBlockToWorkflow} on:click={addBlockToWorkflow}

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

@ -23,7 +23,10 @@
const login = async () => { const login = async () => {
loading = true loading = true
const response = await _bb.api.post("/api/authenticate", { username, password }) const response = await _bb.api.post("/api/authenticate", {
username,
password,
})
if (response.status === 200) { if (response.status === 200) {
const json = await response.json() const json = await response.json()
localStorage.setItem("budibase:token", json.token) localStorage.setItem("budibase:token", json.token)
@ -39,20 +42,12 @@
<div class="container"> <div class="container">
<div class="root"> <div class="root">
<div class="content"> <div class="content">
{#if _logo} {#if logo}
<div class="logo-container"> <div class="logo-container">
<img src={_logo} alt="logo" /> <img src={logo} alt="logo" />
</div> </div>
{/if} {/if}
<div class="root">
<div class="content">
{#if logo}
<div class="logo-container">
<img src={logo} alt="logo" />
</div>
<div class="login-button-container"> <div class="login-button-container">
<button disabled={loading} on:click={login} class={_buttonClass}> <button disabled={loading} on:click={login} class={_buttonClass}>
Log in to {name} Log in to {name}