diff --git a/LICENSE b/LICENSE index a6bd926020..e4721dea64 100644 --- a/LICENSE +++ b/LICENSE @@ -5,7 +5,6 @@ Each Budibase package has its own license: builder: GPLv3 server: GPLv3 client: MPLv2.0 -standard-components: MPLv2.0 You can consider Budibase to be GPLv3 licensed. diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte index 44b77e0bbe..18c93b6c5c 100644 --- a/packages/bbui/src/Form/Core/DatePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker.svelte @@ -13,6 +13,7 @@ export let enableTime = true export let value = null export let placeholder = null + export let appendTo = null const dispatch = createEventDispatcher() const flatpickrId = `${generateID()}-wrapper` @@ -24,6 +25,7 @@ altInput: true, altFormat: enableTime ? "F j Y, H:i" : "F j, Y", wrap: true, + appendTo, } const handleChange = event => { diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte index 9e0c40b11d..aff7ddc1c5 100644 --- a/packages/bbui/src/Form/DatePicker.svelte +++ b/packages/bbui/src/Form/DatePicker.svelte @@ -10,6 +10,7 @@ export let error = null export let enableTime = true export let placeholder = null + export let appendTo = null const dispatch = createEventDispatcher() const onChange = e => { @@ -26,6 +27,7 @@ {value} {placeholder} {enableTime} + {appendTo} on:change={onChange} /> diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte index ffaa99cb79..2f39fde0d9 100644 --- a/packages/bbui/src/Icon/Icon.svelte +++ b/packages/bbui/src/Icon/Icon.svelte @@ -36,7 +36,7 @@ transition: color var(--spectrum-global-animation-duration-100, 130ms); } svg.hoverable:hover { - color: var(--spectrum-alias-icon-color-selected); + color: var(--spectrum-alias-icon-color-selected-hover); cursor: pointer; } diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 887695d41e..903512d0fb 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -266,12 +266,16 @@ const getDeviceBindings = () => { * Gets all state bindings that are globally available. */ const getStateBindings = () => { - const safeState = makePropSafe("state") - return getAllStateVariables().map(key => ({ - type: "context", - runtimeBinding: `${safeState}.${makePropSafe(key)}`, - readableBinding: `State.${key}`, - })) + let bindings = [] + if (get(store).clientFeatures?.state) { + const safeState = makePropSafe("state") + bindings = getAllStateVariables().map(key => ({ + type: "context", + runtimeBinding: `${safeState}.${makePropSafe(key)}`, + readableBinding: `State.${key}`, + })) + } + return bindings } /** diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 192ade9e5d..7d0b9d0547 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -41,6 +41,8 @@ const INITIAL_FRONTEND_STATE = { spectrumThemes: false, intelligentLoading: false, deviceAwareness: false, + state: false, + customThemes: false, }, currentFrontEndType: "none", selectedScreenId: "", @@ -53,6 +55,7 @@ const INITIAL_FRONTEND_STATE = { routes: {}, clientLibPath: "", theme: "", + customTheme: {}, } export const getFrontendStore = () => { @@ -77,6 +80,7 @@ export const getFrontendStore = () => { layouts, screens, theme: application.theme || "spectrum--light", + customTheme: application.customTheme, hasAppPackage: true, appInstance: application.instance, clientLibPath, @@ -110,6 +114,22 @@ export const getFrontendStore = () => { } }, }, + customTheme: { + save: async customTheme => { + const appId = get(store).appId + const response = await api.put(`/api/applications/${appId}`, { + customTheme, + }) + if (response.status === 200) { + store.update(state => { + state.customTheme = customTheme + return state + }) + } else { + throw new Error("Error updating theme") + } + }, + }, routing: { fetch: async () => { const response = await api.get("/api/routing") diff --git a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte index 21dae25708..ec51688219 100644 --- a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte +++ b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte @@ -33,6 +33,6 @@ diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte index 38441d4323..85fb086b59 100644 --- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte @@ -49,6 +49,7 @@ selectedComponentId, previewType: $store.currentFrontEndType, theme: $store.theme, + customTheme: $store.customTheme, } // Saving pages and screens to the DB causes them to have _revs. diff --git a/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte b/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte new file mode 100644 index 0000000000..c5c85fad46 --- /dev/null +++ b/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte @@ -0,0 +1,140 @@ + + +
+ Theme +
+ + + +
+ + +
+
+ +
+