Add option to open app preview in new tab

This commit is contained in:
Andrew Kingston 2023-07-10 13:53:37 +01:00
parent 52cd16f42d
commit d98c0bdcea
2 changed files with 30 additions and 13 deletions

View File

@ -15,6 +15,7 @@
}
onMount(() => {
window.isBuilder = true
window.closePreview = () => {
store.update(state => ({
...state,

View File

@ -1,6 +1,6 @@
<script>
import { Heading, Select, ActionButton } from "@budibase/bbui"
import { devToolsStore } from "../../stores"
import { devToolsStore, appStore } from "../../stores"
import { getContext } from "svelte"
const context = getContext("context")
@ -27,6 +27,8 @@
value: "ADMIN",
},
]
const isFullScreen = window.parent.isBuilder
</script>
<div class="dev-preview-header" class:mobile={$context.device.mobile}>
@ -45,27 +47,41 @@
icon="Code"
on:click={() => devToolsStore.actions.setVisible(!$devToolsStore.visible)}
>
{$devToolsStore.visible ? "Close" : "Open"} DevTools
DevTools
</ActionButton>
{/if}
{#if window.parent.isBuilder}
<ActionButton
quiet
icon="LinkOut"
on:click={() => {
window.parent.closePreview?.()
window.open(`/${$appStore.appId}`, "_blank")
}}
>
Fullscreen
</ActionButton>
<ActionButton
quiet
icon="Close"
on:click={() => window.parent.closePreview?.()}
>
Close
</ActionButton>
{/if}
<ActionButton
quiet
icon="Close"
on:click={() => window.parent.closePreview?.()}
>
Close preview
</ActionButton>
</div>
<style>
.dev-preview-header {
flex: 0 0 60px;
display: grid;
align-items: center;
background-color: black;
padding: 0 var(--spacing-xl);
grid-template-columns: 1fr auto auto auto;
grid-gap: var(--spacing-xl);
display: flex;
align-items: center;
gap: var(--spacing-xl);
}
.dev-preview-header :global(.spectrum-Heading) {
flex: 1 1 auto;
}
.dev-preview-header.mobile {
grid-template-columns: 1fr auto auto;