Implements ActionMenu component
This commit is contained in:
parent
5c3fcb053d
commit
cfe0b153e6
|
@ -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>
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue