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

chore: automated housekeeping...

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-10-19 14:44:55 +02:00
parent c9ce29f206
commit 40e894df8b
294 changed files with 14209 additions and 4192 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,83 +9,82 @@
export let open = new UIEventSource(false)
export let dotsSize = `w-6 h-6`
export let dotsPosition = `top-0 right-0`
export let hideBackground= false
export let hideBackground = false
let menuPosition = ``
if(dotsPosition.indexOf("left-0") >= 0){
if (dotsPosition.indexOf("left-0") >= 0) {
menuPosition = "left-0"
}else{
} else {
menuPosition = `right-0`
}
if(dotsPosition.indexOf("top-0") > 0){
if (dotsPosition.indexOf("top-0") > 0) {
menuPosition += " bottom-0"
}else{
} else {
menuPosition += ` top-0`
}
function toggle() {
open.set(!open.data)
}
</script>
<div class="relative" style="z-index: 50">
<div
class="sidebar-unit absolute {menuPosition} collapsable normal-background button-unstyled "
class="sidebar-unit absolute {menuPosition} collapsable normal-background button-unstyled"
class:transition-background={hideBackground}
class:collapsed={!$open}>
class:collapsed={!$open}
>
<slot />
</div>
<DotsCircleHorizontal
class={ `absolute ${dotsPosition} ${dotsSize} dots-menu transition-colors ${$open?"dots-menu-opened":""}`}
on:click={toggle} />
class={`absolute ${dotsPosition} ${dotsSize} dots-menu transition-colors ${
$open ? "dots-menu-opened" : ""
}`}
on:click={toggle}
/>
</div>
<style>
.dots-menu {
z-index: 50;
}
.dots-menu {
z-index: 50;
}
:global(.dots-menu > path) {
fill: var(--interactive-background);
transition: fill 350ms linear;
cursor: pointer;
:global(.dots-menu > path) {
fill: var(--interactive-background);
transition: fill 350ms linear;
cursor: pointer;
}
}
:global(.dots-menu:hover > path, .dots-menu-opened > path) {
fill: var(--interactive-foreground);
}
:global(.dots-menu:hover > path, .dots-menu-opened > path) {
fill: var(--interactive-foreground)
}
.collapsable {
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;
white-space: nowrap;
border: 1px solid var(--button-background);
background-color: white;
}
.collapsable {
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;
white-space: nowrap;
border: 1px solid var(--button-background);
background-color: white;
}
.transition-background {
transition: background-color 150ms linear;
}
.transition-background {
transition: background-color 150ms linear;
}
.transition-background.collapsed {
background-color: #00000000;
}
.collapsed {
max-width: 0;
max-height: 0;
border: 2px solid #00000000;
pointer-events: none;
}
.transition-background.collapsed {
background-color: #00000000;
}
.collapsed {
max-width: 0;
max-height: 0;
border: 2px solid #00000000;
pointer-events: none;
}
</style>