Merge branch 'master' of https://github.com/Budibase/budibase into welcome-screen-ui-fix
This commit is contained in:
commit
a0a2e7a734
31 changed files with 327 additions and 116 deletions
|
@ -29,7 +29,8 @@ import {
|
||||||
export const getStore = () => {
|
export const getStore = () => {
|
||||||
const initial = {
|
const initial = {
|
||||||
apps: [],
|
apps: [],
|
||||||
appname: "",
|
name: "",
|
||||||
|
description: "",
|
||||||
pages: DEFAULT_PAGES_OBJECT,
|
pages: DEFAULT_PAGES_OBJECT,
|
||||||
mainUi: {},
|
mainUi: {},
|
||||||
unauthenticatedUi: {},
|
unauthenticatedUi: {},
|
||||||
|
@ -101,7 +102,8 @@ const setPackage = (store, initial) => async pkg => {
|
||||||
|
|
||||||
initial.libraries = pkg.application.componentLibraries
|
initial.libraries = pkg.application.componentLibraries
|
||||||
initial.components = await fetchComponentLibDefinitions(pkg.application._id)
|
initial.components = await fetchComponentLibDefinitions(pkg.application._id)
|
||||||
initial.appname = pkg.application.name
|
initial.name = pkg.application.name
|
||||||
|
initial.description = pkg.application.description
|
||||||
initial.appId = pkg.application._id
|
initial.appId = pkg.application._id
|
||||||
initial.pages = pkg.pages
|
initial.pages = pkg.pages
|
||||||
initial.hasAppPackage = true
|
initial.hasAppPackage = true
|
||||||
|
|
|
@ -36,6 +36,7 @@
|
||||||
class={determineClassName(type)}
|
class={determineClassName(type)}
|
||||||
bind:value
|
bind:value
|
||||||
class:uk-form-danger={errors.length > 0}>
|
class:uk-form-danger={errors.length > 0}>
|
||||||
|
<option></option>
|
||||||
{#each options as opt}
|
{#each options as opt}
|
||||||
<option value={opt}>{opt}</option>
|
<option value={opt}>{opt}</option>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
$: currentAppInfo = {
|
$: currentAppInfo = {
|
||||||
appname: $store.appname,
|
name: $store.name,
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchUsers() {
|
async function fetchUsers() {
|
||||||
|
|
|
@ -1,15 +1,39 @@
|
||||||
<script>
|
<script>
|
||||||
import { Input, TextArea, Button } from "@budibase/bbui"
|
import { Input, TextArea, Button } from "@budibase/bbui"
|
||||||
|
import { store } from "builderStore"
|
||||||
|
import api from "builderStore/api"
|
||||||
import Title from "../TabTitle.svelte"
|
import Title from "../TabTitle.svelte"
|
||||||
|
|
||||||
|
async function updateApplication(data) {
|
||||||
|
const response = await api.put(`/api/${$store.appId}`, data)
|
||||||
|
const app = await response.json()
|
||||||
|
store.update(state => {
|
||||||
|
state = {
|
||||||
|
...state,
|
||||||
|
...data,
|
||||||
|
}
|
||||||
|
return state
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Title>General</Title>
|
<Title>General</Title>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="background">
|
<div class="background">
|
||||||
<Input thin edit placeholder="Enter your name" label="Name" />
|
<Input
|
||||||
|
on:save={e => updateApplication({ name: e.detail })}
|
||||||
|
thin
|
||||||
|
edit
|
||||||
|
value={$store.name}
|
||||||
|
label="Name" />
|
||||||
</div>
|
</div>
|
||||||
<div class="background">
|
<div class="background">
|
||||||
<TextArea thin edit placeholder="Enter your name" label="Name" />
|
<TextArea
|
||||||
|
on:save={e => updateApplication({ description: e.detail })}
|
||||||
|
thin
|
||||||
|
edit
|
||||||
|
value={$store.description}
|
||||||
|
label="Name" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -25,38 +25,69 @@
|
||||||
name: "Screen Placeholder",
|
name: "Screen Placeholder",
|
||||||
route: "*",
|
route: "*",
|
||||||
props: {
|
props: {
|
||||||
_component: "@budibase/standard-components/container",
|
"_id": "49c3d0a2-7028-46f0-b004-7eddf62ad01c",
|
||||||
type: "div",
|
"_component": "@budibase/standard-components/container",
|
||||||
_children: [
|
"_styles": {
|
||||||
{
|
"normal": {
|
||||||
_component: "@budibase/standard-components/container",
|
"padding": "0px",
|
||||||
_styles: { normal: {}, hover: {}, active: {}, selected: {} },
|
"font-family": "Roboto",
|
||||||
_id: "__screenslot__text",
|
"border-width": "0",
|
||||||
_code: "",
|
"border-style": "None",
|
||||||
className: "",
|
"text-align": "center"
|
||||||
onLoad: [],
|
|
||||||
type: "div",
|
|
||||||
_children: [
|
|
||||||
{
|
|
||||||
_component: "@budibase/standard-components/text",
|
|
||||||
_styles: {
|
|
||||||
normal: {},
|
|
||||||
hover: {},
|
|
||||||
active: {},
|
|
||||||
selected: {},
|
|
||||||
},
|
|
||||||
_id: "__screenslot__text_2",
|
|
||||||
_code: "",
|
|
||||||
text: "content",
|
|
||||||
font: "",
|
|
||||||
color: "",
|
|
||||||
textAlign: "inline",
|
|
||||||
verticalAlign: "inline",
|
|
||||||
formattingTag: "none",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
|
"hover": {},
|
||||||
|
"active": {},
|
||||||
|
"selected": {}
|
||||||
|
},
|
||||||
|
"_code": "",
|
||||||
|
"className": "",
|
||||||
|
"onLoad": [],
|
||||||
|
"type": "div",
|
||||||
|
"_children": [
|
||||||
|
{
|
||||||
|
"_id": "335428f7-f9ca-4acd-9e76-71bc8ad27324",
|
||||||
|
"_component": "@budibase/standard-components/container",
|
||||||
|
"_styles": {
|
||||||
|
"normal": {
|
||||||
|
"padding": "16px",
|
||||||
|
"border-style": "Dashed",
|
||||||
|
"border-width": "2px",
|
||||||
|
"border-color": "#8a8989fa"
|
||||||
|
},
|
||||||
|
"hover": {},
|
||||||
|
"active": {},
|
||||||
|
"selected": {}
|
||||||
|
},
|
||||||
|
"_code": "",
|
||||||
|
"className": "",
|
||||||
|
"onLoad": [],
|
||||||
|
"type": "div",
|
||||||
|
"_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
|
||||||
|
"_instanceName": "Container",
|
||||||
|
"_children": [
|
||||||
|
{
|
||||||
|
"_id": "ddb6a225-33ba-4ba8-91da-bc6a2697ebf9",
|
||||||
|
"_component": "@budibase/standard-components/heading",
|
||||||
|
"_styles": {
|
||||||
|
"normal": {
|
||||||
|
"font-family": "Roboto"
|
||||||
|
},
|
||||||
|
"hover": {},
|
||||||
|
"active": {},
|
||||||
|
"selected": {}
|
||||||
|
},
|
||||||
|
"_code": "",
|
||||||
|
"className": "",
|
||||||
|
"text": "Your screens go here",
|
||||||
|
"type": "h1",
|
||||||
|
"_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
|
||||||
|
"_instanceName": "Heading",
|
||||||
|
"_children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
],
|
],
|
||||||
|
"_instanceName": "Content Placeholder"
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -7,6 +7,9 @@ export default `<html>
|
||||||
height: 100%!important;
|
height: 100%!important;
|
||||||
font-family: Roboto !important;
|
font-family: Roboto !important;
|
||||||
}
|
}
|
||||||
|
*, *:before, *:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
.lay-__screenslot__text {
|
.lay-__screenslot__text {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
export { default as drag } from "./drag.js"
|
||||||
|
export { default as keyevents } from "./key-events.js"
|
|
@ -0,0 +1,41 @@
|
||||||
|
//events: Array<{trigger: fn}>
|
||||||
|
export default function(node, events = []) {
|
||||||
|
const ev = Object.entries(events)
|
||||||
|
let fns = []
|
||||||
|
|
||||||
|
for (let [trigger, fn] of ev) {
|
||||||
|
let f = addEvent(trigger, fn)
|
||||||
|
fns = [...fns, f]
|
||||||
|
}
|
||||||
|
|
||||||
|
function _scaffold(trigger, fn) {
|
||||||
|
return () => {
|
||||||
|
let trig = parseInt(trigger)
|
||||||
|
if (trig) {
|
||||||
|
if (event.keyCode === trig) {
|
||||||
|
fn(event)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (event.key === trigger) {
|
||||||
|
fn(event)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addEvent(trigger, fn) {
|
||||||
|
let f = _scaffold(trigger, fn)
|
||||||
|
node.addEventListener("keydown", f)
|
||||||
|
return f
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeEvents() {
|
||||||
|
fns.forEach(f => node.removeEventListener("keypress", f))
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
removeEvents()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
<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"
|
|
@ -3,17 +3,18 @@
|
||||||
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 {
|
||||||
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"
|
||||||
import Portal from "./Portal.svelte"
|
import Portal from "./Portal.svelte"
|
||||||
|
import {keyevents} from "../actions"
|
||||||
|
|
||||||
export let value = "#3ec1d3ff"
|
export let value = "#3ec1d3ff"
|
||||||
export let open = false
|
export let open = false
|
||||||
|
@ -27,10 +28,10 @@
|
||||||
let colorPicker = null
|
let colorPicker = null
|
||||||
let adder = null
|
let adder = null
|
||||||
|
|
||||||
let h = null
|
let h = 0
|
||||||
let s = null
|
let s = 0
|
||||||
let v = null
|
let v = 0
|
||||||
let a = null
|
let a = 0
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
@ -56,9 +57,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleEscape(e) {
|
function handleEscape() {
|
||||||
if (open && e.key === "Escape") {
|
if(open) {
|
||||||
open = false
|
open = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -164,11 +165,11 @@
|
||||||
<Portal>
|
<Portal>
|
||||||
<div
|
<div
|
||||||
class="colorpicker-container"
|
class="colorpicker-container"
|
||||||
|
use:keyevents={{"Escape": handleEscape}}
|
||||||
transition:fade
|
transition:fade
|
||||||
bind:this={colorPicker}
|
bind:this={colorPicker}
|
||||||
{style}
|
{style}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
on:keydown={handleEscape}
|
|
||||||
bind:clientHeight={pickerHeight}
|
bind:clientHeight={pickerHeight}
|
||||||
bind:clientWidth={pickerWidth}>
|
bind:clientWidth={pickerWidth}>
|
||||||
|
|
||||||
|
@ -213,11 +214,13 @@
|
||||||
{/if}
|
{/if}
|
||||||
{#if swatches.length !== 12}
|
{#if swatches.length !== 12}
|
||||||
<div
|
<div
|
||||||
|
tabindex="0"
|
||||||
|
use:keyevents={{"Enter": addSwatch}}
|
||||||
bind:this={adder}
|
bind:this={adder}
|
||||||
transition:fade
|
transition:fade
|
||||||
class="adder"
|
class="adder"
|
||||||
on:click={addSwatch}
|
class:shrink
|
||||||
class:shrink>
|
on:click={addSwatch}>
|
||||||
<span>+</span>
|
<span>+</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -244,6 +247,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
transition: top 0.1s, left 0.1s;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 5px 0px;
|
margin: 5px 0px;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
@ -295,7 +299,7 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
transition: flex 0.5s;
|
transition: flex 0.3s;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: #f1f3f4;
|
background: #f1f3f4;
|
||||||
|
@ -305,6 +309,8 @@
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
outline-color: #003cb0;
|
||||||
|
outline-width: thin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shrink {
|
.shrink {
|
|
@ -1,11 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import Colorpicker from "./Colorpicker.svelte"
|
import Colorpicker from "./Colorpicker.svelte"
|
||||||
import CheckedBackground from "./CheckedBackground.svelte"
|
import CheckedBackground from "./CheckedBackground.svelte"
|
||||||
import { createEventDispatcher, beforeUpdate } from "svelte"
|
import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
|
||||||
|
|
||||||
import { buildStyle } from "./helpers.js"
|
import {buildStyle, debounce} 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 = []
|
||||||
|
@ -49,8 +49,8 @@
|
||||||
dispatch("change", color.detail)
|
dispatch("change", color.detail)
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if (open && colorPreview) {
|
function calculateDimensions() {
|
||||||
const {
|
const {
|
||||||
top: spaceAbove,
|
top: spaceAbove,
|
||||||
width,
|
width,
|
||||||
bottom,
|
bottom,
|
||||||
|
@ -71,11 +71,15 @@
|
||||||
y = bottom
|
y = bottom
|
||||||
}
|
}
|
||||||
|
|
||||||
x = left + previewCenter - pickerWidth / 2
|
x = (left + previewCenter) - (220 / 2)
|
||||||
|
|
||||||
dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
|
dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: if(open && colorPreview) {
|
||||||
|
calculateDimensions()
|
||||||
|
}
|
||||||
|
|
||||||
$: previewStyle = buildStyle({ width, height, background: value })
|
$: previewStyle = buildStyle({ width, height, background: value })
|
||||||
$: errorPreviewStyle = buildStyle({ width, height })
|
$: errorPreviewStyle = buildStyle({ width, height })
|
||||||
$: pickerStyle = buildStyle({
|
$: pickerStyle = buildStyle({
|
||||||
|
@ -84,6 +88,8 @@
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<svelte:window on:resize={debounce(calculateDimensions, 200)} />
|
||||||
|
|
||||||
<div class="color-preview-container">
|
<div class="color-preview-container">
|
||||||
{#if !errorMsg}
|
{#if !errorMsg}
|
||||||
<CheckedBackground borderRadius="3px" backgroundSize="8px">
|
<CheckedBackground borderRadius="3px" backgroundSize="8px">
|
|
@ -1,9 +1,14 @@
|
||||||
<script>
|
<script>
|
||||||
|
import {createEventDispatcher} from "svelte"
|
||||||
|
import {keyevents} from "../actions"
|
||||||
|
|
||||||
export let text = ""
|
export let text = ""
|
||||||
export let selected = false
|
export let selected = false
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flatbutton" class:selected on:click>{text}</div>
|
<div class="flatbutton" tabindex="0" use:keyevents={{"Enter": () => dispatch("click")}} class:selected on:click>{text}</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.flatbutton {
|
.flatbutton {
|
||||||
|
@ -19,11 +24,14 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: #f1f3f4;
|
background: #f1f3f4;
|
||||||
|
outline-color: #003cb0;
|
||||||
|
outline-width: thin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #003cb0;
|
background-color: #003cb0;
|
||||||
border: none;
|
border: none;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount, createEventDispatcher } from "svelte"
|
import { onMount, createEventDispatcher } from "svelte"
|
||||||
import dragable from "./drag.js"
|
import {drag, keyevents} from "../actions"
|
||||||
|
|
||||||
export let value = 1
|
export let value = 1
|
||||||
export let type = "hue"
|
export let type = "hue"
|
||||||
|
@ -9,6 +9,10 @@
|
||||||
|
|
||||||
let slider
|
let slider
|
||||||
let sliderWidth = 0
|
let sliderWidth = 0
|
||||||
|
let upperLimit = type === "hue" ? 360 : 1
|
||||||
|
let incrementFactor = type === "hue" ? 1 : 0.01
|
||||||
|
|
||||||
|
const isWithinLimit = value => value >= 0 && value <= upperLimit
|
||||||
|
|
||||||
function onSliderChange(mouseX, isDrag = false) {
|
function onSliderChange(mouseX, isDrag = false) {
|
||||||
const { left, width } = slider.getBoundingClientRect()
|
const { left, width } = slider.getBoundingClientRect()
|
||||||
|
@ -17,12 +21,29 @@
|
||||||
let percentageClick = (clickPosition / sliderWidth).toFixed(2)
|
let percentageClick = (clickPosition / sliderWidth).toFixed(2)
|
||||||
|
|
||||||
if (percentageClick >= 0 && percentageClick <= 1) {
|
if (percentageClick >= 0 && percentageClick <= 1) {
|
||||||
let value = type === "hue" ? 360 * percentageClick : percentageClick
|
|
||||||
|
|
||||||
|
let value = type === "hue" ? 360 * percentageClick : percentageClick
|
||||||
dispatch("change", { color: value, isDrag })
|
dispatch("change", { color: value, isDrag })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleLeftKey() {
|
||||||
|
let v = value - incrementFactor
|
||||||
|
if(isWithinLimit(v)) {
|
||||||
|
value = v
|
||||||
|
dispatch("change", { color: value })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRightKey() {
|
||||||
|
let v = value + incrementFactor
|
||||||
|
if(isWithinLimit(v)) {
|
||||||
|
value = v
|
||||||
|
dispatch("change", { color: value })
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
$: thumbPosition =
|
$: thumbPosition =
|
||||||
type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
|
type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
|
||||||
|
|
||||||
|
@ -30,14 +51,16 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
tabindex="0"
|
||||||
bind:this={slider}
|
bind:this={slider}
|
||||||
|
use:keyevents={{37: handleLeftKey, 39: handleRightKey}}
|
||||||
bind:clientWidth={sliderWidth}
|
bind:clientWidth={sliderWidth}
|
||||||
on:click={event => onSliderChange(event.clientX)}
|
on:click={event => onSliderChange(event.clientX)}
|
||||||
class="color-format-slider"
|
class="color-format-slider"
|
||||||
class:hue={type === 'hue'}
|
class:hue={type === 'hue'}
|
||||||
class:alpha={type === 'alpha'}>
|
class:alpha={type === 'alpha'}>
|
||||||
<div
|
<div
|
||||||
use:dragable
|
use:drag
|
||||||
on:drag={e => onSliderChange(e.detail, true)}
|
on:drag={e => onSliderChange(e.detail, true)}
|
||||||
on:dragend
|
on:dragend
|
||||||
class="slider-thumb"
|
class="slider-thumb"
|
||||||
|
@ -54,6 +77,8 @@
|
||||||
margin: 10px 0px;
|
margin: 10px 0px;
|
||||||
border: 1px solid #e8e8ef;
|
border: 1px solid #e8e8ef;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
outline-color: #003cb0;
|
||||||
|
outline-width: thin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hue {
|
.hue {
|
|
@ -2,6 +2,7 @@
|
||||||
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"
|
||||||
|
import {keyevents} from "../actions"
|
||||||
|
|
||||||
export let hovered = false
|
export let hovered = false
|
||||||
export let color = "#fff"
|
export let color = "#fff"
|
||||||
|
@ -12,6 +13,8 @@
|
||||||
<div class="space">
|
<div class="space">
|
||||||
<CheckedBackground borderRadius="6px">
|
<CheckedBackground borderRadius="6px">
|
||||||
<div
|
<div
|
||||||
|
tabindex="0"
|
||||||
|
use:keyevents={{"Enter": () => dispatch("click")}}
|
||||||
in:fade
|
in:fade
|
||||||
class="swatch"
|
class="swatch"
|
||||||
style={`background: ${color};`}
|
style={`background: ${color};`}
|
||||||
|
@ -38,6 +41,8 @@
|
||||||
border: 1px solid #dedada;
|
border: 1px solid #dedada;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
|
outline-color: #003cb0;
|
||||||
|
outline-width: thin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.space {
|
.space {
|
|
@ -1,4 +1,4 @@
|
||||||
export const buildStyle = styles => {
|
export function buildStyle(styles) {
|
||||||
let str = ""
|
let str = ""
|
||||||
for (let s in styles) {
|
for (let s in styles) {
|
||||||
if (styles[s]) {
|
if (styles[s]) {
|
||||||
|
@ -12,3 +12,9 @@ export const buildStyle = styles => {
|
||||||
export const convertCamel = str => {
|
export const convertCamel = str => {
|
||||||
return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
|
return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const debounce = (fn, milliseconds) => {
|
||||||
|
return () => {
|
||||||
|
setTimeout(fn, milliseconds)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,2 +1,2 @@
|
||||||
import Colorpreview from "./Colorpreview.svelte"
|
import Colorpreview from "./components/Colorpreview.svelte"
|
||||||
export default Colorpreview
|
export default Colorpreview
|
||||||
|
|
|
@ -144,13 +144,15 @@ export const hslaToHSVA = ([h, s, l, a = 1]) => {
|
||||||
|
|
||||||
export const hsvaToHexa = (hsva, asString = false) => {
|
export const hsvaToHexa = (hsva, asString = false) => {
|
||||||
const [r, g, b, a] = hsvaToRgba(hsva)
|
const [r, g, b, a] = hsvaToRgba(hsva)
|
||||||
|
const padSingle = hex => (hex.length === 1 ? `0${hex}` : hex)
|
||||||
|
|
||||||
const hexa = [r, g, b]
|
let hexa = [r, g, b].map(v => {
|
||||||
.map(v => {
|
let hex = Math.round(v).toString(16)
|
||||||
let hex = Math.round(v).toString(16)
|
return padSingle(hex)
|
||||||
return hex.length === 1 ? `0${hex}` : hex
|
})
|
||||||
})
|
|
||||||
.concat(Math.round(a * 255).toString(16))
|
let alpha = padSingle(Math.round(a * 255).toString(16))
|
||||||
|
hexa = [...hexa, alpha]
|
||||||
return asString ? `#${hexa.join("")}` : hexa
|
return asString ? `#${hexa.join("")}` : hexa
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -406,7 +406,7 @@ export default {
|
||||||
{
|
{
|
||||||
name: "List",
|
name: "List",
|
||||||
_component: "@budibase/standard-components/list",
|
_component: "@budibase/standard-components/list",
|
||||||
description: "Shiny list",
|
description: "Renders all children once per record, of a given model",
|
||||||
icon: "ri-file-list-fill",
|
icon: "ri-file-list-fill",
|
||||||
properties: {
|
properties: {
|
||||||
design: { ...all },
|
design: { ...all },
|
||||||
|
@ -414,6 +414,18 @@ export default {
|
||||||
},
|
},
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "Record Detail",
|
||||||
|
_component: "@budibase/standard-components/recorddetail",
|
||||||
|
description:
|
||||||
|
"Loads a record, using an id from the URL, which can be used with {{ context }}, in children",
|
||||||
|
icon: "ri-profile-line",
|
||||||
|
properties: {
|
||||||
|
design: { ...all },
|
||||||
|
settings: [{ label: "Model", key: "model", control: ModelSelect }],
|
||||||
|
},
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "Map",
|
name: "Map",
|
||||||
_component: "@budibase/standard-components/datamap",
|
_component: "@budibase/standard-components/datamap",
|
||||||
|
|
|
@ -56,13 +56,13 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
|
||||||
|
|
||||||
const screenIndex = current !== -1 ? current : fallback
|
const screenIndex = current !== -1 ? current : fallback
|
||||||
|
|
||||||
onScreenSelected(screens[screenIndex], _url)
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
!url.state && history.pushState(_url, null, _url)
|
!url.state && history.pushState(_url, null, _url)
|
||||||
} catch (_) {
|
} catch (_) {
|
||||||
// ignoring an exception here as the builder runs an iframe, which does not like this
|
// ignoring an exception here as the builder runs an iframe, which does not like this
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onScreenSelected(screens[screenIndex], _url)
|
||||||
}
|
}
|
||||||
|
|
||||||
function click(e) {
|
function click(e) {
|
||||||
|
|
|
@ -90,6 +90,22 @@ exports.create = async function(ctx) {
|
||||||
ctx.message = `Application ${ctx.request.body.name} created successfully`
|
ctx.message = `Application ${ctx.request.body.name} created successfully`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
exports.update = async function(ctx) {
|
||||||
|
const clientId = await lookupClientId(ctx.params.applicationId)
|
||||||
|
const db = new CouchDB(ClientDb.name(clientId))
|
||||||
|
const application = await db.get(ctx.params.applicationId)
|
||||||
|
|
||||||
|
const data = ctx.request.body
|
||||||
|
const newData = { ...application, ...data }
|
||||||
|
|
||||||
|
const response = await db.put(newData)
|
||||||
|
data._rev = response.rev
|
||||||
|
|
||||||
|
ctx.status = 200
|
||||||
|
ctx.message = `Application ${application.name} updated successfully.`
|
||||||
|
ctx.body = response
|
||||||
|
}
|
||||||
|
|
||||||
const createEmptyAppPackage = async (ctx, app) => {
|
const createEmptyAppPackage = async (ctx, app) => {
|
||||||
const templateFolder = resolve(
|
const templateFolder = resolve(
|
||||||
__dirname,
|
__dirname,
|
||||||
|
|
|
@ -12,6 +12,7 @@ router
|
||||||
authorized(BUILDER),
|
authorized(BUILDER),
|
||||||
controller.fetchAppPackage
|
controller.fetchAppPackage
|
||||||
)
|
)
|
||||||
|
.put("/api/:applicationId", authorized(BUILDER), controller.update)
|
||||||
.post("/api/applications", authorized(BUILDER), controller.create)
|
.post("/api/applications", authorized(BUILDER), controller.create)
|
||||||
|
|
||||||
module.exports = router
|
module.exports = router
|
||||||
|
|
|
@ -17,6 +17,9 @@
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
*, *:before, *:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
{{ each(options.stylesheets) }}
|
{{ each(options.stylesheets) }}
|
||||||
|
|
|
@ -235,15 +235,14 @@
|
||||||
"description": "A configurable data list that attaches to your backend models.",
|
"description": "A configurable data list that attaches to your backend models.",
|
||||||
"data": true,
|
"data": true,
|
||||||
"props": {
|
"props": {
|
||||||
"model": "models",
|
"model": "models"
|
||||||
"layout": {
|
}
|
||||||
"type": "options",
|
},
|
||||||
"default": "list",
|
"recorddetail": {
|
||||||
"options": [
|
"description": "Loads a record, using an ID in the url",
|
||||||
"list",
|
"data": true,
|
||||||
"grid"
|
"props": {
|
||||||
]
|
"model": "models"
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"datamap": {
|
"datamap": {
|
||||||
|
|
|
@ -3,7 +3,6 @@
|
||||||
|
|
||||||
export let _bb
|
export let _bb
|
||||||
export let model
|
export let model
|
||||||
export let layout = "list"
|
|
||||||
|
|
||||||
let headers = []
|
let headers = []
|
||||||
let store = _bb.store
|
let store = _bb.store
|
||||||
|
@ -33,39 +32,5 @@
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class:grid={layout === 'grid'} class:list={layout === 'list'}>
|
<section bind:this={target}>
|
||||||
<div class="data-card" bind:this={target} />
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
|
||||||
.list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
font-family: Inter;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 5px 0 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-card {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-key {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 20px;
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
52
packages/standard-components/src/RecordDetail.svelte
Normal file
52
packages/standard-components/src/RecordDetail.svelte
Normal file
|
@ -0,0 +1,52 @@
|
||||||
|
<script>
|
||||||
|
import { onMount } from "svelte"
|
||||||
|
|
||||||
|
export let _bb
|
||||||
|
export let model
|
||||||
|
|
||||||
|
let headers = []
|
||||||
|
let store = _bb.store
|
||||||
|
let target
|
||||||
|
|
||||||
|
async function fetchFirstRecord() {
|
||||||
|
const FETCH_RECORDS_URL = `/api/views/all_${model}`
|
||||||
|
const response = await _bb.api.get(FETCH_RECORDS_URL)
|
||||||
|
if (response.status === 200) {
|
||||||
|
const allRecords = await response.json()
|
||||||
|
if (allRecords.length > 0) return allRecords[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchData() {
|
||||||
|
const pathParts = window.location.pathname.split("/")
|
||||||
|
|
||||||
|
let record
|
||||||
|
// if srcdoc, then we assume this is the builder preview
|
||||||
|
if(pathParts.length === 0 || pathParts[0] === "srcdoc") {
|
||||||
|
record = await fetchFirstRecord()
|
||||||
|
} else {
|
||||||
|
const id = pathParts[pathParts.length - 1]
|
||||||
|
const GET_RECORD_URL = `/api/${model}/records/${id}`
|
||||||
|
const response = await _bb.api.get(GET_RECORD_URL)
|
||||||
|
if (response.status === 200) {
|
||||||
|
record = await response.json()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (record) {
|
||||||
|
_bb.attachChildren(target, {
|
||||||
|
hydrate: false,
|
||||||
|
context: record,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
throw new Error("Failed to fetch record.", response)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
await fetchData()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section bind:this={target}>
|
||||||
|
</section>
|
|
@ -23,3 +23,4 @@ export { default as list } from "./List.svelte"
|
||||||
export { default as datasearch } from "./DataSearch.svelte"
|
export { default as datasearch } from "./DataSearch.svelte"
|
||||||
export { default as datamap } from "./DataMap.svelte"
|
export { default as datamap } from "./DataMap.svelte"
|
||||||
export { default as embed } from "./Embed.svelte"
|
export { default as embed } from "./Embed.svelte"
|
||||||
|
export { default as recorddetail } from "./RecordDetail.svelte"
|
||||||
|
|
Loading…
Reference in a new issue