Merge master

src/UI/Popup/MoveWizard.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-
   import { UIEventSource } from "../../Logic/UIEventSource"
   import type { MoveReason } from "./MoveWizardState"
   import { MoveWizardState } from "./MoveWizardState"
-
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
   import ToSvelte from "../Base/ToSvelte.svelte"
   import Tr from "../Base/Tr.svelte"
@@ -21,7 +19,6 @@
   import If from "../Base/If.svelte"
   import Constants from "../../Models/Constants"
 
-
   export let state: SpecialVisualizationState
 
   export let layer: LayerConfig
@@ -48,16 +45,15 @@
     }
   }
 
-
   let moveWizardState = new MoveWizardState(id, layer.allowMove, state)
   let notAllowed = moveWizardState.moveDisallowedReason
   let currentMapProperties: MapProperties = undefined
 </script>
-{#if moveWizardState.reasons.length > 0}
 
+{#if moveWizardState.reasons.length > 0}
   {#if $notAllowed}
-    <div class="flex m-2 p-2 rounded-lg bg-gray-200">
-      <Move_not_allowed class="h-8 w-8 m-2" />
+    <div class="m-2 flex rounded-lg bg-gray-200 p-2">
+      <Move_not_allowed class="m-2 h-8 w-8" />
       <div class="flex flex-col">
         <Tr t={t.cannotBeMoved} />
         <Tr t={$notAllowed} />
@@ -65,75 +61,91 @@
     </div>
   {:else if currentStep === "start"}
     {#if moveWizardState.reasons.length === 1}
-      <button class="flex" on:click={() => {reason.setData(moveWizardState.reasons[0]); currentStep = "pick_location"}}>
-        <ToSvelte construct={moveWizardState.reasons[0].icon.SetStyle("height: 1.5rem; width: 1.5rem;")}></ToSvelte>
+      <button
+        class="flex"
+        on:click={() => {
+          reason.setData(moveWizardState.reasons[0])
+          currentStep = "pick_location"
+        }}
+      >
+        <ToSvelte
+          construct={moveWizardState.reasons[0].icon.SetStyle("height: 1.5rem; width: 1.5rem;")}
+        />
         <Tr t={Translations.T(moveWizardState.reasons[0].invitingText)} />
       </button>
     {:else}
-      <button class="flex" on:click={() => {currentStep = "reason"}}>
-        <Move class="w-6 h-6" />
+      <button
+        class="flex"
+        on:click={() => {
+          currentStep = "reason"
+        }}
+      >
+        <Move class="h-6 w-6" />
         <Tr t={t.inviteToMove.generic} />
       </button>
     {/if}
   {:else if currentStep === "reason"}
-    <div class="flex flex-col interactive border-interactive p-2">
-
+    <div class="interactive border-interactive flex flex-col p-2">
       <Tr cls="text-lg font-bold" t={t.whyMove} />
       {#each moveWizardState.reasons as reasonSpec}
-        <button on:click={() => {reason.setData(reasonSpec); currentStep = "pick_location"}}>
+        <button
+          on:click={() => {
+            reason.setData(reasonSpec)
+            currentStep = "pick_location"
+          }}
+        >
           <ToSvelte construct={reasonSpec.icon.SetClass("w-16 h-16 pr-2")} />
           <Tr t={Translations.T(reasonSpec.text)} />
         </button>
       {/each}
     </div>
-
   {:else if currentStep === "pick_location"}
-    <div class="flex flex-col border-interactive interactive p-2">
+    <div class="border-interactive interactive flex flex-col p-2">
       <Tr cls="text-lg font-bold" t={t.moveTitle} />
 
-
-      <div class="relative w-full h-64">
-        <LocationInput mapProperties={currentMapProperties = initMapProperties()} value={newLocation}
-                       initialCoordinate={{lon, lat}} />
+      <div class="relative h-64 w-full">
+        <LocationInput
+          mapProperties={(currentMapProperties = initMapProperties())}
+          value={newLocation}
+          initialCoordinate={{ lon, lat }}
+        />
         <div class="absolute bottom-0 left-0">
           <OpenBackgroundSelectorButton {state} />
         </div>
       </div>
 
       {#if $reason.includeSearch}
-        <Geosearch bounds={ currentMapProperties.bounds} clearAfterView={false} />
+        <Geosearch bounds={currentMapProperties.bounds} clearAfterView={false} />
       {/if}
 
-
       <div class="flex flex-wrap">
         <If condition={currentMapProperties.zoom.mapD(zoom => zoom >= Constants.minZoomLevelToAddNewPoint)}>
-
-          <button class="flex flex primary w-full"
+          <button class="flex primary w-full"
                   on:click={() => {
                     moveWizardState.moveFeature(newLocation.data, reason.data, featureToMove);
                     currentStep = "moved"
                     }}>
-            <Move class="w-6 h-6 mr-2" />
+            <Move class="mr-2 h-6 w-6" />
             <Tr t={t.confirmMove} />
           </button>
 
           <div slot="else" class="alert">
             <Tr t={t.zoomInFurther} />
           </div>
-
         </If>
 
-        <button class="w-full" on:click={() => {currentStep= "start"}}>
-          <XCircleIcon class="w-6 h-6 mr-2" />
+        <button
+          class="w-full"
+          on:click={() => {
+            currentStep = "start"
+          }}
+        >
+          <XCircleIcon class="mr-2 h-6 w-6" />
           <Tr t={t.cancel} />
         </button>
-
       </div>
     </div>
-
-
   {:else if currentStep === "moved"}
-
     <div class="flex flex-col">
       <Tr cls="thanks" t={t.pointIsMoved} />
       <button on:click={() => {currentStep = "reason"}}>
@@ -141,6 +153,5 @@
         <Tr t={t.inviteToMoveAgain} />
       </button>
     </div>
-
   {/if}
 {/if}