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

[UX] Screenreader readable Checkbox, Help Button (#172)

Browse Source 
# PR Checklist
- [ ] Did you check if it works normally in all models? *ignore this
when it dosen't uses models*
- [x] Did you check if it works normally in all of web, local and node
hosted versions? if it dosen't, did you blocked it in those versions?
- [x] Did you added a type def?

# Description
 - Screenreader readable "Show Help" button.
   Also modified checkbox
This commit is contained in:
kwaroran
2023-06-12 19:03:31 +09:00
committed by GitHub
parent 6683a94b0f da7ab19c8e
commit 947d6874ed
14 changed files with 66 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/SideBars/CharConfig.svelte
View File

@@ -200,21 +200,18 @@
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].note}></textarea>
<span class="text-gray-400 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>
<div class="flex mt-6 items-center">
<Check bind:check={$DataBase.jailbreakToggle}/>
<span class="text-neutral-200 ml-2">{language.jailbreakToggle}</span>
<Check bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
</div>
{#if $DataBase.supaMemoryType !== 'none'}
<div class="flex mt-2 items-center">
<Check bind:check={currentChar.data.supaMemory}/>
<span class="text-neutral-200 ml-2">{language.ToggleSuperMemory}</span>
<Check bind:check={currentChar.data.supaMemory} name={language.ToggleSuperMemory}/>
</div>
{/if}
{#if currentChar.type === 'group'}
<div class="flex mt-2 items-center">
<Check bind:check={currentChar.data.orderByOrder}/>
<span class="text-neutral-200 ml-2">{language.orderByOrder}</span>
<Check bind:check={currentChar.data.orderByOrder} name={language.orderByOrder}/>
</div>
{/if}
{:else if subMenu === 1}
@@ -517,8 +514,7 @@
{/if}
{#if currentChar.data.ttsMode === 'webspeech' || currentChar.data.ttsMode === 'elevenlab' || currentChar.data.ttsMode === 'VOICEVOX'}
<div class="flex items-center mt-2">
<Check bind:check={currentChar.data.ttsReadOnlyQuoted}/>
<span>{language.ttsReadOnlyQuoted}</span>
<Check bind:check={currentChar.data.ttsReadOnlyQuoted} name={language.ttsReadOnlyQuoted}/>
</div>
{/if}
{/if}
@@ -659,8 +655,8 @@
{#if $DataBase.showUnrecommended || currentChar.data.utilityBot}
<div class="flex items-center mt-4">
<Check bind:check={currentChar.data.utilityBot}/>
<span>{language.utilityBot} <Help key="utilityBot" unrecommended/></span>
<Check bind:check={currentChar.data.utilityBot} name={language.utilityBot}/>
<span> <Help key="utilityBot" unrecommended name={language.utilityBot}/></span>
</div>
{/if}
@@ -683,8 +679,8 @@
{/if}
{#if $DataBase.useExperimental}
<div class="flex mb-2 items-center">
<Check bind:check={currentChar.data.useCharacterLore}/>
<span class="text-neutral-200 ml-2">{language.useCharLorebook} <Help key="experimental"/></span>
<Check bind:check={currentChar.data.useCharacterLore} name={language.useCharLorebook}/>
<Help key="experimental" name={language.useCharLorebook}/>
</div>
{/if}
{/if}

13
src/lib/SideBars/LoreBookData.svelte
View File

@@ -58,20 +58,19 @@
<span class="text-neutral-200 mt-4">{language.prompt}</span>
<textarea class="bg-transparent input-text mt-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={value.content}></textarea>
<div class="flex items-center mt-4">
<Check bind:check={value.alwaysActive}/>
<span>{language.alwaysActive}</span>
<Check bind:check={value.alwaysActive} name={language.alwaysActive}/>
</div>
<div class="flex items-center mt-2">
<Check bind:check={value.selective}/>
<span>{language.selective} <Help key="loreSelective"/></span>
<Check bind:check={value.selective} name={language.selective}/>
<Help key="loreSelective" name={language.selective}/>
</div>
<div class="flex items-center mt-2 mb-6">
{#if value.activationPercent === undefined || value.activationPercent === null}
<Check check={false} onChange={() => {value.activationPercent = 50}}/>
<Check name={language.loreRandomActivation} check={false} onChange={() => {value.activationPercent = 50}}/>
{:else}
<Check check={true} onChange={() => {value.activationPercent = null}}/>
<Check name={language.loreRandomActivation} check={true} onChange={() => {value.activationPercent = null}}/>
{/if}
<span>{language.loreRandomActivation} <Help key="loreRandomActivation"/></span>
<span><Help name={language.loreRandomActivation} key="loreRandomActivation"/></span>
</div>
</div>
{/if}

13
src/lib/SideBars/LoreBookSetting.svelte
View File

@@ -86,12 +86,12 @@
<div class="flex items-center mt-4">
<Check check={false} onChange={() => {
$DataBase.characters[$selectedCharID].loreSettings = undefined
}}/>
<span>{language.useGlobalSettings}</span>
}}
name={language.useGlobalSettings}
/>
</div>
<div class="flex items-center mt-4">
<Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.recursiveScanning}/>
<span>{language.recursiveScanning}</span>
<Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.recursiveScanning} name={language.recursiveScanning}/>
</div>
<span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth}>
@@ -105,8 +105,9 @@
scanDepth:$DataBase.loreBookDepth,
recursiveScanning: false
}
}}/>
<span>{language.useGlobalSettings}</span>
}}
name={language.useGlobalSettings}
/>
</div>
{/if}
{/if}