midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Tailwind the Language picker

Browse source 
Changes the style and gives Class the ability to receive css-classes. There should also be a label-text given; something like "Change language" which is then hidden for `sr-only`.
This commit is contained in:
Tobias 2021-01-17 21:06:54 +01:00
parent 415010ba47
commit 40b6b97521
2 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
UI/Input/DropDown.ts
View file

@ -14,10 +14,14 @@ export class DropDown<T> extends InputElement<T> {
constructor(label: string | UIElement,
values: { value: T, shown: string | UIElement }[],
value: UIEventSource<T> = undefined) {
value: UIEventSource<T> = undefined,
label_class: string,
select_class: string) {
super(undefined);
this._value = value ?? new UIEventSource<T>(undefined);
this._label = Translations.W(label);
this._label_class = label_class || '';
this._select_class = select_class || '';
this._values = values.map(v => {
return {
value: v.value,
@ -29,10 +33,8 @@ export class DropDown<T> extends InputElement<T> {
this.ListenTo(v.shown._source);
}
this.ListenTo(this._value);
this.onClick(() => {}) // by registering a click, the click event is consumed and doesn't bubble furter to other elements, e.g. checkboxes
this.onClick(() => {}) // by registering a click, the click event is consumed and doesn't bubble furter to other elements, e.g. checkboxes
}
GetValue(): UIEventSource<T> {
@ -57,13 +59,13 @@ export class DropDown<T> extends InputElement<T> {
for (let i = 0; i < this._values.length; i++) {
options += "<option value='" + i + "'>" + this._values[i].shown.InnerRender() + "</option>"
}
return "<form>" +
"<label for='dropdown-" + this.id + "'>" + this._label.Render() + " </label>" +
"<select name='dropdown-" + this.id + "' id='dropdown-" + this.id + "'>" +
return `<form>` +
`<label class='${this._label_class}' for='dropdown-${this.id}'>${this._label.Render()}</label>` +
`<select class='${this._select_class}' name='dropdown-${this.id}' id='dropdown-${this.id}'>` +
options +
"</select>" +
"</form>";
`</select>` +
`</form>`;
}
protected InnerUpdate(element) {

2
UI/LanguagePicker.ts
View file

@ -16,7 +16,7 @@ export default class LanguagePicker {
return new DropDown(label, languages.map(lang => {
return {value: lang, shown: lang}
}
), Locale.language);
), Locale.language, 'sr-only', 'bg-indigo-100 p-1 rounded hover:bg-indigo-200');
}