Colorpicker functionality for components panel

6 years ago · 985ce2f50a
6 changed files with 92 additions and 11 deletions
--- a/packages/builder/src/components/common/Colorpicker.svelte
+++ b/packages/builder/src/components/common/Colorpicker.svelte
@ -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" />
--- a/packages/builder/src/components/userInterface/StateBindingControl.svelte
+++ b/packages/builder/src/components/userInterface/StateBindingControl.svelte
@ -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}
--- a/packages/builder/src/components/userInterface/pagesParsing/types.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/types.js
@ -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")),
 }
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@ -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">
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@ -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",
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@ -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'}