From dd5463a44b5e8bd82371d80e872da36ffb94fdff Mon Sep 17 00:00:00 2001 From: Observer KRypt0n_ Date: Sun, 24 Oct 2021 13:58:07 +0200 Subject: [PATCH] Made select boxes design --- public/html/settings.html | 52 +++++++++++++--------- public/locales/de.json | 2 +- public/locales/en-us.json | 2 +- public/locales/en.json | 2 +- public/locales/es.json | 2 +- public/locales/fr.json | 2 +- public/locales/id.json | 2 +- public/locales/ja.json | 2 +- public/locales/ko.json | 2 +- public/locales/pt.json | 2 +- public/locales/ru.json | 2 +- public/locales/th.json | 2 +- public/locales/vi.json | 2 +- public/locales/zh-cn.json | 2 +- public/locales/zh-tw.json | 2 +- src/sass/settings.sass | 92 +++++++++++++++++++++++++++++++++++++++ src/ts/settings.ts | 69 ++++++++++++++++++++--------- 17 files changed, 186 insertions(+), 55 deletions(-) diff --git a/public/html/settings.html b/public/html/settings.html index f3cebfb..392058a 100644 --- a/public/html/settings.html +++ b/public/html/settings.html @@ -25,27 +25,7 @@

General

-

Language

- - - -
- -

Voice Pack

+ + +
+ Language + +
+
    +
  • English (US)
    • +
  • 中文（简化）(Chinese Simplified)
    • +
  • Deutsch (German)
    • +
  • Français (French)
    • +
  • Indonesia (Indonesian)
    • +
  • 日本語 (Japanese)
    • +
  • 한국어 (Korean)
    • +
  • Português (Portuguese)
    • +
  • Pусский (Russian)
    • +
  • Español (Spanish)
    • +
  • ภาษาไทย (Thai)
    • +
  • 中文（繁體）(Chinese Traditional)
    • +
  • Tiếng Việt (Vietnamese)
    • +
+
+ +
+ English + + +
+
+
diff --git a/public/locales/de.json b/public/locales/de.json index 9008b4d..6252bee 100644 --- a/public/locales/de.json +++ b/public/locales/de.json @@ -3,7 +3,7 @@ "Update": "Updaten", "Launch": "Starten", "Runners": "Runners", - "Langs": "Sprachen", + "Language": "Language", "Voice": "Sprachpaket", "SettingsTitle": "Einstellungen", "GeneralSettings": "Generell", diff --git a/public/locales/en-us.json b/public/locales/en-us.json index 32d568b..f5e122d 100644 --- a/public/locales/en-us.json +++ b/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", diff --git a/public/locales/en.json b/public/locales/en.json index 1fc64fc..87fd972 100644 --- a/public/locales/en.json +++ b/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", diff --git a/public/locales/es.json b/public/locales/es.json index 1fc64fc..87fd972 100644 --- a/public/locales/es.json +++ b/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", diff --git a/public/locales/fr.json b/public/locales/fr.json index 1fc64fc..87fd972 100644 --- a/public/locales/fr.json +++ b/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", diff --git a/public/locales/id.json b/public/locales/id.json index 1fc64fc..87fd972 100644 --- a/public/locales/id.json +++ b/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", diff --git a/public/locales/ja.json b/public/locales/ja.json index 85f6215..51d73b7 100644 --- a/public/locales/ja.json +++ b/public/locales/ja.json @@ -3,7 +3,7 @@ "Update": "アップデート", "Launch": "打ち上げ", "Runners": "Runners", - "Langs": "言語", + "Language": "言語", "Voice": "ボイスパック", "SettingsTitle": "設定", "GeneralSettings": "一般", diff --git a/public/locales/ko.json b/public/locales/ko.json index 1fc64fc..87fd972 100644 --- a/public/locales/ko.json +++ b/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", diff --git a/public/locales/pt.json b/public/locales/pt.json index 1fc64fc..87fd972 100644 --- a/public/locales/pt.json +++ b/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", diff --git a/public/locales/ru.json b/public/locales/ru.json index cf04afb..a7c8cac 100644 --- a/public/locales/ru.json +++ b/public/locales/ru.json @@ -3,7 +3,7 @@ "Update": "Обновить", "Launch": "Запустить", "Runners": "Версии Wine", - "Langs": "Языки", + "Language": "Язык", "Voice": "Озвучка", "SettingsTitle": "Настройки", "GeneralSettings": "Общее", diff --git a/public/locales/th.json b/public/locales/th.json index 1fc64fc..87fd972 100644 --- a/public/locales/th.json +++ b/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", diff --git a/public/locales/vi.json b/public/locales/vi.json index 1fc64fc..87fd972 100644 --- a/public/locales/vi.json +++ b/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", diff --git a/public/locales/zh-cn.json b/public/locales/zh-cn.json index be47c64..a39da05 100644 --- a/public/locales/zh-cn.json +++ b/public/locales/zh-cn.json @@ -3,7 +3,7 @@ "Update": "更新", "Launch": "发射", "Runners": "Runners", - "Langs": "语言", + "Language": "Language", "Voice": "语音包", "SettingsTitle": "设置", "GeneralSettings": "一般的", diff --git a/public/locales/zh-tw.json b/public/locales/zh-tw.json index a05de05..88467d3 100644 --- a/public/locales/zh-tw.json +++ b/public/locales/zh-tw.json @@ -3,7 +3,7 @@ "Update": "更新", "Launch": "發射", "Runners": "Runners", - "Langs": "語言", + "Language": "Language", "Voice": "語音包", "SettingsTitle": "設置", "GeneralSettings": "一般的", diff --git a/src/sass/settings.sass b/src/sass/settings.sass index d496d3c..978297d 100644 --- a/src/sass/settings.sass +++ b/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 diff --git a/src/ts/settings.ts b/src/ts/settings.ts index 4780ccb..180a35e 100644 --- a/src/ts/settings.ts +++ b/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 => {