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

Colorpicker functionality for components panel

pull/220/head
Conor_Mack 6 years ago
parent
827146867e
commit
985ce2f50a
6 changed files with 92 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 71
      packages/builder/src/components/common/Colorpicker.svelte
  2. 3
      packages/builder/src/components/userInterface/StateBindingControl.svelte
  3. 1
      packages/builder/src/components/userInterface/pagesParsing/types.js
  4. 2
      packages/builder/src/index.html
  5. 22
      packages/standard-components/components.json
  6. 4
      packages/standard-components/src/Heading.svelte

71
packages/builder/src/components/common/Colorpicker.svelte
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">

22
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",
@ -182,8 +183,7 @@
"Lucida Sans Unicode" "Lucida Sans Unicode"
] ]
}, },
"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'}

Write Preview
Loading…
Cancel
Save