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/ChannelChat/index.tsx
+5 -5
View File
@@ -112,7 +112,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
<Tippy
placement="left-start"
popperOptions={{ strategy: "fixed" }}
offset={[0, 162]}
offset={[0, 164]}
interactive
trigger="click"
content={<FavList cid={cid} />}
@@ -133,7 +133,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
</ul>
}
header={
<header className="h-14 px-5 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
<header className="px-5 py-4 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
<GoBackNav />
<div className="flex items-center gap-1">
<ChannelIcon personal={!is_public} />
@@ -143,7 +143,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
</header>
}
users={
<div className={`flex-col gap-1 w-[226px] h-[calc(100vh_-_56px_-_22px)] overflow-y-scroll p-2 shadow-[inset_1px_0px_0px_rgba(0,_0,_0,_0.1)] ${membersVisible ? "flex" : "hidden"}`}>
<div className={`h-full flex-col gap-1 w-[226px] overflow-y-scroll p-2 shadow-[inset_1px_0px_0px_rgba(0,_0,_0,_0.1)] ${membersVisible ? "flex" : "hidden"}`}>
{addVisible && (
<div className="cursor-pointer flex items-center justify-start gap-1 select-none rounded-lg p-2.5 hover:bg-gray-500/10" onClick={toggleAddVisible}>
<IconAdd className="w-6 h-6 dark:fill-slate-300" />
@@ -166,7 +166,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
</div>
}
>
<article className="py-4.5 px-1 md:px-4 w-full h-full overflow-x-hidden overflow-y-auto" id={`VOCECHAT_FEED_channel_${cid}`}>
<>
{hasMore ? (
<LoadMore pullUp={pullUp} pulling={pulling} />
) : (
@@ -197,7 +197,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
context: "channel"
});
})}
</article>
</>
</Layout>
</>
);
src/routes/chat/DMChat/index.tsx
+3 -3
View File
@@ -65,13 +65,13 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
</ul>
}
header={
<header className="box-border h-14 px-5 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
<header className="box-border px-5 py-1 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
<GoBackNav />
<User interactive={false} uid={currUser.uid} />
</header>
}
>
<article id={`VOCECHAT_FEED_user_${uid}`} className="w-full h-full px-4 py-4.5 overflow-auto">
<>
{hasMore ? <LoadMore pullUp={pullUp} pulling={pulling} /> : null}
{[...feeds].map((mid, idx) => {
const curr = messageData[mid];
@@ -87,7 +87,7 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
context: "user"
});
})}
</article>
</>
</Layout>
);
};
src/routes/chat/Layout/LoginTip.tsx
+2 -2
View File
@@ -23,8 +23,8 @@ const LoginTip = ({ placement = "chat" }: Props) => {
};
return (
<div className={clsx("flex items-center justify-between bg-slate-200/80 dark:bg-gray-800 rounded-lg w-full p-4 border border-solid border-gray-200 dark:border-gray-500",
placement == "session" && "w-[96%] md:hidden fixed bottom-2 left-1/2 -translate-x-1/2"
<div className={clsx("flex items-center justify-between bg-slate-200/80 dark:bg-gray-800 rounded-lg p-4 border border-solid border-gray-200 dark:border-gray-500",
placement == "session" ? "!w-[96%] md:hidden fixed bottom-2 left-1/2 -translate-x-1/2" : "w-full"
)}>
<span className="text-xs md:text-base text-gray-400 dark:text-gray-100">
<i className="mr-2 text-xs md:text-lg ">👋</i>
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>
</>
);
};