Studio: UX-improvements after user testing

src/UI/InputElement/Helpers/SimpleTagInput.svelte

@@ -3,18 +3,29 @@
  */
 import { UIEventSource } from "../../../Logic/UIEventSource";
 import BasicTagInput from "../../Studio/TagInput/BasicTagInput.svelte";
-
+import { TagUtils } from "../../../Logic/Tags/TagUtils";
+import * as nmd from "nano-markdown"
+import FromHtml from "../../Base/FromHtml.svelte";
 export let value: UIEventSource<undefined | string>;
-export let uploadableOnly: boolean;
+export let args: string[] = [];
+let uploadableOnly: boolean = args[0] === "uploadableOnly";
 export let overpassSupportNeeded: boolean;
 
 /**
  * Only show the taginfo-statistics if they are suspicious (thus: less then 250 entries)
  */
 export let silent: boolean = false;
-
-
+let mode: string = "=";
+let dropdownFocussed = new UIEventSource(false);
+let documentation = TagUtils.modeDocumentation[mode];
+$: documentation = TagUtils.modeDocumentation[mode];
 </script>
 
 
-<BasicTagInput {overpassSupportNeeded} {silent} tag={value} {uploadableOnly} />
+<BasicTagInput bind:mode={mode} {dropdownFocussed} {overpassSupportNeeded} {silent} tag={value} {uploadableOnly} />
+{#if $dropdownFocussed}
+  <div class="border border-dashed border-black p-2 m-2">
+  <b>{documentation.name}</b>
+    <FromHtml src={nmd(documentation.docs)}/>
+  </div>
+{/if}

src/UI/InputElement/InputHelper.svelte

@@ -46,7 +46,7 @@
 {:else if type === "tag"}
   <TagInput { value } />
 {:else if type === "simple_tag"}
-  <SimpleTagInput { value } />
+  <SimpleTagInput { value } {args} />
 {:else if type === "opening_hours"}
   <OpeningHoursInput { value } />
 {:else if type === "wikidata"}

src/UI/InputElement/ValidatedInput.svelte

@@ -17,7 +17,6 @@
   export let getCountry: () => string | undefined
   export let placeholder: string | Translation | undefined
   export let unit: Unit = undefined
-
     export let value: UIEventSource<string>
     /**
      * Internal state bound to the input element.