Add option to open app preview in new tab
This commit is contained in:
parent
52cd16f42d
commit
d98c0bdcea
2 changed files with 30 additions and 13 deletions
|
@ -15,6 +15,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
window.isBuilder = true
|
||||||
window.closePreview = () => {
|
window.closePreview = () => {
|
||||||
store.update(state => ({
|
store.update(state => ({
|
||||||
...state,
|
...state,
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue