Implements ActionMenu component

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-12 17:10:55 +02:00
parent 5c3fcb053d
commit cfe0b153e6
2 changed files with 32 additions and 2 deletions

View File

@ -0,0 +1,30 @@
<script>
import DropdownMenu from '../DropdownMenu/DropdownMenu.svelte'
import Menu from '../Menu/Menu.svelte'
let anchor;
let dropdown;
// This is needed because display: contents is considered "invisible".
// It should only ever be an action button, so should be fine.
function getAnchor(node) {
anchor = node.firstChild
}
export const hide = () => { dropdown.hide() }
export const show = () => { dropdown.show() }
</script>
<div class="contents" use:getAnchor on:click={dropdown.show}>
<slot name="button" />
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
<Menu>
<slot />
</Menu>
</DropdownMenu>
<style>
div {
display: contents;
}
</style>

View File

@ -18,10 +18,10 @@ export default function positionDropdown(element, { anchor, align }) {
if (spaceAbove > spaceBelow) { if (spaceAbove > spaceBelow) {
positionSide = "bottom" positionSide = "bottom"
maxHeight = spaceAbove - 20 maxHeight = spaceAbove - 20
y = window.innerHeight - spaceAbove y = window.innerHeight - spaceAbove + 5
} else { } else {
positionSide = "top" positionSide = "top"
y = bottom y = bottom + 5
maxHeight = spaceBelow - 20 maxHeight = spaceBelow - 20
} }