CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-03 10:36:59 +13:00
Code Issues Projects Releases Wiki Activity

Revert to a cleaner modal with no title or buttons for screen peeking

Browse source
This commit is contained in:
Andrew Kingston 2021-07-30 18:16:37 +01:00
parent 952c27058a
commit 8e82a0efd9
2 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
View file

@ -15,6 +15,6 @@
} }
</script> </script>
<ModalContent title="Create Layout" confirmText="Create" onConfirm={save}> <ModalContent title="Create Layout" confirmText="Create" onConfirm="{save}">
<Input thin label="Name" bind:value={name} /> <input thin label="Name" bind:value="{name}" />
</ModalContent> </ModalContent>

20
packages/client/src/components/PeekScreenDisplay.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
import { peekStore, dataSourceStore, routeStore } from "../store" import { peekStore, dataSourceStore, routeStore } from "../store"
import { Modal, ModalContent, Button, Divider, Layout } from "@budibase/bbui" import { Modal, ModalContent, Button } from "@budibase/bbui"
import { onDestroy } from "svelte" import { onDestroy } from "svelte"
let iframe let iframe
@ -51,28 +51,30 @@
{#if $peekStore.showPeek} {#if $peekStore.showPeek}
<Modal fixed on:cancel={handleCancel}> <Modal fixed on:cancel={handleCancel}>
<ModalContent <ModalContent
cancelText="Close" showCancelButton={false}
showConfirmButton={false} showConfirmButton={false}
size="XL" size="XL"
title="Screen Peek"
showDivider={false} showDivider={false}
showCloseIcon={false}
> >
<iframe title="Peek" bind:this={iframe} src={$peekStore.href} /> <iframe title="Peek" bind:this={iframe} src={$peekStore.href} />
<div slot="footer">
<Button secondary quiet on:click={navigate}>Full screen</Button>
</div>
</ModalContent> </ModalContent>
</Modal> </Modal>
{/if} {/if}
<style> <style>
iframe { iframe {
margin: 0 -40px; margin: -40px;
border: none; border: none;
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
border-top: 1px solid var(--spectrum-global-color-gray-300);
width: calc(100% + 80px); width: calc(100% + 80px);
height: 640px; height: 640px;
transition: width 1s ease, height 1s ease, top 1s ease, left 1s ease; transition: width 1s ease, height 1s ease, top 1s ease, left 1s ease;
border-radius: var(--spectrum-global-dimension-size-100);
}
@media (max-width: 600px) {
iframe {
max-height: calc(100vh - 80px);
}
} }
</style> </style>