From f2be9501d3860f7a386f26784d10cbf85d96bd7a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 28 Jun 2021 12:55:11 +0100 Subject: [PATCH 01/39] Add global app theme picker and use it in client preview --- .../src/builderStore/store/frontend.js | 17 +- .../design/AppPreview/AppThemeSelect.svelte | 38 + .../AppPreview/CurrentItemPreview.svelte | 1 + .../design/AppPreview/iframeTemplate.js | 10 +- .../design/[assetType]/_layout.svelte | 10 +- .../client/src/components/ClientApp.svelte | 4 +- packages/client/src/index.js | 1 + packages/server/yarn.lock | 1327 +---------------- packages/standard-components/manifest.json | 80 - .../src/forms/InnerForm.svelte | 11 +- .../src/table/Table.svelte | 9 +- 11 files changed, 93 insertions(+), 1415 deletions(-) create mode 100644 packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index a462167ce2..a0a64b4504 100644 --- 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") diff --git a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte new file mode 100644 index 0000000000..c8dd8c3cff --- /dev/null +++ b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte @@ -0,0 +1,38 @@ + + +
+