style(comments): some idea on header & footer (#1057)

* style(comments): some idea on header & footer

* style(comments): adjust upvote look

Author: mydearxym

public/icons/static/emotion/alien-fill.svg

@@ -2,6 +2,9 @@ import React from 'react'
 
 import type { TAccount, TComment } from '@/spec'
 
+import DotDivider from '@/components/DotDivider'
+import { SpaceGrow } from '@/components/Common'
+
 import { Wrapper, ReplyAction } from '../styles/comment/actions'
 import { openUpdateEditor, openReplyEditor, onDelete } from '../logic'
 
@@ -23,6 +26,14 @@ const Actions: React.FC<TProps> = ({ data, accountInfo }) => {
   return (
     <Wrapper>
       <ReplyAction onClick={() => openReplyEditor(data)}>回复</ReplyAction>
+      <SpaceGrow />
+      <ReplyAction>分享</ReplyAction>
+      <DotDivider radius={3} space={6} />
+      <ReplyAction>引用</ReplyAction>
+      <DotDivider radius={3} space={6} />
+      <ReplyAction>折叠</ReplyAction>
+      <DotDivider radius={3} space={6} />
+      <ReplyAction>举报</ReplyAction>
     </Wrapper>
   )
 }

src/containers/unit/Comments/Comment/Actions.tsx

@@ -6,7 +6,7 @@ import { Global } from '@/utils'
 
 import MarkDownRender from '@/components/MarkDownRender'
 
-import UpInfo from './UpInfo'
+import Upvote from './Upvote'
 import Header from './Header'
 import ReplyBar from './ReplyBar'
 import DeleteMask from './DeleteMask'
@@ -37,7 +37,7 @@ const Comment: React.FC<TProps> = ({ data, tobeDeleteId, accountInfo }) => {
     <Wrapper>
       <DeleteMask show={data.id === tobeDeleteId} />
       <CommentWrapper tobeDelete={data.id === tobeDeleteId}>
-        <UpInfo data={data} />
+        <Upvote data={data} />
 
         <CommentBodyInfo onMouseUp={getSelection}>
           <Header data={data} />

src/containers/unit/Comments/Comment/DesktopView.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { ICON } from '@/config'
+
+import { Wrapper, SelectorIcon } from '../styles/comment/emotion'
+
+const Emotion: React.FC = () => (
+  <Wrapper>
+    <SelectorIcon src={`${ICON}/emotion/alien-fill.svg`} />
+  </Wrapper>
+)
+
+export default React.memo(Emotion)

src/containers/unit/Comments/Comment/Emotion.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
-import TimeAgo from 'timeago-react'
 
 import type { TAccount, TComment } from '@/spec'
-import { SpaceGrow } from '@/components/Common'
+
 import DotDivider from '@/components/DotDivider'
+import { SpaceGrow } from '@/components/Common'
 
+import Emotion from './Emotion'
 import Actions from './Actions'
 
-import { Wrapper, PublishDateWrapper } from '../styles/comment/footer'
+import { Wrapper } from '../styles/comment/footer'
 
 type TProps = {
   data: TComment
@@ -16,9 +17,7 @@ type TProps = {
 
 const Footer: React.FC<TProps> = ({ data, accountInfo }) => (
   <Wrapper>
-    <PublishDateWrapper>
-      <TimeAgo datetime={data.insertedAt} locale="zh_CN" />
-    </PublishDateWrapper>
+    <Emotion />
     <DotDivider radius={3} space={6} />
     <Actions data={data} accountInfo={accountInfo} />
     <SpaceGrow />

src/containers/unit/Comments/Comment/Footer.tsx

@@ -1,37 +1,23 @@
 import React from 'react'
-import { forEach, clone, pluck } from 'ramda'
+import TimeAgo from 'timeago-react'
 
 import type { TComment } from '@/spec'
 
 import ImgFallback from '@/components/ImgFallback'
-import AvatarsRow from '@/components/AvatarsRow'
 import DotDivider from '@/components/DotDivider'
 
 import {
   Wrapper,
   FloorNum,
+  CreateDate,
   Avatar,
   HeaderBaseInfo,
-  CommentUserName,
-  CommentHeaderFirst,
-  ReplyUsers,
-  ReplyTitle,
+  BaseInfo,
+  UserName,
+  AuthorTag,
+  ShortIntro,
 } from '../styles/comment/header'
 
-import { previewReply } from '../logic'
-
-const getAuthors = (comment) => {
-  /* eslint-disable no-return-assign */
-  const replies = forEach((reply) => {
-    /* @ts-ignore */
-    return (reply.author.extraId = reply.id)
-  }, clone(comment.replies))
-  /* eslint-enable */
-
-  /* @ts-ignore */
-  return pluck('author', replies)
-}
-
 type TProps = {
   data: TComment
 }
@@ -44,23 +30,18 @@ const CommentHeader: React.FC<TProps> = ({ data }) => {
         fallback={<ImgFallback user={data.author} size={22} right={10} />}
       />
       <HeaderBaseInfo>
-        <CommentHeaderFirst>
-          <CommentUserName>
-            {data.author.nickname}
-            <DotDivider radius={3} space={10} />
-            <FloorNum>#{data.floor}</FloorNum>
-          </CommentUserName>
-          {data.repliesCount !== 0 && (
-            <ReplyUsers>
-              <ReplyTitle>收到回复:</ReplyTitle>
-              <AvatarsRow
-                users={getAuthors(data)}
-                onUserSelect={previewReply}
-                total={data.repliesCount}
-              />
-            </ReplyUsers>
-          )}
-        </CommentHeaderFirst>
+        <BaseInfo>
+          <UserName>
+            <div>{data.author.nickname}</div>
+            <AuthorTag>作者</AuthorTag>
+          </UserName>
+          <FloorNum>#{data.floor}</FloorNum>
+          <DotDivider radius={3} space={10} />
+          <CreateDate>
+            <TimeAgo datetime={data.insertedAt} locale="zh_CN" />
+          </CreateDate>
+        </BaseInfo>
+        <ShortIntro>1 号员工 / CEO at coderplanets</ShortIntro>
       </HeaderBaseInfo>
     </Wrapper>
   )

src/containers/unit/Comments/Comment/Header.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Br } from '@/components/Common'
 import MarkDownRender from '@/components/MarkDownRender'
 
-import UpInfo from '../UpInfo'
+import Upvote from '../Upvote'
 import ReplyBar from '../ReplyBar'
 import DeleteMask from '../DeleteMask'
 import Footer from '../Footer'
@@ -40,7 +40,7 @@ const MobileView = ({ data, tobeDeleteId, accountInfo }) => {
           <Footer data={data} accountInfo={accountInfo} />
         </CommentBodyInfo>
       </CommentWrapper>
-      <UpInfo data={data} />
+      <Upvote data={data} />
     </Wrapper>
   )
 }

src/containers/unit/Comments/Comment/MobileView/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import type { TComment } from '@/spec'
+import { ICON } from '@/config'
+import { prettyNum } from '@/utils'
+
+import { Wrapper, InnerWrapper, Icon } from '../styles/comment/upvote'
+
+import { toggleLikeComment } from '../logic'
+
+type TProps = {
+  data: TComment
+}
+
+const Upvote: React.FC<TProps> = ({ data }) => (
+  <Wrapper>
+    <InnerWrapper>
+      <div onClick={() => toggleLikeComment(data)}>
+        <Icon
+          src={`${ICON}/shape/upvote.svg`}
+          viewerDid={data.viewerHasLiked}
+        />
+      </div>
+      <div>{prettyNum(data.likesCount)}</div>
+    </InnerWrapper>
+  </Wrapper>
+)
+
+export default React.memo(Upvote)

src/containers/unit/Comments/Comment/UpInfo.tsx

@@ -4,7 +4,8 @@ import { theme, css } from '@/utils'
 // import { CommentBodyInfo } from './index'
 
 export const Wrapper = styled.div`
-  ${css.flex()};
+  ${css.flex('align-center')};
+  width: 100%;
 
   ${css.media.mobile`
     font-size: 12px;
@@ -13,7 +14,6 @@ export const Wrapper = styled.div`
 export const ReplyAction = styled.div`
   ${css.flex()};
   color: ${theme('comment.action')};
-  margin-right: 12px;
   cursor: pointer;
   font-weight: bold;
   opacity: 1;