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

[feat] add color scheme

Browse Source
This commit is contained in:
kwaroran
2023-08-03 08:58:36 +09:00
parent 7d369221dc
commit 0e0601642a
57 changed files with 622 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/lib/Setting/Pages/DisplaySettings.svelte
View File

@@ -1,18 +1,23 @@
<script lang="ts">
import { language } from "src/lang";
import { DataBase, saveImage, updateTextTheme } from "src/ts/storage/database";
import { DataBase, saveImage } from "src/ts/storage/database";
import { changeFullscreen, selectSingleFile, sleep } from "src/ts/util";
import Check from "src/lib/UI/GUI/CheckInput.svelte";
import Help from "src/lib/Others/Help.svelte";
import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
import { updateAnimationSpeed } from "src/ts/gui/animation";
import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
import { updateAnimationSpeed } from "src/ts/gui/animation";
import { changeColorScheme, colorSchemeList, updateTextTheme } from "src/ts/gui/colorscheme";
const onSchemeInputChange = (e:Event) => {
changeColorScheme((e.target as HTMLInputElement).value)
}
</script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
<span class="text-neutral-200 mt-4">{language.theme}</span>
<span class="text-textcolor mt-4">{language.theme}</span>
<SelectInput className="mt-2" bind:value={$DataBase.theme}>
<OptionInput value="" >Standard Risu</OptionInput>
<OptionInput value="waifu" >Waifulike</OptionInput>
@@ -21,16 +26,23 @@
{#if $DataBase.theme === "waifu"}
<span class="text-neutral-200 mt-4">{language.waifuWidth}</span>
<span class="text-textcolor mt-4">{language.waifuWidth}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.waifuWidth} />
<span class="text-gray-400 text-sm">{($DataBase.waifuWidth)}%</span>
<span class="text-textcolor2 text-sm">{($DataBase.waifuWidth)}%</span>
<span class="text-neutral-200 mt-4">{language.waifuWidth2}</span>
<span class="text-textcolor mt-4">{language.waifuWidth2}</span>
<SliderInput min={20} max={150} bind:value={$DataBase.waifuWidth2} />
<span class="text-gray-400 text-sm">{($DataBase.waifuWidth2)}%</span>
<span class="text-textcolor2 text-sm">{($DataBase.waifuWidth2)}%</span>
{/if}
<span class="text-neutral-200 mt-4">{language.textColor}</span>
<span class="text-textcolor mt-4">{language.colorScheme}</span>
<SelectInput className="mt-2" value={$DataBase.colorSchemeName} on:change={onSchemeInputChange}>
{#each colorSchemeList as scheme}
<OptionInput value={scheme} >{scheme}</OptionInput>
{/each}
</SelectInput>
<span class="text-textcolor mt-4">{language.textColor}</span>
<SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
<OptionInput value="standard" >{language.classicRisu}</OptionInput>
<OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
@@ -56,25 +68,25 @@
</div>
{/if}
<span class="text-neutral-200">{language.UISize}</span>
<span class="text-textcolor">{language.UISize}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.zoomsize} />
<span class="text-gray-400 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
<span class="text-neutral-200">{language.iconSize}</span>
<span class="text-textcolor">{language.iconSize}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.iconsize} />
<span class="text-gray-400 mb-6 text-sm">{($DataBase.iconsize)}%</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.iconsize)}%</span>
<span class="text-neutral-200">{language.assetWidth}</span>
<span class="text-textcolor">{language.assetWidth}</span>
<SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} />
<span class="text-gray-400 mb-6 text-sm">{
<span class="text-textcolor2 mb-6 text-sm">{
($DataBase.assetWidth === -1) ? "Unlimited" :
($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)}</span>
<span class="text-neutral-200">{language.animationSpeed}</span>
<span class="text-textcolor">{language.animationSpeed}</span>
<SliderInput min={0} max={1} step={0.05} bind:value={$DataBase.animationSpeed} on:change={updateAnimationSpeed} />
<span class="text-gray-400 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
<span class="text-textcolor2 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>