Browse Source

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

gh-pages
Andrew Kingston 5 years ago
parent
commit
c8743af6f1
  1. 29
      packages/builder/src/components/settings/ThemeEditorDropdown.svelte

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

@ -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>

Loading…
Cancel
Save