Merge develop

src/UI/Base/DragInvitation.svelte

@@ -5,7 +5,7 @@
    */
   import { Store } from "../../Logic/UIEventSource"
   import { onDestroy } from "svelte"
-  import Hand from "../../assets/svg/Hand.svelte";
+  import Hand from "../../assets/svg/Hand.svelte"
 
   let mainElem: HTMLElement
   export let hideSignal: Store<any>

src/UI/Base/Dropdown.svelte

@@ -1,31 +1,31 @@
 <script lang="ts">
-  import { UIEventSource } from "../../Logic/UIEventSource.js";
+  import { UIEventSource } from "../../Logic/UIEventSource.js"
 
   export let value: UIEventSource<any>
   let i: any = value.data
-  let htmlElement : HTMLSelectElement
-  function selectAppropriateValue(){
-    if(!htmlElement){
-      return;
+  let htmlElement: HTMLSelectElement
+  function selectAppropriateValue() {
+    if (!htmlElement) {
+      return
     }
     const v = value.data
     for (let option of htmlElement.getElementsByTagName("option")) {
-      if(option.value === v){
+      if (option.value === v) {
         option.selected = true
         return
       }
     }
   }
-  
-  
+
   value.addCallbackD(() => selectAppropriateValue())
   $: {
-    if(htmlElement){
+    if (htmlElement) {
       selectAppropriateValue()
     }
   }
+  export let cls : string = undefined
 </script>
 
-<select bind:this={htmlElement} on:change={(e) => {value.setData(e.srcElement.value)}}>
+<select class={cls} bind:this={htmlElement} on:change={(e) => {value.setData(e.srcElement.value)}}>
   <slot />
 </select>

src/UI/Base/LoginToggle.svelte

@@ -6,7 +6,7 @@
   import Tr from "./Tr.svelte"
   import { OsmConnection } from "../../Logic/Osm/OsmConnection"
   import { ImmutableStore, UIEventSource } from "../../Logic/UIEventSource"
-  import Invalid from "../../assets/svg/Invalid.svelte";
+  import Invalid from "../../assets/svg/Invalid.svelte"
 
   export let state: {
     osmConnection: OsmConnection

src/UI/Base/LogoutButton.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
-  import { OsmConnection } from "../../Logic/Osm/OsmConnection";
-  import Logout from "../../assets/svg/Logout.svelte";
-  import Translations from "../i18n/Translations";
-  import Tr from "./Tr.svelte";
+  import { OsmConnection } from "../../Logic/Osm/OsmConnection"
+  import Logout from "../../assets/svg/Logout.svelte"
+  import Translations from "../i18n/Translations"
+  import Tr from "./Tr.svelte"
 
   export let osmConnection: OsmConnection;
 </script>
 
-<button on:click={() => {osmConnection.LogOut()}}>
-  <Logout class="w-6 h-6" />
+<button
+  on:click={() => {
+    state.osmConnection.LogOut()
+  }}
+>
+  <Logout class="h-6 w-6" />
   <Tr t={Translations.t.general.logout} />
 </button>

src/UI/Base/OpenJosm.svelte

@@ -1,37 +1,37 @@
 <script lang="ts">
-  import { UIEventSource } from "../../Logic/UIEventSource";
-  import Translations from "../i18n/Translations";
-  import Tr from "./Tr.svelte";
-  import Josm_logo from "../../assets/svg/Josm_logo.svelte";
-  import Constants from "../../Models/Constants";
-  import type { SpecialVisualizationState } from "../SpecialVisualization";
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import Translations from "../i18n/Translations"
+  import Tr from "./Tr.svelte"
+  import Josm_logo from "../../assets/svg/Josm_logo.svelte"
+  import Constants from "../../Models/Constants"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
 
-  export let state : SpecialVisualizationState
-  const t = Translations.t.general.attribution;
-  const josmState = new UIEventSource<"OK" | string>(undefined);
+  export let state: SpecialVisualizationState
+  const t = Translations.t.general.attribution
+  const josmState = new UIEventSource<"OK" | string>(undefined)
   // Reset after 15s
-  josmState.stabilized(15000).addCallbackD(() => josmState.setData(undefined));
+  josmState.stabilized(15000).addCallbackD(() => josmState.setData(undefined))
 
   const showButton = state.osmConnection.userDetails.map(
     (ud) => ud.loggedIn && ud.csCount >= Constants.userJourney.historyLinkVisible
-  );
+  )
 
   function openJosm() {
-    const bbox = state.mapProperties. bounds.data;
+    const bbox = state.mapProperties.bounds.data
     if (bbox === undefined) {
-      return;
+      return
     }
-    const top = bbox.getNorth();
-    const bottom = bbox.getSouth();
-    const right = bbox.getEast();
-    const left = bbox.getWest();
-    const josmLink = `http://127.0.0.1:8111/load_and_zoom?left=${left}&right=${right}&top=${top}&bottom=${bottom}`;
+    const top = bbox.getNorth()
+    const bottom = bbox.getSouth()
+    const right = bbox.getEast()
+    const left = bbox.getWest()
+    const josmLink = `http://127.0.0.1:8111/load_and_zoom?left=${left}&right=${right}&top=${top}&bottom=${bottom}`
     Utils.download(josmLink)
       .then((answer) => josmState.setData(answer.replace(/\n/g, "").trim()))
-      .catch(() => josmState.setData("ERROR"));
+      .catch(() => josmState.setData("ERROR"))
   }
-
 </script>
+
 {#if $showButton}
   {#if $josmState === undefined}
     <!-- empty -->

src/UI/Base/ShareButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import ToSvelte from "./ToSvelte.svelte"
   import Svg from "../../Svg"
-  import Share from "../../assets/svg/Share.svelte";
+  import Share from "../../assets/svg/Share.svelte"
 
   export let generateShareData: () => {
     text: string
@@ -26,6 +26,6 @@
 
 <button on:click={share} class="secondary m-0 h-8 w-8 p-0">
   <slot name="content">
-    <Share class="w-7 h-7 p-1"/>
+    <Share class="h-7 w-7 p-1" />
   </slot>
 </button>

src/UI/Base/WeblateLink.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Locale from "../i18n/Locale"
   import LinkToWeblate from "./LinkToWeblate"
-  import Translate from "../../assets/svg/Translate.svelte";
+  import Translate from "../../assets/svg/Translate.svelte"
 
   /**
    * Shows a small icon which will open up weblate; a contributor can translate the item for 'context' there