Merge remote-tracking branch 'original/main' into term

public/html/settings.html

@@ -25,27 +25,7 @@
             <div class="settings-item" id="general">
                 <h2 i18id="GeneralSettings">General</h2>
 
-                <h3 i18id="Langs">Language</h3>
+                <!--<h3 i18id="Voice">Voice Pack</h3>
-
-                <select class="dropdown-menu" id="language-list">
-                    <option value="en-us">English (US)</option>
-                    <option value="zh-cn">中文（简化）(Chinese Simplified)</option>
-                    <option value="de-de">Deutsch (German)</option>
-                    <option value="fr-fr">Français (French)</option>
-                    <option value="id-id">Indonesia (Indonesian)</option>
-                    <option value="ja-jp">日本語 (Japanese)</option>
-                    <option value="ko-kr">한국어 (Korean)</option>
-                    <option value="pt-pt">Português (Portuguese)</option>
-                    <option value="ru-ru">Pусский (Russian)</option>
-                    <option value="es-es">Español (Spanish)</option>
-                    <option value="th-th">ภาษาไทย (Thai)</option>
-                    <option value="zh-tw">中文（繁體）(Chinese Traditional)</option>
-                    <option value="vi-vn">Tiếng Việt (Vietnamese)</option>
-                </select>
-
-                <br>
-
-                <h3 i18id="Voice">Voice Pack</h3>
 
                 <select class="dropdown-menu" id="voice-list" disabled>
                     <option value="en-us">English (US)</option>
@@ -54,6 +34,36 @@
                     <option value="ko-kr">한국어 (Korean)</option>
                 </select>
 
+                <br>-->
+
+                <div class="select" id="language">
+                    <span i18id="Language">Language</span>
+
+                    <div class="select-options">
+                        <ul>
+                            <li value="en-us">English (US)</li>
+                            <li value="zh-cn">中文（简化）(Chinese Simplified)</li>
+                            <li value="de-de">Deutsch (German)</li>
+                            <li value="fr-fr">Français (French)</li>
+                            <li value="id-id">Indonesia (Indonesian)</li>
+                            <li value="ja-jp">日本語 (Japanese)</li>
+                            <li value="ko-kr">한국어 (Korean)</li>
+                            <li value="pt-pt">Português (Portuguese)</li>
+                            <li value="ru-ru">Pусский (Russian)</li>
+                            <li value="es-es">Español (Spanish)</li>
+                            <li value="th-th">ภาษาไทย (Thai)</li>
+                            <li value="zh-tw">中文（繁體）(Chinese Traditional)</li>
+                            <li value="vi-vn">Tiếng Việt (Vietnamese)</li>
+                        </ul>
+                    </div>
+                
+                    <div class="selected-item">
+                        <span>English</span>
+
+                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330.002 330.002" xml:space="preserve"><path id="XMLID_226_" d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21 l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001 c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/></svg>
+                    </div>
+                </div>
+                
                 <br>
 
                 <div class="checkbox" id="discord-rpc">

public/locales/de.json

@@ -3,7 +3,7 @@
     "Update": "Updaten",
     "Launch": "Starten",
     "Runners": "Runners",
-    "Langs": "Sprachen",
+    "Language": "Language",
     "Voice": "Sprachpaket",
     "SettingsTitle": "Einstellungen",
     "GeneralSettings": "Generell",

public/locales/en-us.json

@@ -3,7 +3,7 @@
     "Update": "Update",
     "Launch": "Launch",
     "Runners": "Runners",
-    "Langs": "Languages",
+    "Language": "Language",
     "Voice": "Voice Pack",
     "SettingsTitle": "Settings",
     "GeneralSettings": "General",

public/locales/en.json

@@ -3,7 +3,7 @@
     "Update": "Update",
     "Launch": "Launch",
     "Runners": "Runners",
-    "Langs": "Languages",
+    "Language": "Language",
     "Voice": "Voice Pack",
     "SettingsTitle": "Settings",
     "GeneralSettings": "General",

public/locales/es.json

@@ -3,7 +3,7 @@
     "Update": "Update",
     "Launch": "Launch",
     "Runners": "Runners",
-    "Langs": "Languages",
+    "Language": "Language",
     "Voice": "Voice Pack",
     "SettingsTitle": "Settings",
     "GeneralSettings": "General",

