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

refactor: new mobile layout

Browse Source
This commit is contained in:
Tristan Yang
2023-02-16 08:48:45 +08:00
parent 26e54e10fe
commit 0b07bbf440
33 changed files with 174 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/index.tsx
+9 -9
View File
@@ -1,5 +1,5 @@
import { memo, useState } from "react";
import { useParams } from "react-router-dom";
import { useMatch, useParams } from "react-router-dom";
import clsx from "clsx";
import BlankPlaceholder from "../../common/component/BlankPlaceholder";
@@ -13,9 +13,10 @@ import { useAppSelector } from "../../app/store";
import GuestBlankPlaceholder from "./GuestBlankPlaceholder";
import GuestChannelChat from "./GuestChannelChat";
import GuestSessionList from "./GuestSessionList";
import IconList from '../../assets/icons/list.svg';
function ChatPage() {
const isHomePath = useMatch(`/`);
const isChatHomePath = useMatch(`/chat`);
const [sessionListVisible, setSessionListVisible] = useState(false);
const [channelModalVisible, setChannelModalVisible] = useState(false);
const [usersModalVisible, setUsersModalVisible] = useState(false);
@@ -46,7 +47,7 @@ function ChatPage() {
};
// console.log("temp uid", tmpUid);
const placeholderVisible = channel_id == 0 && user_id == 0;
const isMainPath = isHomePath || isChatHomePath;
return (
<>
{channelModalVisible && (
@@ -55,17 +56,16 @@ function ChatPage() {
{usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
<div className={clsx(`flex h-full md:pt-2 md:pb-2.5 md:pr-1`, isGuest ? "guest-container md:px-1" : "md:pr-12")}>
{sessionListVisible && <div onClick={toggleSessionList} className="z-30 fixed top-0 left-4 w-screen h-screen bg-black/50 transition-all backdrop-blur-sm"></div>}
<div className={clsx("left-container flex-col md:rounded-l-2xl max-w-[250px] md:min-w-[268px] h-full shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] fixed md:relative top-0 left-0 z-40 transition-all bg-white dark:!bg-[#1F2A37]", sessionListVisible ? "max-md:translate-x-0" : "max-md:-translate-x-full")}>
<div className={clsx("left-container pb-14 md:pb-0 flex-col md:rounded-l-2xl w-full md:max-w-[250px] md:min-w-[268px] h-full shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] bg-white dark:!bg-gray-800",
isMainPath ? "flex" : "hidden md:flex"
)}>
<Server readonly={isGuest} />
{isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
{sessionListVisible ? null : <button className="absolute top-2 -right-[52px] z-50 p-2 bg-none md:hidden" onClick={toggleSessionList}>
<IconList className="dark:stroke-gray-300" />
</button>}
{isGuest && <footer className="text-xs text-gray-300 dark:text-gray-700 text-center">
{isGuest && <footer className="hidden md:block text-xs text-gray-300 dark:text-gray-700 text-center">
Host your own <a href="https://voce.chat" target="_blank" rel="noopener noreferrer" className="text-gray-400 dark:text-gray-600">voce.chat</a>
</footer>}
</div>
<div className={`right-container md:rounded-r-2xl w-full ${placeholderVisible ? "h-full flex-center" : ""} bg-white dark:!bg-[#384250]`}>
<div className={clsx(`right-container md:rounded-r-2xl w-full bg-white dark:!bg-gray-700`, placeholderVisible && "h-full flex-center", isMainPath && "hidden md:flex")}>
{placeholderVisible && (isGuest ? <GuestBlankPlaceholder /> : <BlankPlaceholder />)}
{channel_id !== 0 &&
(isGuest ? (