CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-30 00:57:16 +13:00
Code Issues Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Andrew Kingston 2021-04-28 14:23:03 +01:00
parent 720b5b40db
commit c8743af6f1
1 changed files with 11 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
packages/builder/src/components/settings/ThemeEditorDropdown.svelte
View file

@ -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>
<ThemeEditor />
</div>
</Popover>
</div>
<Modal bind:this={modal}>
<ModalContent
title="Builder Theme"
confirmText="Done"
showCancelButton={false}>
<ThemeEditor />
</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>