Add preview device selection buttons and pass device preview down to client app

packages/builder/src/builderStore/store/frontend.js

@@ -56,6 +56,7 @@ const INITIAL_FRONTEND_STATE = {
   clientLibPath: "",
   theme: "",
   customTheme: {},
+  previewDevice: "desktop",
 }
 
 export const getFrontendStore = () => {
@@ -230,6 +231,12 @@ export const getFrontendStore = () => {
           await store.actions.layouts.save(selectedAsset)
         }
       },
+      setDevice: device => {
+        store.update(state => {
+          state.previewDevice = device
+          return state
+        })
+      },
     },
     layouts: {
       select: layoutId => {

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -50,6 +50,7 @@
     previewType: $store.currentFrontEndType,
     theme: $store.theme,
     customTheme: $store.customTheme,
+    previewDevice: $store.previewDevice,
   }
 
   // Saving pages and screens to the DB causes them to have _revs.
@@ -140,11 +141,12 @@
     </div>
   {/if}
   <iframe
-    style="height: 100%; width: 100%"
     title="componentPreview"
     bind:this={iframe}
     srcdoc={template}
     class:hidden={loading || error}
+    class:tablet={$store.previewDevice === "tablet"}
+    class:mobile={$store.previewDevice === "mobile"}
   />
 </div>
 <ConfirmDialog
@@ -160,6 +162,8 @@
   .component-container {
     grid-row-start: middle;
     grid-column-start: middle;
+    display: grid;
+    place-items: center;
     position: relative;
     overflow: hidden;
     margin: auto;
@@ -200,4 +204,20 @@
     font-weight: 400;
     margin: 0;
   }
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+  /*iframe.tablet {*/
+  /*  width: 1024px;*/
+  /*  height: 768px;*/
+  /*}*/
+  /*iframe.mobile {*/
+  /*  width: calc(390px + 16px);*/
+  /*  height: calc(844px + 16px);*/
+  /*}*/
+  /*iframe.mobile :global(#spectrum-root) {*/
+  /*  border-radius: 12px;*/
+  /*}*/
 </style>

packages/builder/src/components/design/AppPreview/DevicePreviewSelect.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { ActionGroup, ActionButton } from "@budibase/bbui"
+  import { store } from "builderStore"
+</script>
+
+<ActionGroup compact>
+  <ActionButton
+    icon="DeviceDesktop"
+    selected={$store.previewDevice === "desktop"}
+    on:click={() => store.actions.preview.setDevice("desktop")}
+  />
+  <ActionButton
+    icon="DeviceTablet"
+    selected={$store.previewDevice === "tablet"}
+    on:click={() => store.actions.preview.setDevice("tablet")}
+  />
+  <ActionButton
+    icon="DevicePhone"
+    selected={$store.previewDevice === "mobile"}
+    on:click={() => store.actions.preview.setDevice("mobile")}
+  />
+</ActionGroup>

packages/builder/src/components/design/AppPreview/iframeTemplate.js

@@ -67,7 +67,8 @@ export default `
           previewType,
           appId,
           theme,
-          customTheme
+          customTheme,
+          previewDevice
         } = parsed
 
         // Set some flags so the app knows we're in the builder
@@ -80,6 +81,7 @@ export default `
         window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
         window["##BUDIBASE_PREVIEW_THEME##"] = theme
         window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme
+        window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice
 
         // Initialise app
         try {

packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte

@@ -15,6 +15,7 @@
   import { get } from "svelte/store"
   import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte"
   import ThemeEditor from "components/design/AppPreview/ThemeEditor.svelte"
+  import DevicePreviewSelect from "components/design/AppPreview/DevicePreviewSelect.svelte"
 
   // Cache previous values so we don't update the URL more than necessary
   let previousType
@@ -151,6 +152,7 @@
     {#if $currentAsset}
       <div class="preview-header">
         <ComponentSelectionList />
+        <DevicePreviewSelect />
         {#if $store.clientFeatures.customThemes}
           <ThemeEditor />
         {:else if $store.clientFeatures.spectrumThemes}
@@ -209,6 +211,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
+    gap: 1rem;
   }
   .preview-header > :global(*) {
     flex: 0 0 auto;