style(comments): some idea on header & footer

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

@@ -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/DesktopView.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/Emotion.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/Footer.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/Header.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/MobileView/index.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/Upvote.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/styles/comment/actions.ts

@@ -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;

src/containers/unit/Comments/styles/comment/desktop_view.ts

@@ -25,7 +25,6 @@ export const CommentWrapper = styled.div<{ tobeDelete: boolean }>`
 export const CommentBodyInfo = styled.div`
   ${css.flexColumn()};
   width: 100%;
-  margin-top: 3px;
 `
 export const CommentContent = styled.div`
   font-size: 0.9rem;

src/containers/unit/Comments/styles/comment/emotion.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div`
+  ${css.flex('align-center')};
+`
+export const SelectorIcon = styled(Img)`
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(16)};
+  margin-top: -1px;
+
+  &:hover {
+    fill: #00a39a;
+    cursor: pointer;
+  }
+
+  transition: all 0.25s;
+`

src/containers/unit/Comments/styles/comment/footer.ts

@@ -1,19 +1,10 @@
 import styled from 'styled-components'
 
-// import Img from '@/Img'
+import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`
   ${css.flex('align-center')};
   margin-top: 5px;
 `
-
-export const PublishDateWrapper = styled.div`
-  color: ${theme('comment.action')};
-  font-size: 14px;
-
-  ${css.media.mobile`
-    font-size: 12px;
-    opacity: 0.8;
-  `};
-`
+export const holder = 1

src/containers/unit/Comments/styles/comment/header.ts

@@ -7,45 +7,58 @@ import { Wrapper as CommentBlock } from './desktop_view'
 
 export const Wrapper = styled.div`
   ${css.flex('align-center')};
-  margin-bottom: 10px;
-`
-export const FloorNum = styled.div`
-  color: ${theme('comment.floor')};
-  font-size: 14px;
-  flex-grow: 1;
-  letter-spacing: 1.5px;
-  margin-top: 2px;
-  opacity: 0.6;
-
-  ${CommentBlock}:hover & {
-    opacity: 1;
-  }
-
-  transition: opacity 0.25s;
-`
-export const CommentHeaderFirst = styled.div`
-  ${css.flex()};
+  margin-bottom: 14px;
 `
 export const Avatar = styled(Img)`
-  ${css.circle(22)};
+  ${css.circle(24)};
   opacity: ${theme('avatar.opacity')};
-  margin-right: 10px;
+  margin-right: 13px;
 `
 export const HeaderBaseInfo = styled.div`
   ${css.flexColumn()};
   width: 100%;
 `
-export const CommentUserName = styled.div`
+export const BaseInfo = styled.div`
   ${css.flexGrow('align-center')};
   color: ${theme('comment.username')};
-  font-size: 14px;
 `
-export const ReplyUsers = styled.div`
-  ${css.flex()};
-  margin-top: -4px;
+export const UserName = styled.div`
+  ${css.flex('align-center')};
+  font-size: 15px;
+  flex-grow: 1;
+`
+export const AuthorTag = styled.div`
+  font-size: 11px;
+  padding: 0 8px;
+  padding-top: 1px;
+  margin-left: 10px;
+  background: #023c4a;
+  border-radius: 5px;
+  color: #00a59b;
 `
-export const ReplyTitle = styled.div`
-  color: ${theme('comment.reply')};
-  margin-top: 4px;
-  margin-right: 5px;
+export const ShortIntro = styled.div`
+  color: ${theme('comment.floor')};
+  font-size: 13px;
+  opacity: 0.8;
+  margin-top: 1px;
+`
+export const FloorNum = styled.div`
+  color: ${theme('comment.floor')};
+  font-size: 12px;
+  letter-spacing: 1.5px;
+  margin-top: 2px;
+  opacity: 0.6;
+
+  ${CommentBlock}:hover & {
+    opacity: 0.8;
+  }
+
+  transition: opacity 0.25s;
+`
+export const CreateDate = styled.div`
+  color: ${theme('comment.floor')};
+  font-size: 12px;
+  letter-spacing: 1.5px;
+  margin-top: 2px;
+  opacity: 0.8;
 `