From 770fb8f1af4df3824d67cbde0851fd82e12891dd Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Mon, 11 Dec 2023 21:44:13 +0100
Subject: [PATCH] Fix overflowing Brazilian Portuguese button and change style
 of current language button

---
 public/index.html                 | 64 ++++++++++++++++---------------
 public/scripts/ui.js              | 28 +++++++-------
 public/styles/deferred-styles.css | 29 +++++++++-----
 public/styles/styles-main.css     |  6 +++
 4 files changed, 73 insertions(+), 54 deletions(-)

diff --git a/public/index.html b/public/index.html
index 317a4cc..09d421b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -182,79 +182,81 @@
                 <div class="row center p2">
                     <h2 class="dialog-title" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text"></h2>
                 </div>
-                <div class="language-buttons">
-                    <button class="btn fw" data-i18n-key="dialogs.system-language" data-i18n-attrs="text"></button>
-                    <button class="btn fw" value="ar">
+                <div class="language-buttons p2">
+                    <button class="btn fw wrap">
+                        <span data-i18n-key="dialogs.system-language" data-i18n-attrs="text"></span>
+                    </button>
+                    <button class="btn fw wrap" value="ar">
                         <span>العربية</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Arabic)</span>
                     </button>
-                    <button class="btn fw" value="de">
+                    <button class="btn fw wrap" value="de">
                         <span>Deutsch</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(German)</span>
                     </button>
-                    <button class="btn fw" value="en">
+                    <button class="btn fw wrap" value="en">
                         <span>English</span>
                     </button>
-                    <button class="btn fw" value="es">
+                    <button class="btn fw wrap" value="es">
                         <span>Español</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Spanish)</span>
                     </button>
-                    <button class="btn fw" value="fr">
+                    <button class="btn fw wrap" value="fr">
                         <span>Français</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(French)</span>
                     </button>
-                    <button class="btn fw" value="id">
+                    <button class="btn fw wrap" value="id">
                         <span>Bahasa Indonesia</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Indonesian)</span>
                     </button>
-                    <button class="btn fw" value="it">
+                    <button class="btn fw wrap" value="it">
                         <span>Italiano</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Italian)</span>
                     </button>
-                    <button class="btn fw" value="nl">
+                    <button class="btn fw wrap" value="nl">
                         <span>Nederlands</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Dutch)</span>
                     </button>
-                    <button class="btn fw" value="nb">
+                    <button class="btn fw wrap" value="nb">
                         <span>Norsk</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Norwegian)</span>
                     </button>
-                    <button class="btn fw" value="pt-BR">
+                    <button class="btn fw wrap" value="pt-BR">
                         <span>Português do Brasil</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Brazilian Portuguese)</span>
                     </button>
-                    <button class="btn fw" value="ro">
+                    <button class="btn fw wrap" value="ro">
                         <span>Română</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Romanian)</span>
                     </button>
-                    <button class="btn fw" value="ru">
+                    <button class="btn fw wrap" value="ru">
                         <span>Русский язык</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Russian)</span>
                     </button>
-                    <button class="btn fw" value="tr">
+                    <button class="btn fw wrap" value="tr">
                         <span>Türkçe</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Turkish)</span>
                     </button>
-                    <button class="btn fw" value="zh-CN">
+                    <button class="btn fw wrap" value="zh-CN">
                         <span>中文</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Chinese)</span>
                     </button>
