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(() => { onMount(() => {
window.isBuilder = true
window.closePreview = () => { window.closePreview = () => {
store.update(state => ({ store.update(state => ({
...state, ...state,

View File

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