mirrors/an-anime-game-launcher
1
0
Fork 0
mirror of https://github.com/an-anime-team/an-anime-game-launcher.git synced 2024-12-23 18:20:19 +03:00
Code Issues Projects Releases Packages Wiki Activity

Made select boxes design

Browse source
This commit is contained in:
Observer KRypt0n_ 2021-10-24 13:58:07 +02:00
parent eb1ea84af9
commit dd5463a44b
No known key found for this signature in database
GPG key ID: DC5D4EC1303465DA
17 changed files with 186 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
public/html/settings.html
View file

@ -25,27 +25,7 @@
<div class="settings-item" id="general">
<h2 i18id="GeneralSettings">General</h2>
<h3 i18id="Langs">Language</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>
<!--<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">

2
public/locales/de.json
View file

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

2
public/locales/en-us.json
View file

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

2
public/locales/en.json
View file

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

2
public/locales/es.json
View file

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

2
public/locales/fr.json
View file

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

2
public/locales/id.json
View file

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

2
public/locales/ja.json
View file

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

2
public/locales/ko.json
View file

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

2
public/locales/pt.json
View file

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

2
public/locales/ru.json
View file

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

2
public/locales/th.json
View file

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

2
public/locales/vi.json
View file

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

2
public/locales/zh-cn.json
View file

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

2
public/locales/zh-tw.json
View file

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

92
src/sass/settings.sass
View file

@ -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

69
src/ts/settings.ts
View file

@ -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 => {