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

UX: add dots menu to images with overflow menu

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-09-30 13:11:29 +02:00
parent c4ae41e0e1
commit 85a12971ab
3 changed files with 57 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,21 @@
*/
export let open = new UIEventSource(false)
export let dotsSize = `w-6 h-6`
export let dotsPosition = `top-0 right-0`
export let hideBackground= false
let menuPosition = ``
if(dotsPosition.indexOf("left-0") >= 0){
menuPosition = "left-0"
}else{
menuPosition = `right-0`
}
if(dotsPosition.indexOf("top-0") > 0){
menuPosition += " bottom-0"
}else{
menuPosition += ` top-0`
}
function toggle() {
open.set(!open.data)
@ -17,18 +32,22 @@
<div class="relative" style="z-index: 50">
<div
class="sidebar-unit absolute right-0 top-0 collapsable normal-background button-unstyled"
class="sidebar-unit absolute {menuPosition} collapsable normal-background button-unstyled "
class:transition-background={hideBackground}
class:collapsed={!$open}>
<slot />
</div>
<DotsCircleHorizontal class={ `absolute top-0 right-0 w-6 h-6 dots-menu transition-colors ${$open?"dots-menu-opened":""}`} on:click={toggle} />
<DotsCircleHorizontal
class={ `absolute ${dotsPosition} ${dotsSize} dots-menu transition-colors ${$open?"dots-menu-opened":""}`}
on:click={toggle} />
</div>
<style>
.dots-menu{
.dots-menu {
z-index: 50;
}
:global(.dots-menu > path) {
fill: var(--interactive-background);
transition: fill 350ms linear;
@ -41,16 +60,25 @@
}
.collapsable {
max-width: 100rem;
max-height: 100rem;
transition: border 150ms linear, max-width 500ms linear, max-height 500ms linear;
max-width: 50rem;
max-height: 10rem;
transition: max-width 500ms linear, max-height 500ms linear, border 500ms linear;
overflow: hidden;
flex-wrap: nowrap;
text-wrap: none;
width: max-content;
box-shadow: #ccc ;
box-shadow: #ccc;
white-space: nowrap;
border: 1px solid var(--button-background);
background-color: white;
}
.transition-background {
transition: background-color 150ms linear;
}
.transition-background.collapsed {
background-color: #00000000;
}
.collapsed {