From 1f0d4149b06a06bcf9b4a6e68cc12e3d38820b22 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Fri, 7 Apr 2023 13:50:22 +0800 Subject: [PATCH 1/6] fix(Support): Fix support font size --- src/views/ArticleDetail/SupportWidget/Donators/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/ArticleDetail/SupportWidget/Donators/index.tsx b/src/views/ArticleDetail/SupportWidget/Donators/index.tsx index f71ae996a6..58b4c7f6e4 100644 --- a/src/views/ArticleDetail/SupportWidget/Donators/index.tsx +++ b/src/views/ArticleDetail/SupportWidget/Donators/index.tsx @@ -126,6 +126,7 @@ const Donators = ({ article, showAvatarAnimation = false }: DonatorsProps) => { } textPlacement="left" + size="xs" > Date: Fri, 7 Apr 2023 13:54:42 +0800 Subject: [PATCH 2/6] fix(Expandable): remove unused hover style code --- src/components/Comment/Content/index.tsx | 3 --- src/components/Expandable/index.tsx | 3 --- src/components/Expandable/styles.css | 8 -------- src/components/Hook/index.ts | 1 - src/components/Hook/useHover.tsx | 23 ----------------------- src/components/Notice/NoticeComment.tsx | 7 ++----- 6 files changed, 2 insertions(+), 43 deletions(-) delete mode 100644 src/components/Hook/useHover.tsx diff --git a/src/components/Comment/Content/index.tsx b/src/components/Comment/Content/index.tsx index 6323bd2b8a..929eea7985 100644 --- a/src/components/Comment/Content/index.tsx +++ b/src/components/Comment/Content/index.tsx @@ -18,7 +18,6 @@ interface ContentProps { type: CommentFormType size?: 'sm' | 'md-s' bgColor?: 'grey-lighter' | 'white' - bgActiveColor?: 'grey-lighter' | 'white' limit?: number textIndent?: boolean isRichShow?: boolean @@ -50,7 +49,6 @@ const Content = ({ type, size, bgColor, - bgActiveColor, limit = 8, textIndent = false, isRichShow = true, @@ -90,7 +88,6 @@ const Content = ({ limit={limit} isRichShow={isRichShow} bgColor={bgColor} - bgActiveColor={bgActiveColor} textIndent={textIndent} >
= ({ @@ -47,7 +46,6 @@ export const Expandable: React.FC = ({ textIndent = false, isRichShow = false, bgColor = 'white', - bgActiveColor, }) => { const [expandable, setExpandable] = useState(false) const [lineHeight, setLineHeight] = useState(24) @@ -69,7 +67,6 @@ export const Expandable: React.FC = ({ const richWrapperClasses = classNames({ richWrapper: true, [`${bgColor}`]: !!bgColor, - [`${bgActiveColor}-active`]: !!bgActiveColor, }) useEffect(() => { diff --git a/src/components/Expandable/styles.css b/src/components/Expandable/styles.css index 04704c5e9c..7f78f4bf2b 100644 --- a/src/components/Expandable/styles.css +++ b/src/components/Expandable/styles.css @@ -42,14 +42,6 @@ var(--color-grey-lighter) 100% ); } - - &.grey-lighter-active::after { - background: linear-gradient( - 180deg, - rgb(247 247 247 / 0%) 0%, - var(--color-grey-lighter-active) 100% - ); - } } } diff --git a/src/components/Hook/index.ts b/src/components/Hook/index.ts index e5e7858f20..e41c1feaf6 100644 --- a/src/components/Hook/index.ts +++ b/src/components/Hook/index.ts @@ -6,7 +6,6 @@ export * from './useDialogSwitch' export * from './useERC20' export * from './useEventListener' export * from './useFeatures' -export * from './useHover' export * from './useImmersiveMode' export * from './useInterval' export * from './useNativeEventListener' diff --git a/src/components/Hook/useHover.tsx b/src/components/Hook/useHover.tsx deleted file mode 100644 index 17fcdd8475..0000000000 --- a/src/components/Hook/useHover.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { MutableRefObject, useEffect, useRef, useState } from 'react' - -export const useHover = (): [MutableRefObject, boolean] => { - const [value, setValue] = useState(false) - const ref: any = useRef(null) - const handleMouseOver = (): void => setValue(true) - const handleMouseOut = (): void => setValue(false) - useEffect( - () => { - const node: any = ref.current - if (node) { - node.addEventListener('mouseover', handleMouseOver) - node.addEventListener('mouseout', handleMouseOut) - return () => { - node.removeEventListener('mouseover', handleMouseOver) - node.removeEventListener('mouseout', handleMouseOut) - } - } - }, - [ref.current] // Recall only if ref changes - ) - return [ref, value] -} diff --git a/src/components/Notice/NoticeComment.tsx b/src/components/Notice/NoticeComment.tsx index 5dcc2196b5..3a07263049 100644 --- a/src/components/Notice/NoticeComment.tsx +++ b/src/components/Notice/NoticeComment.tsx @@ -2,7 +2,7 @@ import gql from 'graphql-tag' import { TEST_ID } from '~/common/enums' import { toPath } from '~/common/utils' -import { Card, useHover } from '~/components' +import { Card } from '~/components' import CommentContent from '~/components/Comment/Content' import { NoticeCommentFragment } from '~/gql/graphql' @@ -51,8 +51,6 @@ const NoticeComment = ({ const circle = comment?.node.__typename === 'Circle' ? comment.node : undefined - const [hoverRef, isHovered] = useHover() - if (!comment) { return null } @@ -68,7 +66,7 @@ const NoticeComment = ({ : {} return ( -
+
From 796d8c625cc945c229ef0e447003f24b96748128 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Fri, 7 Apr 2023 14:04:50 +0800 Subject: [PATCH 3/6] feat(Expandable): revise rich text expand ui --- src/common/enums/text.ts | 2 +- src/components/Comment/Content/index.tsx | 2 +- src/components/Comment/Feed/index.tsx | 10 +++++-- src/components/Expandable/index.tsx | 35 +++++++++++----------- src/components/Expandable/styles.css | 37 +++++++++++++++++++++++- 5 files changed, 64 insertions(+), 22 deletions(-) diff --git a/src/common/enums/text.ts b/src/common/enums/text.ts index 5d0defee0e..221691c1f7 100644 --- a/src/common/enums/text.ts +++ b/src/common/enums/text.ts @@ -955,7 +955,7 @@ export const TEXT = { enterUserNameAgain: 'Enter Matters ID again', enterVerificationCode: 'Enter verification code', ENTITY_NOT_FOUND: 'Entity not found', - expand: 'Expand', + expand: 'More', extend: 'Collect', collectArticle: 'Collect Article', failureChange: 'Failed to edit, please try again.', diff --git a/src/components/Comment/Content/index.tsx b/src/components/Comment/Content/index.tsx index 929eea7985..1540e24bb8 100644 --- a/src/components/Comment/Content/index.tsx +++ b/src/components/Comment/Content/index.tsx @@ -49,7 +49,7 @@ const Content = ({ type, size, bgColor, - limit = 8, + limit = 10, textIndent = false, isRichShow = true, }: ContentProps) => { diff --git a/src/components/Comment/Feed/index.tsx b/src/components/Comment/Feed/index.tsx index d4ad41428d..6acba128f0 100644 --- a/src/components/Comment/Feed/index.tsx +++ b/src/components/Comment/Feed/index.tsx @@ -1,7 +1,7 @@ import { useLazyQuery } from '@apollo/react-hooks' import React from 'react' -import { AvatarSize, CommentFormType, UserDigest } from '~/components' +import { AvatarSize, CommentFormType, Media, UserDigest } from '~/components' import { FeedCommentPrivateFragment, FeedCommentPublicFragment, @@ -83,7 +83,13 @@ export const BaseCommentFeed = ({ )}
- + + + + + + + = ({ [`${bgColor}`]: !!bgColor, }) + const richShowMoreButtonClasses = classNames({ + richShowMoreButton: true, + [`${bgColor}`]: !!bgColor, + }) + useEffect(() => { setExpandable(false) setExpand(true) @@ -98,7 +103,7 @@ export const Expandable: React.FC = ({
{(!expandable || (expandable && expand)) &&
{children}
}
- {expandable && expand && ( + {expandable && expand && !isRichShow && (
)} {expandable && !expand && ( -

+

{!isRichShow && ( = ({ > {children} -

- -
+ )}

diff --git a/src/components/Expandable/styles.css b/src/components/Expandable/styles.css index 7f78f4bf2b..8b584c77a8 100644 --- a/src/components/Expandable/styles.css +++ b/src/components/Expandable/styles.css @@ -13,6 +13,41 @@ margin-top: var(--spacing-x-tight); } + & .unexpandWrapper { + position: relative; + + & .richShowMoreButton { + @mixin flex-start-center; + + position: absolute; + bottom: 0; + align-items: flex-end; + width: 100%; + height: 7.5rem; + color: var(--color-grey); + + &:hover { + color: var(--color-grey-darker); + } + + &.white { + background: linear-gradient( + 180deg, + rgb(255 255 255 / 0%) 0%, + var(--color-white) 100% + ); + } + + &.grey-lighter { + background: linear-gradient( + 180deg, + rgb(247 247 247 / 0%) 0%, + var(--color-grey-lighter) 100% + ); + } + } + } + & .richWrapper { overflow-y: hidden; overflow-y: clip; @@ -20,7 +55,7 @@ &::after { position: absolute; right: 0; - bottom: 2rem; + bottom: 0; left: 0; height: 80%; pointer-events: none; From 92f62ffd18461e9b524fd3c4a0eba1ecdd0e038d Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Fri, 7 Apr 2023 14:07:55 +0800 Subject: [PATCH 4/6] feat(Comment): adjust default limit line --- src/components/Comment/Feed/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Comment/Feed/index.tsx b/src/components/Comment/Feed/index.tsx index 6acba128f0..cf7eeb6d93 100644 --- a/src/components/Comment/Feed/index.tsx +++ b/src/components/Comment/Feed/index.tsx @@ -84,10 +84,10 @@ export const BaseCommentFeed = ({
- + - + Date: Fri, 7 Apr 2023 14:09:19 +0800 Subject: [PATCH 5/6] feat(NoticeComment): Don't change the background color when hover --- src/components/Notice/NoticeComment.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Notice/NoticeComment.tsx b/src/components/Notice/NoticeComment.tsx index 3a07263049..c1f21f7381 100644 --- a/src/components/Notice/NoticeComment.tsx +++ b/src/components/Notice/NoticeComment.tsx @@ -70,6 +70,7 @@ const NoticeComment = ({ Date: Fri, 7 Apr 2023 14:10:43 +0800 Subject: [PATCH 6/6] feat(UserComments): Don't change the background color when hover --- src/views/User/Comments/UserComments.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/User/Comments/UserComments.tsx b/src/views/User/Comments/UserComments.tsx index db2780549c..08979ad31f 100644 --- a/src/views/User/Comments/UserComments.tsx +++ b/src/views/User/Comments/UserComments.tsx @@ -212,6 +212,7 @@ const BaseUserComments = ({ user }: UserIdUserQuery) => {