diff --git a/public/index.html b/public/index.html index 7977ba1c..e68bdee1 100644 --- a/public/index.html +++ b/public/index.html @@ -121,7 +121,6 @@ padding: 0; margin: 0; box-sizing: border-box; - /* user-select: none; */ } body { overflow: hidden; diff --git a/src/assets/icons/arrow.down.svg b/src/assets/icons/arrow.down.svg index 3d50acd0..cd8c453f 100644 --- a/src/assets/icons/arrow.down.svg +++ b/src/assets/icons/arrow.down.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icons/eye.close.svg b/src/assets/icons/eye.close.svg new file mode 100644 index 00000000..e0978244 --- /dev/null +++ b/src/assets/icons/eye.close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/eye.open.svg b/src/assets/icons/eye.open.svg new file mode 100644 index 00000000..484eff49 --- /dev/null +++ b/src/assets/icons/eye.open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/lock.svg b/src/assets/icons/lock.svg index 099c5910..2331f2e7 100644 --- a/src/assets/icons/lock.svg +++ b/src/assets/icons/lock.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icons/pin.svg b/src/assets/icons/pin.svg index 1bb79fb6..91af4cc5 100644 --- a/src/assets/icons/pin.svg +++ b/src/assets/icons/pin.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icons/reply.svg b/src/assets/icons/reply.svg index b6fcfcd0..8f868966 100644 --- a/src/assets/icons/reply.svg +++ b/src/assets/icons/reply.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/index.css b/src/assets/index.css index 3cf17a9b..c87d1456 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -229,10 +229,70 @@ html.dark ::-webkit-scrollbar-thumb { ---channel-text-color: #1c1c1e; ---msg-text-color: #374151; } -/* overrides */ +/* markdown overrides */ #MARKDOWN_CONTAINER .toastui-editor-contents { display: flex; flex-direction: column; align-items: flex-start; } +[class^="toastui-editor-"] .toastui-editor-md-container { + border-bottom: none; +} +[class^="toastui-editor-"] .toastui-editor-md-container .toastui-editor-md-preview { + padding-right: 0; + padding-left: 8px; +} +[class^="toastui-editor-"] .toastui-editor-md-container .toastui-editor-md-splitter { + background-color: #d0d5dd; +} +[class^="toastui-editor-"] .toastui-editor-md-container .ProseMirror { + height: 100%; +} +[class^="toastui-editor-"] .ProseMirror, +[class^="toastui-editor-"] p, +[class^="toastui-editor-"] .toastui-editor.md-mode { + font-weight: 400; + font-size: 14px; + line-height: 22px; + color: #475467; + margin: 0 0 16px; + word-break: break-all; +} +[class^="toastui-editor-"] a { + background-color: transparent; +} +[class^="toastui-editor-"] pre { + width: 100%; + width: -webkit-fill-available; +} +[class^="toastui-editor-"] img { + cursor: pointer; + max-width: 300px; + display: block; +} +[class^="toastui-editor-"] ul { + white-space: nowrap; + margin-top: 0; + margin-bottom: 10px; +} +[class^="toastui-editor-"] ul > li:before { + margin-top: 10px !important; + margin-left: -14px; + background-color: #475467; +} +[class^="toastui-editor-"] ol li { + display: flex; + flex-direction: column; +} +[class^="toastui-editor-"] li ol { + display: flex; + flex-direction: column; +} +[class^="toastui-editor-"] ul, +[class^="toastui-editor-"] ol { + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: #475467; +} diff --git a/src/common/component/FileMessage/ImageMessage.tsx b/src/common/component/FileMessage/ImageMessage.tsx index 66209b0d..6ae52282 100644 --- a/src/common/component/FileMessage/ImageMessage.tsx +++ b/src/common/component/FileMessage/ImageMessage.tsx @@ -1,6 +1,6 @@ import { useState, useEffect, FC } from "react"; import { Ping } from '@uiball/loaders'; -import { getDefaultSize } from "../../utils"; +// import { getDefaultSize } from "../../utils"; type Props = { uploading: boolean; @@ -20,7 +20,7 @@ const ImageMessage: FC = ({ properties }) => { const [url, setUrl] = useState(thumbnail); - const { width = 0, height = 0 } = getDefaultSize(properties); + // const { width = 0, height = 0 } = getDefaultSize(properties); useEffect(() => { const newUrl = thumbnail; const img = new Image(); @@ -36,21 +36,21 @@ const ImageMessage: FC = ({ return (
{uploading && ( -
+
- {progress}% + {progress}%
)} p { - padding-right: 10px; - font-weight: 400; - font-size: 14px; - line-height: 20px; - margin-bottom: 0; - } - - > blockquote { - padding: 14px; - } - } - - img { - cursor: pointer; - max-width: 300px; - display: block; - } - - ul{ - white-space: nowrap; - margin-top: 0; - margin-bottom: 10px; - > li:before { - margin-top: 8px; - margin-left: -14px; - background-color: #475467; - } - } - ol li{ - display: flex; - flex-direction: column; - } - li ol{ - display: flex; - flex-direction: column; - } - ul, - ol { - font-weight: 400; - font-size: 14px; - line-height: 20px; - color: #475467; - } - - h1, - h2, - h3, [class*='heading'] { - margin-block-start: 0; - margin-block-end: 0; - padding: 0; - margin: 0; - border-bottom: none; - font-weight: 700; - color: #475467; - } - - h1, [class*='heading1'] { - margin-top: 0 !important; - font-size: 24px; - line-height: 32px; - } - - h2, [class*='heading2'] { - font-size: 20px; - line-height: 30px; - } - - h3, [class*='heading3'] { - font-size: 16px; - line-height: 24px; - } - } -`; - -export default MarkdownOverrides; diff --git a/src/common/component/Message/Commands.tsx b/src/common/component/Message/Commands.tsx index 73c8b1a6..05e35154 100644 --- a/src/common/component/Message/Commands.tsx +++ b/src/common/component/Message/Commands.tsx @@ -96,7 +96,7 @@ const Commands: FC = ({ context = "user", contextId = 0, mid = 0, toggleE <>
    + className={clsx(`bg-white dark:bg-gray-900 rounded-md z-[999] absolute right-2.5 top-0 -translate-y-1/2 flex items-center border border-solid border-black/10 invisible group-hover:visible`, tippyVisible && '!visible')}> = ({ id = "" }) => { const favorite_mids = messages.map(({ from_mid }) => +from_mid) || []; setMsgs( -
    +
    {messages.map((msg, idx) => { const { user = {}, download, content, content_type, properties, thumbnail } = msg; return ( - +
    {user && ( -
    +
    )} -
    -
    - {user?.name || "Deleted User"} +
    +
    + {user?.name || "Deleted User"}
    -
    +
    {renderContent({ download, content, @@ -43,7 +42,7 @@ const FavoredMessage: FC = ({ id = "" }) => { })}
    - +
    ); })}
    diff --git a/src/common/component/Message/ForwardedMessage.tsx b/src/common/component/Message/ForwardedMessage.tsx index b5f9f4d9..de92a922 100644 --- a/src/common/component/Message/ForwardedMessage.tsx +++ b/src/common/component/Message/ForwardedMessage.tsx @@ -26,7 +26,7 @@ const ForwardedMessage: FC = ({ context, to, from_uid, id }) => { const forward_mids = messages.map(({ from_mid }) => from_mid) || []; // console.log("fff", messages); setForwards( -
    +

    {t("action.forward")} @@ -35,17 +35,17 @@ const ForwardedMessage: FC = ({ context, to, from_uid, id }) => { {messages.map((msg, idx) => { const { user = {}, download, content, content_type, properties, thumbnail } = msg; return ( - +
    {user && ( -
    +
    )} -
    -
    - {user?.name || "Deleted User"} +
    +
    + {user?.name || "Deleted User"}
    -
    +
    {renderContent({ download, context, @@ -58,7 +58,7 @@ const ForwardedMessage: FC = ({ context, to, from_uid, id }) => { })}
    - +
    ); })}
    diff --git a/src/common/component/Message/PreviewMessage.tsx b/src/common/component/Message/PreviewMessage.tsx index 4c7ad8a1..6d1c461b 100644 --- a/src/common/component/Message/PreviewMessage.tsx +++ b/src/common/component/Message/PreviewMessage.tsx @@ -1,9 +1,7 @@ import { FC } from "react"; import clsx from "clsx"; -import dayjs from "dayjs"; import renderContent from "./renderContent"; import Avatar from "../Avatar"; -import StyledWrapper from "./styled"; import { useAppSelector } from "../../../app/store"; interface Props { @@ -16,20 +14,19 @@ const PreviewMessage: FC = ({ mid = 0, context }) => { return { msg: store.message[mid], usersData: store.users.byId }; }); if (!msg) return null; - const { from_uid = 0, created_at, content_type, content, thumbnail = "", properties } = msg; + const { from_uid = 0, content_type, content, thumbnail = "", properties } = msg; const { name, avatar } = usersData[from_uid] ?? {}; const pinMsg = context == "pin"; return ( - -
    +
    +
    -
    -
    - {name} - {dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")} +
    +
    + {name}
    -
    +
    {renderContent({ content_type, content, @@ -39,7 +36,7 @@ const PreviewMessage: FC = ({ mid = 0, context }) => { })}
    - +
    ); }; diff --git a/src/common/component/Message/Reply.tsx b/src/common/component/Message/Reply.tsx index 145a754e..31a29e79 100644 --- a/src/common/component/Message/Reply.tsx +++ b/src/common/component/Message/Reply.tsx @@ -14,14 +14,14 @@ const renderContent = (data: MessagePayload) => { switch (content_type) { case ContentTypes.text: res = ( - + ); break; case ContentTypes.markdown: res = ( -
    +
    ); @@ -36,7 +36,7 @@ const renderContent = (data: MessagePayload) => { res = ( <> {icon} - {name} + {name} ); } @@ -77,7 +77,7 @@ const Reply: FC = ({ mid, interactive = true }) => {
    @@ -90,7 +90,7 @@ const Reply: FC = ({ mid, interactive = true }) => { /> {currUser.name}
    -
    {renderContent(data)}
    +
    {renderContent(data)}
    ); }; diff --git a/src/common/component/Message/index.tsx b/src/common/component/Message/index.tsx index 6831e826..b651de41 100644 --- a/src/common/component/Message/index.tsx +++ b/src/common/component/Message/index.tsx @@ -1,13 +1,13 @@ import React, { useRef, useState, useEffect, FC } from "react"; import dayjs from "dayjs"; +import Tippy from "@tippyjs/react"; +import clsx from "clsx"; import useInView from "./useInView"; -import Tippy from "@tippyjs/react"; import Reaction from "./Reaction"; import Reply from "./Reply"; import Profile from "../Profile"; import Avatar from "../Avatar"; -import StyledWrapper from "./styled"; import Commands from "./Commands"; import EditMessage from "./EditMessage"; import renderContent from "./renderContent"; @@ -91,13 +91,16 @@ const Message: FC = ({ const _key = properties?.local_id || mid; const showExpire = (expires_in ?? 0) > 0; return ( - = ({ trigger="click" content={} > -
    +
    @@ -121,26 +124,29 @@ const Message: FC = ({ hide={hideContextMenu} >
    -
    - {currUser?.name || "Deleted User"} + {pinInfo && + {`pinned by ${pinInfo.created_by ? usersData[pinInfo.created_by]?.name : ""}`} + } +
    + {currUser?.name || "Deleted User"} -
    -
    +
    {reply_mid && } {edit ? ( @@ -180,7 +186,7 @@ const Message: FC = ({ toggleEditMessage={toggleEditMessage} /> )} - +
    ); }; export default React.memo(Message, (prevs, nexts) => { diff --git a/src/common/component/Message/renderContent.tsx b/src/common/component/Message/renderContent.tsx index b83856f6..964275c6 100644 --- a/src/common/component/Message/renderContent.tsx +++ b/src/common/component/Message/renderContent.tsx @@ -39,7 +39,7 @@ const renderContent = ({ <> {edited && ( - + ({i18n.t("edited", { ns: "chat" })}) )} diff --git a/src/common/component/Message/styled.tsx b/src/common/component/Message/styled.tsx deleted file mode 100644 index 30e09e31..00000000 --- a/src/common/component/Message/styled.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import styled from "styled-components"; - -const StyledMsg = styled.div` -width: 100%; - position: relative; - display: flex; - align-items: flex-start; - gap: 16px; - padding: 4px 8px; - margin: 8px 0; - border-radius: 8px; - &[data-highlight="true"] { - background: #f5f6f7; - } - &.auto_delete { - background: #f1d1ca50; - } - &.pinned { - background: #ecfdff; - } - &:hover, - &.contextVisible, - &.preview { - background: #f5f6f7; - .cmds { - visibility: visible; - } - } - &.readonly:hover { - background: none; - } - > .avatar { - flex-shrink: 0; - cursor: pointer; - width: 40px; - height: 40px; - img { - object-fit: cover; - width: 100%; - height: 100%; - border-radius: 50%; - } - } - > .details { - width: 100%; - display: flex; - flex-direction: column; - gap: 8px; - .up { - display: flex; - align-items: center; - gap: 8px; - font-weight: 500; - .name { - color: #06b6d4; - font-style: normal; - font-size: 14px; - line-height: 20px; - } - .time { - color: #bfbfbf; - font-size: 12px; - line-height: 18px; - } - } - .down { - user-select: text; - color: #374151; - font-weight: normal; - font-size: 14px; - line-height: 20px; - word-break: break-all; - white-space: pre-wrap; - .edited { - margin-left: 5px; - color: #999; - font-size: 10px; - } - &.sending { - opacity: 0.9; - } - > .link { - text-decoration: none; - border-radius: 2px; - /* background-color: #f5feff; */ - padding: 2px; - color: #1fe1f9; - } - /* 下载图标颜色 */ - .download_icon.gray{ - path{ - fill: #616161; - } - } - } - } - &.archive { - gap: 8px; - > .details { - gap: 0; - .up .name { - font-weight: 600; - color: #475467; - } - .down { - color: #475467; - } - } - } - &.pinned { - padding-top: 26px; - > .details { - position: relative; - &:before { - position: absolute; - left: 0; - top: -4px; - transform: translateY(-100%); - content: attr(data-pin-tip); - font-weight: 400; - font-size: 12px; - line-height: 18px; - color: #98a2b3; - } - } - } -`; - -export default StyledMsg; diff --git a/src/common/component/PinnedMessage.tsx b/src/common/component/PinnedMessage.tsx index 6cfd93a9..e6d2ae59 100644 --- a/src/common/component/PinnedMessage.tsx +++ b/src/common/component/PinnedMessage.tsx @@ -1,7 +1,6 @@ import dayjs from "dayjs"; import renderContent from "./Message/renderContent"; import Avatar from "./Avatar"; -import StyledWrapper from "./Message/styled"; import { useAppSelector } from "../../app/store"; import { FC } from "react"; import { PinnedMessage } from "../../types/channel"; @@ -23,16 +22,16 @@ const PinnedMessageView: FC = ({ data }) => { const { created_at, content_type, content, properties, thumbnail = "" } = { ...data, ...normalized }; const { name, avatar } = usersData[created_by] ?? {}; return ( - -
    +
    +
    -
    -
    - {name} - {dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")} +
    +
    + {name} +
    -
    +
    {renderContent({ content_type, content, @@ -42,7 +41,7 @@ const PinnedMessageView: FC = ({ data }) => { })}
    - +
    ); }; diff --git a/src/common/component/Profile/index.tsx b/src/common/component/Profile/index.tsx index ebf4fbbb..308cf973 100644 --- a/src/common/component/Profile/index.tsx +++ b/src/common/component/Profile/index.tsx @@ -44,8 +44,8 @@ const Profile: FC = ({ uid, type = "embed", cid }) => { const isCard = type == 'card'; 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-slate-100 dark:bg-gray-700 text-sm pt-3.5 pb-3`; - const containerClass = clsx(`flex-center flex-col w-[432px] gap-1 z-[99] mt-20 select-none`, isCard && "p-4 w-[280px] bg-white dark:bg-gray-800 drop-shadow rounded-md"); + const iconClass = `cursor-pointer flex flex-col items-center gap-1 rounded-lg w-32 text-primary-400 bg-gray-100 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]"); return (
    = ({ uid, type = "embed", cid }) => { {t("send_msg")} - {/* */} - {/* */} +
    - Replying to {user?.name} + Replying to {user?.name}
    {renderContent(msg)}
    )}
    @@ -52,7 +43,7 @@ const PinList: FC = ({ id }: Props) => { })}

)} - +
); }; export default PinList; diff --git a/src/routes/chat/ChannelChat/index.tsx b/src/routes/chat/ChannelChat/index.tsx index 2f530cd7..026aa07c 100644 --- a/src/routes/chat/ChannelChat/index.tsx +++ b/src/routes/chat/ChannelChat/index.tsx @@ -8,7 +8,6 @@ import FavList from "../FavList"; import { useReadMessageMutation } from "../../../app/services/message"; import { updateRememberedNavs } from "../../../app/slices/ui"; import useMessageFeed from "../../../common/hook/useMessageFeed"; -import useConfig from "../../../common/hook/useConfig"; import ChannelIcon from "../../../common/component/ChannelIcon"; import Tooltip from "../../../common/component/Tooltip"; import User from "../../../common/component/User"; @@ -18,13 +17,11 @@ import EditIcon from "../../../assets/icons/edit.svg"; import IconFav from "../../../assets/icons/bookmark.svg"; import IconPeople from "../../../assets/icons/people.svg"; import IconPin from "../../../assets/icons/pin.svg"; -import IconHeadphone from "../../../assets/icons/headphone.svg"; -import addIcon from "../../../assets/icons/add.svg?url"; +import IconAdd from "../../../assets/icons/add.svg"; import InviteModal from "../../../common/component/InviteModal"; import LoadMore from "../LoadMore"; import { useAppSelector } from "../../../app/store"; -import { AgoraConfig } from "../../../types/server"; import { useTranslation } from "react-i18next"; type Props = { cid?: number; @@ -32,7 +29,6 @@ type Props = { }; function ChannelChat({ cid = 0, dropFiles = [] }: Props) { const { t } = useTranslation("chat"); - const { values: agoraConfig } = useConfig("agora"); const { pulling, list: msgIds, @@ -86,6 +82,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) { const readIndex = footprint.readChannels[cid]; const pinCount = data?.pinned_messages?.length || 0; const feeds = [...msgIds, ...appends]; + const toolClass = `relative cursor-pointer`; return ( <> {addMemberModalVisible && } @@ -94,14 +91,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) { context="channel" dropFiles={dropFiles} aside={ -