public/locales/fr.json

@@ -3,7 +3,7 @@
     "Update": "Update",
     "Launch": "Launch",
     "Runners": "Runners",
-    "Langs": "Languages",
+    "Language": "Language",
     "Voice": "Voice Pack",
     "SettingsTitle": "Settings",
     "GeneralSettings": "General",

public/locales/id.json

@@ -3,7 +3,7 @@
     "Update": "Update",
     "Launch": "Launch",
     "Runners": "Runners",
-    "Langs": "Languages",
+    "Language": "Language",
     "Voice": "Voice Pack",
     "SettingsTitle": "Settings",
     "GeneralSettings": "General",

public/locales/ja.json

@@ -3,7 +3,7 @@
     "Update": "アップデート",
     "Launch": "打ち上げ",
     "Runners": "Runners",
-    "Langs": "言語",
+    "Language": "言語",
     "Voice": "ボイスパック",
     "SettingsTitle": "設定",
     "GeneralSettings": "一般",

public/locales/ko.json

@@ -3,7 +3,7 @@
     "Update": "Update",
     "Launch": "Launch",
     "Runners": "Runners",
-    "Langs": "Languages",
+    "Language": "Language",
     "Voice": "Voice Pack",
     "SettingsTitle": "Settings",
     "GeneralSettings": "General",

public/locales/pt.json

@@ -3,7 +3,7 @@
     "Update": "Update",
     "Launch": "Launch",
     "Runners": "Runners",
-    "Langs": "Languages",
+    "Language": "Language",
     "Voice": "Voice Pack",
     "SettingsTitle": "Settings",
     "GeneralSettings": "General",

public/locales/ru.json

@@ -3,7 +3,7 @@
     "Update": "Обновить",
     "Launch": "Запустить",
     "Runners": "Версии Wine",
-    "Langs": "Языки",
+    "Language": "Язык",
     "Voice": "Озвучка",
     "SettingsTitle": "Настройки",
     "GeneralSettings": "Общее",

public/locales/th.json

@@ -3,7 +3,7 @@
     "Update": "Update",
     "Launch": "Launch",
     "Runners": "Runners",
-    "Langs": "Languages",
+    "Language": "Language",
     "Voice": "Voice Pack",
     "SettingsTitle": "Settings",
     "GeneralSettings": "General",

public/locales/vi.json

@@ -3,7 +3,7 @@
     "Update": "Update",
     "Launch": "Launch",
     "Runners": "Runners",
-    "Langs": "Languages",
+    "Language": "Language",
     "Voice": "Voice Pack",
     "SettingsTitle": "Settings",
     "GeneralSettings": "General",

public/locales/zh-cn.json

@@ -3,7 +3,7 @@
     "Update": "更新",
     "Launch": "发射",
     "Runners": "Runners",
-    "Langs": "语言",
+    "Language": "Language",
     "Voice": "语音包",
     "SettingsTitle": "设置",
     "GeneralSettings": "一般的",

public/locales/zh-tw.json

@@ -3,7 +3,7 @@
     "Update": "更新",
     "Launch": "發射",
     "Runners": "Runners",
-    "Langs": "語言",
+    "Language": "Language",
     "Voice": "語音包",
     "SettingsTitle": "設置",
     "GeneralSettings": "一般的",

src/sass/settings.sass

@@ -135,6 +135,8 @@ body
         margin-left: auto
         padding: 8px 16px
 
+        cursor: pointer
+
         &:hover
             background-color: #657ef8
 
@@ -151,3 +153,93 @@ body
 
         svg
             filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
