From 1a1aa5963d76e14b420aa08ec1da39227624d45b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 4 Jan 2021 18:39:17 +0000
Subject: [PATCH] Add ability to enter custom component CSS

---
 .../src/builderStore/store/frontend.js        | 26 +++++++++----------
 .../ComponentPropertiesPanel.svelte           |  7 ++++-
 .../userInterface/DesignView.svelte           | 20 +++++++++++++-
 packages/client/src/utils/styleable.js        | 16 +++++++-----
 4 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 263041aadd..a12e3a4538 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -366,20 +366,20 @@ export const getFrontendStore = () => {
         await Promise.all(promises)
       },
       updateStyle: async (type, name, value) => {
-        let promises = []
         const selected = get(selectedComponent)
-
-        store.update(state => {
-          if (!selected._styles) {
-            selected._styles = {}
-          }
-          selected._styles[type][name] = value
-
-          // save without messing with the store
-          promises.push(store.actions.preview.saveSelected())
-          return state
-        })
-        await Promise.all(promises)
+        if (!selected._styles) {
+          selected._styles = {}
+        }
+        selected._styles[type][name] = value
+        await store.actions.preview.saveSelected()
+      },
+      updateCustomStyle: async style => {
+        const selected = get(selectedComponent)
+        if (!selected._styles) {
+          selected._styles = {}
+        }
+        selected._styles.custom = style
+        await store.actions.preview.saveSelected()
       },
       updateProp: (name, value) => {
         store.update(state => {
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 4699a8e415..422dcca85c 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -31,6 +31,7 @@
     componentPropDefinition.properties[selectedCategory.value]
 
   const onStyleChanged = store.actions.components.updateStyle
+  const onCustomStyleChanged = store.actions.components.updateCustomStyle
 
   $: isComponentOrScreen =
     $store.currentView === "component" ||
@@ -93,7 +94,11 @@
 
 <div class="component-props-container">
   {#if selectedCategory.value === 'design'}
-    <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
+    <DesignView
+      {panelDefinition}
+      {componentInstance}
+      {onStyleChanged}
+      {onCustomStyleChanged} />
   {:else if selectedCategory.value === 'settings'}
     <SettingsView
       {componentInstance}
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 66ec1a2676..2ab7e8d5f6 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte"
+  import { TextArea, DetailSummary } from "@budibase/bbui"
   import PropertyGroup from "./PropertyGroup.svelte"
   import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
@@ -7,6 +7,7 @@
   export let componentInstance = {}
   export let componentDefinition = {}
   export let onStyleChanged = () => {}
+  export let onCustomStyleChanged = () => {}
 
   let selectedCategory = "normal"
   let propGroup = null
@@ -44,6 +45,17 @@
             open={currentGroup === groupName}
             on:open={() => (currentGroup = groupName)} />
         {/each}
+        <DetailSummary
+          name="Custom Styles"
+          on:open={() => (currentGroup = 'custom')}
+          show={currentGroup === 'custom'}
+          thin>
+          <div class="custom-styles">
+            <TextArea
+              value={componentInstance._styles.custom}
+              on:change={event => onCustomStyleChanged(event.target.value)} />
+          </div>
+        </DetailSummary>
       {:else}
         <div class="no-design">
           This component doesn't have any design properties.
@@ -85,4 +97,10 @@
     font-size: var(--font-size-xs);
     color: var(--grey-5);
   }
+
+  .custom-styles :global(textarea) {
+    font-family: monospace;
+    min-height: 120px;
+    font-size: var(--font-size-xs);
+  }
 </style>
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 1953139714..4c6f8ca3b7 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -1,16 +1,17 @@
 /**
  * Helper to build a CSS string from a style object
  */
-const buildStyleString = (styles, selected) => {
+const buildStyleString = (styleObject, customStyles, selected) => {
   let str = ""
-  if (selected) {
-    styles.border = "2px solid #0055ff !important"
-  }
-  Object.entries(styles).forEach(([style, value]) => {
+  Object.entries(styleObject).forEach(([style, value]) => {
     if (style && value != null) {
       str += `${style}: ${value}; `
     }
   })
+  str += customStyles || ""
+  if (selected) {
+    str += ";border: 2px solid #0055ff !important;"
+  }
   return str
 }
 
@@ -24,6 +25,7 @@ export const styleable = (node, styles = {}) => {
   // Creates event listeners and applies initial styles
   const setupStyles = newStyles => {
     const selected = newStyles.selected
+    const customStyles = newStyles.custom
     const normalStyles = newStyles.normal || {}
     const hoverStyles = {
       ...normalStyles,
@@ -31,11 +33,11 @@ export const styleable = (node, styles = {}) => {
     }
 
     applyNormalStyles = () => {
-      node.style = buildStyleString(normalStyles, selected)
+      node.style = buildStyleString(normalStyles, customStyles, selected)
     }
 
     applyHoverStyles = () => {
-      node.style = buildStyleString(hoverStyles, selected)
+      node.style = buildStyleString(hoverStyles, customStyles, selected)
     }
 
     // Add listeners to toggle hover styles