From 3a356b6311d079cc8c78b97e1b402121902d8d99 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Fri, 17 Feb 2023 09:22:59 +0800 Subject: [PATCH] feat: setting for mobile friendly --- src/common/component/ChannelModal/index.tsx | 2 +- src/common/component/GoBackNav.tsx | 34 ++++++++ src/common/component/InviteLink.tsx | 4 +- .../component/InviteModal/InviteByEmail.tsx | 2 +- src/common/component/ManageMembers/index.tsx | 4 +- .../component/Message/PinMessageModal.tsx | 2 +- src/common/component/Message/index.tsx | 2 +- src/common/component/MobileAppTip.tsx | 2 +- src/common/component/NewVersion.tsx | 2 +- src/common/component/QRCode.tsx | 7 +- src/common/component/SaveTip.tsx | 2 +- src/common/component/Server.tsx | 2 +- .../component/StyledSettingContainer.tsx | 78 ++++++++++--------- src/common/component/UsersModal.tsx | 2 +- src/routes/chat/ChannelChat/PinList.tsx | 2 +- src/routes/chat/ChannelChat/index.tsx | 4 +- src/routes/chat/DMChat/index.tsx | 2 +- src/routes/chat/GoBackNav.tsx | 18 ----- src/routes/chat/GuestChannelChat/index.tsx | 2 +- src/routes/chat/Layout/LicenseOutdatedTip.tsx | 2 +- src/routes/home/MobileNavs.tsx | 20 ++++- src/routes/home/User.tsx | 2 +- src/routes/index.tsx | 5 +- src/routes/login/index.tsx | 2 +- src/routes/reg/RegWithUsername.tsx | 2 +- src/routes/reg/Register.tsx | 8 +- src/routes/reg/index.tsx | 2 +- src/routes/setting/APIDocument.tsx | 6 +- src/routes/setting/BotConfig/index.tsx | 2 +- src/routes/setting/MyAccount.tsx | 8 +- src/routes/setting/Widget.tsx | 2 +- src/routes/setting/config/Firebase.tsx | 2 +- src/routes/setting/config/Logins.tsx | 2 +- src/routes/setting/config/SMTP.tsx | 2 +- src/routes/setting/index.tsx | 8 +- src/routes/settingChannel/index.tsx | 8 +- src/routes/settingDM/index.tsx | 16 ++-- src/routes/users/index.tsx | 2 + 38 files changed, 157 insertions(+), 117 deletions(-) create mode 100644 src/common/component/GoBackNav.tsx delete mode 100644 src/routes/chat/GoBackNav.tsx diff --git a/src/common/component/ChannelModal/index.tsx b/src/common/component/ChannelModal/index.tsx index 13792a3a..5f77b2af 100644 --- a/src/common/component/ChannelModal/index.tsx +++ b/src/common/component/ChannelModal/index.tsx @@ -132,7 +132,7 @@ const ChannelModal: FC = ({ personal = false, closeModal }) => { )} )} -
+

{t("create_channel")}