+
+.select
+    display: inline-flex
+    align-items: center
+
+    font-size: larger
+
+    width: calc(100% - 24px)
+    height: 48px
+    padding: 0 12px
+
+    border-radius: 12px
+
+    .select-options
+        position: absolute
+        display: none
+
+        background-color: white
+        border-radius: 12px
+
+        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2)
+
+        padding: 8px 12px
+        transform: translateY(calc(50% + 32px)) translateX(208px)
+
+        cursor: pointer
+
+        ul
+            list-style: none
+
+            padding: 0
+            margin: 0
+
+            li
+                color: #8592a3
+                font-size: smaller
+
+                border-radius: 8px
+                padding: 8px
+
+                &:hover
+                    background-color: #e1e7ff
+                    color: #657ef8
+
+            li:not(last-child)
+                margin-bottom: 4px
+
+            li.selected
+                background-color: #e1e7ff
+                color: #657ef8
+
+    .selected-item
+        display: flex
+        align-items: baseline
+
+        font-size: initial
+
+        background-color: #e1e7ff
+
+        border-radius: 16px
+        margin-left: auto
+        padding: 8px 16px
+
+        cursor: pointer
+
+        &:hover
+            background-color: #657ef8
+            color: white
+
+            svg
+                filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
+
+        svg
+            height: 12px
+            width: 12px
+
+            margin-left: 8px
+
+            transform: rotate(90deg)
+
+.select-active
+    .selected-item
+        color: white
+        background-color: #657ef8
+
+        svg
+            filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
+
+    .select-options
+        display: block

src/ts/settings.ts

@@ -9,7 +9,6 @@ import { LauncherUI } from './lib/LauncherUI';
 import { Tools } from './lib/Tools';
 
 $(() => {
-
     // Make sure settings is shown in correct language.
     LauncherUI.updateLang(Genshinlib.getConfig('lang.launcher') ?? 'en-us');
 
@@ -40,9 +39,57 @@ $(() => {
         item.toggleClass('checkbox-active').trigger('classChange');
     });
 
+    $('.selected-item').on('click', (e) => {
+        let item = $(e.target);
+
+        while (!item.hasClass('select'))
+            item = item.parent();
+
+        item.toggleClass('select-active').trigger('classChange');
+    });
+
+    $('.select-options li').on('click', (e) => {
+        let item = $(e.target), li = $(e.target);
+
+        if (!item.hasClass('selected'))
+        {
+            while (!item.hasClass('select'))
+                item = item.parent();
+
+            item.find('.select-options li').removeClass('selected');
+            li.addClass('selected');
+
+            item.removeClass('select-active');
+
+            item.find('.selected-item span').text(li.text());
+
+            item.trigger('selectionChanged', {
+                caption: li.text(),
+                value: li.attr('value')
+            });
+        }
+    });
+
+    $('#language').on('selectionChanged', (e, data: any) => {
+        let activeLang = Genshinlib.getConfig('lang.launcher');
+
+        if (activeLang != data.value)
+        {
+            Genshinlib.updateConfig('lang.launcher', data.value);
+            Genshinlib.updateConfig('background.time', null);
+
+            LauncherUI.updateLang(data.value);
+
+            // Send language updates
+            ipcRenderer.send('change-lang', { 'lang': data.value });
+        }
+    });
+
     // Select the saved options in launcher.json on load
     $(`#voice-list option[value="${Genshinlib.getConfig('lang.voice')}"]`).prop('selected', true);
-    $(`#language-list option[value="${Genshinlib.getConfig('lang.launcher')}"]`).prop('selected', true);
+
+    $(`#language li[value=${Genshinlib.getConfig('lang.launcher')}]`).addClass('selected');
+    $('#language .selected-item span').text($(`#language li[value=${Genshinlib.getConfig('lang.launcher')}]`).text());
 
     if (Genshinlib.getConfig('rpc'))
         $('#discord-rpc').addClass('checkbox-active');
@@ -69,24 +116,6 @@ $(() => {
         else console.log('VP can\' be changed to the already set language');
     });
 
-    $('#language-list').on('change', (e) => {
-        let activeLang = Genshinlib.getConfig('lang.launcher');
-
-        if (activeLang != e.target.value)
-        {
-            Genshinlib.updateConfig('lang.launcher', e.target.value);
-            Genshinlib.updateConfig('background.time', null);
-
-            LauncherUI.updateLang(e.target.value);
-
-            // Send language updates
-            ipcRenderer.send('change-lang', { 'lang': e.target.value });
-
-            $(`#language-list option[value="${activeLang}"]`).removeProp('selected');
-            $(`#language-list option[value="${e.target.value}"]`).prop('selected', true);
-        }
-    });
-
     let activeRunner = Genshinlib.getConfig('runner');
 
     Genshinlib.getRunners().then(runners => {