PR Comments
This commit is contained in:
Martin McKeaveney
parent
7b57f0ecc1
commit
d87a17eaec
|
|
@ -25,13 +25,13 @@
|
|||
name: "Screen Placeholder",
|
||||
route: "*",
|
||||
props: {
|
||||
"_id": "screenslot-placeholder",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"_styles": {
|
||||
"normal": {},
|
||||
"hover": {},
|
||||
"active": {},
|
||||
"selected": {}
|
||||
_id: "screenslot-placeholder",
|
||||
_component: "@budibase/standard-components/container",
|
||||
_styles: {
|
||||
normal: {},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
|
|
@ -39,87 +39,89 @@
|
|||
type: "div",
|
||||
_children: [
|
||||
{
|
||||
"_id": "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"_styles": {
|
||||
"normal": {
|
||||
"display": "flex",
|
||||
"flex-direction": "column",
|
||||
"align-items": "center"
|
||||
_id: "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888",
|
||||
_component: "@budibase/standard-components/container",
|
||||
_styles: {
|
||||
normal: {
|
||||
display: "flex",
|
||||
"flex-direction": "column",
|
||||
"align-items": "center",
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
"hover": {},
|
||||
"active": {},
|
||||
"selected": {}
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
type: "div",
|
||||
_instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
|
||||
_instanceName: "Container",
|
||||
_children: [
|
||||
{
|
||||
_id: "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
|
||||
_component: "@budibase/standard-components/heading",
|
||||
_styles: {
|
||||
normal: {
|
||||
width: "500px",
|
||||
padding: "8px",
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
text: "Screenslot",
|
||||
type: "h1",
|
||||
_instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
|
||||
_instanceName: "Heading",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_id: "71a3da65-72c6-4c43-8c6a-49871c07b77d",
|
||||
_component: "@budibase/standard-components/text",
|
||||
_styles: {
|
||||
normal: {
|
||||
"max-width": "",
|
||||
"text-align": "left",
|
||||
width: "500px",
|
||||
padding: "8px",
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
text:
|
||||
"The screens that you create will be displayed inside this box.",
|
||||
type: "none",
|
||||
_instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
|
||||
_instanceName: "Text",
|
||||
},
|
||||
{
|
||||
_id: "8af80374-460d-497b-a5d8-7dd2ec4a7bbc",
|
||||
_component: "@budibase/standard-components/text",
|
||||
_styles: {
|
||||
normal: {
|
||||
"max-width": "",
|
||||
"text-align": "left",
|
||||
width: "500px",
|
||||
padding: "8px",
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
text:
|
||||
"This box is just a placeholder, to show you the position of screens.",
|
||||
type: "none",
|
||||
_instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
|
||||
_instanceName: "Text",
|
||||
},
|
||||
],
|
||||
},
|
||||
"_code": "",
|
||||
"className": "",
|
||||
"onLoad": [],
|
||||
"type": "div",
|
||||
"_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
|
||||
"_instanceName": "Container",
|
||||
"_children": [
|
||||
{
|
||||
"_id": "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
|
||||
"_component": "@budibase/standard-components/heading",
|
||||
"_styles": {
|
||||
"normal": {
|
||||
"width": "500px",
|
||||
"padding": "8px"
|
||||
},
|
||||
"hover": {},
|
||||
"active": {},
|
||||
"selected": {}
|
||||
},
|
||||
"_code": "",
|
||||
"className": "",
|
||||
"text": "Screenslot",
|
||||
"type": "h1",
|
||||
"_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
|
||||
"_instanceName": "Heading",
|
||||
"_children": []
|
||||
},
|
||||
{
|
||||
"_id": "71a3da65-72c6-4c43-8c6a-49871c07b77d",
|
||||
"_component": "@budibase/standard-components/text",
|
||||
"_styles": {
|
||||
"normal": {
|
||||
"max-width": "",
|
||||
"text-align": "left",
|
||||
"width": "500px",
|
||||
"padding": "8px"
|
||||
},
|
||||
"hover": {},
|
||||
"active": {},
|
||||
"selected": {}
|
||||
},
|
||||
"_code": "",
|
||||
"text": "The screens that you create will be displayed inside this box.",
|
||||
"type": "none",
|
||||
"_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
|
||||
"_instanceName": "Text"
|
||||
},
|
||||
{
|
||||
"_id": "8af80374-460d-497b-a5d8-7dd2ec4a7bbc",
|
||||
"_component": "@budibase/standard-components/text",
|
||||
"_styles": {
|
||||
"normal": {
|
||||
"max-width": "",
|
||||
"text-align": "left",
|
||||
"width": "500px",
|
||||
"padding": "8px"
|
||||
},
|
||||
"hover": {},
|
||||
"active": {},
|
||||
"selected": {}
|
||||
},
|
||||
"_code": "",
|
||||
"text": "This box is just a placeholder, to show you the position of screens.",
|
||||
"type": "none",
|
||||
"_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
|
||||
"_instanceName": "Text"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
_instanceName: "Content Placeholder",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,184 +1,267 @@
|
|||
<script>
|
||||
import { onMount, createEventDispatcher } from "svelte";
|
||||
import { fade } from "svelte/transition";
|
||||
import Swatch from "./Swatch.svelte";
|
||||
import CheckedBackground from "./CheckedBackground.svelte";
|
||||
import { buildStyle } from "../helpers.js";
|
||||
import { onMount, createEventDispatcher } from "svelte"
|
||||
import { fade } from "svelte/transition"
|
||||
import Swatch from "./Swatch.svelte"
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
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";
|
||||
import Portal from "./Portal.svelte";
|
||||
import { keyevents } from "../actions";
|
||||
convertHsvaToFormat,
|
||||
} from "../utils.js"
|
||||
import Slider from "./Slider.svelte"
|
||||
import Palette from "./Palette.svelte"
|
||||
import ButtonGroup from "./ButtonGroup.svelte"
|
||||
import Input from "./Input.svelte"
|
||||
import Portal from "./Portal.svelte"
|
||||
import { keyevents } from "../actions"
|
||||
|
||||
export let value = "#3ec1d3ff";
|
||||
export let open = false;
|
||||
export let swatches = [];
|
||||
export let value = "#3ec1d3ff"
|
||||
export let open = false
|
||||
export let swatches = []
|
||||
|
||||
export let disableSwatches = false;
|
||||
export let format = "hexa";
|
||||
export let style = "";
|
||||
export let pickerHeight = 0;
|
||||
export let pickerWidth = 0;
|
||||
export let disableSwatches = false
|
||||
export let format = "hexa"
|
||||
export let style = ""
|
||||
export let pickerHeight = 0
|
||||
export let pickerWidth = 0
|
||||
|
||||
let colorPicker = null;
|
||||
let adder = null;
|
||||
let swatchesSetFromLocalStore = false;
|
||||
let colorPicker = null
|
||||
let adder = null
|
||||
let swatchesSetFromLocalStore = false
|
||||
|
||||
let h = 0;
|
||||
let s = 0;
|
||||
let v = 0;
|
||||
let a = 0;
|
||||
let h = 0
|
||||
let s = 0
|
||||
let v = 0
|
||||
let a = 0
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
onMount(() => {
|
||||
if (!swatches.length > 0) {
|
||||
//Don't use locally stored recent colors if swatches have been passed as props
|
||||
swatchesSetFromLocalStore = true;
|
||||
swatches = getRecentColors() || [];
|
||||
swatchesSetFromLocalStore = true
|
||||
swatches = getRecentColors() || []
|
||||
}
|
||||
|
||||
if (swatches.length > 12) {
|
||||
console.warn(
|
||||
`Colorpicker - ${swatches.length} swatches were provided. Only the first 12 swatches will be displayed.`
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
if (colorPicker) {
|
||||
colorPicker.focus();
|
||||
colorPicker.focus()
|
||||
}
|
||||
|
||||
if (format) {
|
||||
convertAndSetHSVA();
|
||||
convertAndSetHSVA()
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
function getRecentColors() {
|
||||
let colorStore = localStorage.getItem("cp:recent-colors");
|
||||
let colorStore = localStorage.getItem("cp:recent-colors")
|
||||
if (colorStore) {
|
||||
return JSON.parse(colorStore);
|
||||
return JSON.parse(colorStore)
|
||||
}
|
||||
}
|
||||
|
||||
function handleEscape() {
|
||||
if (open) {
|
||||
open = false;
|
||||
open = false
|
||||
}
|
||||
}
|
||||
|
||||
function setRecentColors(color) {
|
||||
const s = swatchesSetFromLocalStore
|
||||
? swatches
|
||||
: [...getRecentColors(), color];
|
||||
localStorage.setItem("cp:recent-colors", JSON.stringify(s));
|
||||
: [...getRecentColors(), color]
|
||||
localStorage.setItem("cp:recent-colors", JSON.stringify(s))
|
||||
}
|
||||
|
||||
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);
|
||||
dispatchValue();
|
||||
s = detail.s
|
||||
v = detail.v
|
||||
value = convertHsvaToFormat([h, s, v, a], format)
|
||||
dispatchValue()
|
||||
}
|
||||
|
||||
function setHue({ color, isDrag }) {
|
||||
h = color;
|
||||
value = convertHsvaToFormat([h, s, v, a], format);
|
||||
h = color
|
||||
value = convertHsvaToFormat([h, s, v, a], format)
|
||||
if (!isDrag) {
|
||||
dispatchValue();
|
||||
dispatchValue()
|
||||
}
|
||||
}
|
||||
|
||||
function setAlpha({ color, isDrag }) {
|
||||
a = color === "1.00" ? "1" : color;
|
||||
value = convertHsvaToFormat([h, s, v, a], format);
|
||||
a = color === "1.00" ? "1" : color
|
||||
value = convertHsvaToFormat([h, s, v, a], format)
|
||||
if (!isDrag) {
|
||||
dispatchValue();
|
||||
dispatchValue()
|
||||
}
|
||||
}
|
||||
|
||||
function dispatchValue() {
|
||||
dispatch("change", value);
|
||||
dispatch("change", value)
|
||||
}
|
||||
|
||||
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 format = getColorFormat(text);
|
||||
let format = getColorFormat(text)
|
||||
if (format) {
|
||||
value = text;
|
||||
convertAndSetHSVA();
|
||||
value = text
|
||||
convertAndSetHSVA()
|
||||
}
|
||||
}
|
||||
|
||||
function dispatchInputChange() {
|
||||
if (format) {
|
||||
dispatchValue();
|
||||
dispatchValue()
|
||||
}
|
||||
}
|
||||
|
||||
function addSwatch() {
|
||||
if (format) {
|
||||
if (swatches.length === 12) {
|
||||
swatches.splice(0, 1);
|
||||
swatches.splice(0, 1)
|
||||
}
|
||||
|
||||
if (!swatches.includes(value)) {
|
||||
swatches = [...swatches, value];
|
||||
setRecentColors(value);
|
||||
swatches = [...swatches, value]
|
||||
setRecentColors(value)
|
||||
}
|
||||
|
||||
dispatch("addswatch", value);
|
||||
dispatch("addswatch", value)
|
||||
}
|
||||
}
|
||||
|
||||
function removeSwatch(idx) {
|
||||
let [removedSwatch] = swatches.splice(idx, 1);
|
||||
swatches = swatches;
|
||||
dispatch("removeswatch", removedSwatch);
|
||||
let [removedSwatch] = swatches.splice(idx, 1)
|
||||
swatches = swatches
|
||||
dispatch("removeswatch", removedSwatch)
|
||||
if (swatchesSetFromLocalStore) {
|
||||
//as could be a swatch not present in local storage
|
||||
setRecentColors();
|
||||
setRecentColors()
|
||||
}
|
||||
}
|
||||
|
||||
function applySwatch(color) {
|
||||
if (value !== color) {
|
||||
format = getColorFormat(color);
|
||||
format = getColorFormat(color)
|
||||
if (format) {
|
||||
value = color;
|
||||
convertAndSetHSVA();
|
||||
dispatchValue();
|
||||
value = color
|
||||
convertAndSetHSVA()
|
||||
dispatchValue()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : "";
|
||||
$: selectedColorStyle = buildStyle({ background: value, border });
|
||||
$: hasSwatches = swatches.length > 0;
|
||||
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
|
||||
$: selectedColorStyle = buildStyle({ background: value, border })
|
||||
$: hasSwatches = swatches.length > 0
|
||||
</script>
|
||||
|
||||
<Portal>
|
||||
<div
|
||||
class="colorpicker-container"
|
||||
use:keyevents={{ Escape: handleEscape }}
|
||||
transition:fade
|
||||
bind:this={colorPicker}
|
||||
{style}
|
||||
tabindex="0"
|
||||
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"
|
||||
title={value}
|
||||
style={selectedColorStyle} />
|
||||
</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 hasSwatches}
|
||||
{#each swatches as color, idx}
|
||||
{#if idx < 12}
|
||||
<Swatch
|
||||
{color}
|
||||
on:click={() => applySwatch(color)}
|
||||
on:removeswatch={() => removeSwatch(idx)} />
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
{#if swatches.length < 12}
|
||||
<div
|
||||
tabindex="0"
|
||||
title="Add Swatch"
|
||||
use:keyevents={{ Enter: addSwatch }}
|
||||
bind:this={adder}
|
||||
transition:fade
|
||||
class="adder"
|
||||
class:shrink={hasSwatches}
|
||||
on:click={addSwatch}>
|
||||
<span>+</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>
|
||||
</Portal>
|
||||
|
||||
<style>
|
||||
.colorpicker-container {
|
||||
position: absolute;
|
||||
|
|
@ -264,86 +347,3 @@
|
|||
padding-top: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Portal>
|
||||
<div
|
||||
class="colorpicker-container"
|
||||
use:keyevents={{ Escape: handleEscape }}
|
||||
transition:fade
|
||||
bind:this={colorPicker}
|
||||
{style}
|
||||
tabindex="0"
|
||||
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"
|
||||
title={value}
|
||||
style={selectedColorStyle} />
|
||||
</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 hasSwatches}
|
||||
{#each swatches as color, idx}
|
||||
{#if idx < 12}
|
||||
<Swatch
|
||||
{color}
|
||||
on:click={() => applySwatch(color)}
|
||||
on:removeswatch={() => removeSwatch(idx)} />
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
{#if swatches.length < 12}
|
||||
<div
|
||||
tabindex="0"
|
||||
title="Add Swatch"
|
||||
use:keyevents={{ Enter: addSwatch }}
|
||||
bind:this={adder}
|
||||
transition:fade
|
||||
class="adder"
|
||||
class:shrink={hasSwatches}
|
||||
on:click={addSwatch}>
|
||||
<span>+</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>
|
||||
</Portal>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,53 @@
|
|||
<script>
|
||||
import Colorpicker from "./Colorpicker.svelte";
|
||||
import CheckedBackground from "./CheckedBackground.svelte";
|
||||
import { createEventDispatcher, beforeUpdate, onMount } from "svelte";
|
||||
import Colorpicker from "./Colorpicker.svelte"
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
|
||||
|
||||
import { buildStyle, debounce } from "../helpers.js";
|
||||
import { fade } from "svelte/transition";
|
||||
import { getColorFormat } from "../utils.js";
|
||||
import { buildStyle, debounce } from "../helpers.js"
|
||||
import { fade } from "svelte/transition"
|
||||
import { getColorFormat } from "../utils.js"
|
||||
|
||||
export let value = "#3ec1d3ff";
|
||||
export let swatches = [];
|
||||
export let disableSwatches = false;
|
||||
export let open = false;
|
||||
export let width = "25px";
|
||||
export let height = "25px";
|
||||
export let value = "#3ec1d3ff"
|
||||
export let swatches = []
|
||||
export let disableSwatches = false
|
||||
export let open = false
|
||||
export let width = "25px"
|
||||
export let height = "25px"
|
||||
|
||||
let format = "hexa";
|
||||
let dimensions = { top: 0, bottom: 0, right: 0, left: 0 };
|
||||
let positionY = "top";
|
||||
let positionX = "left";
|
||||
let colorPreview = null;
|
||||
let format = "hexa"
|
||||
let dimensions = { top: 0, bottom: 0, right: 0, left: 0 }
|
||||
let positionY = "top"
|
||||
let positionX = "left"
|
||||
let colorPreview = null
|
||||
|
||||
let previewHeight = null;
|
||||
let previewWidth = null;
|
||||
let pickerWidth = 0;
|
||||
let pickerHeight = 0;
|
||||
let previewHeight = null
|
||||
let previewWidth = null
|
||||
let pickerWidth = 0
|
||||
let pickerHeight = 0
|
||||
|
||||
let errorMsg = null;
|
||||
let errorMsg = null
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
beforeUpdate(() => {
|
||||
format = getColorFormat(value);
|
||||
format = getColorFormat(value)
|
||||
if (!format) {
|
||||
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`;
|
||||
console.error(errorMsg);
|
||||
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
|
||||
console.error(errorMsg)
|
||||
} else {
|
||||
errorMsg = null;
|
||||
errorMsg = null
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
function openColorpicker(event) {
|
||||
if (colorPreview) {
|
||||
open = true;
|
||||
open = true
|
||||
}
|
||||
}
|
||||
|
||||
function onColorChange(color) {
|
||||
value = color.detail;
|
||||
dispatch("change", color.detail);
|
||||
value = color.detail
|
||||
dispatch("change", color.detail)
|
||||
}
|
||||
|
||||
function calculateDimensions() {
|
||||
|
|
@ -57,83 +57,52 @@
|
|||
width,
|
||||
bottom,
|
||||
right,
|
||||
left
|
||||
} = colorPreview.getBoundingClientRect();
|
||||
left,
|
||||
} = colorPreview.getBoundingClientRect()
|
||||
|
||||
const spaceBelow = window.innerHeight - bottom;
|
||||
const previewCenter = previewWidth / 2;
|
||||
const spaceBelow = window.innerHeight - bottom
|
||||
const previewCenter = previewWidth / 2
|
||||
|
||||
let y, x;
|
||||
let y, x
|
||||
|
||||
if (spaceAbove > spaceBelow) {
|
||||
positionY = "bottom";
|
||||
y = window.innerHeight - spaceAbove;
|
||||
positionY = "bottom"
|
||||
y = window.innerHeight - spaceAbove
|
||||
} else {
|
||||
positionY = "top";
|
||||
y = bottom;
|
||||
positionY = "top"
|
||||
y = bottom
|
||||
}
|
||||
|
||||
// Centre picker by default
|
||||
x = left + previewCenter - 220 / 2;
|
||||
x = left + previewCenter - 220 / 2
|
||||
|
||||
const spaceRight = window.innerWidth - right;
|
||||
const spaceRight = window.innerWidth - right
|
||||
|
||||
//Position picker left or right if space not available for centering
|
||||
if (left < 110 && spaceRight > 220) {
|
||||
positionX = "left";
|
||||
x = right;
|
||||
positionX = "left"
|
||||
x = right
|
||||
} else if (spaceRight < 100 && left > 220) {
|
||||
positionX = "right";
|
||||
x = document.body.clientWidth - left;
|
||||
positionX = "right"
|
||||
x = document.body.clientWidth - left
|
||||
}
|
||||
|
||||
dimensions = { [positionY]: y.toFixed(1), [positionX]: x.toFixed(1) };
|
||||
dimensions = { [positionY]: y.toFixed(1), [positionX]: x.toFixed(1) }
|
||||
}
|
||||
}
|
||||
|
||||
$: if (open && colorPreview) {
|
||||
calculateDimensions();
|
||||
calculateDimensions()
|
||||
}
|
||||
|
||||
$: previewStyle = buildStyle({ width, height, background: value });
|
||||
$: errorPreviewStyle = buildStyle({ width, height });
|
||||
$: previewStyle = buildStyle({ width, height, background: value })
|
||||
$: errorPreviewStyle = buildStyle({ width, height })
|
||||
$: pickerStyle = buildStyle({
|
||||
[positionY]: `${dimensions[positionY]}px`,
|
||||
[positionX]: `${dimensions[positionX]}px`
|
||||
});
|
||||
[positionX]: `${dimensions[positionX]}px`,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.color-preview-container {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.color-preview {
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #dedada;
|
||||
}
|
||||
|
||||
.preview-error {
|
||||
background: #cccccc;
|
||||
color: #808080;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window on:resize={debounce(calculateDimensions, 200)} />
|
||||
|
||||
<div class="color-preview-container">
|
||||
|
|
@ -173,3 +142,34 @@
|
|||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.color-preview-container {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.color-preview {
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #dedada;
|
||||
}
|
||||
|
||||
.preview-error {
|
||||
background: #cccccc;
|
||||
color: #808080;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,34 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { fade } from "svelte/transition";
|
||||
import CheckedBackground from "./CheckedBackground.svelte";
|
||||
import { keyevents } from "../actions";
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { fade } from "svelte/transition"
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
import { keyevents } from "../actions"
|
||||
|
||||
export let hovered = false;
|
||||
export let color = "#fff";
|
||||
export let hovered = false
|
||||
export let color = "#fff"
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<div class="space">
|
||||
<CheckedBackground borderRadius="6px">
|
||||
<div
|
||||
tabindex="0"
|
||||
use:keyevents={{ Enter: () => dispatch('click') }}
|
||||
in:fade
|
||||
title={color}
|
||||
class="swatch"
|
||||
style={`background: ${color};`}
|
||||
on:mouseover={() => (hovered = true)}
|
||||
on:mouseleave={() => (hovered = false)}
|
||||
on:click|self>
|
||||
{#if hovered}
|
||||
<span in:fade on:click={() => dispatch('removeswatch')} />
|
||||
{/if}
|
||||
</div>
|
||||
</CheckedBackground>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.swatch {
|
||||
position: relative;
|
||||
|
|
@ -47,22 +66,3 @@
|
|||
bottom: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="space">
|
||||
<CheckedBackground borderRadius="6px">
|
||||
<div
|
||||
tabindex="0"
|
||||
use:keyevents={{ Enter: () => dispatch('click') }}
|
||||
in:fade
|
||||
title={color}
|
||||
class="swatch"
|
||||
style={`background: ${color};`}
|
||||
on:mouseover={() => (hovered = true)}
|
||||
on:mouseleave={() => (hovered = false)}
|
||||
on:click|self>
|
||||
{#if hovered}
|
||||
<span in:fade on:click={() => dispatch('removeswatch')} />
|
||||
{/if}
|
||||
</div>
|
||||
</CheckedBackground>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -52,6 +52,11 @@
|
|||
</section>
|
||||
|
||||
<style>
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--white);
|
||||
font-size: 18px;
|
||||
|
|
|
|||
|
|
@ -51,8 +51,7 @@
|
|||
})
|
||||
|
||||
// Select Component!
|
||||
if (componentToSelect)
|
||||
store.selectComponent(componentToSelect)
|
||||
if (componentToSelect) store.selectComponent(componentToSelect)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,4 +14,5 @@ PORT=4001
|
|||
# error level for koa-pino
|
||||
LOG_LEVEL=error
|
||||
|
||||
DEPLOYMENT_CREDENTIALS_URL="https://dt4mpwwap8.execute-api.eu-west-1.amazonaws.com/prod/"
|
||||
DEPLOYMENT_CREDENTIALS_URL="https://dt4mpwwap8.execute-api.eu-west-1.amazonaws.com/prod/"
|
||||
DEPLOYMENT_DB_URL="https://couchdb.budi.live"
|
||||
|
|
@ -20,7 +20,7 @@ async function invalidateCDN(cfDistribution, appId) {
|
|||
.promise()
|
||||
}
|
||||
|
||||
async function fetchTemporaryCredentials() {
|
||||
exports.fetchTemporaryCredentials = async function() {
|
||||
const response = await fetch(process.env.DEPLOYMENT_CREDENTIALS_URL, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
|
|
@ -63,14 +63,13 @@ function walkDir(dirPath, callback) {
|
|||
}
|
||||
}
|
||||
|
||||
exports.uploadAppAssets = async function({ appId }) {
|
||||
const {
|
||||
credentials,
|
||||
accountId,
|
||||
bucket,
|
||||
cfDistribution,
|
||||
} = await fetchTemporaryCredentials()
|
||||
|
||||
exports.uploadAppAssets = async function({
|
||||
appId,
|
||||
credentials,
|
||||
bucket,
|
||||
cfDistribution,
|
||||
accountId,
|
||||
}) {
|
||||
AWS.config.update({
|
||||
accessKeyId: credentials.AccessKeyId,
|
||||
secretAccessKey: credentials.SecretAccessKey,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
const CouchDB = require("pouchdb")
|
||||
const PouchDB = require("../../../db")
|
||||
const { uploadAppAssets } = require("./aws")
|
||||
const { uploadAppAssets, fetchTemporaryCredentials } = require("./aws")
|
||||
|
||||
function replicate(local, remote) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
@ -11,13 +11,18 @@ function replicate(local, remote) {
|
|||
})
|
||||
}
|
||||
|
||||
async function replicateCouch(instanceId, clientId) {
|
||||
async function replicateCouch({ instanceId, clientId, credentials }) {
|
||||
const databases = [`client_${clientId}`, "client_app_lookup", instanceId]
|
||||
|
||||
const replications = databases.map(local => {
|
||||
const localDb = new PouchDB(local)
|
||||
const replications = databases.map(localDbName => {
|
||||
const localDb = new PouchDB(localDbName)
|
||||
const remoteDb = new CouchDB(
|
||||
`${process.env.DEPLOYMENT_COUCH_DB_URL}/${local}`
|
||||
`${process.env.DEPLOYMENT_DB_URL}/${localDbName}`,
|
||||
{
|
||||
auth: {
|
||||
...credentials,
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
return replicate(localDb, remoteDb)
|
||||
|
|
@ -32,14 +37,21 @@ exports.deployApp = async function(ctx) {
|
|||
const { clientId } = await clientAppLookupDB.get(ctx.user.appId)
|
||||
|
||||
ctx.log.info(`Uploading assets for appID ${ctx.user.appId} assets to s3..`)
|
||||
const credentials = await fetchTemporaryCredentials()
|
||||
|
||||
await uploadAppAssets({
|
||||
clientId,
|
||||
appId: ctx.user.appId,
|
||||
...credentials,
|
||||
})
|
||||
|
||||
// replicate the DB to the couchDB cluster in prod
|
||||
ctx.log.info("Replicating local PouchDB to remote..")
|
||||
await replicateCouch(ctx.user.instanceId, clientId)
|
||||
await replicateCouch({
|
||||
instanceId: ctx.user.instanceId,
|
||||
clientId,
|
||||
credentials: credentials.couchDbCreds,
|
||||
})
|
||||
|
||||
ctx.body = {
|
||||
status: "SUCCESS",
|
||||
|
|
|
|||
|
|
@ -49,9 +49,10 @@ exports.serveApp = async function(ctx) {
|
|||
})
|
||||
}
|
||||
|
||||
if (process.env.CLOUD) {
|
||||
if (!process.env.CLOUD) {
|
||||
const S3_URL = `https://${appId}.app.budi.live/assets/${appId}/${mainOrAuth}/${ctx.file ||
|
||||
"index.production.html"}`
|
||||
|
||||
const response = await fetch(S3_URL)
|
||||
const body = await response.text()
|
||||
ctx.body = body
|
||||
|
|
|
|||
|
|
@ -194,6 +194,20 @@
|
|||
lodash "^4.17.13"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@budibase/client@^0.0.32":
|
||||
version "0.0.32"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496"
|
||||
integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A==
|
||||
dependencies:
|
||||
"@nx-js/compiler-util" "^2.0.0"
|
||||
bcryptjs "^2.4.3"
|
||||
deep-equal "^2.0.1"
|
||||
lodash "^4.17.15"
|
||||
lunr "^2.3.5"
|
||||
regexparam "^1.3.0"
|
||||
shortid "^2.2.8"
|
||||
svelte "^3.9.2"
|
||||
|
||||
"@budibase/core@^0.0.32":
|
||||
version "0.0.32"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa"
|
||||
|
|
@ -849,6 +863,11 @@ array-equal@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
|
||||
integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
|
||||
|
||||
array-filter@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
|
||||
integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
|
||||
|
||||
array-unique@^0.3.2:
|
||||
version "0.3.2"
|
||||
resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
|
||||
|
|
@ -921,6 +940,13 @@ atomic-sleep@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
|
||||
integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
|
||||
|
||||
available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
|
||||
integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
|
||||
dependencies:
|
||||
array-filter "^1.0.0"
|
||||
|
||||
aws-sdk@^2.706.0:
|
||||
version "2.706.0"
|
||||
resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.706.0.tgz#09f65e9a91ecac5a635daf934082abae30eca953"
|
||||
|
|
@ -1667,6 +1693,26 @@ decompress-response@^3.3.0:
|
|||
dependencies:
|
||||
mimic-response "^1.0.0"
|
||||
|
||||
deep-equal@^2.0.1:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
|
||||
integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
|
||||
dependencies:
|
||||
es-abstract "^1.17.5"
|
||||
es-get-iterator "^1.1.0"
|
||||
is-arguments "^1.0.4"
|
||||
is-date-object "^1.0.2"
|
||||
is-regex "^1.0.5"
|
||||
isarray "^2.0.5"
|
||||
object-is "^1.1.2"
|
||||
object-keys "^1.1.1"
|
||||
object.assign "^4.1.0"
|
||||
regexp.prototype.flags "^1.3.0"
|
||||
side-channel "^1.0.2"
|
||||
which-boxed-primitive "^1.0.1"
|
||||
which-collection "^1.0.1"
|
||||
which-typed-array "^1.1.2"
|
||||
|
||||
deep-equal@~1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
|
||||
|
|
@ -2042,6 +2088,36 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
|
|||
string.prototype.trimleft "^2.1.1"
|
||||
string.prototype.trimright "^2.1.1"
|
||||
|
||||
es-abstract@^1.17.4:
|
||||
version "1.17.6"
|
||||
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
|
||||
integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
|
||||
dependencies:
|
||||
es-to-primitive "^1.2.1"
|
||||
function-bind "^1.1.1"
|
||||
has "^1.0.3"
|
||||
has-symbols "^1.0.1"
|
||||
is-callable "^1.2.0"
|
||||
is-regex "^1.1.0"
|
||||
object-inspect "^1.7.0"
|
||||
object-keys "^1.1.1"
|
||||
object.assign "^4.1.0"
|
||||
string.prototype.trimend "^1.0.1"
|
||||
string.prototype.trimstart "^1.0.1"
|
||||
|
||||
es-get-iterator@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
|
||||
integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
|
||||
dependencies:
|
||||
es-abstract "^1.17.4"
|
||||
has-symbols "^1.0.1"
|
||||
is-arguments "^1.0.4"
|
||||
is-map "^2.0.1"
|
||||
is-set "^2.0.1"
|
||||
is-string "^1.0.5"
|
||||
isarray "^2.0.5"
|
||||
|
||||
es-to-primitive@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
|
||||
|
|
@ -3039,11 +3115,21 @@ is-accessor-descriptor@^1.0.0:
|
|||
dependencies:
|
||||
kind-of "^6.0.0"
|
||||
|
||||
is-arguments@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
|
||||
integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
|
||||
|
||||
is-arrayish@^0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
|
||||
integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
|
||||
|
||||
is-bigint@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
|
||||
integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
|
||||
|
||||
is-binary-path@~2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
|
||||
|
|
@ -3051,6 +3137,11 @@ is-binary-path@~2.1.0:
|
|||
dependencies:
|
||||
binary-extensions "^2.0.0"
|
||||
|
||||
is-boolean-object@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
|
||||
integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
|
||||
|
||||
is-buffer@^1.1.5:
|
||||
version "1.1.6"
|
||||
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
|
||||
|
|
@ -3061,6 +3152,11 @@ is-callable@^1.1.4, is-callable@^1.1.5:
|
|||
resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
|
||||
integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
|
||||
|
||||
is-callable@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
|
||||
integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
|
||||
|
||||
is-ci@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
|
||||
|
|
@ -3087,7 +3183,7 @@ is-data-descriptor@^1.0.0:
|
|||
dependencies:
|
||||
kind-of "^6.0.0"
|
||||
|
||||
is-date-object@^1.0.1:
|
||||
is-date-object@^1.0.1, is-date-object@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
|
||||
integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
|
||||
|
|
@ -3162,11 +3258,21 @@ is-installed-globally@^0.3.1:
|
|||
global-dirs "^2.0.1"
|
||||
is-path-inside "^3.0.1"
|
||||
|
||||
is-map@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
|
||||
integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
|
||||
|
||||
is-npm@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
|
||||
integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
|
||||
|
||||
is-number-object@^1.0.3:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
|
||||
integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
|
||||
|
||||
is-number@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
|
||||
|
|
@ -3203,11 +3309,28 @@ is-regex@^1.0.5:
|
|||
dependencies:
|
||||
has "^1.0.3"
|
||||
|
||||
is-regex@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
|
||||
integrity sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==
|
||||
dependencies:
|
||||
has-symbols "^1.0.1"
|
||||
|
||||
is-set@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
|
||||
integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
|
||||
|
||||
is-stream@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
|
||||
integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
|
||||
|
||||
is-string@^1.0.4, is-string@^1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
|
||||
integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
|
||||
|
||||
is-symbol@^1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
|
||||
|
|
@ -3224,11 +3347,31 @@ is-type-of@^1.0.0:
|
|||
is-class-hotfix "~0.0.6"
|
||||
isstream "~0.1.2"
|
||||
|
||||
is-typed-array@^1.1.3:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
|
||||
integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
|
||||
dependencies:
|
||||
available-typed-arrays "^1.0.0"
|
||||
es-abstract "^1.17.4"
|
||||
foreach "^2.0.5"
|
||||
has-symbols "^1.0.1"
|
||||
|
||||
is-typedarray@^1.0.0, is-typedarray@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
|
||||
integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
|
||||
|
||||
is-weakmap@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
|
||||
integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
|
||||
|
||||
is-weakset@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
|
||||
integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
|
||||
|
||||
is-windows@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
|
||||
|
|
@ -3254,6 +3397,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
|
||||
integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
|
||||
|
||||
isarray@^2.0.5:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
|
||||
integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
|
||||
|
||||
isbinaryfile@^4.0.6:
|
||||
version "4.0.6"
|
||||
resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
|
||||
|
|
@ -4671,6 +4819,14 @@ object-inspect@^1.7.0:
|
|||
resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
|
||||
integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
|
||||
|
||||
object-is@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
|
||||
integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
|
||||
dependencies:
|
||||
define-properties "^1.1.3"
|
||||
es-abstract "^1.17.5"
|
||||
|
||||
object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
|
||||
|
|
@ -5402,6 +5558,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
|
|||
extend-shallow "^3.0.2"
|
||||
safe-regex "^1.1.0"
|
||||
|
||||
regexp.prototype.flags@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
|
||||
integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
|
||||
dependencies:
|
||||
define-properties "^1.1.3"
|
||||
es-abstract "^1.17.0-next.1"
|
||||
|
||||
regexparam@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
|
||||
integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
|
||||
|
||||
regexpp@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
|
||||
|
|
@ -5735,6 +5904,14 @@ shortid@^2.2.8:
|
|||
dependencies:
|
||||
nanoid "^2.1.0"
|
||||
|
||||
side-channel@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
|
||||
integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
|
||||
dependencies:
|
||||
es-abstract "^1.17.0-next.1"
|
||||
object-inspect "^1.7.0"
|
||||
|
||||
signal-exit@^3.0.0, signal-exit@^3.0.2:
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
|
||||
|
|
@ -5987,7 +6164,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
|
|||
is-fullwidth-code-point "^3.0.0"
|
||||
strip-ansi "^6.0.0"
|
||||
|
||||
string.prototype.trimend@^1.0.0:
|
||||
string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
|
||||
integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
|
||||
|
|
@ -6013,7 +6190,7 @@ string.prototype.trimright@^2.1.1:
|
|||
es-abstract "^1.17.5"
|
||||
string.prototype.trimend "^1.0.0"
|
||||
|
||||
string.prototype.trimstart@^1.0.0:
|
||||
string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
|
||||
integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
|
||||
|
|
@ -6143,6 +6320,11 @@ supports-color@^7.1.0:
|
|||
dependencies:
|
||||
has-flag "^4.0.0"
|
||||
|
||||
svelte@^3.9.2:
|
||||
version "3.24.0"
|
||||
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8"
|
||||
integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw==
|
||||
|
||||
symbol-tree@^3.2.2:
|
||||
version "3.2.4"
|
||||
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
|
||||
|
|
@ -6641,11 +6823,44 @@ whatwg-url@^7.0.0:
|
|||
tr46 "^1.0.1"
|
||||
webidl-conversions "^4.0.2"
|
||||
|
||||
which-boxed-primitive@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
|
||||
integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
|
||||
dependencies:
|
||||
is-bigint "^1.0.0"
|
||||
is-boolean-object "^1.0.0"
|
||||
is-number-object "^1.0.3"
|
||||
is-string "^1.0.4"
|
||||
is-symbol "^1.0.2"
|
||||
|
||||
which-collection@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
|
||||
integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
|
||||
dependencies:
|
||||
is-map "^2.0.1"
|
||||
is-set "^2.0.1"
|
||||
is-weakmap "^2.0.1"
|
||||
is-weakset "^2.0.1"
|
||||
|
||||
which-module@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
|
||||
integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
|
||||
|
||||
which-typed-array@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
|
||||
integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
|
||||
dependencies:
|
||||
available-typed-arrays "^1.0.2"
|
||||
es-abstract "^1.17.5"
|
||||
foreach "^2.0.5"
|
||||
function-bind "^1.1.1"
|
||||
has-symbols "^1.0.1"
|
||||
is-typed-array "^1.1.3"
|
||||
|
||||
which@^1.2.9, which@^1.3.0:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
|
||||
|
|
|
|||
|
|
@ -53,9 +53,9 @@
|
|||
state[model] = state[model] ? [...state[model], json] : [json]
|
||||
return state
|
||||
})
|
||||
|
||||
|
||||
// wipe form, if new record, otherwise update
|
||||
// model to get new _rev
|
||||
// model to get new _rev
|
||||
if (isNew) {
|
||||
resetForm()
|
||||
} else {
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
}
|
||||
record = {
|
||||
modelId: model
|
||||
modelId: model,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -118,21 +118,23 @@
|
|||
|
||||
onMount(() => {
|
||||
const routeParams = _bb.routeParams()
|
||||
recordId = Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
|
||||
recordId =
|
||||
Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
|
||||
isNew = !recordId || recordId === "new"
|
||||
|
||||
if (isNew) {
|
||||
record = { modelId: model }
|
||||
} else {
|
||||
const GET_RECORD_URL = `/api/${model}/records/${recordId}`
|
||||
_bb.api.get(GET_RECORD_URL)
|
||||
_bb.api
|
||||
.get(GET_RECORD_URL)
|
||||
.then(response => response.json())
|
||||
.then(rec => {
|
||||
record = rec
|
||||
setForm(rec)
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<form class="form" on:submit|preventDefault>
|
||||
|
|
@ -164,14 +166,14 @@
|
|||
<button on:click={save} class:saved>
|
||||
{#if saved}
|
||||
<div in:fade>
|
||||
<span class:saved style="margin-right: 5px">🎉</span>Success<span class:saved style="margin-left: 5px">🎉</span>
|
||||
<span class:saved style="margin-right: 5px">🎉</span>
|
||||
Success
|
||||
<span class:saved style="margin-left: 5px">🎉</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div>
|
||||
{buttonText || "Submit Form"}
|
||||
</div>
|
||||
<div>{buttonText || 'Submit Form'}</div>
|
||||
{/if}
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -243,7 +245,7 @@
|
|||
|
||||
button.saved {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
|
|
|
|||
|
|
@ -53,9 +53,9 @@
|
|||
state[model] = state[model] ? [...state[model], json] : [json]
|
||||
return state
|
||||
})
|
||||
|
||||
|
||||
// wipe form, if new record, otherwise update
|
||||
// model to get new _rev
|
||||
// model to get new _rev
|
||||
if (isNew) {
|
||||
resetForm()
|
||||
} else {
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
}
|
||||
record = {
|
||||
modelId: model
|
||||
modelId: model,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -118,21 +118,23 @@
|
|||
|
||||
onMount(() => {
|
||||
const routeParams = _bb.routeParams()
|
||||
recordId = Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
|
||||
recordId =
|
||||
Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
|
||||
isNew = !recordId || recordId === "new"
|
||||
|
||||
if (isNew) {
|
||||
record = { modelId: model }
|
||||
} else {
|
||||
const GET_RECORD_URL = `/api/${model}/records/${recordId}`
|
||||
_bb.api.get(GET_RECORD_URL)
|
||||
_bb.api
|
||||
.get(GET_RECORD_URL)
|
||||
.then(response => response.json())
|
||||
.then(rec => {
|
||||
record = rec
|
||||
setForm(rec)
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<form class="form" on:submit|preventDefault>
|
||||
|
|
@ -164,14 +166,14 @@
|
|||
<button on:click={save} class:saved>
|
||||
{#if saved}
|
||||
<div in:fade>
|
||||
<span class:saved style="margin-right: 5px">🎉</span>Success<span class:saved style="margin-left: 5px">🎉</span>
|
||||
<span class:saved style="margin-right: 5px">🎉</span>
|
||||
Success
|
||||
<span class:saved style="margin-left: 5px">🎉</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div>
|
||||
{buttonText || "Submit Form"}
|
||||
</div>
|
||||
<div>{buttonText || 'Submit Form'}</div>
|
||||
{/if}
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -234,7 +236,7 @@
|
|||
|
||||
button.saved {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
|
||||
<div class="login-button-container">
|
||||
<button disabled={loading} on:click={login} class={_buttonClass}>
|
||||
{buttonText || "Login"}
|
||||
{buttonText || 'Login'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue