Add global app theme picker and use it in client preview
This commit is contained in:
Andrew Kingston
parent
6f0bbce083
commit
f2be9501d3
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -44,6 +44,7 @@
|
|||
screen,
|
||||
selectedComponentId,
|
||||
previewType: $store.currentFrontEndType,
|
||||
theme: $store.theme,
|
||||
}
|
||||
|
||||
// Saving pages and screens to the DB causes them to have _revs.
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
<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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue