mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feat] new gui

Browse Source
This commit is contained in:
kwaroran
2023-07-18 23:05:47 +09:00
parent c0622c4f0d
commit cbb203dd44
29 changed files with 679 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/lib/Setting/Pages/LanguageSettings.svelte
View File

@@ -1,39 +1,41 @@
<script lang="ts">
import Check from "src/lib/Others/Check.svelte";
import Check from "src/lib/UI/GUI/Check.svelte";
import { changeLanguage, language } from "src/lang";
import { DataBase } from "src/ts/storage/database";
import { sleep } from "src/ts/util";
import Help from "src/lib/Others/Help.svelte";
import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
let langChanged = false
</script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.language}</h2>
<span class="text-neutral-200 mt-4">{language.UiLanguage}</span>
<select class="bg-transparent input-text mt-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.language} on:change={async () => {
<SelectInput className="mt-2" bind:value={$DataBase.language} on:change={async () => {
await sleep(10)
changeLanguage($DataBase.language)
langChanged = true
}}>
<option value="en" class="bg-darkbg appearance-none">English</option>
<option value="ko" class="bg-darkbg appearance-none">한국어</option>
<option value="cn" class="bg-darkbg appearance-none">中文</option>
</select>
<OptionInput value="en" >English</OptionInput>
<OptionInput value="ko" >한국어</OptionInput>
<OptionInput value="cn" >中文</OptionInput>
</SelectInput>
{#if langChanged}
<span class="bg-red-500 text-sm">Close the settings to take effect</span>
{/if}
<span class="text-neutral-200 mt-4">{language.translator}</span>
<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.translator}>
<option value="" class="bg-darkbg appearance-none">{language.disabled}</option>
<option value="ko" class="bg-darkbg appearance-none">Korean</option>
<option value="ru" class="bg-darkbg appearance-none">Russian</option>
<option value="zh" class="bg-darkbg appearance-none">Chinese</option>
<option value="ja" class="bg-darkbg appearance-none">Japanese</option>
<option value="fr" class="bg-darkbg appearance-none">French</option>
<option value="es" class="bg-darkbg appearance-none">Spanish</option>
<option value="pt" class="bg-darkbg appearance-none">Portuguese</option>
<option value="de" class="bg-darkbg appearance-none">German</option>
<SelectInput className="mt-2 mb-4" bind:value={$DataBase.translator}>
<OptionInput value="" >{language.disabled}</OptionInput>
<OptionInput value="ko" >Korean</OptionInput>
<OptionInput value="ru" >Russian</OptionInput>
<OptionInput value="zh" >Chinese</OptionInput>
<OptionInput value="ja" >Japanese</OptionInput>
<OptionInput value="fr" >French</OptionInput>
<OptionInput value="es" >Spanish</OptionInput>
<OptionInput value="pt" >Portuguese</OptionInput>
<OptionInput value="de" >German</OptionInput>
</select>
</SelectInput>
{#if $DataBase.translator}
<div class="flex items-center mt-2">