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.

src/UI/Studio/EditLayer.svelte

@@ -10,6 +10,7 @@
   import type { LayerConfigJson } from "../../Models/ThemeConfig/Json/LayerConfigJson";
   import type { ConversionMessage } from "../../Models/ThemeConfig/Conversion/Conversion";
   import ErrorIndicatorForRegion from "./ErrorIndicatorForRegion.svelte";
+  import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid";
 
   const layerSchema: ConfigMeta[] = <any>layerSchemaRaw;
 
@@ -57,12 +58,15 @@
 </script>
 
 <div class="w-full flex justify-between">
+  <slot />
   <h3>Editing layer {$title}</h3>
   {#if $hasErrors > 0}
     <div class="alert">{$hasErrors} errors detected</div>
   {:else}
-    <a class="primary button" href={baseUrl+state.server.layerUrl(title.data)} target="_blank" rel="noopener">Try it
-      out</a>
+    <a class="primary button" href={baseUrl+state.server.layerUrl(title.data)} target="_blank" rel="noopener">
+      Try it out
+      <ChevronRightIcon class= "h-6 w-6 shrink-0"/>
+    </a>
   {/if}
 </div>
 <div class="m4">

src/UI/Studio/SchemaBasedField.svelte

@@ -20,17 +20,17 @@
 
   const isTranslation = schema.hints.typehint === "translation" || schema.hints.typehint === "rendered" || ConfigMetaUtils.isTranslation(schema);
   let type = schema.hints.typehint ?? "string";
-  
-  let rendervalue = schema.type === "boolean" ? undefined : ((schema.hints.inline ?? schema.path.join(".")) + " <b>{translated(value)}</b>")
-  let helperArgs = undefined
-  let inline = schema.hints.inline !== undefined
+
+  let rendervalue = schema.type === "boolean" ? undefined : ((schema.hints.inline ?? schema.path.join(".")) + " <b>{translated(value)}</b>");
+  let helperArgs = schema.hints.typehelper?.split(",");
+  let inline = schema.hints.inline !== undefined;
   if (isTranslation) {
     type = "translation";
-    if(schema.hints.inline){
-      const inlineValue = schema.hints.inline
-      rendervalue = inlineValue
-      inline = false
-      helperArgs = [inlineValue.substring(0, inlineValue.indexOf("{")), inlineValue.substring(inlineValue.indexOf("}") + 1)]
+    if (schema.hints.inline) {
+      const inlineValue = schema.hints.inline;
+      rendervalue = inlineValue;
+      inline = false;
+      helperArgs = [inlineValue.substring(0, inlineValue.indexOf("{")), inlineValue.substring(inlineValue.indexOf("}") + 1)];
     }
   }
   if (type.endsWith("[]")) {
@@ -164,6 +164,8 @@
         <div class="alert">{msg.message}</div>
       {/each}
     {/if}
-    <span class="subtle">{schema.path.join(".")}</span>
+    {#if window.location.hostname === "127.0.0.1"}
+      <span class="subtle">{schema.path.join(".")}</span>
+    {/if}
   </div>
 {/if}

src/UI/Studio/TagInput/BasicTagInput.svelte

@@ -11,9 +11,16 @@
     export let tag: UIEventSource<string> = new UIEventSource<string>(undefined)
     export let uploadableOnly: boolean
     export let overpassSupportNeeded: boolean
+    
+    export  let dropdownFocussed = new UIEventSource(false)
 
+    /**
+     * If set, do not show tagInfo if there are many features matching
+     */
     export let silent : boolean = false
     
+    export let selected: UIEventSource<boolean> = new UIEventSource<boolean>(false)
+    
     let feedbackGlobal = tag.map(tag => {
         if (!tag) {
             return undefined
@@ -38,7 +45,7 @@
     let valueValue = new UIEventSource<string>(undefined)
 
 
-    let mode: string = "="
+    export let mode: string = "="
     let modes: string[] = []
 
     for (const k in TagUtils.modeDocumentation) {
@@ -105,7 +112,7 @@
 
         <ValidatedInput feedback={feedbackKey} placeholder="The key of the tag" type="key"
                         value={keyValue}></ValidatedInput>
-        <select bind:value={mode}>
+        <select bind:value={mode} on:focusin={() => dropdownFocussed.setData(true)} on:focusout={() => dropdownFocussed.setData(false)}>
             {#each modes as option}
                 <option value={option}>
                     {option}

src/UI/Studio/configMeta.ts

@@ -3,9 +3,13 @@ import { JsonSchema, JsonSchemaType } from "./jsonSchema"
 export interface ConfigMeta {
     path: string[]
     type: JsonSchemaType | JsonSchema[]
+    /**
+     * All fields are lowercase, as they should be case-insensitive
+     */
     hints: {
         group?: string
         typehint?: string
+        typehelper?: string
         /**
          * If multiple subcategories can be chosen
          */

src/UI/StudioGUI.svelte

@@ -16,8 +16,9 @@
 
   import layerSchemaRaw from "../../src/assets/schemas/layerconfigmeta.json";
   import If from "./Base/If.svelte";
+  import BackButton from "./Base/BackButton.svelte";
 
-  export let studioUrl = window.location.hostname === "127.0.0.1" ? "http://127.0.0.1:1235" : "https://studio.mapcomplete.org"; 
+  export let studioUrl = window.location.hostname === "127.0.0.1" ? "http://127.0.0.1:1235" : "https://studio.mapcomplete.org";
   const studio = new StudioServer(studioUrl);
   let layersWithErr = UIEventSource.FromPromiseWithErr(studio.fetchLayerOverview());
   let layers = layersWithErr.mapD(l => l.success);
@@ -42,15 +43,16 @@
   const layerSchema: ConfigMeta[] = <any>layerSchemaRaw;
 
   let editLayerState = new EditLayerState(layerSchema, studio);
+  let layerId = editLayerState.configuration.map(layerConfig => layerConfig.id);
 
   function fetchIconDescription(layerId): any {
     return AllSharedLayers.getSharedLayersConfigs().get(layerId)?._layerIcon;
   }
 
   async function createNewLayer() {
-    if(layerIdFeedback.data !== undefined){
-      console.warn("There is still some feedback - not starting to create a new layer")
-      return
+    if (layerIdFeedback.data !== undefined) {
+      console.warn("There is still some feedback - not starting to create a new layer");
+      return;
     }
     state = "loading";
     const id = newLayerId.data;
@@ -142,6 +144,9 @@
         -->
       </div>
     {:else if state === "edit_layer"}
+      
+      <BackButton clss="small p-1" imageClass="w-8 h-8" on:click={() => {state =undefined}}>MapComplete Studio</BackButton>
+      <h3>Choose a layer to edit</h3>
       <div class="flex flex-wrap">
         {#each Array.from($layers) as layerId}
           <NextButton clss="small" on:click={async () => {
@@ -157,6 +162,7 @@
         {/each}
       </div>
     {:else if state === "new_layer"}
+      
       <div class="interactive flex m-2 rounded-2xl flex-col p-2">
         <h3>Enter the ID for the new layer</h3>
         A good ID is:
@@ -185,7 +191,9 @@
         <Loading />
       </div>
     {:else if state === "editing_layer"}
-      <EditLayer {initialLayerConfig} state={editLayerState} />
+      <EditLayer {initialLayerConfig} state={editLayerState} >
+        <BackButton clss="small p-1" imageClass="w-8 h-8" on:click={() => {state =undefined}}>MapComplete Studio</BackButton>
+      </EditLayer>
     {/if}
   </LoginToggle>
 </If>