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

enhancement: update ui uploading files and images (#4562)

Browse Source
This commit is contained in:
Faisal Amir 2025-02-03 20:36:19 +07:00 committed by GitHub
parent 043284f51e
commit 899f01d5c4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
View File

@ -138,14 +138,14 @@ const ChatInput = () => {
return (
<div className="relative p-4 pb-2">
{renderPreview(fileUpload)}
<div className="relative flex w-full flex-col">
{renderPreview(fileUpload)}
<RichTextEditor
className={twMerge(
'relative mb-1 max-h-[400px] resize-none rounded-lg border border-[hsla(var(--app-border))] p-3 pr-20',
'focus-within:outline-none focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-[hsla(var(--primary-bg))] focus-visible:ring-offset-0',
'overflow-y-auto',
fileUpload && 'rounded-t-none',
fileUpload && 'rounded-t-none border-t-0',
experimentalFeature && 'pl-10',
activeSettingInputBox && 'pb-14 pr-16'
)}

6
web/screens/Thread/ThreadCenterPanel/FileUploadPreview/index.tsx
View File

@ -22,7 +22,7 @@ const FileUploadPreview = () => {
return (
<div className="flex flex-col rounded-t-lg border border-b-0 border-[hsla(var(--app-border))] p-4">
{!!fileUpload && (
<div className="bg-secondary relative inline-flex w-60 space-x-3 rounded-lg p-4">
<div className="relative inline-flex w-60 space-x-3 rounded-lg bg-[hsla(var(--secondary-bg))] p-4">
<Icon type={fileUpload?.type} />
<div className="w-full">
@ -35,10 +35,10 @@ const FileUploadPreview = () => {
</div>
<div
className="absolute -right-2 -top-2 cursor-pointer rounded-full p-0.5"
className="absolute -right-2 -top-2 cursor-pointer rounded-full bg-[hsla(var(--destructive-bg))] p-0.5 text-[hsla(var(--destructive-fg))]"
onClick={onDeleteClick}
>
<XIcon size={14} className="text-background" />
<XIcon size={14} className="text-white" />
</div>
</div>
)}

7
web/screens/Thread/ThreadCenterPanel/ImageUploadPreview/index.tsx
View File

@ -35,13 +35,10 @@ const ImageUploadPreview: React.FC<Props> = ({ file }) => {
return (
<div className="flex flex-col rounded-t-lg border border-b-0 border-[hsla(var(--app-border))] p-4">
<div className="bg-secondary relative w-60 rounded-lg p-4">
<div className="relative w-40 overflow-hidden rounded-lg border border-[hsla(var(--app-border))]">
<img src={base64} alt={file.name} className="object-cover" />
<h6 className="mt-2 line-clamp-1 font-medium">
{file.name.replaceAll(/[-._]/g, ' ')}
</h6>
<div
className="absolute -right-2 -top-2 cursor-pointer rounded-full p-0.5"
className="absolute right-2 top-2 cursor-pointer rounded-full bg-[hsla(var(--destructive-bg))] p-0.5 text-[hsla(var(--destructive-fg))]"
onClick={onDeleteClick}
>
<XIcon size={14} className="text-background" />

2
web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx
View File

@ -16,7 +16,7 @@ const DocMessage = ({
const { onViewFile } = usePath()
return (
<div className="group/file bg-secondary relative mb-2 inline-flex w-60 cursor-pointer gap-x-3 overflow-hidden rounded-lg p-4">
<div className="group/file relative mb-2 inline-flex w-60 cursor-pointer gap-x-3 overflow-hidden rounded-lg bg-[hsla(var(--secondary-bg))] p-4">
<div
className="absolute left-0 top-0 z-20 hidden h-full w-full bg-black/20 opacity-50 group-hover/file:inline-block"
onClick={() => onViewFile(`${id}.pdf`)}

2
web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx
View File

@ -22,7 +22,7 @@ export const RelativeImage = ({
className={onClick ? 'cursor-pointer' : 'cursor-default'}
>
<img
className="aspect-auto h-[300px]"
className="aspect-auto"
alt={src}
src={src.includes('files/') ? `file://${path}/${src}` : src}
/>