Merge develop

src/UI/Popup/ImportButtons/ImportFlow.svelte

@@ -20,6 +20,7 @@
     import ToSvelte from "../../Base/ToSvelte.svelte"
     import { EyeIcon, EyeOffIcon } from "@rgossiaux/svelte-heroicons/solid"
     import FilteredLayer from "../../../Models/FilteredLayer"
+    import Confirm from "../../../assets/svg/Confirm.svelte"
 
     export let importFlow: ImportFlow<ImportFlowArguments>
     let state = importFlow.state
@@ -159,7 +160,7 @@
             {#if importFlow.args.icon}
               <img src={importFlow.args.icon} />
             {:else}
-              <ToSvelte construct={Svg.confirm_svg().SetClass("w-8 h-8 pr-4")} />
+              <Confirm class="w-8 h-8 pr-4"/>
             {/if}
           </span>
           <slot name="confirm-text">

src/UI/Popup/MoveWizardState.ts

@@ -1,4 +1,3 @@
-import Svg from "../../Svg"
 import { UIEventSource } from "../../Logic/UIEventSource"
 import Translations from "../i18n/Translations"
 import { Translation } from "../i18n/Translation"
@@ -10,6 +9,9 @@ import { And } from "../../Logic/Tags/And"
 import { Tag } from "../../Logic/Tags/Tag"
 import { SpecialVisualizationState } from "../SpecialVisualization"
 import { Feature, Point } from "geojson"
+import SvelteUIElement from "../Base/SvelteUIElement"
+import Confirm from "../../assets/svg/Confirm.svelte"
+import Relocation from "../../assets/svg/Relocation.svelte"
 
 export interface MoveReason {
     text: Translation | string
@@ -32,10 +34,7 @@ export class MoveWizardState {
 
     constructor(id: string, options: MoveConfig, state: SpecialVisualizationState) {
         this._state = state
-        const t = Translations.t.move
-
         this.reasons = MoveWizardState.initReasons(options)
-
         if (this.reasons.length > 0) {
             this.checkIsAllowed(id)
         }
@@ -49,7 +48,7 @@ export class MoveWizardState {
             reasons.push({
                 text: t.reasons.reasonRelocation,
                 invitingText: t.inviteToMove.reasonRelocation,
-                icon: Svg.relocation_svg(),
+                icon: new SvelteUIElement(Relocation),
                 changesetCommentValue: "relocated",
                 lockBounds: false,
                 background: undefined,
@@ -63,7 +62,7 @@ export class MoveWizardState {
             reasons.push({
                 text: t.reasons.reasonInaccurate,
                 invitingText: t.inviteToMove.reasonInaccurate,
-                icon: Svg.crosshair_svg(),
+                icon: new SvelteUIElement(Confirm),
                 changesetCommentValue: "improve_accuracy",
                 lockBounds: true,
                 includeSearch: false,

src/UI/Popup/Notes/CloseNoteButton.ts

@@ -9,6 +9,8 @@ import { LoginToggle } from ".././LoginButton"
 import { SpecialVisualization, SpecialVisualizationState } from "../../SpecialVisualization"
 import { UIEventSource } from "../../../Logic/UIEventSource"
 import Constants from "../../../Models/Constants"
+import SvelteUIElement from "../../Base/SvelteUIElement"
+import Checkmark from "../../../assets/svg/Checkmark.svelte"
 
 export class CloseNoteButton implements SpecialVisualization {
     public readonly funcName = "close_note"
@@ -61,7 +63,7 @@ export class CloseNoteButton implements SpecialVisualization {
             zoomButton: string
         } = <any>Utils.ParseVisArgs(this.args, args)
 
-        let icon = Svg.checkmark_svg()
+        let icon: BaseUIElement = new SvelteUIElement(Checkmark)
         if (params.icon !== "checkmark.svg" && (args[2] ?? "") !== "") {
             icon = new Img(args[1])
         }

src/UI/Popup/TagRendering/TagRenderingEditable.svelte

@@ -4,7 +4,7 @@
   import type { Feature } from "geojson"
   import type { SpecialVisualizationState } from "../../SpecialVisualization"
   import TagRenderingAnswer from "./TagRenderingAnswer.svelte"
-  import { PencilAltIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { PencilAltIcon } from "@rgossiaux/svelte-heroicons/solid"
   import TagRenderingQuestion from "./TagRenderingQuestion.svelte"
   import { onDestroy } from "svelte"
   import Tr from "../../Base/Tr.svelte"
@@ -27,12 +27,12 @@
   /**
    * Indicates if this tagRendering currently shows the attribute or asks the question to _change_ the property
    */
-  export let editMode = !config.IsKnown(tags.data) // || showQuestionIfUnknown;
+  export let editMode = !config.IsKnown(tags.data)
   if (tags) {
     onDestroy(
       tags.addCallbackD((tags) => {
         editMode = !config.IsKnown(tags)
-      })
+      }),
     )
   }
 

src/UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -159,7 +159,7 @@
     }
   }
 
-  function onSave() {
+  function onSave(e) {
     if (selectedTags === undefined) {
       return
     }
@@ -198,7 +198,9 @@
 
   function onInputKeypress(e: KeyboardEvent) {
     if (e.key === "Enter") {
-      onSave()
+        e.preventDefault()
+        e.stopPropagation()
+        onSave(e)
     }
   }
 

src/UI/Popup/UploadToOsmViz.ts

@@ -1,8 +1,9 @@
-import UploadTraceToOsmUI from "../BigComponents/UploadTraceToOsmUI"
 import { SpecialVisualization, SpecialVisualizationState } from "../SpecialVisualization"
 import { UIEventSource } from "../../Logic/UIEventSource"
 import { GeoOperations } from "../../Logic/GeoOperations"
 import Constants from "../../Models/Constants"
+import SvelteUIElement from "../Base/SvelteUIElement"
+import UploadTraceToOsmUI from "../BigComponents/UploadTraceToOsmUI.svelte"
 
 /**
  * Wrapper  around 'UploadTraceToOsmUI'
@@ -20,10 +21,9 @@ export class UploadToOsmViz implements SpecialVisualization {
         __: string[]
     ) {
         const locations = state.historicalUserLocations.features.data
-        return new UploadTraceToOsmUI((title) => GeoOperations.toGpx(locations, title), state, {
-            whenUploaded: async () => {
-                state.historicalUserLocations.features.setData([])
-            },
+        return new SvelteUIElement(UploadTraceToOsmUI, {
+            state,
+            trace: (title: string) => GeoOperations.toGpx(locations, title)
         })
     }
 }