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/ChannelChat/index.tsx
+2
View File
@@ -23,6 +23,7 @@ import InviteModal from "../../../common/component/InviteModal";
import LoadMore from "../LoadMore";
import { useAppSelector } from "../../../app/store";
import { useTranslation } from "react-i18next";
import GoBackNav from "../GoBackNav";
type Props = {
cid?: number;
dropFiles?: File[];
@@ -133,6 +134,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
}
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%)]">
<GoBackNav />
<div className="flex items-center gap-1">
<ChannelIcon personal={!is_public} />
<span className="text-gray-800 dark:text-white">{name}</span>
src/routes/chat/DMChat/index.tsx
+3 -1
View File
@@ -11,6 +11,7 @@ import LoadMore from "../LoadMore";
import { renderMessageFragment } from "../utils";
import useMessageFeed from "../../../common/hook/useMessageFeed";
import { useAppSelector } from "../../../app/store";
import GoBackNav from "../GoBackNav";
type Props = {
uid: number;
dropFiles?: File[];
@@ -64,7 +65,8 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
</ul>
}
header={
<header className="box-border h-14 px-5 flex items-center justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
<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%)]">
<GoBackNav />
<User interactive={false} uid={currUser.uid} />
</header>
}
src/routes/chat/GoBackNav.tsx
+18
View File
@@ -0,0 +1,18 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import IconArrow from '../../assets/icons/arrow.left.svg';
// type Props = {}
const GoBackNav = () => {
const navigate = useNavigate();
const handleBack = () => {
navigate(-1);
};
return (
<button className='p-2 absolute left-2 md:hidden' onClick={handleBack}>
<IconArrow className="dark:stroke-white w-6 h-6" />
</button>
);
};
export default GoBackNav;
src/routes/chat/GuestBlankPlaceholder.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ const GuestBlankPlaceholder = () => {
navigateTo("/login");
};
return (
<section className="flex flex-col items-center bg-transparent">
<section className="flex flex-col items-center">
<h2 className="text-3xl text-gray-600 dark:text-gray-50 font-bold text-center">{t("welcome", { name: serverName })}</h2>
<div className="flex flex-col gap-2">
<span className="text-gray-400 dark:text-gray-200 my-3 text-sm">{t("guest_login_tip")}</span>
src/routes/chat/GuestChannelChat/index.tsx
+2
View File
@@ -7,6 +7,7 @@ import Layout from "../Layout";
import { renderMessageFragment } from "../utils";
import LoadMore from "../LoadMore";
import { useAppSelector } from "../../../app/store";
import GoBackNav from "../GoBackNav";
type Props = {
cid?: number;
@@ -41,6 +42,7 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
context="channel"
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%)]">
<GoBackNav />
<div className="flex items-center gap-1">
<ChannelIcon personal={!is_public} />
<span className="text-gray-800 dark:text-white">{name}</span>
src/routes/chat/GuestSessionList/index.tsx
+10 -6
View File
@@ -2,6 +2,7 @@ import { FC } from "react";
import { useState, useEffect } from "react";
import Session from "./Session";
import { useAppSelector } from "../../../app/store";
import LoginTip from "../Layout/LoginTip";
export interface ChatSession {
key: string;
id: number;
@@ -40,12 +41,15 @@ const SessionList: FC<Props> = () => {
}, [channelIDs, channelMessage, readChannels, readUsers, loginUid, userMessage]);
return (
<ul className="flex flex-col gap-0.5 p-2 overflow-auto h-[calc(100vh_-_56px_-_38px)]">
{sessions.map((s) => {
const { key, id, mid = 0 } = s;
return <Session key={key} id={id} mid={mid} />;
})}
</ul>
<>
<ul className="flex flex-col gap-0.5 p-2 overflow-auto h-[calc(100vh_-_56px_-_38px)]">
{sessions.map((s) => {
const { key, id, mid = 0 } = s;
return <Session key={key} id={id} mid={mid} />;
})}
</ul>
<LoginTip placement="session" />
</>
);
};
export default SessionList;
src/routes/chat/Layout/LoginTip.tsx
+9 -4
View File
@@ -1,13 +1,16 @@
// import { useEffect } from "react";
import clsx from "clsx";
import { useTranslation } from "react-i18next";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { resetAuthData } from "../../../app/slices/auth.data";
import Button from "../../../common/component/styled/Button";
import useLogout from "../../../common/hook/useLogout";
// type Props = {};
type Props = {
placement?: "session" | "chat"
};
const LoginTip = () => {
const LoginTip = ({ placement = "chat" }: Props) => {
const { t } = useTranslation("welcome");
const { t: ct } = useTranslation();
const dispatch = useDispatch();
@@ -20,8 +23,10 @@ const LoginTip = () => {
};
return (
<div className="flex items-center justify-between bg-slate-200/80 dark:bg-gray-800 rounded-lg w-full p-4">
<span className="text-xs md:text-base text-[#98a2b3] dark:text-gray-100">
<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"
)}>
<span className="text-xs md:text-base text-gray-400 dark:text-gray-100">
<i className="mr-2 text-xs md:text-lg ">👋</i>
{t("sign_in_tip")}
</span>
src/routes/chat/Layout/index.tsx
+1 -1
View File
@@ -111,7 +111,7 @@ const Layout: FC<Props> = ({
<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_-_56px_-_18px)]">
{children}
<div className={`p-4 pt-0 ${selects ? "selecting" : ""}`}>
<div className={`px-2 py-0 md:p-4 ${selects ? "selecting" : ""}`}>
{readonly ? (
<LoginTip />
) : reachLimit ? (
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 ? (