ilja_space/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Work on dotsmenu

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-09-08 19:35:11 +02:00
parent 1b8eb10cac
commit 993a950458
4 changed files with 354 additions and 229 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/UI/Base/DotMenu.svelte
View file

@ -1,27 +1,58 @@
<script lang="ts">
import DotsCircleHorizontal from "@rgossiaux/svelte-heroicons/solid/DotsCircleHorizontal"
import { Dropdown } from "flowbite-svelte"
import { TrashIcon } from "@babeard/svelte-heroicons/mini"
import SidebarUnit from "./SidebarUnit.svelte"
import { UIEventSource } from "../../Logic/UIEventSource"
import DotsCircleHorizontal from "@rgossiaux/svelte-heroicons/solid/DotsCircleHorizontal"
/**
* A menu, opened by a dot
*/
export let dotColor = "var(--background-interactive)"
export let placement: "left" | "right" | "top" | "bottom" = "left"
export let open = new UIEventSource(false)
export let isOpen : UIEventSource<boolean> = new UIEventSource<boolean>(false)
let _isOpen = isOpen.data
$: {
console.log("is open?", _isOpen)
isOpen.set(_isOpen)
function toggle() {
open.set(!open.data)
}
</script>
<DotsCircleHorizontal class="w-6 h-6 dots-menu-themes transition-colors" color={$isOpen ? "black": "var(--interactive-background)"} />
<Dropdown placement="left" bind:open={_isOpen} triggeredBy=".dots-menu-themes" containerClass="p-1 border border-2 border-gray button-unstyled">
<SidebarUnit>
<div class="relative" style="z-index: 50">
<div
class="sidebar-unit absolute right-0 top-0 collapsable normal-background button-unstyled border-2 border-gray-300"
class:collapsed={!$open}>
<slot />
</SidebarUnit>
</Dropdown>
</div>
<DotsCircleHorizontal class={ `absolute top-0 right-0 w-6 h-6 dots-menu transition-colors ${$open?"dots-menu-opened":""}`} on:click={toggle} />
</div>
<style>
.dots-menu{
z-index: 50;
}
:global(.dots-menu > path) {
fill: var(--interactive-background);
transition: fill 350ms linear;
}
:global(.dots-menu:hover > path, .dots-menu-opened > path) {
fill: var(--interactive-foreground)
}
.collapsable {
max-width: 100rem;
max-height: 100rem;
transition: max-width 500ms ease-in-out, border 400ms linear;
overflow: hidden;
flex-wrap: nowrap;
text-wrap: none;
width: max-content;
box-shadow: #ccc ;
white-space: nowrap;
}
.collapsed {
max-width: 0;
border: 2px solid #00000000
}
</style>