-                    <button class="btn fw" value="ja">
+                    <button class="btn fw wrap" value="ja">
                         <span>日本語</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Japanese)</span>
                     </button>
                 </div>
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 8c0efd8..a6c6c8e 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -774,7 +774,7 @@ class LanguageSelectDialog extends Dialog {
         this.$languageSelectBtn = $('language-selector');
         this.$languageSelectBtn.addEventListener('click', _ => this.show());
 
-        this.$languageButtons = this.$el.querySelectorAll(".language-buttons button");
+        this.$languageButtons = this.$el.querySelectorAll(".language-buttons .btn");
         this.$languageButtons.forEach($btn => {
             $btn.addEventListener("click", e => this.selectLanguage(e));
         })
@@ -790,22 +790,22 @@ class LanguageSelectDialog extends Dialog {
     }
 
     show() {
-        if (Localization.isSystemLocale()) {
-            this.$languageButtons[0].focus();
-        }
-        else {
-            let locale = Localization.getLocale();
-            for (let i=0; i<this.$languageButtons.length; i++) {
-                const $btn = this.$languageButtons[i];
-                if ($btn.value === locale) {
-                    $btn.focus();
-                    break;
-                }
-            }
-        }
+        let locale = Localization.getLocale();
+        this.currentLanguageBtn = Localization.isSystemLocale()
+            ? this.$languageButtons[0]
+            : this.$el.querySelector(`.btn[value="${locale}"]`);
+
+        this.currentLanguageBtn.classList.add("current");
+
         super.show();
     }
 
+    hide() {
+        this.currentLanguageBtn.classList.remove("current");
+
+        super.hide();
+    }
+
     selectLanguage(e) {
         e.preventDefault()
         let languageCode = e.target.value;
diff --git a/public/styles/deferred-styles.css b/public/styles/deferred-styles.css
index eb574f9..75c355a 100644
--- a/public/styles/deferred-styles.css
+++ b/public/styles/deferred-styles.css
@@ -335,7 +335,7 @@ x-dialog x-paper {
     display: flex;
     margin: auto;
     flex-direction: column;
-    width: 400px;
+    max-width: 450px;
     z-index: 3;
     border-radius: 30px;
     overflow: hidden;
@@ -388,10 +388,6 @@ x-dialog a {
 
 /* Pair Devices Dialog & Public Room Dialog */
 
-#public-room-dialog x-paper {
-    width: 450px;
-}
-
 .input-key-container {
     width: 100%;
     display: flex;
@@ -556,12 +552,27 @@ x-paper > .btn-row {
     margin: 5px 10px 10px;
 }
 
-.language-buttons > button > span {
-    margin: 0 0.3em;
+.language-buttons > .btn {
+    border-top: solid var(--lang-hr-color) 2px;
+    padding: 7px;
+    font-size: 12px;
 }
 
-.language-buttons > button {
-    min-height: 36px;
+.language-buttons > .btn:last-of-type {
+    border-bottom: solid var(--lang-hr-color) 2px;
+}
+
+/* Ensure click event target is always button and never span */
+.language-buttons span {
+    z-index: -1;
+}
+
+.language-buttons > .current:after {
+    position: absolute;
+    right: 20px;
+    content: "✓";
+    color: var(--primary-color);
+    font-size: 20px;
 }
 
 .file-description {
diff --git a/public/styles/styles-main.css b/public/styles/styles-main.css
index e502af3..b523e8f 100644
--- a/public/styles/styles-main.css
+++ b/public/styles/styles-main.css
@@ -922,6 +922,7 @@ body {
     --lt-bg-color-secondary: #f2f2f2;
     --lt-border-color: #a9a9a9;
     --lt-badge-color: #a5a5a5;
+    --lt-lang-hr-color: #DDD;
 
     --lt-shadow-color-secondary-rgb: 0,0,0;
     --lt-shadow-color-secondary-cover-rgb: 242,242,242;
@@ -935,6 +936,7 @@ body {
     --dt-bg-color-secondary: #262628;
     --dt-border-color: #919191;
     --dt-badge-color: #717171;
+    --dt-lang-hr-color: #404040;
 
     --dt-shadow-color-secondary-rgb: 255,255,255;
     --dt-shadow-color-secondary-cover-rgb: 38,38,38;
@@ -950,6 +952,7 @@ body {
     --bg-color-secondary: var(--lt-bg-color-secondary);
     --border-color: var(--lt-border-color);
     --badge-color: var(--lt-badge-color);
+    --lang-hr-color: var(--lt-lang-hr-color);
 
     --shadow-color-secondary-rgb: var(--lt-shadow-color-secondary-rgb);
     --shadow-color-secondary-cover-rgb: var(--lt-shadow-color-secondary-cover-rgb);
@@ -965,6 +968,7 @@ body.dark-theme {
     --bg-color-secondary: var(--dt-bg-color-secondary);
     --border-color: var(--dt-border-color);
     --badge-color: var(--dt-badge-color);
+    --lang-hr-color: var(--dt-lang-hr-color);
 
     --shadow-color-secondary-rgb: var(--dt-shadow-color-secondary-rgb);
     --shadow-color-secondary-cover-rgb: var(--dt-shadow-color-secondary-cover-rgb);
@@ -983,6 +987,7 @@ body.dark-theme {
         --bg-color-secondary: var(--dt-bg-color-secondary);
         --border-color: var(--dt-border-color);
         --badge-color: var(--dt-badge-color);
+        --lang-hr-color: var(--dt-lang-hr-color);
 
         --shadow-color-secondary-rgb: var(--dt-shadow-color-secondary-rgb);
         --shadow-color-secondary-cover-rgb: var(--dt-shadow-color-secondary-cover-rgb);
@@ -999,6 +1004,7 @@ body.dark-theme {
         --bg-color-secondary: var(--lt-bg-color-secondary);
         --border-color: var(--lt-border-color);
         --badge-color: var(--lt-badge-color);
+        --lang-hr-color: var(--lt-lang-hr-color);
 
         --shadow-color-secondary-rgb: var(--lt-shadow-color-secondary-rgb);
         --shadow-color-secondary-cover-rgb: var(--lt-shadow-color-secondary-cover-rgb);