Move builder theme settings to a modal to avoid popover overflow issue
This commit is contained in:
parent
318d702ae9
commit
d793088c2a
|
@ -1,27 +1,23 @@
|
|||
<script>
|
||||
import { Icon, Label, Popover } from "@budibase/bbui"
|
||||
import { Icon, Label, Modal, ModalContent } from "@budibase/bbui"
|
||||
import ThemeEditor from "./ThemeEditor.svelte"
|
||||
|
||||
let anchor
|
||||
let popover
|
||||
let modal
|
||||
</script>
|
||||
|
||||
<div class="topnavitemright" on:click={popover.show} bind:this={anchor}>
|
||||
<div class="topnavitemright" on:click={modal.show}>
|
||||
<Icon hoverable name="ColorFill" />
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<Popover bind:this={popover} {anchor} align="right">
|
||||
<div class="content">
|
||||
<Label extraSmall grey>Theme</Label>
|
||||
<Modal bind:this={modal}>
|
||||
<ModalContent
|
||||
title="Builder Theme"
|
||||
confirmText="Done"
|
||||
showCancelButton={false}>
|
||||
<ThemeEditor />
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.dropdown {
|
||||
z-index: 2;
|
||||
}
|
||||
.topnavitemright {
|
||||
cursor: pointer;
|
||||
color: var(--grey-7);
|
||||
|
@ -35,7 +31,4 @@
|
|||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
.content {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue