Add global app theme picker and use it in client preview

5 years ago · f2be9501d3
11 changed files with 93 additions and 1415 deletions
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@ -8,7 +8,6 @@ import {
  selectedComponent,
  selectedAccessRole,
 } from "builderStore"
-// Backendstores
 import {
  datasources,
  integrations,
@ -43,6 +42,7 @@ const INITIAL_FRONTEND_STATE = {
  appId: "",
  routes: {},
  clientLibPath: "",
+  theme: "",
 }

 export const getFrontendStore = () => {
@ -62,6 +62,7 @@ export const getFrontendStore = () => {
        url: application.url,
        layouts,
        screens,
+        theme: application.theme,
        hasAppPackage: true,
        appInstance: application.instance,
        clientLibPath,
@ -79,6 +80,20 @@ export const getFrontendStore = () => {
      database.set(application.instance)
      tables.init()
    },
+    theme: {
+      save: async theme => {
+        const appId = get(store).appId
+        const response = await api.put(`/api/applications/${appId}`, { theme })
+        if (response.status === 200) {
+          store.update(state => {
+            state.theme = theme
+            return state
+          })
+        } else {
+          throw new Error("Error updating theme")
+        }
+      },
+    },
    routing: {
      fetch: async () => {
        const response = await api.get("/api/routing")
--- a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
+++ b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
@ -0,0 +1,38 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { store } from "builderStore"
+
+  const themeOptions = [
+    {
+      label: "Lightest",
+      value: "spectrum--lightest",
+    },
+    {
+      label: "Light",
+      value: "spectrum--light",
+    },
+    {
+      label: "Dark",
+      value: "spectrum--dark",
+    },
+    {
+      label: "Darkest",
+      value: "spectrum--darkest",
+    },
+  ]
+</script>
+
+<div>
+  <Select
+    value={$store.theme || "spectrum--lightest"}
+    options={themeOptions}
+    placeholder={null}
+    on:change={e => store.actions.theme.save(e.detail)}
+  />
+</div>
+
+<style>
+  div {
+    padding-right: 8px;
+  }
+</style>
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@ -44,6 +44,7 @@
    screen,
    selectedComponentId,
    previewType: $store.currentFrontEndType,
+    theme: $store.theme,
  }

  // Saving pages and screens to the DB causes them to have _revs.
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
@ -46,7 +46,14 @@ export default `
        }

        // Extract data from message
-        const { selectedComponentId, layout, screen, previewType, appId } = JSON.parse(event.data)
+        const {
+          selectedComponentId,
+          layout,
+          screen,
+          previewType,
+          appId,
+          theme
+        } = JSON.parse(event.data)

        // Set some flags so the app knows we're in the builder
        window["##BUDIBASE_IN_BUILDER##"] = true
@ -56,6 +63,7 @@ export default `
        window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
        window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
        window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
+        window["##BUDIBASE_PREVIEW_THEME##"] = theme

        // Initialise app
        if (window.loadBudibase) {
--- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
@ -13,6 +13,7 @@
  import { FrontendTypes } from "constants"
  import { findComponent, findComponentPath } from "builderStore/storeUtils"
  import { get } from "svelte/store"
+  import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte"

  // Cache previous values so we don't update the URL more than necessary
  let previousType
@ -147,7 +148,10 @@

  <div class="preview-pane">
    {#if $currentAsset}
-      <ComponentSelectionList />
+      <div class="preview-header">
+        <ComponentSelectionList />
+        <AppThemeSelect />
+      </div>
      <div class="preview-content">
        <CurrentItemPreview />
      </div>
@ -193,6 +197,10 @@
    gap: var(--spacing-m);
    padding: var(--spacing-xl) 40px;
  }
+  .preview-header {
+    display: grid;
+    grid-template-columns: 1fr 100px;
+  }
  .preview-content {
    flex: 1 1 auto;
  }
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@ -55,6 +55,8 @@
      }
    }
  }
+
+  $: themeClass = $builderStore.theme || "spectrum--lightest"
 </script>

 {#if dataLoaded && $screenStore.activeLayout}
@ -62,7 +64,7 @@
    id="spectrum-root"
    lang="en"
    dir="ltr"
-    class="spectrum spectrum--medium spectrum--light"
+    class="spectrum spectrum--medium {themeClass}"
  >
    <Provider key="user" data={$authStore} {actions}>
      <div id="app-root">
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@ -13,6 +13,7 @@ const loadBudibase = () => {
    selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
    previewId: window["##BUDIBASE_PREVIEW_ID##"],
    previewType: window["##BUDIBASE_PREVIEW_TYPE##"],
+    theme: window["##BUDIBASE_PREVIEW_THEME##"],
  })

  // Create app if one hasn't been created yet
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@ -1651,46 +1651,6 @@
        "label": "Schema",
        "key": "dataSource"
      },
-      {
-        "type": "select",
-        "label": "Theme",
-        "key": "theme",
-        "defaultValue": "spectrum--light",
-        "options": [
-          {
-            "label": "Lightest",
-            "value": "spectrum--lightest"
-          },
-          {
-            "label": "Light",
-            "value": "spectrum--light"
-          },
-          {
-            "label": "Dark",
-            "value": "spectrum--dark"
-          },
-          {
-            "label": "Darkest",
-            "value": "spectrum--darkest"
-          }
-        ]
-      },
-      {
-        "type": "select",
-        "label": "Size",
-        "key": "size",
-        "defaultValue": "spectrum--medium",
-        "options": [
-          {
-            "label": "Medium",
-            "value": "spectrum--medium"
-          },
-          {
-            "label": "Large",
-            "value": "spectrum--large"
-          }
-        ]
-      },
      {
        "type": "boolean",
        "label": "Disabled",
@ -2067,46 +2027,6 @@
        "key": "rowCount",
        "defaultValue": 8
      },
-      {
-        "type": "select",
-        "label": "Theme",
-        "key": "theme",
-        "defaultValue": "spectrum--light",
-        "options": [
-          {
-            "label": "Lightest",
-            "value": "spectrum--lightest"
-          },
-          {
-            "label": "Light",
-            "value": "spectrum--light"
-          },
-          {
-            "label": "Dark",
-            "value": "spectrum--dark"
-          },
-          {
-            "label": "Darkest",
-            "value": "spectrum--darkest"
-          }
-        ]
-      },
-      {
-        "type": "select",
-        "label": "Size",
-        "key": "size",
-        "defaultValue": "spectrum--medium",
-        "options": [
-          {
-            "label": "Medium",
-            "value": "spectrum--medium"
-          },
-          {
-            "label": "Large",
-            "value": "spectrum--large"
-          }
-        ]
-      },
      {
        "type": "multifield",
        "label": "Columns",
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@ -5,8 +5,6 @@
  import { generateID } from "../helpers"

  export let dataSource
-  export let theme
-  export let size
  export let disabled = false
  export let initialValues

@ -160,14 +158,7 @@
  {actions}
  data={{ ...$formState.values, tableId: dataSource?.tableId }}
 >
-  <div
-    lang="en"
-    dir="ltr"
-    use:styleable={$component.styles}
-    class={`spectrum ${size || "spectrum--medium"} ${
-      theme || "spectrum--light"
-    }`}
-  >
+  <div use:styleable={$component.styles}>
    {#if loaded}
      <slot />
    {/if}
--- a/packages/standard-components/src/table/Table.svelte
+++ b/packages/standard-components/src/table/Table.svelte
@ -3,8 +3,6 @@
  import { Table } from "@budibase/bbui"
  import SlotRenderer from "./SlotRenderer.svelte"

-  export let theme
-  export let size
  export let dataProvider
  export let columns
  export let showAutoColumns
@ -73,12 +71,7 @@
  }
 </script>

-<div
-  lang="en"
-  dir="ltr"
-  use:styleable={$component.styles}
-  class={`spectrum ${size || "spectrum--medium"} ${theme || "spectrum--light"}`}
->
+<div use:styleable={$component.styles}>
  <Table
    {data}
    {schema}