From 40b6b9752186d4bf0262ca5b5dfdd8e4bf15fd6d Mon Sep 17 00:00:00 2001
From: Tobias <t@tobiasjordans.de>
Date: Sun, 17 Jan 2021 21:06:54 +0100
Subject: [PATCH] Tailwind the Language picker

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`.
---
 UI/Input/DropDown.ts | 20 +++++++++++---------
 UI/LanguagePicker.ts |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/UI/Input/DropDown.ts b/UI/Input/DropDown.ts
index 86efd04..e8dca1c 100644
--- a/UI/Input/DropDown.ts
+++ b/UI/Input/DropDown.ts
@@ -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) {
diff --git a/UI/LanguagePicker.ts b/UI/LanguagePicker.ts
index 304642a..2336a51 100644
--- a/UI/LanguagePicker.ts
+++ b/UI/LanguagePicker.ts
@@ -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');
     }