From 985ce2f50a02ada3a9a1f8a87f6e062a24cb03b4 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 29 Apr 2020 15:49:51 +0100
Subject: [PATCH] Colorpicker functionality for components panel

---
 .../src/components/common/Colorpicker.svelte  | 71 +++++++++++++++++++
 .../userInterface/StateBindingControl.svelte  |  3 +
 .../userInterface/pagesParsing/types.js       |  1 +
 packages/builder/src/index.html               |  2 +
 packages/standard-components/components.json  | 22 +++---
 .../standard-components/src/Heading.svelte    |  4 +-
 6 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 packages/builder/src/components/common/Colorpicker.svelte

diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte
new file mode 100644
index 0000000000..9cc3b3926a
--- /dev/null
+++ 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" />
diff --git a/packages/builder/src/components/userInterface/StateBindingControl.svelte b/packages/builder/src/components/userInterface/StateBindingControl.svelte
index 40f62b51f2..266b61cd50 100644
--- 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}
diff --git a/packages/builder/src/components/userInterface/pagesParsing/types.js b/packages/builder/src/components/userInterface/pagesParsing/types.js
index 05d95e1956..3f331776d1 100644
--- 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")),
 }
diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html
index c878c3d67a..c708eeab2f 100644
--- 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">
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 4c4df1e1fc..3bea545c9b 100644
--- 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",
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index f2aa583749..6a3a210dc3 100644
--- 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'}