MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move builder theme settings to a modal to avoid popover overflow issue

This commit is contained in:
Andrew Kingston 2021-04-28 14:23:03 +01:00
parent 318d702ae9
commit d793088c2a
1 changed files with 11 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/builder/src/components/settings/ThemeEditorDropdown.svelte
View File

@ -1,27 +1,23 @@
<script> <script>
import { Icon, Label, Popover } from "@budibase/bbui" import { Icon, Label, Modal, ModalContent } from "@budibase/bbui"
import ThemeEditor from "./ThemeEditor.svelte" import ThemeEditor from "./ThemeEditor.svelte"
let anchor let modal
let popover
</script> </script>
<div class="topnavitemright" on:click={popover.show} bind:this={anchor}> <div class="topnavitemright" on:click={modal.show}>
<Icon hoverable name="ColorFill" /> <Icon hoverable name="ColorFill" />
</div> </div>
<div class="dropdown"> <Modal bind:this={modal}>
<Popover bind:this={popover} {anchor} align="right"> <ModalContent
<div class="content"> title="Builder Theme"
<Label extraSmall grey>Theme</Label> confirmText="Done"
showCancelButton={false}>
<ThemeEditor /> <ThemeEditor />
</div> </ModalContent>
</Popover> </Modal>
</div>
<style> <style>
.dropdown {
z-index: 2;
}
.topnavitemright { .topnavitemright {
cursor: pointer; cursor: pointer;
color: var(--grey-7); color: var(--grey-7);
@ -35,7 +31,4 @@
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
.content {
padding: var(--spacing-xl);
}
</style> </style>