90 lines
No EOL
4.4 KiB
Svelte
90 lines
No EOL
4.4 KiB
Svelte
<script>
|
|
import { RangeSlider, Tab, TabGroup, InputChip, SlideToggle } from '@skeletonlabs/skeleton';
|
|
import { imageGridColumns, postGridPreviewQuality, blacklist, limitImageHeight } from '$lib/settings';
|
|
|
|
let tabPos = $state(0);
|
|
let showApikey = $state(false);
|
|
let apikey = $state('');
|
|
</script>
|
|
<div class="flex flex-col">
|
|
<h2 class="h2 mb-2 text-dark-token">Settings</h2>
|
|
<TabGroup>
|
|
<Tab class="text-dark-token" bind:group={tabPos} name="tab1" value={0}>Display</Tab>
|
|
<Tab class="text-dark-token" bind:group={tabPos} name="tab2" value={1}>API</Tab>
|
|
<Tab class="text-dark-token" bind:group={tabPos} name="tab3" value={2}>User</Tab>
|
|
<Tab class="text-dark-token" bind:group={tabPos} name="tab4" value={3}>Chats</Tab>
|
|
|
|
{#snippet panel()}
|
|
|
|
{#if tabPos === 0}
|
|
<div class="flex flex-col gap-3">
|
|
<h3 class="h3 text-dark-token font-bold">Image</h3>
|
|
<SlideToggle name="image-limit-height" bind:checked={$limitImageHeight}><span class="text-dark-token">Limit image height</span></SlideToggle>
|
|
|
|
<h3 class="h3 text-dark-token font-bold">Grid</h3>
|
|
<div class="basis-1/2">
|
|
<RangeSlider accent="text-dark-token" name="grid-columns" min={1} max={12} bind:value={$imageGridColumns} ticked={true}>
|
|
<div class="flex flex-grow justify-between items-center dark">
|
|
<div class="text-dark-token font-bold mb-1">Grid Columns</div>
|
|
<div class="text-xs text-dark-token">{$imageGridColumns} / {12}</div>
|
|
</div>
|
|
</RangeSlider>
|
|
</div>
|
|
<div class="basis-1/2">
|
|
<label class="label">
|
|
<span class="text-dark-token font-bold">Preview type</span>
|
|
<select class="select" bind:value={$postGridPreviewQuality}>
|
|
<option value="preview">Preview</option>
|
|
<option value="sample">Sample</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if tabPos === 1}
|
|
<div class="flex flex-col gap-3">
|
|
<div class="">
|
|
<label class="label">
|
|
<span class="text-dark-token font-bold">e621 Username</span>
|
|
<input class="input" />
|
|
</label>
|
|
</div>
|
|
<div class="">
|
|
<label class="label">
|
|
<span class="text-dark-token font-bold">e621 Apikey</span>
|
|
{#if showApikey}
|
|
<input class="input" type="text" bind:value={apikey} />
|
|
{:else}
|
|
<input class="input" type="password" bind:value={apikey} />
|
|
{/if}
|
|
</label>
|
|
<label class="label">
|
|
<span class="text-dark-token font-bold">Show apikey</span>
|
|
<input class="checkbox" type="checkbox" bind:checked={showApikey} />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if tabPos === 2}
|
|
<div class="flex flex-col gap-3">
|
|
<div class="">
|
|
<p class="text-dark-token font-bold">Blacklist</p>
|
|
<InputChip name="blacklist" label="Blacklist" bind:value={$blacklist} />
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if tabPos === 3}
|
|
<div class="flex flex-col gap-3">
|
|
<div class="">
|
|
<p class="text-dark-token font-bold">Chats</p>
|
|
<InputChip name="blacklist" label="Blacklist" bind:value={$blacklist} />
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{/snippet}
|
|
</TabGroup>
|
|
</div> |