ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: layout

Browse Source
This commit is contained in:
Tristan Yang
2023-02-20 21:22:38 +08:00
parent 053c7d9402
commit f24007495d
5 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/Layout/index.tsx
+25 -19
View File
@@ -106,31 +106,37 @@ const Layout: FC<Props> = ({
return (
<>
{previewImage && <ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />}
<article ref={drop} className={`relative w-full rounded-r-2xl`}>
{header}
<main className="h-full w-full flex items-start justify-between relative" ref={messagesContainer}>
<div className="rounded-br-2xl w-full flex flex-col h-[calc(100vh_-_64px)] md:h-[calc(100vh_-_56px_-_18px)]">
{children}
<div className={`px-2 py-0 md:p-4 ${selects ? "selecting" : ""}`}>
{readonly ? (
<LoginTip />
) : reachLimit ? (
<LicenseUpgradeTip />
) : (
<div className={clsx(`flex justify-center`, selects && "hidden")}>
<Send key={to} id={to} context={context} />
</div>
)}
{selects && <Operations context={context} id={to} />}
<section ref={drop} className={`relative h-full w-full rounded-r-2xl flex`}>
<main className="flex flex-col flex-1">
{header}
<div className="w-full h-full flex items-start justify-between relative" ref={messagesContainer}>
<div className="rounded-br-2xl flex flex-col absolute bottom-0 w-full h-full">
{/* 消息流 */}
<article id={`VOCECHAT_FEED_${context}_${to}`} className="w-full h-full px-1 md:px-4 py-4.5 overflow-x-hidden overflow-y-scroll">
{children}
</article>
{/* 发送框 */}
<div className={`px-2 py-0 md:p-4 ${selects ? "selecting" : ""}`}>
{readonly ? (
<LoginTip />
) : reachLimit ? (
<LicenseUpgradeTip />
) : (
<div className={clsx(`flex justify-center`, selects && "hidden")}>
<Send key={to} id={to} context={context} />
</div>
)}
{selects && <Operations context={context} id={to} />}
</div>
</div>
</div>
{users && <div className="hidden md:block">{users}</div>}
{aside && <div className={clsx("p-3 absolute right-0 -top-14 translate-x-full flex-col hidden md:flex")}>{aside}</div>}
</main>
{aside && <div className={clsx("p-3 absolute right-0 top-0 translate-x-full flex-col hidden md:flex")}>{aside}</div>}
{users && <div className="hidden md:block">{users}</div>}
{!readonly && isActive && (
<DnDTip context={context} name={name} />
)}
</article>
</section>
</>
);
};