Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: enhance several minor UI (#3706)

Browse Source
This commit is contained in:
Faisal Amir 2024-09-20 10:06:37 +07:00 committed by GitHub
parent 194093d95d
commit 1aefb8f7ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/helpers/atoms/Setting.atom.ts
View File

@ -19,4 +19,4 @@ export const reduceTransparentAtom = atomWithStorage<boolean>(
REDUCE_TRANSPARENT, REDUCE_TRANSPARENT,
false false
) )
export const spellCheckAtom = atomWithStorage<boolean>(SPELL_CHECKING, true) export const spellCheckAtom = atomWithStorage<boolean>(SPELL_CHECKING, false)

4
web/screens/Settings/Advanced/index.tsx
View File

@ -321,7 +321,7 @@ const Advanced = () => {
<label className="mb-2 mr-2 inline-block font-medium"> <label className="mb-2 mr-2 inline-block font-medium">
Choose device(s) Choose device(s)
</label> </label>
<div className="relative flex w-full md:w-1/2" ref={setToggle}> <div className="relative w-full md:w-1/2" ref={setToggle}>
<Input <Input
value={selectedGpu.join() || ''} value={selectedGpu.join() || ''}
className="w-full cursor-pointer" className="w-full cursor-pointer"
@ -337,7 +337,7 @@ const Advanced = () => {
/> />
<div <div
className={twMerge( className={twMerge(
'absolute right-0 z-20 mt-10 max-h-80 w-full overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-sm', 'absolute right-0 top-0 z-20 mt-10 max-h-80 w-full overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-sm',
open ? 'flex' : 'hidden' open ? 'flex' : 'hidden'
)} )}
ref={setDropdownOptions} ref={setDropdownOptions}

2
web/screens/Settings/Appearance/index.tsx
View File

@ -97,7 +97,7 @@ export default function AppearanceOptions() {
<h6 className="font-semibold capitalize">Spell Check</h6> <h6 className="font-semibold capitalize">Spell Check</h6>
</div> </div>
<p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]"> <p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
Toggle to disable spell checking. Turn on to enable spell check
</p> </p>
</div> </div>
<div className="flex-shrink-0"> <div className="flex-shrink-0">

16
web/screens/Settings/MyModels/MyModelList/index.tsx
View File

@ -49,11 +49,11 @@ const MyModelList = ({ model }: Props) => {
return ( return (
<div className="border border-b-0 border-[hsla(var(--app-border))] bg-[hsla(var(--tertiary-bg))] p-4 first:rounded-t-lg last:rounded-b-lg last:border-b"> <div className="border border-b-0 border-[hsla(var(--app-border))] bg-[hsla(var(--tertiary-bg))] p-4 first:rounded-t-lg last:rounded-b-lg last:border-b">
<div className="flex flex-col items-start justify-start gap-4 sm:flex-row sm:items-center sm:justify-between"> <div className="flex flex-col items-start justify-start gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="flex w-1/2 gap-x-8"> <div className="flex gap-x-8 lg:w-1/2">
<div className="flex w-full items-center justify-between"> <div className="flex h-full w-full flex-col items-start justify-between gap-2 lg:flex-row lg:items-center">
<h6 <h6
className={twMerge( className={twMerge(
'line-clamp-1 max-w-[200px] font-medium', 'font-medium lg:line-clamp-1 lg:min-w-[280px] lg:max-w-[280px]',
model.engine !== InferenceEngine.nitro && model.engine !== InferenceEngine.nitro &&
'max-w-none text-[hsla(var(--text-secondary))]' 'max-w-none text-[hsla(var(--text-secondary))]'
)} )}
@ -64,7 +64,7 @@ const MyModelList = ({ model }: Props) => {
{model.engine === InferenceEngine.nitro && ( {model.engine === InferenceEngine.nitro && (
<div className="flex gap-x-8"> <div className="flex gap-x-8">
<p <p
className="line-clamp-1 max-w-[120px] text-[hsla(var(--text-secondary))] xl:max-w-none" className="line-clamp-1 text-[hsla(var(--text-secondary))] lg:min-w-[160px] lg:max-w-[160px] xl:max-w-none"
title={model.id} title={model.id}
> >
{model.id} {model.id}
@ -76,9 +76,11 @@ const MyModelList = ({ model }: Props) => {
{localEngines.includes(model.engine) && ( {localEngines.includes(model.engine) && (
<div className="flex gap-x-4"> <div className="flex gap-x-4">
<Badge theme="secondary" className="sm:mr-16"> <div className="md:min-w-[90px] md:max-w-[90px]">
{toGibibytes(model.metadata.size)} <Badge theme="secondary" className="sm:mr-8">
</Badge> {toGibibytes(model.metadata.size)}
</Badge>
</div>
<div className="relative flex items-center gap-x-4"> <div className="relative flex items-center gap-x-4">
{stateModel.loading && stateModel.model?.id === model.id ? ( {stateModel.loading && stateModel.model?.id === model.id ? (

1
web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx
View File

@ -79,6 +79,7 @@ const SettingDetailTextInputItem = ({
textAlign={textAlign} textAlign={textAlign}
value={value} value={value}
onChange={(e) => onValueChanged?.(e.target.value)} onChange={(e) => onValueChanged?.(e.target.value)}
className="!pr-20"
suffixIcon={ suffixIcon={
<InputExtraActions <InputExtraActions
actions={inputActions ?? []} actions={inputActions ?? []}