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

UX: floor selector: add white background pane

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-04-23 10:46:33 +02:00
parent 8c478f5e4e
commit 2c8d207866
2 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/Logic/State/LayerState.ts
View file

@ -130,8 +130,11 @@ export default class LayerState {
public setLevelFilter(level?: string) {
// Remove all previous
const l = this.globalFilters.data.length
// Remove all global filters tagged 'levels
this.globalFilters.data = this.globalFilters.data.filter((f) => f.id !== "level")
if (!level) {
// Level is undefined - we thus only want to remove the global filter
// We've just done this above, but the listeners are not aware yet. Let's ping (if needed) and move on
if (l !== this.globalFilters.data.length) {
this.globalFilters.ping()
}

24
src/UI/InputElement/Helpers/FloorSelector.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
import { twJoin } from "tailwind-merge"
import { Store, Stores, UIEventSource } from "../../../Logic/UIEventSource"
/**
@ -11,12 +10,12 @@
export let value: UIEventSource<string>
const HEIGHT = 40
const WIDTH = HEIGHT
let initialIndex = Math.max(0, floors?.data?.findIndex((f) => f === value?.data) ?? 0)
let initialIndex = Math.max(0, floors?.data?.findIndex((f) => f === value?.data) ?? floors?.data?.length + 1)
let index: UIEventSource<number> = new UIEventSource<number>(initialIndex)
let forceIndex: number | undefined = undefined
let top = Math.max(0, initialIndex) * HEIGHT
let elevator: HTMLImageElement
let mouseDown = false
@ -53,7 +52,7 @@
let momentum = 0
function stabilize() {
// Automatically move the elevator to the closes floor
// Automatically move the elevator to the closest floor
if (mouseDown) {
return
}
@ -73,7 +72,7 @@
top = Math.max(top, 0)
}
Stores.Chronic(50).addCallback((_) => stabilize())
Stores.Chronic(50).addCallback(() => stabilize())
floors.addCallback((floors) => {
forceIndex = floors.findIndex((s) => s === value.data)
})
@ -101,16 +100,17 @@
<div
bind:this={container}
class="relative"
style={`height: calc(${HEIGHT}px * ${$floors.length}); width: 96px`}
style={`height: calc(${HEIGHT}px * ${$floors.length}); width: calc( 96px )`}
>
<div class="absolute top-0 left-0 rounded-xl"
style="margin: -0.25rem; width: calc(100% + 0.5rem); height: calc(100% + 0.5rem); background: rgba(255,255,255, 0.65); backdrop-filter: blur(2px)">
</div>
<div class="absolute right-0 h-full w-min">
{#each $floors as floor, i}
<button
style={`height: ${HEIGHT}px; width: ${HEIGHT}px`}
class={twJoin(
"content-box m-0 flex items-center justify-center border-2 border-gray-300",
i === (forceIndex ?? $index) && "selected"
)}
class:selected={i === (forceIndex ?? $index)}
class={"content-box m-0 flex items-center justify-center border-2 border-gray-300"}
on:click={() => {
forceIndex = i
}}
@ -120,8 +120,10 @@
{/each}
</div>
<div style={`width: ${HEIGHT}px`}>
<div style={`width: ${WIDTH}px`}>
<img
alt=""
aria-hidden="true"
bind:this={image}
class="draggable"
draggable="false"