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

Add GUI size options

Browse Source
This commit is contained in:
kwaroran
2024-04-25 02:17:57 +09:00
parent 9b44ad2f1c
commit f1dfabc408
9 changed files with 116 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/lang/en.ts
View File

@@ -581,6 +581,9 @@ export const languageEnglish = {
useInstructPrompt: "Use Instruction Prompt",
hanuraiMemory: "HanuraiMemory",
playground: "Playground",
textAreaSize: "Input Area Size",
textAreaTextSize: "Input Area Text Size",
sideBarSize: "Sidebar Size",
embedding: "Embedding",
syntax: "Syntax",
run: "Run",

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

@@ -11,6 +11,8 @@
import { changeColorScheme, colorSchemeList, exportColorScheme, importColorScheme, updateColorScheme, updateTextTheme } from "src/ts/gui/colorscheme";
import { DownloadIcon, FolderUpIcon } from "lucide-svelte";
import { guiSizeText, updateGuisize } from "src/ts/gui/guisize";
const onSchemeInputChange = (e:Event) => {
changeColorScheme((e.target as HTMLInputElement).value)
}
@@ -135,6 +137,17 @@
<SliderInput min={50} max={200} bind:value={$DataBase.iconsize} />
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.iconsize)}%</span>
<span class="text-textcolor">{language.textAreaSize}</span>
<SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} on:change={updateGuisize} />
<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.textAreaSize)}</span>
<span class="text-textcolor">{language.textAreaTextSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} on:change={updateGuisize} />
<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.textAreaTextSize)}</span>
<span class="text-textcolor">{language.sideBarSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.sideBarSize} on:change={updateGuisize} />
<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.sideBarSize)}</span>
<span class="text-textcolor">{language.assetWidth}</span>
<SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} />

15
src/lib/SideBars/Sidebar.svelte
View File

@@ -51,6 +51,7 @@
import { alertAddCharacter, alertInput, alertSelect } from "src/ts/alert";
import SideChatList from "./SideChatList.svelte";
import { joinMultiuserRoom } from "src/ts/sync/multiuser";
import { sideBarSize } from "src/ts/gui/guisize";
let openPresetList = false;
let sideBarMode = 0;
let editMode = false;
@@ -614,10 +615,17 @@
</div>
</div>
<div
class="setting-area w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg py-6 text-textcolor max-h-full"
class="setting-area h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg py-6 text-textcolor max-h-full"
class:risu-sidebar={!$sideBarClosing}
class:w-96={$sideBarSize === 0}
class:w-110={$sideBarSize === 1}
class:w-124={$sideBarSize === 2}
class:w-144={$sideBarSize === 3}
class:risu-sidebar-close={$sideBarClosing}
class:minw96={!$DynamicGUI}
class:min-w-96={!$DynamicGUI && $sideBarSize === 0}
class:min-w-110={!$DynamicGUI && $sideBarSize === 1}
class:min-w-124={!$DynamicGUI && $sideBarSize === 2}
class:min-w-144={!$DynamicGUI && $sideBarSize === 3}
class:px-2={$DynamicGUI}
class:px-4={!$DynamicGUI}
class:dynamic-sidebar={$DynamicGUI}
@@ -718,9 +726,6 @@
{/if}
<style>
.minw96 {
min-width: 24rem; /* 384px */
}
.editMode {
min-width: 6rem;
}

41
src/lib/UI/GUI/TextAreaInput.svelte
View File

