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) { public setLevelFilter(level?: string) {
// Remove all previous // Remove all previous
const l = this.globalFilters.data.length const l = this.globalFilters.data.length
// Remove all global filters tagged 'levels
this.globalFilters.data = this.globalFilters.data.filter((f) => f.id !== "level") this.globalFilters.data = this.globalFilters.data.filter((f) => f.id !== "level")
if (!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) { if (l !== this.globalFilters.data.length) {
this.globalFilters.ping() this.globalFilters.ping()
} }

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

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