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

Search results: add menu, update searchers

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-09-06 23:01:00 +02:00
parent 9e0ae3321f
commit ee2b3ce329
10 changed files with 88 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/UI/Base/DotMenu.svelte Normal file
View file

@ -0,0 +1,27 @@
<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"
/**
* A menu, opened by a dot
*/
export let dotColor = "var(--background-interactive)"
export let placement: "left" | "right" | "top" | "bottom" = "left"
export let isOpen : UIEventSource<boolean> = new UIEventSource<boolean>(false)
let _isOpen = isOpen.data
$: {
console.log("is open?", _isOpen)
isOpen.set(_isOpen)
}
</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>
<slot />
</SidebarUnit>
</Dropdown>

8
src/UI/Base/SidebarUnit.svelte
View file

@ -18,7 +18,7 @@
padding: 0.25rem;
}
:global(.sidebar-button svg, .sidebar-button img) {
:global(.sidebar-button svg, .sidebar-button img, .sidebar-unit > button img, .sidebar-unit > button svg) {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
@ -32,7 +32,7 @@
}
:global(.sidebar-button, .sidebar-unit > a) {
:global(.sidebar-button, .sidebar-unit > a, .sidebar-unit > button) {
display: flex;
align-items: center;
border-radius: 0.25rem !important;
@ -42,12 +42,12 @@
text-align: start;
}
:global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit > a img, .sidebar-unit > a svg) {
:global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit > a img, .sidebar-unit > a svg, .sidebar-unit > button svg, .sidebar-unit > button img) {
margin-right: 0.5rem;
flex-shrink: 0;
}
:global(.sidebar-button:hover, .sidebar-unit > a:hover) {
:global(.sidebar-button:hover, .sidebar-unit > a:hover, .sidebar-unit > button:hover) {
background: var(--low-interaction-background) !important;
}