@@ -1,11 +1,10 @@
<textarea
class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}
class:text-sm={size === 'sm' || (size === 'default' && $textAreaTextSize === 1)}
class:text-md={size === 'md' || (size === 'default' && $textAreaTextSize === 2)}
class:text-lg={size === 'lg' || (size === 'default' && $textAreaTextSize === 3)}
class:text-xl={size === 'xl'}
class:text-xs={size === 'xs'}
class:text-xs={size === 'xs' || (size === 'default' && $textAreaTextSize === 0)}
class:px-4={padding}
class:py-2={padding}
class:mb-4={margin === 'bottom'}
@@ -13,12 +12,29 @@
class:mt-4={margin === 'top'}
class:mt-2={margin === 'both'}
class:w-full={fullwidth}
class:h-20={height === '20'}
class:h-24={height === '24'}
class:h-32={height === '32'}
class:h-20={height === '20' || (height === 'default' && $textAreaSize === -5)}
class:h-24={height === '24' || (height === 'default' && $textAreaSize === -4)}
class:h-28={height === '28' || (height === 'default' && $textAreaSize === -3)}
class:h-32={height === '32' || (height === 'default' && $textAreaSize === -2)}
class:h-36={height === '36' || (height === 'default' && $textAreaSize === -1)}
class:h-40={height === 'default' && $textAreaSize === 0}
class:h-44={height === 'default' && $textAreaSize === 1}
class:h-48={height === 'default' && $textAreaSize === 2}
class:h-52={height === 'default' && $textAreaSize === 3}
class:h-56={height === 'default' && $textAreaSize === 4}
class:h-60={height === 'default' && $textAreaSize === 5}
class:h-full={height === 'full'}
class:min-h-20={height === '20'}
class:min-h-32={height === '32'}
class:min-h-20={height === '20' || (height === 'default' && $textAreaSize === -5)}
class:min-h-24={height === '24' || (height === 'default' && $textAreaSize === -4)}
class:min-h-28={height === '28' || (height === 'default' && $textAreaSize === -3)}
class:min-h-32={height === '32' || (height === 'default' && $textAreaSize === -2)}
class:min-h-36={height === '36' || (height === 'default' && $textAreaSize === -1)}
class:min-h-40={height === 'default' && $textAreaSize === 0}
class:min-h-48={height === 'default' && $textAreaSize === 1}
class:min-h-56={height === 'default' && $textAreaSize === 2}
class:min-h-64={height === 'default' && $textAreaSize === 3}
class:min-h-72={height === 'default' && $textAreaSize === 4}
class:min-h-80={height === 'default' && $textAreaSize === 5}
{autocomplete}
{placeholder}
id={id}
@@ -45,7 +61,8 @@
/>
<script lang="ts">
export let size: 'xs'|'sm'|'md'|'lg'|'xl' = 'xs'
import { textAreaSize, textAreaTextSize } from 'src/ts/gui/guisize'
export let size: 'xs'|'sm'|'md'|'lg'|'xl'|'default' = 'default'
export let autocomplete: 'on'|'off' = 'off'
export let placeholder: string = ''
export let value:string
@@ -54,7 +71,7 @@
export let margin:"none"|"top"|"bottom"|"both" = "none"
export let onInput = () => {}
export let fullwidth = false
export let height:'20'|'24'|'32'|'full' = '20'
export let height:'20'|'24'|'28'|'32'|'36'|'full'|'default' = 'default'
export let className = ''
export let optimaizedInput = true
let inpa = 0

5
src/styles.css
View File

@@ -117,11 +117,6 @@ html, body{
font-family: Arial, Helvetica, sans-serif;
}
.setting-area textarea{
height: 10rem;
min-height: 10rem;
}
.chattext p:first-child{
margin-top: 0.3rem;
}

46
src/ts/gui/guisize.ts Normal file
View File

@@ -0,0 +1,46 @@
import { get, writable } from "svelte/store";
import { DataBase } from "../storage/database";
export let textAreaSize = writable(0)
export let sideBarSize = writable(0)
export let textAreaTextSize = writable(0)
export function updateGuisize(){
let db = get(DataBase)
const root = document.querySelector(':root') as HTMLElement;
if(!root){
return
}
textAreaSize.set(db.textAreaSize)
sideBarSize.set(db.sideBarSize)
textAreaTextSize.set(db.textAreaTextSize)
}
export function guiSizeText(num:number){
switch(num){
case 0:
return 'Default'
case 1:
return 'Big'
case 2:
return 'Bigger'
case 3:
return 'Huge'
case 4:
return 'Huger'
case 5:
return 'Hugest'
case -1:
return 'Small'
case -2:
return 'Smaller'
case -3:
return 'Tiny'
case -4:
return 'Tinier'
case -5:
return 'Tiniest'
default:
return 'Default'
}
}

6
src/ts/storage/database.ts
View File

@@ -396,6 +396,9 @@ export function setDatabase(data:Database){
data.hanuraiEnable ??= false
data.hanuraiSplit ??= false
data.hanuraiTokens ??= 1000
data.textAreaSize ??= 0
data.sideBarSize ??= 0
data.textAreaTextSize ??= 0
changeLanguage(data.language)
DataBase.set(data)
@@ -647,6 +650,9 @@ export interface Database{
hanuraiTokens:number
hanuraiSplit:boolean
hanuraiEnable:boolean
textAreaSize:number
sideBarSize:number
textAreaTextSize:number
}
export interface customscript{

2
src/ts/storage/globalApi.ts
View File

@@ -31,6 +31,7 @@ import { registerPlugin } from '@capacitor/core';
import { language } from "src/lang";
import { startObserveDom } from "../observer";
import { removeDefaultHandler } from "src/main";
import { updateGuisize } from "../gui/guisize";
//@ts-ignore
export const isTauri = !!window.__TAURI__
@@ -505,6 +506,7 @@ export async function loadData() {
updateAnimationSpeed()
updateHeightMode()
updateErrorHandling()
updateGuisize()
if(db.botSettingAtStart){
botMakerMode.set(true)
}

8
tailwind.config.js
View File

@@ -26,7 +26,10 @@ export default {
'half': '50%',
'5': '1.25rem',
'6': '1.5rem',
'96': '24rem',
'110': '28rem',
'124': '32rem',
'144': '36rem',
},
maxWidth:{
'half': '50%',
@@ -43,6 +46,9 @@ export default {
width: {
'2xl': '48rem',
'3xl': '72rem',
'110': '28rem',
'124': '32rem',
'144': '36rem',
},
minHeight:{
'2': '0.5rem',