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

feat: new input style

Browse Source
This commit is contained in:
kwaroran
2024-05-31 10:25:00 +09:00
parent a30c59c011
commit f63e1fc1f3
2 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/lib/ChatScreens/DefaultChatScreen.svelte
View File

@@ -404,7 +404,7 @@
loadPages += 15 loadPages += 15
} }
}}> }}>
<div class="flex items-end mt-2 mb-2 w-full"> <div class="flex items-stretch mt-2 mb-2 w-full">
{#if $DataBase.useChatSticker && currentCharacter.type !== 'group'} {#if $DataBase.useChatSticker && currentCharacter.type !== 'group'}
<div on:click={()=>{toggleStickers = !toggleStickers}} <div on:click={()=>{toggleStickers = !toggleStickers}}
class={"ml-4 bg-textcolor2 flex justify-center items-center w-12 h-12 rounded-md hover:bg-green-500 transition-colors "+(toggleStickers ? 'text-green-500':'text-textcolor')}> class={"ml-4 bg-textcolor2 flex justify-center items-center w-12 h-12 rounded-md hover:bg-green-500 transition-colors "+(toggleStickers ? 'text-green-500':'text-textcolor')}>
@@ -413,7 +413,7 @@
{/if} {/if}
{#if !$DataBase.useAdvancedEditor} {#if !$DataBase.useAdvancedEditor}
<textarea class="text-textcolor p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full" <textarea class="peer focus:border-textcolor transition-colors outline-none text-textcolor p-2 min-w-0 border border-r-0 bg-transparent rounded-md rounded-r-none input-text text-xl flex-grow ml-4 border-darkborderc resize-none overflow-y-hidden overflow-x-hidden max-w-full"
bind:value={messageInput} bind:value={messageInput}
bind:this={inputEle} bind:this={inputEle}
on:keydown={(e) => { on:keydown={(e) => {
@@ -441,23 +441,32 @@
{#if $doingChat || doingChatInputTranslate} {#if $doingChat || doingChatInputTranslate}
<div <button
class="mr-2 bg-selected flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors" on:click={abortChat}> class="peer-focus:border-textcolor flex justify-center border-y border-darkborderc items-center text-gray-100 p-3 hover:bg-blue-500 transition-colors" on:click={abortChat}
<div class="loadmove chat-process-stage-{$chatProcessStage}" class:autoload={autoMode}> style:height={inputHeight}
</div> >
</div> <div class="loadmove chat-process-stage-{$chatProcessStage}" class:autoload={autoMode} />
</button>
{:else} {:else}
<div on:click={send} <button
class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Send /> on:click={send}
</div> class="flex justify-center border-y border-darkborderc items-center text-gray-100 p-3 peer-focus:border-textcolor hover:bg-blue-500 transition-colors"
style:height={inputHeight}
>
<Send />
</button>
{/if} {/if}
{#if $CurrentCharacter?.chaId !== '§playground'} {#if $CurrentCharacter?.chaId !== '§playground'}
<div on:click={(e) => { <button
on:click={(e) => {
openMenu = !openMenu openMenu = !openMenu
e.stopPropagation() e.stopPropagation()
}} }}
class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon /> class="peer-focus:border-textcolor mr-2 flex border-y border-r border-darkborderc justify-center items-center text-gray-100 p-3 rounded-r-md hover:bg-blue-500 transition-colors"
</div> style:height={inputHeight}
>
<MenuIcon />
</button>
{:else} {:else}
<div on:click={(e) => { <div on:click={(e) => {
$CurrentChat.message.push({ $CurrentChat.message.push({
@@ -466,7 +475,10 @@
}) })
$CurrentChat = $CurrentChat $CurrentChat = $CurrentChat
}} }}
class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Plus /> class="peer-focus:border-textcolor mr-2 flex border-y border-r border-darkborderc justify-center items-center text-gray-100 p-3 rounded-r-md hover:bg-blue-500 transition-colors"
style:height={inputHeight}
>
<Plus />
</div> </div>
{/if} {/if}
</div> </div>
@@ -475,7 +487,7 @@
<label for='messageInputTranslate' class="text-textcolor ml-4"> <label for='messageInputTranslate' class="text-textcolor ml-4">
<LanguagesIcon /> <LanguagesIcon />
</label> </label>
<textarea id = 'messageInputTranslate' class="text-textcolor p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full" <textarea id = 'messageInputTranslate' class="text-textcolor rounded-md p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
bind:value={messageInputTranslate} bind:value={messageInputTranslate}
bind:this={inputTranslateEle} bind:this={inputTranslateEle}
on:keydown={(e) => { on:keydown={(e) => {

6
src/styles.css
View File

@@ -146,12 +146,6 @@ html, body{
height: 100%; height: 100%;
} }
.input-text{
border: none;
outline: 0;
border-bottom: 1px solid var(--risu-theme-borderc);
}
.bgc{ .bgc{
border-top: 1px solid rgba(98, 114, 164, 0.7); border-top: 1px solid rgba(98, 114, 164, 0.7);
} }