{!is_public diff --git a/src/common/component/GoBackNav.tsx b/src/common/component/GoBackNav.tsx new file mode 100644 index 00000000..b93b4bb3 --- /dev/null +++ b/src/common/component/GoBackNav.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { useMatch, useNavigate } from 'react-router-dom'; +import IconArrow from '../../assets/icons/arrow.left.svg'; +type Props = { + path?: string, + className?: string +} + +const GoBackNav = ({ path, className = "" }: Props) => { + const navigate = useNavigate(); + const isChannelChatPage = useMatch("/chat/channel/:channel_id"); + const isDMChatPage = useMatch("/chat/dm/:user_id"); + const isProfilePage = useMatch("/users/:user_id"); + console.log("routt", isChannelChatPage, isDMChatPage); + const isChatPage = !!isChannelChatPage || !!isDMChatPage; + const handleBack = () => { + if (path) { + navigate(path); + } else if (isChatPage) { + navigate("/chat"); + } else if (isProfilePage) { + navigate("/users"); + } else { + navigate(-1); + } + }; + return ( + + ); +}; + +export default GoBackNav; \ No newline at end of file diff --git a/src/common/component/InviteLink.tsx b/src/common/component/InviteLink.tsx index e2cc97c7..76500676 100644 --- a/src/common/component/InviteLink.tsx +++ b/src/common/component/InviteLink.tsx @@ -16,7 +16,7 @@ const InviteLink: FC = () => { return (

{t("share_invite_link")} -
+
{t("invite_link_expire")}
- +
- {!generating && } + {!generating && }
{t("invite_link_expire")} diff --git a/src/common/component/ManageMembers/index.tsx b/src/common/component/ManageMembers/index.tsx index b35cffef..7e0dee64 100644 --- a/src/common/component/ManageMembers/index.tsx +++ b/src/common/component/ManageMembers/index.tsx @@ -61,7 +61,7 @@ const ManageMembers: FC = ({ cid }) => {

-
    +
      {uids.map((uid) => { const currUser = users.byId[uid]; if (!currUser) return null; @@ -80,7 +80,7 @@ const ManageMembers: FC = ({ cid }) => { {name} {owner && } - {email} + {email}
diff --git a/src/common/component/Message/PinMessageModal.tsx b/src/common/component/Message/PinMessageModal.tsx index 54fdbe36..5b197a82 100644 --- a/src/common/component/Message/PinMessageModal.tsx +++ b/src/common/component/Message/PinMessageModal.tsx @@ -34,7 +34,7 @@ const PinMessageModal: FC = ({ closeModal, mid = 0, gid = 0 }) => { return ( - ); -}; - -export default GoBackNav; \ No newline at end of file diff --git a/src/routes/chat/GuestChannelChat/index.tsx b/src/routes/chat/GuestChannelChat/index.tsx index 52b1ce68..b6d0324b 100644 --- a/src/routes/chat/GuestChannelChat/index.tsx +++ b/src/routes/chat/GuestChannelChat/index.tsx @@ -7,7 +7,7 @@ import Layout from "../Layout"; import { renderMessageFragment } from "../utils"; import LoadMore from "../LoadMore"; import { useAppSelector } from "../../../app/store"; -import GoBackNav from "../GoBackNav"; +import GoBackNav from "../../../common/component/GoBackNav"; type Props = { cid?: number; diff --git a/src/routes/chat/Layout/LicenseOutdatedTip.tsx b/src/routes/chat/Layout/LicenseOutdatedTip.tsx index 33dff1b0..9d5fed4a 100644 --- a/src/routes/chat/Layout/LicenseOutdatedTip.tsx +++ b/src/routes/chat/Layout/LicenseOutdatedTip.tsx @@ -8,7 +8,7 @@ const LicenseUpgradeTip = () => { const { t } = useTranslation("chat"); const navigateTo = useNavigate(); const handleRedirect = () => { - navigateTo("/setting?nav=license"); + navigateTo("/setting/license"); }; return ( diff --git a/src/routes/home/MobileNavs.tsx b/src/routes/home/MobileNavs.tsx index ab0fde23..0ed43fae 100644 --- a/src/routes/home/MobileNavs.tsx +++ b/src/routes/home/MobileNavs.tsx @@ -5,6 +5,7 @@ import { useAppSelector } from '../../app/store'; import ChatIcon from "../../assets/icons/chat.svg"; import UserIcon from "../../assets/icons/user.svg"; +import SettingIcon from "../../assets/icons/setting.svg"; // type Props = {} @@ -13,6 +14,7 @@ const MobileNavs = () => { const { pathname } = useLocation(); const isChatHomePath = useMatch(`/chat`); const isDMChat = useMatch(`/chat/dm/:user_id`); + // const isSettingPage = useMatch(`/setting`); const isChannelChat = useMatch(`/chat/channel/:channel_id`); const { ui: { @@ -44,8 +46,8 @@ const MobileNavs = () => { {({ isActive }) => { const active = isActive || isChatPage; return
- - Chats + + Chats
; }} @@ -54,8 +56,18 @@ const MobileNavs = () => { `${linkClass}`} to={userNav}> {({ isActive: active }) => { return
- - Contacts + + Contacts +
; + }} + + +
  • + `${linkClass}`} to={'/setting'}> + {({ isActive: active }) => { + return
    + + Settings
    ; }}     diff --git a/src/routes/home/User.tsx b/src/routes/home/User.tsx index fd170a1c..9f8e1513 100644 --- a/src/routes/home/User.tsx +++ b/src/routes/home/User.tsx @@ -14,7 +14,7 @@ const User: FC = ({ uid }) => { return (
    - +
    diff --git a/src/routes/index.tsx b/src/routes/index.tsx index e6e0a2e9..0950ef33 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -130,8 +130,9 @@ const PageRoutes = () => { } /> - } /> - } /> + } /> + } /> + } /> {t("login.title")} {t("login.desc")}
    -
    + { visible to others in spaces you joined.
    • - +
    - logo -

    {t("reg.title")}

    - {t("reg.desc")} + logo +

    {t("reg.title")}

    + {t("reg.desc")}
    - + +
    diff --git a/src/routes/setting/APIDocument.tsx b/src/routes/setting/APIDocument.tsx index fc2a11c7..1a5f46ad 100644 --- a/src/routes/setting/APIDocument.tsx +++ b/src/routes/setting/APIDocument.tsx @@ -35,7 +35,7 @@ const APIDocument = () => { 👉 {t("api_doc.step_1")} {/*
    */} - step 1 + step 1 {/*
    */}
    @@ -50,13 +50,13 @@ const APIDocument = () => {

    - step 2 + step 2

    👉 {t("api_doc.last")}

    - step 3 + step 3
    diff --git a/src/routes/setting/BotConfig/index.tsx b/src/routes/setting/BotConfig/index.tsx index ddc09f77..f20ee6af 100644 --- a/src/routes/setting/BotConfig/index.tsx +++ b/src/routes/setting/BotConfig/index.tsx @@ -73,7 +73,7 @@ export default function BotConfig() {

    {t("manage_desc")}

    -
    +
    diff --git a/src/routes/setting/MyAccount.tsx b/src/routes/setting/MyAccount.tsx index 03a24ce4..49c1b268 100644 --- a/src/routes/setting/MyAccount.tsx +++ b/src/routes/setting/MyAccount.tsx @@ -61,12 +61,12 @@ export default function MyAccount() { return ( <>
    -
    +
    {name} #{uid}
    -
    +
    {t("username")} @@ -77,7 +77,7 @@ export default function MyAccount() { {ct("action.edit")}
    -
    +
    {t("email")} {email} @@ -86,7 +86,7 @@ export default function MyAccount() { {ct("action.edit")}
    -
    +
    {t("password")} ********* diff --git a/src/routes/setting/Widget.tsx b/src/routes/setting/Widget.tsx index d3129c5b..c1bcc05d 100644 --- a/src/routes/setting/Widget.tsx +++ b/src/routes/setting/Widget.tsx @@ -34,7 +34,7 @@ export default function Widget() {
    {t('config')}:
    -
    +
    diff --git a/src/routes/setting/config/Firebase.tsx b/src/routes/setting/config/Firebase.tsx index de258fa5..405522ff 100644 --- a/src/routes/setting/config/Firebase.tsx +++ b/src/routes/setting/config/Firebase.tsx @@ -77,7 +77,7 @@ export default function ConfigFirebase() { client_email, } = values as FirebaseConfig; return ( -
    +
    +
    diff --git a/src/routes/setting/config/SMTP.tsx b/src/routes/setting/config/SMTP.tsx index bc40701a..4b8dfd88 100644 --- a/src/routes/setting/config/SMTP.tsx +++ b/src/routes/setting/config/SMTP.tsx @@ -53,7 +53,7 @@ export default function ConfigSMTP() { if (!values) return null; const { host, port, from, username, password, enabled = false } = values as SMTPConfig; return ( -
    +
    diff --git a/src/routes/setting/index.tsx b/src/routes/setting/index.tsx index 80b0f4d8..3a99eb84 100644 --- a/src/routes/setting/index.tsx +++ b/src/routes/setting/index.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { useNavigate, useSearchParams } from "react-router-dom"; +import { useNavigate, useParams, useSearchParams } from "react-router-dom"; import StyledSettingContainer from "../../common/component/StyledSettingContainer"; import useNavs from "./navs"; import LogoutConfirmModal from "./LogoutConfirmModal"; @@ -12,7 +12,7 @@ export default function Setting() { const [searchParams] = useSearchParams(); const navs = useNavs(); const flattenNaves = navs.map(({ items }) => items).flat(); - const navKey = searchParams.get("nav"); + const { nav: navKey } = useParams();; const [logoutConfirm, setLogoutConfirm] = useState(false); const navigateTo = useNavigate(); pageFrom = pageFrom ? pageFrom : searchParams.get("f") || "/"; @@ -25,7 +25,7 @@ export default function Setting() { setLogoutConfirm((prev) => !prev); }; - const currNav = flattenNaves.find((n) => n.name == navKey) || flattenNaves[0]; + const currNav = flattenNaves.find((n) => n.name == navKey); return ( <> @@ -36,7 +36,7 @@ export default function Setting() { navs={navs} dangers={[{ title: t("action.logout"), handler: toggleLogoutConfirm }]} > - {currNav.component} + {navKey ? currNav?.component : null} {logoutConfirm && } diff --git a/src/routes/settingChannel/index.tsx b/src/routes/settingChannel/index.tsx index b251db57..4884215d 100644 --- a/src/routes/settingChannel/index.tsx +++ b/src/routes/settingChannel/index.tsx @@ -11,7 +11,7 @@ let from: string = ""; export default function ChannelSetting() { const { t } = useTranslation("setting"); - const { cid = 0 } = useParams(); + const { cid = 0, nav: navKey } = useParams(); const { loginUser, channel } = useAppSelector((store) => { return { loginUser: store.authData.user, @@ -26,7 +26,6 @@ export default function ChannelSetting() { return items; }) .flat(); - const navKey = searchParams.get("nav"); from = from ? from : searchParams.get("f") || "/"; const [deleteConfirm, setDeleteConfirm] = useState(false); const [leaveConfirm, setLeaveConfirm] = useState(false); @@ -41,13 +40,14 @@ export default function ChannelSetting() { setLeaveConfirm((prev) => !prev); }; if (!cid) return null; - const currNav = flattenNavs.find((n) => n.name == navKey) || flattenNavs[0]; + const currNav = flattenNavs.find((n) => n.name == navKey); const canDelete = loginUser?.is_admin || channel?.owner == loginUser?.uid; const canLeave = !channel?.is_public; return ( <> - {currNav.component} + {navKey ? currNav?.component : null} {deleteConfirm && } {leaveConfirm && } diff --git a/src/routes/settingDM/index.tsx b/src/routes/settingDM/index.tsx index a2488be6..9d12d6de 100644 --- a/src/routes/settingDM/index.tsx +++ b/src/routes/settingDM/index.tsx @@ -11,7 +11,7 @@ let from: string = ""; export default function DMSetting() { // const { t } = useTranslation("setting"); const { t: ct } = useTranslation(); - const { uid = 0 } = useParams(); + const { uid = 0, nav: navKey } = useParams(); const { loginUser } = useAppSelector((store) => { return { loginUser: store.authData.user, @@ -26,7 +26,6 @@ export default function DMSetting() { return items; }) .flat(); - const navKey = searchParams.get("nav"); from = from ? from : searchParams.get("f") || "/"; const [deleteConfirm, setDeleteConfirm] = useState(false); const close = () => { @@ -37,24 +36,25 @@ export default function DMSetting() { setDeleteConfirm((prev) => !prev); }; if (!uid) return null; - const currNav = flattenNavs.find((n) => n.name == navKey) || flattenNavs[0]; + const currNav = flattenNavs.find((n) => n.name == navKey); const canDelete = loginUser?.is_admin; return ( <> - {currNav.component} + {navKey ? currNav?.component : null} {deleteConfirm && } diff --git a/src/routes/users/index.tsx b/src/routes/users/index.tsx index 720bead7..d799dfcd 100644 --- a/src/routes/users/index.tsx +++ b/src/routes/users/index.tsx @@ -9,6 +9,7 @@ import Profile from "../../common/component/Profile"; import BlankPlaceholder from "../../common/component/BlankPlaceholder"; import useFilteredUsers from "../../common/hook/useFilteredUsers"; import clsx from "clsx"; +import GoBackNav from "../../common/component/GoBackNav"; function UsersPage() { const dispatch = useDispatch(); @@ -48,6 +49,7 @@ function UsersPage() { !isUserDetail && "hidden md:flex" )}> {isUserDetail ? : } +
    );