diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index fa126bbc99..4bd62c0049 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -12,17 +12,11 @@ hoverStore, } from "stores/builder" import ConfirmDialog from "components/common/ConfirmDialog.svelte" - import { - ProgressCircle, - Layout, - Heading, - Body, - Icon, - notifications, - } from "@budibase/bbui" + import { Layout, Heading, Body, Icon, notifications } from "@budibase/bbui" import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw" import { findComponent, findComponentPath } from "helpers/components" import { isActive, goto } from "@roxi/routify" + import { ClientAppSkeleton } from "@budibase/frontend-core" let iframe let layout @@ -240,8 +234,16 @@
{#if loading} -
- +
+
{:else if error}
@@ -258,8 +260,6 @@ bind:this={iframe} src="/app/preview" class:hidden={loading || error} - class:tablet={$previewStore.previewDevice === "tablet"} - class:mobile={$previewStore.previewDevice === "mobile"} />
diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js index f724e1e4d9..f71420b12b 100644 --- a/packages/frontend-core/src/components/index.js +++ b/packages/frontend-core/src/components/index.js @@ -5,3 +5,4 @@ export { default as UserAvatar } from "./UserAvatar.svelte" export { default as UserAvatars } from "./UserAvatars.svelte" export { default as Updating } from "./Updating.svelte" export { Grid } from "./grid" +export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte" diff --git a/packages/frontend-core/src/themes/midnight.css b/packages/frontend-core/src/themes/midnight.css index e311452262..cf6a4fbd13 100644 --- a/packages/frontend-core/src/themes/midnight.css +++ b/packages/frontend-core/src/themes/midnight.css @@ -17,5 +17,8 @@ --modal-background: var(--spectrum-global-color-gray-50); --drop-shadow: rgba(0, 0, 0, 0.25) !important; --spectrum-global-color-blue-100: rgba(35, 40, 50) !important; + + --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); } diff --git a/packages/frontend-core/src/themes/nord.css b/packages/frontend-core/src/themes/nord.css index d47dbe8aa8..bc142db0fd 100644 --- a/packages/frontend-core/src/themes/nord.css +++ b/packages/frontend-core/src/themes/nord.css @@ -50,4 +50,7 @@ --modal-background: var(--spectrum-global-color-gray-50); --drop-shadow: rgba(0, 0, 0, 0.15) !important; --spectrum-global-color-blue-100: rgb(56, 65, 84) !important; + + --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); } diff --git a/packages/server/package.json b/packages/server/package.json index 45980a4be6..4f1a9fb3cc 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -52,6 +52,7 @@ "@budibase/pro": "0.0.0", "@budibase/shared-core": "0.0.0", "@budibase/string-templates": "0.0.0", + "@budibase/frontend-core": "0.0.0", "@budibase/types": "0.0.0", "@bull-board/api": "5.10.2", "@bull-board/koa": "5.10.2", diff --git a/packages/server/src/api/controllers/static/index.ts b/packages/server/src/api/controllers/static/index.ts index 5a3803e6d5..367934445a 100644 --- a/packages/server/src/api/controllers/static/index.ts +++ b/packages/server/src/api/controllers/static/index.ts @@ -1,7 +1,5 @@ import { InvalidFileExtensions } from "@budibase/shared-core" - import AppComponent from "./templates/BudibaseApp.svelte" - import { join } from "../../../utilities/centralPath" import * as uuid from "uuid" import { ObjectStoreBuckets } from "../../../constants" @@ -24,7 +22,13 @@ import AWS from "aws-sdk" import fs from "fs" import sdk from "../../../sdk" import * as pro from "@budibase/pro" -import { App, Ctx, ProcessAttachmentResponse } from "@budibase/types" +import { + UserCtx, + App, + Ctx, + ProcessAttachmentResponse, + Feature, +} from "@budibase/types" import { getAppMigrationVersion, getLatestMigrationId, @@ -32,6 +36,61 @@ import { import send from "koa-send" +const getThemeVariables = (theme: string) => { + if (theme === "spectrum--lightest") { + return ` + --spectrum-global-color-gray-50: rgb(255, 255, 255); + --spectrum-global-color-gray-200: rgb(244, 244, 244); + --spectrum-global-color-gray-300: rgb(234, 234, 234); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50); + ` + } + if (theme === "spectrum--light") { + return ` + --spectrum-global-color-gray-50: rgb(255, 255, 255); + --spectrum-global-color-gray-200: rgb(234, 234, 234); + --spectrum-global-color-gray-300: rgb(225, 225, 225); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50); + + ` + } + if (theme === "spectrum--dark") { + return ` + --spectrum-global-color-gray-100: rgb(50, 50, 50); + --spectrum-global-color-gray-200: rgb(62, 62, 62); + --spectrum-global-color-gray-300: rgb(74, 74, 74); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); + ` + } + if (theme === "spectrum--darkest") { + return ` + --spectrum-global-color-gray-100: rgb(30, 30, 30); + --spectrum-global-color-gray-200: rgb(44, 44, 44); + --spectrum-global-color-gray-300: rgb(57, 57, 57); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); + ` + } + if (theme === "spectrum--nord") { + return ` + --spectrum-global-color-gray-100: #3b4252; + + --spectrum-global-color-gray-200: #424a5c; + --spectrum-global-color-gray-300: #4c566a; + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); + ` + } + if (theme === "spectrum--midnight") { + return ` + --hue: 220; + --sat: 10%; + --spectrum-global-color-gray-100: hsl(var(--hue), var(--sat), 17%); + --spectrum-global-color-gray-200: hsl(var(--hue), var(--sat), 20%); + --spectrum-global-color-gray-300: hsl(var(--hue), var(--sat), 24%); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); + ` + } +} + export const toggleBetaUiFeature = async function (ctx: Ctx) { const cookieName = `beta:${ctx.params.feature}` @@ -146,7 +205,7 @@ const requiresMigration = async (ctx: Ctx) => { return requiresMigrations } -export const serveApp = async function (ctx: Ctx) { +export const serveApp = async function (ctx: UserCtx) { const needMigrations = await requiresMigration(ctx) const bbHeaderEmbed = @@ -167,9 +226,19 @@ export const serveApp = async function (ctx: Ctx) { const appInfo = await db.get(DocumentType.APP_METADATA) let appId = context.getAppId() + const hideDevTools = !!ctx.params.appUrl + const sideNav = appInfo.navigation.navigation === "Left" + const hideFooter = + ctx?.user?.license?.features?.includes(Feature.BRANDING) || false + const themeVariables = getThemeVariables(appInfo?.theme) + if (!env.isJest()) { const plugins = objectStore.enrichPluginURLs(appInfo.usedPlugins) + const { head, html, css } = AppComponent.render({ + hideDevTools, + sideNav, + hideFooter, metaImage: branding?.metaImageUrl || "https://res.cloudinary.com/daog6scxm/image/upload/v1698759482/meta-images/plain-branded-meta-image-coral_ocxmgu.png", @@ -194,7 +263,7 @@ export const serveApp = async function (ctx: Ctx) { ctx.body = await processString(appHbs, { head, body: html, - style: css.code, + css: `:root{${themeVariables}} ${css.code}`, appId, embedded: bbHeaderEmbed, }) diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte index 7819368fc0..63b293b4ca 100644 --- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte +++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte @@ -1,4 +1,6 @@ @@ -96,6 +102,7 @@ +
{#if clientLibPath}

There was an error loading your app

diff --git a/packages/server/src/api/controllers/static/templates/app.hbs b/packages/server/src/api/controllers/static/templates/app.hbs index 8c445158a0..b01b723c3e 100644 --- a/packages/server/src/api/controllers/static/templates/app.hbs +++ b/packages/server/src/api/controllers/static/templates/app.hbs @@ -1,8 +1,12 @@ - + {{{head}}} - +