More styling

src/UI/Popup/Notes/NoteCommentElement.ts

@@ -104,8 +104,7 @@ export default class NoteCommentElement extends Combine {
         ])
         this.SetClass("flex flex-col pb-2 mb-2 border-gray-500 border-b")
         if (comment.highlighted) {
-            this.SetClass("glowing-shadow")
-            console.log(">>>", index, totalNumberOfComments)
+            this.SetClass("focus")
             if (index + 2 === totalNumberOfComments) {
                 console.log("Scrolling into view")
                 requestAnimationFrame(() => {

src/UI/Popup/NothingKnown.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  /**
+   * Displays a 'nothing is yet known' if all questions are unanswered
+   */
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+
+  export let state: SpecialVisualizationState
+  export let tags: UIEventSource<Record<string, string>>
+  export let layer: LayerConfig
+  export let text: string
+  export let cssClasses: string = ""
+  let knowableRenderings = layer.tagRenderings.filter(tr => tr.question !== undefined)
+  let hasKnownQuestion = tags.mapD(t => knowableRenderings.some(tr => tr.IsKnown(t)))
+
+</script>
+
+{#if !$hasKnownQuestion}
+  <span class={cssClasses}>
+  {text}
+  </span>
+{/if}

src/UI/Popup/SplitRoadWizard.svelte

@@ -4,7 +4,6 @@
   import type { SpecialVisualizationState } from "../SpecialVisualization"
   import LoginToggle from "../Base/LoginToggle.svelte"
   import Tr from "../Base/Tr.svelte"
-  import Scissors from "../../assets/svg/Scissors.svelte"
   import WaySplitMap from "../BigComponents/WaySplitMap.svelte"
   import BackButton from "../Base/BackButton.svelte"
   import SplitAction from "../../Logic/Osm/Actions/SplitAction"
@@ -13,7 +12,7 @@
   import Loading from "../Base/Loading.svelte"
   import { OsmWay } from "../../Logic/Osm/OsmObject"
   import type { WayId } from "../../Models/OsmFeature"
-  import { Utils } from "../../Utils"
+  import Scissors from "@babeard/svelte-heroicons/solid/Scissors"
 
   export let state: SpecialVisualizationState
   export let id: WayId
@@ -79,7 +78,7 @@
   {#if step === "deleted"}
     <!-- Empty -->
   {:else if step === "initial"}
-    <button on:click={() => downloadWay()}>
+    <button class="w-full" on:click={() => downloadWay()}>
       <Scissors class="h-6 w-6 shrink-0" />
       <Tr t={t.inviteToSplit} />
     </button>

src/UI/Popup/TagRendering/SpecialTranslation.svelte

@@ -24,6 +24,8 @@
   export let feature: Feature
   export let layer: LayerConfig | undefined
 
+  export let clss: string = ""
+
   let language = Locale.language
   let lang = t.actualLanguage($language)
   let txt: string = t.textFor($language)
@@ -48,7 +50,7 @@
   function createVisualisation(specpart: Exclude<RenderingSpecification, string>): BaseUIElement {
     {
       try {
-        return specpart.func.constr(state, tags, specpart.args, feature, layer)
+        return specpart.func.constr(state, tags, specpart.args, feature, layer)?.SetClass(specpart.style)
       } catch (e) {
         console.error(
           "Could not construct a special visualisation with specification",
@@ -66,16 +68,16 @@
 {#if lang === "*"}
   {#each specs as specpart}
     {#if typeof specpart === "string"}
-      <span>
+      <span class={clss}>
         {@html Utils.purify(Utils.SubstituteKeys(specpart, $tags))}
         <WeblateLink context={t.context} />
       </span>
     {:else if $tags !== undefined}
-      <ToSvelte construct={() => createVisualisation(specpart)} />
+      <ToSvelte construct={() => createVisualisation(specpart)?.SetClass(clss)} />
     {/if}
   {/each}
 {:else}
-  <span {lang}>
+  <span {lang} class={clss}>
     {#each specs as specpart}
       {#if typeof specpart === "string"}
         <span>

src/UI/Popup/TagRendering/TagRenderingAnswer.svelte

@@ -28,9 +28,9 @@
 </script>
 
 {#if config !== undefined && (config?.condition === undefined || config.condition.matchesProperties($tags))}
-  <div {id} class={twMerge("link-underline inline-block w-full", config?.classes, extraClasses)}>
+  <div {id} class={twMerge("link-underline inline-block w-full h-full", extraClasses)}>
     {#if $trs.length === 1}
-      <TagRenderingMapping mapping={$trs[0]} {tags} {state} {selectedElement} {layer} />
+      <TagRenderingMapping mapping={$trs[0]} {tags} {state} {selectedElement} {layer} clss={config?.classes?.join(" ") ?? ""}/>
     {/if}
     {#if $trs.length > 1}
       <ul>

src/UI/Popup/TagRendering/TagRenderingEditable.svelte

@@ -60,12 +60,13 @@
     }
     const highlighted = highlightedRendering.data
     if (config.id === highlighted) {
-      htmlElem.classList.add("glowing-shadow")
+      htmlElem.classList.add("focus")
       htmlElem.tabIndex = -1
       htmlElem.scrollIntoView({ behavior: "smooth" })
       Utils.focusOnFocusableChild(htmlElem)
     } else {
-      htmlElem.classList.remove("glowing-shadow")
+      htmlElem.classList.remove("focus")
+
     }
   }
 

src/UI/Popup/TagRendering/TagRenderingMapping.svelte

@@ -12,6 +12,11 @@
   export let tags: UIEventSource<Record<string, string>>
   export let state: SpecialVisualizationState
   export let layer: LayerConfig
+
+  /**
+   * Css classes to apply
+   */
+  export let clss: string = ""
   export let mapping: {
     readonly then: Translation
     readonly searchTerms?: Record<string, string[]>
@@ -33,8 +38,8 @@
       icon={mapping.icon}
       clss={twJoin(`mapping-icon-${mapping.iconClass ?? "small"}`, "mr-2")}
     />
-    <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
+    <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} {clss} />
   </div>
 {:else if mapping.then !== undefined}
-  <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
+  <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} {clss} />
 {/if}