MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #220 from Budibase/component-panel/colorpicker 

Colorpicker functionality for components panel
This commit is contained in:
Conor_Mack 2020-04-29 16:03:31 +01:00 committed by GitHub
parent 1efc3dba72 b9ac53c6c1
commit 67568cb6f8
9 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 Input from "../common/Input.svelte"
import PropertyCascader from "./PropertyCascader" import PropertyCascader from "./PropertyCascader"
import { isBinding, getBinding, setBinding } from "../common/binding" import { isBinding, getBinding, setBinding } from "../common/binding"
import Colorpicker from "../common/Colorpicker.svelte"
export let value = "" export let value = ""
export let onChanged = () => {} export let onChanged = () => {}
@ -36,6 +37,8 @@
{/if} {/if}
{/each} {/each}
</select> </select>
{:else if type === 'colour'}
<Colorpicker {onChanged} {value} />
{:else} {:else}
<PropertyCascader {onChanged} {value} /> <PropertyCascader {onChanged} {value} />
{/if} {/if}

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

@ -80,4 +80,5 @@ export const types = {
asset: propType(() => "", isString, defaultDef("asset")), asset: propType(() => "", isString, defaultDef("asset")),
event: propType(() => [], isEventList, defaultDef("event")), event: propType(() => [], isEventList, defaultDef("event")),
state: propType(() => emptyState(), isBound, defaultDef("state")), 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/bundle.css'>
<link rel='stylesheet' href='/_builder/fonts.css'> <link rel='stylesheet' href='/_builder/fonts.css'>
<link rel='stylesheet' href="/_builder/uikit.min.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> </head>
<body id="app"> <body id="app">

2
packages/server/.gitignore vendored
View File

@ -3,4 +3,6 @@ myapps/
config.js config.js
/builder/* /builder/*
!/builder/assets/ !/builder/assets/
!/builder/pickr.min.js
!/builder/nano.min.css
public/ 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

20
packages/standard-components/components.json
View File

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

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

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