From 0b07bbf4402aa0c53a57f6651e0f4094c313cfb0 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Thu, 16 Feb 2023 08:48:45 +0800 Subject: [PATCH] refactor: new mobile layout --- src/assets/icons/arrow.left.svg | 4 +- src/common/component/BlankPlaceholder.tsx | 4 +- src/common/component/Divider.tsx | 4 +- src/common/component/FileMessage/Progress.tsx | 2 +- src/common/component/GoogleLoginButton.tsx | 2 +- src/common/component/Message/Commands.tsx | 10 +-- src/common/component/Profile/index.tsx | 2 +- src/common/component/Send/index.tsx | 2 +- .../component/StyledSettingContainer.tsx | 4 +- src/common/component/Tooltip.tsx | 2 + src/common/component/User/index.tsx | 4 +- src/common/component/Version.tsx | 2 +- src/routes/chat/ChannelChat/index.tsx | 2 + src/routes/chat/DMChat/index.tsx | 4 +- src/routes/chat/GoBackNav.tsx | 18 +++++ src/routes/chat/GuestBlankPlaceholder.tsx | 2 +- src/routes/chat/GuestChannelChat/index.tsx | 2 + src/routes/chat/GuestSessionList/index.tsx | 16 +++-- src/routes/chat/Layout/LoginTip.tsx | 13 ++-- src/routes/chat/Layout/index.tsx | 2 +- src/routes/chat/index.tsx | 18 ++--- src/routes/favs/index.tsx | 2 +- src/routes/home/MobileNavs.tsx | 67 +++++++++++++++++++ src/routes/home/index.tsx | 14 ++-- src/routes/invite/index.tsx | 2 +- src/routes/login/index.tsx | 2 +- .../onboarding/steps/UpdateFrontendURL.tsx | 4 +- src/routes/reg/index.tsx | 2 +- src/routes/resources/index.tsx | 2 +- .../setting/BotConfig/CreateAPIKeyModal.tsx | 2 +- src/routes/setting/BotConfig/CreateModal.tsx | 4 +- src/routes/setting/BotConfig/WebhookModal.tsx | 2 +- src/routes/users/index.tsx | 18 +++-- 33 files changed, 174 insertions(+), 66 deletions(-) create mode 100644 src/routes/chat/GoBackNav.tsx create mode 100644 src/routes/home/MobileNavs.tsx diff --git a/src/assets/icons/arrow.left.svg b/src/assets/icons/arrow.left.svg index ce7bcbd5..f831390f 100644 --- a/src/assets/icons/arrow.left.svg +++ b/src/assets/icons/arrow.left.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/common/component/BlankPlaceholder.tsx b/src/common/component/BlankPlaceholder.tsx index ebc8b583..9cd6a61e 100644 --- a/src/common/component/BlankPlaceholder.tsx +++ b/src/common/component/BlankPlaceholder.tsx @@ -38,10 +38,10 @@ const BlankPlaceholder: FC = ({ type = "chat" }) => { const chatHandler = type == "chat" ? toggleChannelModalVisible : toggleUserListVisible; return ( <> -
+

{t("title", { name: server.name })}

-

+

{t("desc")}

diff --git a/src/common/component/Divider.tsx b/src/common/component/Divider.tsx index e2ece318..f82357e7 100644 --- a/src/common/component/Divider.tsx +++ b/src/common/component/Divider.tsx @@ -4,8 +4,8 @@ interface Props { } const Divider: FC = ({ content }) => { - return
- {content} + return
+ {content}
; }; diff --git a/src/common/component/FileMessage/Progress.tsx b/src/common/component/FileMessage/Progress.tsx index 534d4411..16e70b64 100644 --- a/src/common/component/FileMessage/Progress.tsx +++ b/src/common/component/FileMessage/Progress.tsx @@ -7,7 +7,7 @@ interface Props { const Progress: FC = ({ value, width = "100%" }) => { return (
-
+
); }; diff --git a/src/common/component/GoogleLoginButton.tsx b/src/common/component/GoogleLoginButton.tsx index 1f5beb39..9eba3fb5 100644 --- a/src/common/component/GoogleLoginButton.tsx +++ b/src/common/component/GoogleLoginButton.tsx @@ -44,7 +44,7 @@ const GoogleLoginInner: FC = ({ type = "login", loaded, loadError }) => { }, [error]); return ( - + ); +}; + +export default GoBackNav; \ No newline at end of file diff --git a/src/routes/chat/GuestBlankPlaceholder.tsx b/src/routes/chat/GuestBlankPlaceholder.tsx index 5bd365b8..9064c150 100644 --- a/src/routes/chat/GuestBlankPlaceholder.tsx +++ b/src/routes/chat/GuestBlankPlaceholder.tsx @@ -21,7 +21,7 @@ const GuestBlankPlaceholder = () => { navigateTo("/login"); }; return ( -
+

{t("welcome", { name: serverName })}

{t("guest_login_tip")} diff --git a/src/routes/chat/GuestChannelChat/index.tsx b/src/routes/chat/GuestChannelChat/index.tsx index 15edd44d..52b1ce68 100644 --- a/src/routes/chat/GuestChannelChat/index.tsx +++ b/src/routes/chat/GuestChannelChat/index.tsx @@ -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={
+
{name} diff --git a/src/routes/chat/GuestSessionList/index.tsx b/src/routes/chat/GuestSessionList/index.tsx index 2ecaa9bf..e80b907a 100644 --- a/src/routes/chat/GuestSessionList/index.tsx +++ b/src/routes/chat/GuestSessionList/index.tsx @@ -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 = () => { }, [channelIDs, channelMessage, readChannels, readUsers, loginUid, userMessage]); return ( -
    - {sessions.map((s) => { - const { key, id, mid = 0 } = s; - return ; - })} -
+ <> +
    + {sessions.map((s) => { + const { key, id, mid = 0 } = s; + return ; + })} +
+ + ); }; export default SessionList; diff --git a/src/routes/chat/Layout/LoginTip.tsx b/src/routes/chat/Layout/LoginTip.tsx index 3d2d6c68..3d192124 100644 --- a/src/routes/chat/Layout/LoginTip.tsx +++ b/src/routes/chat/Layout/LoginTip.tsx @@ -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 ( -
- +
+ 👋 {t("sign_in_tip")} diff --git a/src/routes/chat/Layout/index.tsx b/src/routes/chat/Layout/index.tsx index 7fa97869..b949260e 100644 --- a/src/routes/chat/Layout/index.tsx +++ b/src/routes/chat/Layout/index.tsx @@ -111,7 +111,7 @@ const Layout: FC = ({
{children} -
+
{readonly ? ( ) : reachLimit ? ( diff --git a/src/routes/chat/index.tsx b/src/routes/chat/index.tsx index ef58a5e3..f97efc53 100644 --- a/src/routes/chat/index.tsx +++ b/src/routes/chat/index.tsx @@ -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 && }
{sessionListVisible &&
} -
+
{isGuest ? : } - {sessionListVisible ? null : } - {isGuest &&
-
+
{placeholderVisible && (isGuest ? : )} {channel_id !== 0 && (isGuest ? ( diff --git a/src/routes/favs/index.tsx b/src/routes/favs/index.tsx index 87b7f35b..e7b95d5c 100644 --- a/src/routes/favs/index.tsx +++ b/src/routes/favs/index.tsx @@ -118,7 +118,7 @@ function FavsPage() { removeFavorite(id); }; return ( -
+
    {Filters.map(({ icon, title, filter: f }) => { diff --git a/src/routes/home/MobileNavs.tsx b/src/routes/home/MobileNavs.tsx new file mode 100644 index 00000000..ab0fde23 --- /dev/null +++ b/src/routes/home/MobileNavs.tsx @@ -0,0 +1,67 @@ +import clsx from 'clsx'; +import React from 'react'; +import { NavLink, useLocation, useMatch } from 'react-router-dom'; +import { useAppSelector } from '../../app/store'; + +import ChatIcon from "../../assets/icons/chat.svg"; +import UserIcon from "../../assets/icons/user.svg"; + +// type Props = {} + +const MobileNavs = () => { + const isHomePath = useMatch(`/`); + const { pathname } = useLocation(); + const isChatHomePath = useMatch(`/chat`); + const isDMChat = useMatch(`/chat/dm/:user_id`); + const isChannelChat = useMatch(`/chat/channel/:channel_id`); + const { + ui: { + rememberedNavs: { chat: chatPath, user: userPath } + } + } = useAppSelector((store) => { + return { + ui: store.ui, + loginUid: store.authData.user?.uid, + guest: store.authData.guest + }; + }); + + const linkClass = `flex`; + const isChatPage = isHomePath || pathname.startsWith("/chat"); + const isChattingPage = !!isDMChat || !!isChannelChat; + console.log("rrr", isDMChat, isChannelChat); + + // 有点绕 + const chatNav = isChatHomePath ? "/chat" : chatPath || "/chat"; + const userNav = userPath || "/users"; + return ( +
      +
    • + `${linkClass}`} + to={chatNav} + > + {({ isActive }) => { + const active = isActive || isChatPage; + return
      + + Chats +
      ; + }} +       +
      • +
    • + `${linkClass}`} to={userNav}> + {({ isActive: active }) => { + return
      + + Contacts +
      ; + }} +       +
      • +
    + ); +}; + +export default MobileNavs; \ No newline at end of file diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index 7c3da6a0..2a05883d 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -14,7 +14,7 @@ import UserIcon from "../../assets/icons/user.svg"; import FavIcon from "../../assets/icons/bookmark.svg"; import FolderIcon from "../../assets/icons/folder.svg"; import { useAppSelector } from "../../app/store"; -import { isMobile } from "../../common/utils"; +import MobileNavs from "./MobileNavs"; function HomePage() { @@ -49,14 +49,13 @@ function HomePage() { const chatNav = isChatHomePath ? "/chat" : chatPath || "/chat"; const userNav = userPath || "/users"; const linkClass = `flex items-center gap-2.5 px-3 py-2 font-semibold text-sm text-gray-600 rounded-lg hover:bg-gray-800/10`; - const mobile = isMobile(); return ( <> {!guest && }
    {!guest && ( -
    +
    {loginUid && }
    + {!guest && } ); } diff --git a/src/routes/invite/index.tsx b/src/routes/invite/index.tsx index 5545883d..f4d9a520 100644 --- a/src/routes/invite/index.tsx +++ b/src/routes/invite/index.tsx @@ -118,7 +118,7 @@ const InvitePage: FC = () => { if (!valid) return <>invite token expires or invalid; return ( -
    +
    logo diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx index 97f4019d..dcb4b293 100644 --- a/src/routes/login/index.tsx +++ b/src/routes/login/index.tsx @@ -124,7 +124,7 @@ export default function LoginPage() { return ( -
    +
    logo diff --git a/src/routes/onboarding/steps/UpdateFrontendURL.tsx b/src/routes/onboarding/steps/UpdateFrontendURL.tsx index 1dff1e60..d6833ed0 100644 --- a/src/routes/onboarding/steps/UpdateFrontendURL.tsx +++ b/src/routes/onboarding/steps/UpdateFrontendURL.tsx @@ -35,10 +35,10 @@ const UpdateFrontendURL = ({ refreshInviteLink }: Props) => { } }, [isSuccess]); return ( -
    +
    - {t("update_domain_tip")} + {t("update_domain_tip")}
    diff --git a/src/routes/reg/index.tsx b/src/routes/reg/index.tsx index ad88225a..fb5b5294 100644 --- a/src/routes/reg/index.tsx +++ b/src/routes/reg/index.tsx @@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom"; export default function RegContainer() { return ( -
    +
    diff --git a/src/routes/resources/index.tsx b/src/routes/resources/index.tsx index f5d69e34..48ac48cc 100644 --- a/src/routes/resources/index.tsx +++ b/src/routes/resources/index.tsx @@ -82,7 +82,7 @@ function ResourceManagement({ fileMessages }) { }, [view, filter]); return ( -
    +
    diff --git a/src/routes/setting/BotConfig/CreateAPIKeyModal.tsx b/src/routes/setting/BotConfig/CreateAPIKeyModal.tsx index bd915be7..76ac9df0 100644 --- a/src/routes/setting/BotConfig/CreateAPIKeyModal.tsx +++ b/src/routes/setting/BotConfig/CreateAPIKeyModal.tsx @@ -76,7 +76,7 @@ const CreateAPIKeyModal = ({ closeModal, uid }: Props) => {
    :
    - +
    } diff --git a/src/routes/setting/BotConfig/CreateModal.tsx b/src/routes/setting/BotConfig/CreateModal.tsx index 98b65b44..d99f4a9e 100644 --- a/src/routes/setting/BotConfig/CreateModal.tsx +++ b/src/routes/setting/BotConfig/CreateModal.tsx @@ -79,11 +79,11 @@ const CreateModal = ({ closeModal }: Props) => { >
    - +
    - +
    diff --git a/src/routes/setting/BotConfig/WebhookModal.tsx b/src/routes/setting/BotConfig/WebhookModal.tsx index b5ae9f1f..11dc1e88 100644 --- a/src/routes/setting/BotConfig/WebhookModal.tsx +++ b/src/routes/setting/BotConfig/WebhookModal.tsx @@ -58,7 +58,7 @@ const WebhookModal = ({ uid, webhook, closeModal }: Props) => { } >
    - +
    diff --git a/src/routes/users/index.tsx b/src/routes/users/index.tsx index 424c0c84..720bead7 100644 --- a/src/routes/users/index.tsx +++ b/src/routes/users/index.tsx @@ -8,6 +8,7 @@ import Profile from "../../common/component/Profile"; import BlankPlaceholder from "../../common/component/BlankPlaceholder"; import useFilteredUsers from "../../common/hook/useFilteredUsers"; +import clsx from "clsx"; function UsersPage() { const dispatch = useDispatch(); @@ -23,12 +24,14 @@ function UsersPage() { }, [pathname]); if (!users) return null; - + const isUserDetail = !!user_id; return ( -
    -
    +
    +
    -
    +
    -
    - {user_id ? : } +
    + {isUserDetail ? : }
    );