More refactoring

UI/BigComponents/ActionButtons.ts

@@ -13,7 +13,6 @@ import { OpenIdEditor, OpenJosm } from "./CopyrightPanel"
 import Toggle from "../Input/Toggle"
 import ScrollableFullScreen from "../Base/ScrollableFullScreen"
 import { DefaultGuiState } from "../DefaultGuiState"
-import DefaultGUI from "../DefaultGUI"
 
 export class BackToThemeOverview extends Toggle {
     constructor(

UI/BigComponents/DownloadPanel.ts

@@ -14,7 +14,6 @@ import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
 import { BBox } from "../../Logic/BBox"
 import FilteredLayer, { FilterState } from "../../Models/FilteredLayer"
 import geojson2svg from "geojson2svg"
-import Constants from "../../Models/Constants"
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
 
 export class DownloadPanel extends Toggle {

UI/BigComponents/FullWelcomePaneWithTabs.ts

@@ -17,7 +17,6 @@ import UserRelatedState from "../../Logic/State/UserRelatedState"
 import Loc from "../../Models/Loc"
 import BaseLayer from "../../Models/BaseLayer"
 import FilteredLayer from "../../Models/FilteredLayer"
-import CopyrightPanel from "./CopyrightPanel"
 import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline"
 import PrivacyPolicy from "./PrivacyPolicy"
 import Hotkeys from "../Base/Hotkeys"

UI/BigComponents/Geosearch.svelte

@@ -15,8 +15,6 @@
 
   Translations.t;
   export let bounds: UIEventSource<BBox>
-  export let layout: LayoutConfig;
-  export let perLayer: ReadonlyMap<string, GeoIndexedStoreForLayer>
   export let selectedElement: UIEventSource<Feature>;
   export let selectedLayer: UIEventSource<LayerConfig>;
 

UI/BigComponents/SelectedElementView.svelte

@@ -1,23 +1,15 @@
 <script lang="ts">
   import type { Feature } from "geojson";
-  import { Store, UIEventSource } from "../../Logic/UIEventSource";
-  import TagRenderingAnswer from "../Popup/TagRenderingAnswer";
+  import { UIEventSource } from "../../Logic/UIEventSource";
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
-  import ToSvelte from "../Base/ToSvelte.svelte";
-  import { VariableUiElement } from "../Base/VariableUIElement.js";
   import type { SpecialVisualizationState } from "../SpecialVisualization";
-  import { onDestroy } from "svelte";
+  import TagRenderingAnswer from "../Popup/TagRenderingAnswer.svelte";
 
-  export let selectedElement: UIEventSource<Feature>;
-  export let layer: UIEventSource<LayerConfig>;
-  export let tags: Store<UIEventSource<Record<string, string>>>;
-  let _tags: UIEventSource<Record<string, string>>;
-  onDestroy(tags.subscribe(tags => {
-    _tags = tags;
-    return false
-  }));
+  export let selectedElement: Feature;
+  export let layer: LayerConfig;
+  export let tags: UIEventSource<Record<string, string>>;
 
-  export let specialVisState: SpecialVisualizationState;
+  export let state: SpecialVisualizationState;
 
   /**
    *        const title = new TagRenderingAnswer(
@@ -46,30 +38,27 @@
 </script>
 
 <div>
-  <div on:click={() =>selectedElement.setData(undefined)}>close</div>
   <div class="flex flex-col sm:flex-row flex-grow justify-between">
     <!-- Title element-->
-    <ToSvelte
-      construct={() => new VariableUiElement(tags.mapD(tags =>   new TagRenderingAnswer(tags, layer.data.title, specialVisState), [layer]))}></ToSvelte>
+    <h3>
+      <TagRenderingAnswer config={layer.title} {tags} {selectedElement}></TagRenderingAnswer>
+    </h3>
 
     <div class="flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2">
-
-      {#each $layer.titleIcons as titleIconConfig (titleIconConfig.id)}
+      {#each layer.titleIcons as titleIconConfig (titleIconConfig.id)}
         <div class="w-8 h-8">
-          <ToSvelte
-            construct={() => new VariableUiElement(tags.mapD(tags =>   new TagRenderingAnswer(tags, titleIconConfig, specialVisState)))}></ToSvelte>
+          <TagRenderingAnswer config={titleIconConfig} {tags} {selectedElement}></TagRenderingAnswer>
         </div>
-
       {/each}
     </div>
 
 
   </div>
 
-  <ul>
-
-    {#each Object.keys($_tags) as key}
-      <li><b>{key}</b>=<b>{$_tags[key]}</b></li>
+  <div class="flex flex-col">
+    {#each layer.tagRenderings as config (config.id)}
+      <TagRenderingAnswer {tags} {config} {state}></TagRenderingAnswer>
     {/each}
-  </ul>
+  </div>
+
 </div>

UI/BigComponents/ThemeButton.svelte

@@ -7,6 +7,7 @@
   import Constants from "../../Models/Constants"
   import type Loc from "../../Models/Loc"
   import type { LayoutInformation } from "../../Models/ThemeConfig/LayoutConfig";
+  import Tr from "../Base/Tr.svelte";
 
   export let theme: LayoutInformation
   export let isCustom: boolean = false
@@ -16,8 +17,8 @@
   $: title = new Translation(
     theme.title,
     !isCustom && !theme.mustHaveLanguage ? "themes:" + theme.id + ".title" : undefined
-  ).toString()
-  $: description = new Translation(theme.shortDescription).toString()
+  )
+  $: description = new Translation(theme.shortDescription)
 
   // TODO: Improve this function
   function createUrl(
@@ -83,8 +84,10 @@
       <img slot="image" src={theme.icon} class="block h-11 w-11 bg-red mx-4" alt="" />
       <span slot="message" class="message">
         <span>
-          <span>{title}</span>
-          <span>{description}</span>
+          <Tr t={title}></Tr>
+          <span class="subtle">
+            <Tr t={description}></Tr>
+          </span>
         </span>
       </span>
     </SubtleButton>