CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-30 03:50:37 +12:00
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into feature/designer-routing

Browse source
This commit is contained in:
kevmodrome 2020-05-04 10:33:17 +02:00
parent 4514329dfa e5e100bcb1
commit a65f4e6acb
10 changed files with 98 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
packages/builder/src/components/common/Colorpicker.svelte Normal file
View file

@ -0,0 +1,71 @@
<script>
import { onMount, beforeUpdate, afterUpdate } from "svelte"
export let value = null
export let onChanged = () => {}
export let swatches = []
let picker
let cp = null
function getRecentColors() {
let colorStore = localStorage.getItem("bb:recentColors")
if (!!colorStore) {
swatches = JSON.parse(colorStore)
}
}
function setRecentColor(color) {
if (swatches.length >= 15) {
swatches.splice(0, 1)
picker.removeSwatch(0)
}
if (!swatches.includes(color)) {
swatches = [...swatches, color]
picker.addSwatch(color)
localStorage.setItem("bb:recentColors", JSON.stringify(swatches))
}
}
function createPicker() {
picker = Pickr.create({
el: cp,
theme: "nano",
default: value || "#000000",
swatches,
closeWithKey: "Escape",
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: true,
rgba: true,
input: true,
save: true,
},
},
})
}
afterUpdate(() => {
picker.setColor(value)
})
onMount(() => {
getRecentColors()
createPicker()
picker.on("save", (colour, instance) => {
let color = colour.toHEXA().toString()
onChanged(color)
setRecentColor(color)
picker.hide()
})
})
</script>
<div bind:this={cp} class="color-picker" />

3
packages/builder/src/components/userInterface/StateBindingControl.svelte
View file

@ -3,6 +3,7 @@
import Input from "../common/Input.svelte"
import PropertyCascader from "./PropertyCascader"
import { isBinding, getBinding, setBinding } from "../common/binding"
import Colorpicker from "../common/Colorpicker.svelte"
export let value = ""
export let onChanged = () => {}
@ -36,6 +37,8 @@
{/if}
{/each}
</select>
{:else if type === 'colour'}
<Colorpicker {onChanged} {value} />
{:else}
<PropertyCascader {onChanged} {value} />
{/if}

1
packages/builder/src/components/userInterface/pagesParsing/types.js
View file

@ -80,4 +80,5 @@ export const types = {
asset: propType(() => "", isString, defaultDef("asset")),
event: propType(() => [], isEventList, defaultDef("event")),
state: propType(() => emptyState(), isBound, defaultDef("state")),
colour: propType(() => "#000000", isString, defaultDef("colour")),
}

2
packages/builder/src/index.html
View file

@ -15,6 +15,8 @@
<link rel='stylesheet' href='/_builder/bundle.css'>
<link rel='stylesheet' href='/_builder/fonts.css'>
<link rel='stylesheet' href="/_builder/uikit.min.css">
<link rel='stylesheet' href="/_builder/nano.min.css">
<script src='/_builder/pickr.min.js'></script>
</head>
<body id="app">

BIN
packages/materialdesign-components/src/Card/index.js
View file

Binary file not shown.

2
packages/server/.gitignore vendored
View file

@ -3,4 +3,6 @@ myapps/
config.js
/builder/*
!/builder/assets/
!/builder/pickr.min.js
!/builder/nano.min.css
public/

1
packages/server/builder/nano.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

3
packages/server/builder/pickr.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

22
packages/standard-components/components.json
View file

@ -12,10 +12,10 @@
"props": {
"logoUrl": "string",
"title": "string",
"backgroundColor": "string",
"color": "string",
"backgroundColor": "colour",
"color": "colour",
"borderWidth": "string",
"borderColor": "string",
"borderColor": "colour",
"borderStyle": "string"
}
},
@ -30,8 +30,8 @@
"className": "string",
"disabled": "bool",
"onClick": "event",
"background": "string",
"color": "string",
"background": "colour",
"color": "colour",
"border": "string",
"padding": "string",
"hoverColor": "string",
@ -167,6 +167,7 @@
"children": false,
"props": {
"text": "string",
"color": "colour",
"fontFamily": {
"type": "options",
"default": "initial",
@ -182,8 +183,7 @@
"Lucida Sans Unicode"
]
},
"fontSize": "string",
"color": "string",
"fontSize": "string",
"textAlign": {
"type": "options",
"default": "inline",
@ -258,7 +258,8 @@
"description": "A HTML icon tag",
"props": {
"icon": "string",
"fontSize": "string"
"fontSize": "string",
"color": "colour"
}
},
"link": {
@ -267,8 +268,8 @@
"url": "string",
"openInNewTab": "bool",
"text": "string",
"color": "string",
"hoverColor": "string",
"color": "colour",
"hoverColor": "colour",
"underline": "bool",
"fontSize": "string",
"fontFamily": {
@ -355,6 +356,7 @@
"description": "An HTML H1 - H6 tag",
"props": {
"className": "string",
"color":"colour",
"text": "string",
"type": {
"type": "options",

4
packages/standard-components/src/Heading.svelte
View file

@ -5,11 +5,13 @@
export let _bb
export let text = ""
export let fontFamily = ""
export let color = ""
let containerElement
$: containerElement && !text && _bb.attachChildren(containerElement)
$: style = buildStyle({ "font-family": fontFamily })
$: style = buildStyle({ "font-family": fontFamily, color })
// $: console.log("HEADING", color)
</script>
{#if type === 'h1'}