forked from MapComplete/MapComplete
Refactoring(layout): move infobox to right modal; fix minimap
This commit is contained in:
parent
37ab1e5735
commit
9a282cbce4
6 changed files with 107 additions and 144 deletions
|
|
@ -4,6 +4,7 @@ import * as turf from "@turf/turf"
|
|||
import { AllGeoJSON, booleanWithin, Coord, Lines } from "@turf/turf"
|
||||
import {
|
||||
Feature,
|
||||
FeatureCollection,
|
||||
GeoJSON,
|
||||
Geometry,
|
||||
LineString,
|
||||
|
|
@ -243,7 +244,7 @@ export class GeoOperations {
|
|||
})
|
||||
}
|
||||
|
||||
static bbox(feature: any): Feature<LineString, {}> {
|
||||
static bbox(feature: Feature | FeatureCollection): Feature<LineString, {}> {
|
||||
const [lon, lat, lon0, lat0] = turf.bbox(feature)
|
||||
return {
|
||||
type: "Feature",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</script>
|
||||
|
||||
<div class="absolute top-0 right-0 w-screen h-screen overflow-auto" style="background-color: #00000088">
|
||||
<div class="flex flex-col m-4 sm:m-6 md:m-8 p-4 sm:p-6 md:m-8 normal-background rounded normal-background">
|
||||
<div class="flex flex-col m-4 sm:m-6 p-4 sm:p-6 md:m-8 rounded normal-background">
|
||||
<slot name="close-button">
|
||||
<div class="w-8 h-8 absolute right-10 top-10 cursor-pointer" on:click={() => dispatch("close")}>
|
||||
<XCircleIcon />
|
||||
|
|
|
|||
20
UI/Base/ModalRight.svelte
Normal file
20
UI/Base/ModalRight.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
|
||||
|
||||
/**
|
||||
* The slotted element will be shown on the right side
|
||||
*/
|
||||
const dispatch = createEventDispatcher<{ close }>();
|
||||
</script>
|
||||
|
||||
<div class="absolute top-0 right-0 h-screen overflow-auto w-full md:w-6/12 lg:w-5/12 xl:w-4/12">
|
||||
<div class="flex flex-col m-0 p-4 sm:p-6 normal-background normal-background">
|
||||
<slot name="close-button">
|
||||
<div class="w-8 h-8 absolute right-10 top-10 cursor-pointer" on:click={() => dispatch("close")}>
|
||||
<XCircleIcon />
|
||||
</div>
|
||||
</slot>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -6,6 +6,9 @@ import { MapLibreAdaptor } from "../Map/MapLibreAdaptor"
|
|||
import SvelteUIElement from "../Base/SvelteUIElement"
|
||||
import MaplibreMap from "../Map/MaplibreMap.svelte"
|
||||
import ShowDataLayer from "../Map/ShowDataLayer"
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
||||
import { GeoOperations } from "../../Logic/GeoOperations"
|
||||
import { BBox } from "../../Logic/BBox"
|
||||
|
||||
export class MinimapViz implements SpecialVisualization {
|
||||
funcName = "minimap"
|
||||
|
|
@ -27,7 +30,9 @@ export class MinimapViz implements SpecialVisualization {
|
|||
constr(
|
||||
state: SpecialVisualizationState,
|
||||
tagSource: UIEventSource<Record<string, string>>,
|
||||
args: string[]
|
||||
args: string[],
|
||||
feature: Feature,
|
||||
layer: LayerConfig
|
||||
) {
|
||||
if (state === undefined) {
|
||||
return undefined
|
||||
|
|
@ -77,6 +82,12 @@ export class MinimapViz implements SpecialVisualization {
|
|||
zoom = parsed
|
||||
}
|
||||
}
|
||||
featuresToShow.addCallbackAndRunD((features) => {
|
||||
const bboxGeojson = GeoOperations.bbox({ features, type: "FeatureCollection" })
|
||||
const [lon, lat] = GeoOperations.centerpointCoordinates(bboxGeojson)
|
||||
mla.bounds.setData(BBox.get(bboxGeojson))
|
||||
mla.location.setData({ lon, lat })
|
||||
})
|
||||
mla.zoom.setData(zoom)
|
||||
mla.allowMoving.setData(false)
|
||||
mla.allowZooming.setData(false)
|
||||
|
|
@ -87,8 +98,8 @@ export class MinimapViz implements SpecialVisualization {
|
|||
state.layout.layers
|
||||
)
|
||||
|
||||
return new SvelteUIElement(MaplibreMap, { map: mlmap }).SetStyle(
|
||||
"overflow: hidden; pointer-events: none;"
|
||||
)
|
||||
return new SvelteUIElement(MaplibreMap, { map: mlmap })
|
||||
.SetClass("h-40 rounded")
|
||||
.SetStyle("overflow: hidden; pointer-events: none;")
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
import LoginButton from "./Base/LoginButton.svelte";
|
||||
import CopyrightPanel from "./BigComponents/CopyrightPanel";
|
||||
import { DownloadPanel } from "./BigComponents/DownloadPanel";
|
||||
import ModalRight from "./Base/ModalRight.svelte";
|
||||
|
||||
export let state: ThemeViewState;
|
||||
let layout = state.layout;
|
||||
|
|
@ -99,10 +100,10 @@
|
|||
</div>
|
||||
|
||||
{#if $selectedElement !== undefined && $selectedLayer !== undefined}
|
||||
<FloatOver on:close={() => {selectedElement.setData(undefined)}}>
|
||||
<ModalRight on:close={() => {selectedElement.setData(undefined)}}>
|
||||
<SelectedElementView layer={$selectedLayer} selectedElement={$selectedElement}
|
||||
tags={$selectedElementTags} state={state} />
|
||||
</FloatOver>
|
||||
</ModalRight>
|
||||
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -683,13 +683,6 @@ video {
|
|||
position: sticky;
|
||||
}
|
||||
|
||||
.inset-0 {
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.left-24 {
|
||||
left: 6rem;
|
||||
}
|
||||
|
|
@ -702,26 +695,6 @@ video {
|
|||
top: 14rem;
|
||||
}
|
||||
|
||||
.top-12 {
|
||||
top: 3rem;
|
||||
}
|
||||
|
||||
.left-3 {
|
||||
left: 0.75rem;
|
||||
}
|
||||
|
||||
.top-3 {
|
||||
top: 0.75rem;
|
||||
}
|
||||
|
||||
.right-2 {
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
.bottom-3 {
|
||||
bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.top-2 {
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
|
@ -730,10 +703,6 @@ video {
|
|||
right: 0.75rem;
|
||||
}
|
||||
|
||||
.bottom-0 {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0px;
|
||||
}
|
||||
|
|
@ -742,6 +711,10 @@ video {
|
|||
left: 0px;
|
||||
}
|
||||
|
||||
.bottom-0 {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0px;
|
||||
}
|
||||
|
|
@ -843,6 +816,11 @@ video {
|
|||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mx-1 {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -863,6 +841,10 @@ video {
|
|||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
|
@ -879,6 +861,10 @@ video {
|
|||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
|
@ -887,18 +873,10 @@ video {
|
|||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.mb-24 {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
|
|
@ -975,10 +953,6 @@ video {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1083,6 +1057,10 @@ video {
|
|||
height: 12rem;
|
||||
}
|
||||
|
||||
.h-40 {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.max-h-20vh {
|
||||
max-height: 20vh;
|
||||
}
|
||||
|
|
@ -1095,10 +1073,6 @@ video {
|
|||
max-height: 1.75rem;
|
||||
}
|
||||
|
||||
.max-h-8 {
|
||||
max-height: 2rem;
|
||||
}
|
||||
|
||||
.max-h-24 {
|
||||
max-height: 6rem;
|
||||
}
|
||||
|
|
@ -1107,14 +1081,6 @@ video {
|
|||
min-height: 8rem;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
|
@ -1135,6 +1101,14 @@ video {
|
|||
width: 3rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-screen {
|
||||
width: 100vw;
|
||||
}
|
||||
|
|
@ -1389,6 +1363,14 @@ video {
|
|||
word-break: break-all;
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-3xl {
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
|
|
@ -1401,14 +1383,6 @@ video {
|
|||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
|
@ -1462,6 +1436,11 @@ video {
|
|||
border-style: dotted;
|
||||
}
|
||||
|
||||
.border-gray-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(107 114 128 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-black {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
|
|
@ -1497,21 +1476,6 @@ video {
|
|||
border-color: rgb(59 130 246 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-gray-200 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-gray-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(107 114 128 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-red-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(239 68 68 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-opacity-50 {
|
||||
--tw-border-opacity: 0.5;
|
||||
}
|
||||
|
|
@ -1566,14 +1530,14 @@ video {
|
|||
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
|
@ -1609,10 +1573,6 @@ video {
|
|||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.pl-3 {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.pb-12 {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
|
@ -1669,6 +1629,10 @@ video {
|
|||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.pl-3 {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
|
@ -1701,10 +1665,6 @@ video {
|
|||
text-align: justify;
|
||||
}
|
||||
|
||||
.align-baseline {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -1714,16 +1674,16 @@ video {
|
|||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
|
|
@ -2503,10 +2463,6 @@ input {
|
|||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:top-3 {
|
||||
top: 0.75rem;
|
||||
}
|
||||
|
||||
.sm\:m-6 {
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
|
@ -2532,12 +2488,6 @@ input {
|
|||
height: 6rem;
|
||||
}
|
||||
|
||||
.sm\:w-fit {
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.sm\:w-24 {
|
||||
width: 6rem;
|
||||
}
|
||||
|
|
@ -2566,30 +2516,10 @@ input {
|
|||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:p-0\.5 {
|
||||
padding: 0.125rem;
|
||||
}
|
||||
|
||||
.sm\:p-1\.5 {
|
||||
padding: 0.375rem;
|
||||
}
|
||||
|
||||
.sm\:p-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.sm\:p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.sm\:p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.sm\:pl-0 {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.sm\:pt-1 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
|
@ -2659,12 +2589,12 @@ input {
|
|||
height: 3rem;
|
||||
}
|
||||
|
||||
.md\:w-1\/3 {
|
||||
.md\:w-2\/6 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.md\:w-2\/6 {
|
||||
width: 33.333333%;
|
||||
.md\:w-6\/12 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.md\:w-auto {
|
||||
|
|
@ -2687,14 +2617,6 @@ input {
|
|||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
.md\:p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.md\:p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.md\:p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
@ -2753,6 +2675,10 @@ input {
|
|||
width: 16.666667%;
|
||||
}
|
||||
|
||||
.lg\:w-5\/12 {
|
||||
width: 41.666667%;
|
||||
}
|
||||
|
||||
.lg\:w-1\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
|
@ -2770,4 +2696,8 @@ input {
|
|||
.xl\:inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.xl\:w-4\/12 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue