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

Migrate to svelte 5

Browse Source
This commit is contained in:
kwaroran
2024-10-23 02:31:37 +09:00
parent e434c7ab96
commit c7330719ad
120 changed files with 2398 additions and 2033 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,24 +22,24 @@
changeColorScheme((e.target as HTMLInputElement).value)
}
let submenu = $DataBase.useLegacyGUI ? -1 : 0
let submenu = $state($DataBase.useLegacyGUI ? -1 : 0)
</script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
{#if submenu !== -1}
<div class="flex w-full rounded-md border border-darkborderc mb-4 overflow-x-auto h-16 min-h-16 overflow-y-clip">
<button on:click={() => {
<button onclick={() => {
submenu = 0
}} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
<span>{language.theme}</span>
</button>
<button on:click={() => {
<button onclick={() => {
submenu = 1
}} class="p2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 1}>
<span>{language.sizeAndSpeed}</span>
</button>
<button on:click={() => {
<button onclick={() => {
submenu = 2
}} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 2}>
<span>{language.others}</span>
@@ -57,7 +57,7 @@
</SelectInput>
{#if $DataBase.theme === "custom"}
<Button className="mt-2" on:click={() => {
<Button className="mt-2" onclick={() => {
CustomGUISettingMenuStore.set(true)
}}>{language.defineCustomGUI}</Button>
{/if}
@@ -74,7 +74,7 @@
{/if}
<span class="text-textcolor mt-4">{language.colorScheme}</span>
<SelectInput className="mt-2" value={$DataBase.colorSchemeName} on:change={onSchemeInputChange}>
<SelectInput className="mt-2" value={$DataBase.colorSchemeName} onchange={onSchemeInputChange}>
{#each colorSchemeList as scheme}
<OptionInput value={scheme} >{scheme}</OptionInput>
{/each}
@@ -83,53 +83,53 @@
{#if $DataBase.colorSchemeName === "custom"}
<div class="border border-darkborderc p-2 m-2 rounded-md">
<SelectInput className="mt-2" value={$DataBase.colorScheme.type} on:change={updateColorScheme}>
<SelectInput className="mt-2" value={$DataBase.colorScheme.type} onchange={updateColorScheme}>
<OptionInput value="light">Light</OptionInput>
<OptionInput value="dark">Dark</OptionInput>
</SelectInput>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.bgcolor} on:input={updateColorScheme} />
<ColorInput bind:value={$DataBase.colorScheme.bgcolor} oninput={updateColorScheme} />
<span class="ml-2">Background</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.darkbg} on:input={updateColorScheme} />
<ColorInput bind:value={$DataBase.colorScheme.darkbg} oninput={updateColorScheme} />
<span class="ml-2">Dark Background</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.borderc} on:input={updateColorScheme} />
<ColorInput bind:value={$DataBase.colorScheme.borderc} oninput={updateColorScheme} />
<span class="ml-2">Color 1</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.selected} on:input={updateColorScheme} />
<ColorInput bind:value={$DataBase.colorScheme.selected} oninput={updateColorScheme} />
<span class="ml-2">Color 2</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.draculared} on:input={updateColorScheme} />
<ColorInput bind:value={$DataBase.colorScheme.draculared} oninput={updateColorScheme} />
<span class="ml-2">Color 3</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.darkBorderc} on:input={updateColorScheme} />
<ColorInput bind:value={$DataBase.colorScheme.darkBorderc} oninput={updateColorScheme} />
<span class="ml-2">Color 4</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.darkbutton} on:input={updateColorScheme} />
<ColorInput bind:value={$DataBase.colorScheme.darkbutton} oninput={updateColorScheme} />
<span class="ml-2">Color 5</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.textcolor} on:input={updateColorScheme} />
<ColorInput bind:value={$DataBase.colorScheme.textcolor} oninput={updateColorScheme} />
<span class="ml-2">Text Color</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.textcolor2} on:input={updateColorScheme} />
<ColorInput bind:value={$DataBase.colorScheme.textcolor2} oninput={updateColorScheme} />
<span class="ml-2">Text Color 2</span>
</div>
<div class="flex-grow flex justify-end">
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" onclick={async (e) => {
exportColorScheme()
}}>
<DownloadIcon size={18}/>
</button>
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={async (e) => {
importColorScheme()
}}>
<FolderUpIcon size={18}/>
@@ -139,7 +139,7 @@
{/if}
<span class="text-textcolor mt-4">{language.textColor}</span>
<SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextThemeAndCSS}>
<SelectInput className="mt-2" bind:value={$DataBase.textTheme} onchange={updateTextThemeAndCSS}>
<OptionInput value="standard" >{language.classicRisu}</OptionInput>
<OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
<OptionInput value="custom" >Custom</OptionInput>
@@ -147,40 +147,40 @@
{#if $DataBase.textTheme === "custom"}
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextThemeAndCSS} />
<ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} oninput={updateTextThemeAndCSS} />
<span class="ml-2">Normal Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} on:input={updateTextThemeAndCSS} />
<ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} oninput={updateTextThemeAndCSS} />
<span class="ml-2">Italic Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} on:input={updateTextThemeAndCSS} />
<ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} oninput={updateTextThemeAndCSS} />
<span class="ml-2">Bold Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:input={updateTextThemeAndCSS} />
<ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} oninput={updateTextThemeAndCSS} />
<span class="ml-2">Italic Bold Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote1} on:input={updateTextThemeAndCSS} />
<ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote1} oninput={updateTextThemeAndCSS} />
<span class="ml-2">Single Quote Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextThemeAndCSS} />
<ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote2} oninput={updateTextThemeAndCSS} />
<span class="ml-2">Double Quote Text</span>
</div>
{/if}
<span class="text-textcolor mt-4">{language.font}</span>
<SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextThemeAndCSS}>
<SelectInput className="mt-2" bind:value={$DataBase.font} onchange={updateTextThemeAndCSS}>
<OptionInput value="default" >Default</OptionInput>
<OptionInput value="timesnewroman" >Times New Roman</OptionInput>
<OptionInput value="custom" >Custom</OptionInput>
</SelectInput>
{#if $DataBase.font === "custom"}
<TextInput bind:value={$DataBase.customFont} on:change={updateTextThemeAndCSS} />
<TextInput bind:value={$DataBase.customFont} onchange={updateTextThemeAndCSS} />
{/if}
{/if}
@@ -197,13 +197,13 @@
<SliderInput min={50} max={200} bind:value={$DataBase.iconsize} marginBottom/>
<span class="text-textcolor">{language.textAreaSize}</span>
<SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} on:change={updateGuisize} customText={guiSizeText($DataBase.textAreaSize)} marginBottom/>
<SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} onchange={updateGuisize} customText={guiSizeText($DataBase.textAreaSize)} marginBottom/>
<span class="text-textcolor">{language.textAreaTextSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} on:change={updateGuisize} customText={guiSizeText($DataBase.textAreaTextSize)} marginBottom/>
<SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} onchange={updateGuisize} customText={guiSizeText($DataBase.textAreaTextSize)} marginBottom/>
<span class="text-textcolor">{language.sideBarSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.sideBarSize} on:change={updateGuisize} customText={guiSizeText($DataBase.sideBarSize)} marginBottom/>
<SliderInput min={0} max={3} bind:value={$DataBase.sideBarSize} onchange={updateGuisize} customText={guiSizeText($DataBase.sideBarSize)} marginBottom/>
<span class="text-textcolor">{language.assetWidth}</span>
<SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} customText={
@@ -212,7 +212,7 @@
} marginBottom />
<span class="text-textcolor">{language.animationSpeed}</span>
<SliderInput min={0} max={1} step={0.05} fixed={2} bind:value={$DataBase.animationSpeed} on:change={updateAnimationSpeed} marginBottom />
<SliderInput min={0} max={1} step={0.05} fixed={2} bind:value={$DataBase.animationSpeed} onchange={updateAnimationSpeed} marginBottom />
{#if $DataBase.showMemoryLimit}
<span class="text-textcolor">{language.memoryLimitThickness}</span>