midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add option to show text field inline with the rendering; add option to fill out a default value

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-07-11 15:44:17 +02:00
parent 29ea0ac925
commit 6e3c39e475
10 changed files with 123 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

35
UI/Input/InputElementWrapper.ts Normal file
View file

@ -0,0 +1,35 @@
import {InputElement} from "./InputElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
import {Translation} from "../i18n/Translation";
import {SubstitutedTranslation} from "../SubstitutedTranslation";
export default class InputElementWrapper<T> extends InputElement<T> {
public readonly IsSelected: UIEventSource<boolean>;
private readonly _inputElement: InputElement<T>;
private readonly _renderElement: BaseUIElement
constructor(inputElement: InputElement<T>, translation: Translation, key: string, tags: UIEventSource<any>) {
super()
this._inputElement = inputElement;
this.IsSelected = inputElement.IsSelected
const mapping = new Map<string, BaseUIElement>()
mapping.set(key, inputElement)
this._renderElement = new SubstitutedTranslation(translation, tags, mapping)
}
GetValue(): UIEventSource<T> {
return this._inputElement.GetValue();
}
IsValid(t: T): boolean {
return this._inputElement.IsValid(t);
}
protected InnerConstructElement(): HTMLElement {
return this._renderElement.ConstructElement();
}
}

2
UI/Input/TextField.ts
View file

@ -36,11 +36,11 @@ export class TextField extends InputElement<string> {
this.SetClass("form-text-field")
let inputEl: HTMLElement
if (options.htmlType === "area") {
this.SetClass("w-full box-border max-w-full")
const el = document.createElement("textarea")
el.placeholder = placeholder
el.rows = options.textAreaRows
el.cols = 50
el.style.cssText = "max-width: 100%; width: 100%; box-sizing: border-box"
inputEl = el;
} else {
const el = document.createElement("input")

2
UI/Input/ValidatedTextField.ts
View file

@ -282,7 +282,7 @@ export default class ValidatedTextField {
})
)
unitDropDown.GetValue().setData(unit.defaultDenom)
unitDropDown.SetStyle("width: min-content")
unitDropDown.SetClass("w-min")
input = new CombinedInputElement(
input,