Use 'area' to create a new note; open note popup when created

UI/Input/TextField.ts

@@ -61,17 +61,6 @@ export class TextField extends InputElement<string> {
         return this._isValid(t)
     }
 
-    private static test() {
-        const placeholder = new UIEventSource<string>("placeholder")
-        const tf = new TextField({
-            placeholder,
-        })
-        const html = <HTMLInputElement>tf.InnerConstructElement().children[0]
-        html.placeholder // => 'placeholder'
-        placeholder.setData("another piece of text")
-        html.placeholder // => "another piece of text"
-    }
-
     /**
      *
      * // should update placeholders dynamically

UI/Input/ValidatedTextField.ts

@@ -52,10 +52,6 @@ export class TextFieldDef {
         }
     }
 
-    protectedisValid(s: string, _: (() => string) | undefined): boolean {
-        return true
-    }
-
     public getFeedback(s: string): Translation {
         const tr = Translations.t.validation[this.name]
         if (tr !== undefined) {
@@ -82,6 +78,9 @@ export class TextFieldDef {
         }
 
         options["textArea"] = this.name === "text"
+        if (this.name === "text") {
+            options["htmlType"] = "area"
+        }
 
         const self = this
 
@@ -589,7 +588,7 @@ class StringTextField extends TextFieldDef {
 class TextTextField extends TextFieldDef {
     declare inputmode: "text"
     constructor() {
-        super("text", "A longer piece of text")
+        super("text", "A longer piece of text. Uses an textArea instead of a textField")
     }
 }
 

UI/Popup/NewNoteUi.ts

@@ -11,6 +11,7 @@ import Toggle from "../Input/Toggle"
 import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
 import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline"
 import FilteredLayer from "../../Models/FilteredLayer"
+import Hash from "../../Logic/Web/Hash"
 
 export default class NewNoteUi extends Toggle {
     constructor(
@@ -33,7 +34,7 @@ export default class NewNoteUi extends Toggle {
         text.SetClass("border rounded-sm border-grey-500")
 
         const postNote = new SubtleButton(Svg.addSmall_svg().SetClass("max-h-7"), t.createNote)
-        postNote.onClick(async () => {
+        postNote.OnClickWithLoading(t.creating, async () => {
             let txt = text.GetValue().data
             if (txt === undefined || txt === "") {
                 return
@@ -63,6 +64,7 @@ export default class NewNoteUi extends Toggle {
             }
             state?.featurePipeline?.InjectNewPoint(feature)
             state.selectedElement?.setData(feature)
+            Hash.hash.setData(feature.properties.id)
             text.GetValue().setData("")
             isCreated.setData(true)
         })
@@ -73,12 +75,12 @@ export default class NewNoteUi extends Toggle {
             new Combine([
                 new Toggle(
                     undefined,
-                    t.warnAnonymous.SetClass("alert"),
+                    t.warnAnonymous.SetClass("block alert"),
                     state?.osmConnection?.isLoggedIn
                 ),
                 new Toggle(
                     postNote,
-                    t.textNeeded.SetClass("alert"),
+                    t.textNeeded.SetClass("block alert"),
                     text.GetValue().map((txt) => txt?.length > 3)
                 ),
             ]).SetClass("flex justify-end items-center"),

langs/en.json

@@ -746,6 +746,7 @@
         "createNote": "Create a new note",
         "createNoteIntro": "Is something wrong or missing on the map? Create a note here. These will be checked by volunteers.",
         "createNoteTitle": "Create a new note here",
+        "creating": "Creating note...",
         "disableAllNoteFilters": "Disable all filters",
         "isClosed": "This note is resolved",
         "isCreated": "Your note has been created!",