Merge pull request #3329 from thematters/hotfix/revise-few-ui-change-…

…prod [*master*] Hotfix/revise few UI change prod
thematters · Apr 7, 2023 · 39485de · 39485de
2 parents 70d077a + 6c72e49
commit 39485de
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 65 deletions.
diff --git 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
@@ -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,8 +49,7 @@ const Content = ({
   type,
   size,
   bgColor,
-  bgActiveColor,
-  limit = 8,
+  limit = 10,
   textIndent = false,
   isRichShow = true,
 }: ContentProps) => {
@@ -90,7 +88,6 @@ const Content = ({
           limit={limit}
           isRichShow={isRichShow}
           bgColor={bgColor}
-          bgActiveColor={bgActiveColor}
           textIndent={textIndent}
         >
           <section

diff --git 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 = ({
       )}
 
       <section className="content-container">
-        <Content comment={comment} type={type} size="md-s" />
+        <Media at="sm">
+          <Content comment={comment} type={type} size="md-s" limit={17} />
+        </Media>
+        <Media greaterThan="sm">
+          <Content comment={comment} type={type} size="md-s" limit={13} />
+        </Media>
+
         <FooterActions
           comment={comment}
           type={type}

diff --git a/src/components/Expandable/index.tsx b/src/components/Expandable/index.tsx
@@ -33,7 +33,6 @@ interface ExpandableProps {
   textIndent?: boolean
   isRichShow?: boolean
   bgColor?: 'grey-lighter' | 'white'
-  bgActiveColor?: 'grey-lighter' | 'white'
 }
 
 export const Expandable: React.FC<ExpandableProps> = ({
@@ -47,7 +46,6 @@ export const Expandable: React.FC<ExpandableProps> = ({
   textIndent = false,
   isRichShow = false,
   bgColor = 'white',
-  bgActiveColor,
 }) => {
   const [expandable, setExpandable] = useState(false)
   const [lineHeight, setLineHeight] = useState(24)
@@ -69,7 +67,11 @@ export const Expandable: React.FC<ExpandableProps> = ({
   const richWrapperClasses = classNames({
     richWrapper: true,
     [`${bgColor}`]: !!bgColor,
-    [`${bgActiveColor}-active`]: !!bgActiveColor,
+  })
+
+  const richShowMoreButtonClasses = classNames({
+    richShowMoreButton: true,
+    [`${bgColor}`]: !!bgColor,
   })
 
   useEffect(() => {
@@ -101,7 +103,7 @@ export const Expandable: React.FC<ExpandableProps> = ({
       <div ref={node}>
         {(!expandable || (expandable && expand)) && <div>{children}</div>}
       </div>
-      {expandable && expand && (
+      {expandable && expand && !isRichShow && (
         <section className="collapseWrapper">
           <Button
             spacing={['xxtight', 'xtight']}
@@ -111,14 +113,14 @@ export const Expandable: React.FC<ExpandableProps> = ({
               setExpand(!expand)
             }}
           >
-            <TextIcon icon={<IconArrowUp16 />}>
+            <TextIcon icon={<IconArrowUp16 />} textPlacement="left">
               <Translate zh_hans="收起" zh_hant="收合" en="collapse" />
             </TextIcon>
           </Button>
         </section>
       )}
       {expandable && !expand && (
-        <p>
+        <p className="unexpandWrapper">
           {!isRichShow && (
             <TextTruncate
               line={limit}
@@ -162,20 +164,16 @@ export const Expandable: React.FC<ExpandableProps> = ({
               >
                 {children}
               </div>
-              <section className="collapseWrapper">
-                <Button
-                  spacing={['xxtight', 'xtight']}
-                  bgColor="grey-lighter"
-                  textColor="grey"
-                  onClick={() => {
-                    setExpand(!expand)
-                  }}
-                >
-                  <TextIcon icon={<IconArrowDown16 />}>
-                    <Translate id="expand" />
-                  </TextIcon>
-                </Button>
-              </section>
+              <button
+                className={richShowMoreButtonClasses}
+                onClick={() => {
+                  setExpand(!expand)
+                }}
+              >
+                <TextIcon icon={<IconArrowDown16 />}>
+                  <Translate id="expand" />
+                </TextIcon>
+              </button>
             </>
           )}
         </p>

diff --git a/src/components/Expandable/styles.css b/src/components/Expandable/styles.css
@@ -13,14 +13,49 @@
     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;
 
     &::after {
       position: absolute;
       right: 0;
-      bottom: 2rem;
+      bottom: 0;
       left: 0;
       height: 80%;
       pointer-events: none;
@@ -42,14 +77,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
@@ -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
diff --git 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<HTMLDivElement>()
-
   if (!comment) {
     return null
   }
@@ -68,10 +66,11 @@ const NoticeComment = ({
       : {}
 
   return (
-    <section className="sub-content" ref={hoverRef}>
+    <section className="sub-content">
       <Card
         {...path}
         bgColor="grey-lighter"
+        bgActiveColor="grey-lighter"
         spacing={['xtight', 'base']}
         borderRadius="xtight"
         testId={TEST_ID.DIGEST_COMMENT_NOTICE}
@@ -81,7 +80,6 @@ const NoticeComment = ({
           type="article"
           size="sm"
           bgColor="grey-lighter"
-          bgActiveColor={isHovered ? 'grey-lighter' : undefined}
         />
       </Card>
 

diff --git 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) => {
                 <TextIcon
                   icon={<IconArrowRight16 size="xs" />}
                   textPlacement="left"
+                  size="xs"
                 >
                   <Translate
                     zh_hant="個人支持過本文・查看全部"

diff --git a/src/views/User/Comments/UserComments.tsx b/src/views/User/Comments/UserComments.tsx
@@ -212,6 +212,7 @@ const BaseUserComments = ({ user }: UserIdUserQuery) => {
                 <List.Item key={comment.id}>
                   <Card
                     spacing={['tight', 'base']}
+                    bgColor="none"
                     {...toPath({
                       page: 'commentDetail',
                       comment,