From 56bd1557dbae0d66950be3f9dbb636f4bb1e87ec Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Wed, 15 Feb 2023 10:04:26 +0800 Subject: [PATCH] refactor: mobile UX friendly --- src/app/services/base.query.ts | 5 ++-- src/app/services/handlers.ts | 1 + src/common/component/FileBox/index.tsx | 6 ++-- .../component/FileMessage/VideoMessage.tsx | 8 ++--- src/common/component/FileMessage/index.tsx | 6 ++-- .../component/Message/FavoredMessage.tsx | 2 +- src/common/component/Message/Reply.tsx | 4 +-- src/common/component/Message/URLPreview.tsx | 10 +++---- src/common/component/Message/index.tsx | 4 +-- src/common/component/Profile/index.tsx | 4 +-- src/common/component/Send/EmojiPicker.tsx | 2 +- src/common/component/Send/Replying.tsx | 2 +- src/common/component/Send/Toolbar.tsx | 4 +-- src/common/component/User/index.tsx | 4 +-- src/common/component/styled/Modal.tsx | 2 +- src/common/component/styled/Textarea.tsx | 8 ++--- src/common/utils.tsx | 2 ++ src/routes/chat/ChannelChat/index.tsx | 4 +-- src/routes/chat/GuestSessionList/index.tsx | 2 +- src/routes/favs/index.tsx | 4 +-- src/routes/home/index.tsx | 29 +++++++------------ src/routes/resources/Filter/index.tsx | 10 +++---- src/routes/resources/Search.tsx | 2 +- src/routes/resources/View.tsx | 2 +- src/routes/resources/index.tsx | 3 +- src/routes/setting/MyAccount.tsx | 8 ++--- src/routes/users/Search.tsx | 2 +- src/routes/users/index.tsx | 8 ++--- 28 files changed, 71 insertions(+), 77 deletions(-) diff --git a/src/app/services/base.query.ts b/src/app/services/base.query.ts index d486d30d..7f9fbe8b 100644 --- a/src/app/services/base.query.ts +++ b/src/app/services/base.query.ts @@ -26,7 +26,8 @@ const whiteList = [ "getInitialized", "createAdmin", "getBotRelatedChannels", - "sendMessageByBot" + "sendMessageByBot", + "replyWithChatGPT" ]; const baseQuery = fetchBaseQuery({ @@ -41,7 +42,7 @@ const baseQuery = fetchBaseQuery({ }); let waitingForRenew: null | any = null; -const baseQueryWithTokenCheck = async (args, api, extraOptions) => { +const baseQueryWithTokenCheck = async (args: any, api: any, extraOptions: any) => { if (waitingForRenew) { await waitingForRenew; } diff --git a/src/app/services/handlers.ts b/src/app/services/handlers.ts index a8a0f7d8..255a37ef 100644 --- a/src/app/services/handlers.ts +++ b/src/app/services/handlers.ts @@ -46,6 +46,7 @@ export const onMessageSendStarted = async ( try { const { data: server_mid } = await queryFulfilled; + // throw new Error(); // console.log("message server mid", server_mid); batch(() => { dispatch(removeContextMessage({ id, mid: ts })); diff --git a/src/common/component/FileBox/index.tsx b/src/common/component/FileBox/index.tsx index 8ad2d231..57a9fd24 100644 --- a/src/common/component/FileBox/index.tsx +++ b/src/common/component/FileBox/index.tsx @@ -86,7 +86,7 @@ const FileBox: FC = ({ return (
{icon} @@ -94,13 +94,13 @@ const FileBox: FC = ({ {name} {formatBytes(size)} - {fromNowTime(created_at)} + {fromNowTime(created_at)} by {fromUser.name}
- +
diff --git a/src/common/component/FileMessage/VideoMessage.tsx b/src/common/component/FileMessage/VideoMessage.tsx index 9ddc6d94..ff74b3fd 100644 --- a/src/common/component/FileMessage/VideoMessage.tsx +++ b/src/common/component/FileMessage/VideoMessage.tsx @@ -37,17 +37,17 @@ const VideoMessage = ({ url, name, size, download }: Props) => { }; const tipClass = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'; return ( -
+
- +
- {name} + {name} {_size}
- +
{!canPlay ?
diff --git a/src/common/component/FileMessage/index.tsx b/src/common/component/FileMessage/index.tsx index 03392ae6..5a20cd8e 100644 --- a/src/common/component/FileMessage/index.tsx +++ b/src/common/component/FileMessage/index.tsx @@ -155,12 +155,12 @@ const FileMessage: FC = ({ /> ); return ( -
+
{icon}
{name} - + {sending ? ( ) : ( @@ -179,7 +179,7 @@ const FileMessage: FC = ({ {sending ? ( ) : ( - + )} diff --git a/src/common/component/Message/FavoredMessage.tsx b/src/common/component/Message/FavoredMessage.tsx index b6d051b0..418393a9 100644 --- a/src/common/component/Message/FavoredMessage.tsx +++ b/src/common/component/Message/FavoredMessage.tsx @@ -24,7 +24,7 @@ const FavoredMessage: FC = ({ id = "" }) => { return (
{user && ( -
+
)} diff --git a/src/common/component/Message/Reply.tsx b/src/common/component/Message/Reply.tsx index a489e48d..dfb835f6 100644 --- a/src/common/component/Message/Reply.tsx +++ b/src/common/component/Message/Reply.tsx @@ -14,7 +14,7 @@ const renderContent = (data: MessagePayload) => { switch (content_type) { case ContentTypes.text: res = ( - + ); @@ -77,7 +77,7 @@ const Reply: FC = ({ mid, interactive = true }) => {
diff --git a/src/common/component/Message/URLPreview.tsx b/src/common/component/Message/URLPreview.tsx index 0f728c1f..7d8abc92 100644 --- a/src/common/component/Message/URLPreview.tsx +++ b/src/common/component/Message/URLPreview.tsx @@ -40,7 +40,7 @@ export default function URLPreview({ url = "" }) { if (!url || !data || !data.title) return null; const { title, description, ogImage } = data; - const containerClass = `flex items-center border border-solid border-gray-300 box-border rounded-md w-[380px]`; + const containerClass = `flex items-center border border-solid border-gray-300 dark:border-gray-600 box-border rounded-md w-[80%] md:w-[380px]`; const dotsClass = `truncate`; return ogImage ? ( @@ -55,13 +55,13 @@ export default function URLPreview({ url = "" }) { className={`${containerClass} gap-2 px-2 py-3`} href={url} target="_blank" rel="noreferrer"> {favicon && ( -
- favicon +
+ favicon
)}
-

{title}

-

{description}

+

{title}

+

{description}

{url}
diff --git a/src/common/component/Message/index.tsx b/src/common/component/Message/index.tsx index ed52e98b..93085974 100644 --- a/src/common/component/Message/index.tsx +++ b/src/common/component/Message/index.tsx @@ -96,7 +96,7 @@ const Message: FC = ({ onContextMenu={readOnly ? undefined : handleContextMenuEvent} data-msg-mid={mid} ref={inviewRef} - className={clsx(`group w-full relative flex items-start gap-4 px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800 hover:bg-gray-100`, + className={clsx(`group w-[85%] md:w-full relative flex items-start gap-2 md:gap-4 px-1 md:px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800 hover:bg-gray-100`, readOnly && "hover:bg-transparent", showExpire && "bg-red-200", pinInfo && "bg-cyan-50 dark:bg-cyan-800 pt-7" @@ -111,7 +111,7 @@ const Message: FC = ({ trigger="click" content={} > -
+
diff --git a/src/common/component/Profile/index.tsx b/src/common/component/Profile/index.tsx index 1af2ebeb..4b132982 100644 --- a/src/common/component/Profile/index.tsx +++ b/src/common/component/Profile/index.tsx @@ -45,7 +45,7 @@ const Profile: FC = ({ uid, type = "embed", cid }) => { const canRemoveFromServer = !isCard && canRemove; const hasMore = email || canRemoveFromChannel || canRemoveFromServer; const iconClass = `cursor-pointer flex flex-col items-center gap-1 rounded-lg w-32 text-primary-400 bg-gray-50 dark:bg-gray-800 text-sm pt-3.5 pb-3`; - const containerClass = clsx(`flex-center flex-col gap-1 z-[99] mt-20 select-none`, isCard ? "p-4 w-[280px] bg-white dark:bg-gray-800 drop-shadow rounded-md" : "w-[432px]"); + const containerClass = clsx(`flex-center flex-col gap-1 z-[99] mt-20 select-none`, isCard ? "p-4 w-[280px] bg-white dark:bg-gray-800 drop-shadow rounded-md" : "md:w-[432px]"); return (
= ({ uid, type = "embed", cid }) => {

{name}

{email} {/*

{introduction}

*/} -
    +
    • diff --git a/src/common/component/Send/EmojiPicker.tsx b/src/common/component/Send/EmojiPicker.tsx index 577a7cde..f468e27f 100644 --- a/src/common/component/Send/EmojiPicker.tsx +++ b/src/common/component/Send/EmojiPicker.tsx @@ -51,7 +51,7 @@ export default function EmojiPicker({ selectEmoji }: { selectEmoji: (e: string) return ( -
      +
      {/* emoji picker */}
      diff --git a/src/common/component/Send/Replying.tsx b/src/common/component/Send/Replying.tsx index b3cb1de7..192c53e3 100644 --- a/src/common/component/Send/Replying.tsx +++ b/src/common/component/Send/Replying.tsx @@ -72,7 +72,7 @@ export default function Replying({ const user = usersData[from_uid]; return ( -
      +
      Replying to {user?.name}
      diff --git a/src/common/component/Send/Toolbar.tsx b/src/common/component/Send/Toolbar.tsx index 30433abc..54c21b83 100644 --- a/src/common/component/Send/Toolbar.tsx +++ b/src/common/component/Send/Toolbar.tsx @@ -45,8 +45,8 @@ const Toolbar: FC = ({ const isMarkdown = mode == 'markdown'; return ( -
      -
      +
      +
      diff --git a/src/common/component/User/index.tsx b/src/common/component/User/index.tsx index 3c66a5ed..d5a059a1 100644 --- a/src/common/component/User/index.tsx +++ b/src/common/component/User/index.tsx @@ -43,8 +43,8 @@ const User: FC = ({ }; if (!curr) return null; const online = curr.online || curr.uid == loginUid; - const containerClass = clsx(`relative flex items-center justify-start gap-2 rounded-lg select-none `, interactive && "hover:bg-gray-500/10", compact ? "p-0" : "p-2"); - const nameClass = clsx(`text-sm text-gray-500 max-w-[190px] truncate font-semibold dark:text-white`); + const containerClass = clsx(`relative flex items-center justify-start md:gap-2 rounded-lg select-none `, interactive && "hover:bg-gray-500/10", compact ? "p-0" : "p-2"); + const nameClass = clsx(`hidden md:block text-sm text-gray-500 max-w-[190px] truncate font-semibold dark:text-white`); const statusClass = clsx(`absolute -bottom-0.5 -right-1.5 w-3 h-3 box-content rounded-full border-[2px] border-solid border-white dark:border-gray-300`, online ? "bg-[#22c55e]" : "bg-[#a1a1aa]", compact && "w-3.5 h-3.5"); diff --git a/src/common/component/styled/Modal.tsx b/src/common/component/styled/Modal.tsx index f6e8a7c2..8f74b122 100644 --- a/src/common/component/styled/Modal.tsx +++ b/src/common/component/styled/Modal.tsx @@ -12,7 +12,7 @@ interface Props { const StyledModal: FC = ({ compact = false, title = "", description = "", buttons, children, className }) => { return ( -
      +
      {title &&

      {title}

      } {description &&

      {description}

      } {children} diff --git a/src/common/component/styled/Textarea.tsx b/src/common/component/styled/Textarea.tsx index ad2a9156..3cac036a 100644 --- a/src/common/component/styled/Textarea.tsx +++ b/src/common/component/styled/Textarea.tsx @@ -1,13 +1,13 @@ -import { TextareaHTMLAttributes } from "react"; +import { forwardRef, TextareaHTMLAttributes } from "react"; type Props = TextareaHTMLAttributes -const StyledTextarea = ({ className, ...rest }: Props) => { - return ; -}; +}); export default StyledTextarea; diff --git a/src/common/utils.tsx b/src/common/utils.tsx index 3546c2c8..a736cdfc 100644 --- a/src/common/utils.tsx +++ b/src/common/utils.tsx @@ -10,6 +10,8 @@ import IconImage from "../assets/icons/file.image.svg"; import { Archive, ArchiveMessage } from "../types/resource"; import { MessagePayload } from "../app/slices/message"; +export const isMobile = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + export const getLocalAuthData = () => { return { token: localStorage.getItem(KEY_TOKEN) || "", diff --git a/src/routes/chat/ChannelChat/index.tsx b/src/routes/chat/ChannelChat/index.tsx index 9319307b..4946d96e 100644 --- a/src/routes/chat/ChannelChat/index.tsx +++ b/src/routes/chat/ChannelChat/index.tsx @@ -136,7 +136,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
      {name} - {description} + {description}
      } @@ -164,7 +164,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
      } > -
      +
      {hasMore ? ( ) : ( diff --git a/src/routes/chat/GuestSessionList/index.tsx b/src/routes/chat/GuestSessionList/index.tsx index 42a11b06..2ecaa9bf 100644 --- a/src/routes/chat/GuestSessionList/index.tsx +++ b/src/routes/chat/GuestSessionList/index.tsx @@ -40,7 +40,7 @@ const SessionList: FC = () => { }, [channelIDs, channelMessage, readChannels, readUsers, loginUid, userMessage]); return ( -
        +
          {sessions.map((s) => { const { key, id, mid = 0 } = s; return ; diff --git a/src/routes/favs/index.tsx b/src/routes/favs/index.tsx index 0271dfb5..87b7f35b 100644 --- a/src/routes/favs/index.tsx +++ b/src/routes/favs/index.tsx @@ -119,7 +119,7 @@ function FavsPage() { }; return (
          -
          +
            {Filters.map(({ icon, title, filter: f }) => { return ( @@ -129,7 +129,7 @@ function FavsPage() { onClick={handleFilter.bind(null, f as filter)} > {icon} - {title} + {title} ); })} diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index 39efbd44..7c3da6a0 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -9,13 +9,14 @@ import usePreload from "../../common/hook/usePreload"; import Tooltip from "../../common/component/Tooltip"; import Notification from "../../common/component/Notification"; import Manifest from "../../common/component/Manifest"; - import ChatIcon from "../../assets/icons/chat.svg"; 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"; -// const routes = ["/setting", "/setting/channel/:cid"]; +import { isMobile } from "../../common/utils"; + + function HomePage() { const { t } = useTranslation(); const isHomePath = useMatch(`/`); @@ -42,16 +43,13 @@ function HomePage() { const isSettingPage = pathname.startsWith("/setting"); const isChattingPage = isHomePath || pathname.startsWith("/chat"); if (isSettingPage) { - return ( - <> - - - ); + return ; } // 有点绕 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 ( <> @@ -62,42 +60,35 @@ function HomePage() { {loginUid && } diff --git a/src/routes/resources/Filter/index.tsx b/src/routes/resources/Filter/index.tsx index afb416c8..ad066392 100644 --- a/src/routes/resources/Filter/index.tsx +++ b/src/routes/resources/Filter/index.tsx @@ -1,5 +1,7 @@ import { useState } from "react"; import Tippy from "@tippyjs/react"; +import clsx from "clsx"; +import { useTranslation } from "react-i18next"; import Avatar from "../../../common/component/Avatar"; import FilterDate, { Dates } from "./Date"; import FilterFrom from "./From"; @@ -7,11 +9,9 @@ import FilterChannel from "./Channel"; import FilterType, { FileTypes } from "./Type"; import ArrowDown from "../../../assets/icons/arrow.down.svg"; import { useAppSelector } from "../../../app/store"; -import { useTranslation } from "react-i18next"; -import clsx from "clsx"; const getClass = (selected: boolean) => { - return clsx(`cursor-pointer flex items-center gap-2 shadow rounded-lg py-2 px-3 text-xs text-gray-900 dark:text-gray-200`, selected ? 'text-white bg-primary-400' : 'border border-solid border-gray-300 dark:border-gray-400 '); + return clsx(`cursor-pointer flex items-center gap-1 md:gap-2 shadow rounded-lg p-1 md:py-2 md:px-3 text-xs text-gray-900 dark:text-gray-200`, selected ? 'text-white bg-primary-400' : 'border border-solid border-gray-300 dark:border-gray-400 '); }; export default function Filter({ filter, updateFilter }) { const { t } = useTranslation("file"); @@ -22,13 +22,13 @@ export default function Filter({ filter, updateFilter }) { type: false }); - const toggleFilterVisible = (obj) => { + const toggleFilterVisible = (obj: any) => { setFiltersVisible((prev) => { return { ...prev, ...obj }; }); }; - const handleUpdateFilter = (data) => { + const handleUpdateFilter = (data: any) => { updateFilter(data); let _key = Object.keys(data)[0]; let tmp = { diff --git a/src/routes/resources/Search.tsx b/src/routes/resources/Search.tsx index 633465c2..2c5d58c8 100644 --- a/src/routes/resources/Search.tsx +++ b/src/routes/resources/Search.tsx @@ -17,7 +17,7 @@ const Search: FC = ({ value = "", updateSearchValue = null, embed = false }; return ( -
            +
            diff --git a/src/routes/resources/View.tsx b/src/routes/resources/View.tsx index 8081bae1..8accf0b5 100644 --- a/src/routes/resources/View.tsx +++ b/src/routes/resources/View.tsx @@ -18,7 +18,7 @@ export default function View({ view = "item" }: Props) { }; const isGrid = view == "grid"; return ( -
              +
                • diff --git a/src/routes/resources/index.tsx b/src/routes/resources/index.tsx index 604c1767..f5d69e34 100644 --- a/src/routes/resources/index.tsx +++ b/src/routes/resources/index.tsx @@ -82,9 +82,8 @@ function ResourceManagement({ fileMessages }) { }, [view, filter]); return ( -
                +
                -
                diff --git a/src/routes/setting/MyAccount.tsx b/src/routes/setting/MyAccount.tsx index 4f2b3615..03a24ce4 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/users/Search.tsx b/src/routes/users/Search.tsx index 047e1573..39df997f 100644 --- a/src/routes/users/Search.tsx +++ b/src/routes/users/Search.tsx @@ -15,7 +15,7 @@ const Search: FC = ({ input, updateInput }) => { updateInput(evt.target.value); }; return ( -
                +
                search icon diff --git a/src/routes/users/index.tsx b/src/routes/users/index.tsx index ccf46bff..424c0c84 100644 --- a/src/routes/users/index.tsx +++ b/src/routes/users/index.tsx @@ -25,11 +25,11 @@ function UsersPage() { if (!users) return null; return ( -
                -
                +
                +
                -
                -