From a3464f707b74fee2ec98b7a99f52e21ac04d2b65 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 9 Apr 2021 21:52:19 +0800 Subject: [PATCH 1/2] style(comments): some idea on header & footer --- public/icons/static/emotion/alien-fill.svg | 1 + .../unit/Comments/Comment/Actions.tsx | 11 +++ .../unit/Comments/Comment/Emotion.tsx | 13 ++++ .../unit/Comments/Comment/Footer.tsx | 11 ++- .../unit/Comments/Comment/Header.tsx | 55 +++++--------- .../unit/Comments/styles/comment/actions.ts | 4 +- .../Comments/styles/comment/desktop_view.ts | 1 - .../unit/Comments/styles/comment/emotion.ts | 20 ++++++ .../unit/Comments/styles/comment/footer.ts | 21 +++--- .../unit/Comments/styles/comment/header.ts | 71 +++++++++++-------- 10 files changed, 125 insertions(+), 83 deletions(-) create mode 100644 public/icons/static/emotion/alien-fill.svg create mode 100644 src/containers/unit/Comments/Comment/Emotion.tsx create mode 100644 src/containers/unit/Comments/styles/comment/emotion.ts diff --git a/public/icons/static/emotion/alien-fill.svg b/public/icons/static/emotion/alien-fill.svg new file mode 100644 index 000000000..70401f099 --- /dev/null +++ b/public/icons/static/emotion/alien-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/containers/unit/Comments/Comment/Actions.tsx b/src/containers/unit/Comments/Comment/Actions.tsx index c84dcb56d..d8a301747 100755 --- a/src/containers/unit/Comments/Comment/Actions.tsx +++ b/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 = ({ data, accountInfo }) => { return ( openReplyEditor(data)}>回复 + + 分享 + + 引用 + + 折叠 + + 举报 ) } diff --git a/src/containers/unit/Comments/Comment/Emotion.tsx b/src/containers/unit/Comments/Comment/Emotion.tsx new file mode 100644 index 000000000..9a51b994c --- /dev/null +++ b/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 = () => ( + + + +) + +export default React.memo(Emotion) diff --git a/src/containers/unit/Comments/Comment/Footer.tsx b/src/containers/unit/Comments/Comment/Footer.tsx index 8aa1f2ddd..77e3904a0 100755 --- a/src/containers/unit/Comments/Comment/Footer.tsx +++ b/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 = ({ data, accountInfo }) => ( - - - + diff --git a/src/containers/unit/Comments/Comment/Header.tsx b/src/containers/unit/Comments/Comment/Header.tsx index 2ba030ebb..81896a302 100755 --- a/src/containers/unit/Comments/Comment/Header.tsx +++ b/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 = ({ data }) => { fallback={} /> - - - {data.author.nickname} - - #{data.floor} - - {data.repliesCount !== 0 && ( - - 收到回复: - - - )} - + + +
{data.author.nickname}
+ 作者 + + #{data.floor} + + + + + + 1 号员工 / CEO at coderplanets ) diff --git a/src/containers/unit/Comments/styles/comment/actions.ts b/src/containers/unit/Comments/styles/comment/actions.ts index 20aecf758..f8e2e1cc3 100755 --- a/src/containers/unit/Comments/styles/comment/actions.ts +++ b/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; diff --git a/src/containers/unit/Comments/styles/comment/desktop_view.ts b/src/containers/unit/Comments/styles/comment/desktop_view.ts index 730cfb1cd..7f4cc6d38 100644 --- a/src/containers/unit/Comments/styles/comment/desktop_view.ts +++ b/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; diff --git a/src/containers/unit/Comments/styles/comment/emotion.ts b/src/containers/unit/Comments/styles/comment/emotion.ts new file mode 100644 index 000000000..2d459f27b --- /dev/null +++ b/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; +` diff --git a/src/containers/unit/Comments/styles/comment/footer.ts b/src/containers/unit/Comments/styles/comment/footer.ts index 74ad49f84..88c4e5619 100755 --- a/src/containers/unit/Comments/styles/comment/footer.ts +++ b/src/containers/unit/Comments/styles/comment/footer.ts @@ -1,19 +1,24 @@ 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 EmotionWrapper = styled.div` + ${css.flex('align-center')}; +` +export const EmotionSelectorIcon = styled(Img)` + fill: ${theme('thread.articleDigest')}; + ${css.size(16)}; + margin-top: -1px; -export const PublishDateWrapper = styled.div` - color: ${theme('comment.action')}; - font-size: 14px; + &:hover { + fill: #00a39a; + cursor: pointer; + } - ${css.media.mobile` - font-size: 12px; - opacity: 0.8; - `}; + transition: all 0.25s; ` diff --git a/src/containers/unit/Comments/styles/comment/header.ts b/src/containers/unit/Comments/styles/comment/header.ts index 671bbee0f..19bdb12e3 100755 --- a/src/containers/unit/Comments/styles/comment/header.ts +++ b/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; ` From 4ac6bc13abd9005ae35fcfcea1f1f6db6894b930 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 9 Apr 2021 22:24:16 +0800 Subject: [PATCH 2/2] style(comments): adjust upvote look --- .../unit/Comments/Comment/DesktopView.tsx | 4 +-- .../Comments/Comment/MobileView/index.tsx | 4 +-- .../unit/Comments/Comment/UpInfo.tsx | 24 --------------- .../unit/Comments/Comment/Upvote.tsx | 29 +++++++++++++++++++ .../unit/Comments/styles/comment/footer.ts | 16 +--------- .../styles/comment/{up_info.ts => upvote.ts} | 10 +++++-- 6 files changed, 41 insertions(+), 46 deletions(-) delete mode 100755 src/containers/unit/Comments/Comment/UpInfo.tsx create mode 100755 src/containers/unit/Comments/Comment/Upvote.tsx rename src/containers/unit/Comments/styles/comment/{up_info.ts => upvote.ts} (78%) diff --git a/src/containers/unit/Comments/Comment/DesktopView.tsx b/src/containers/unit/Comments/Comment/DesktopView.tsx index e58ab8010..ce4d1ee09 100644 --- a/src/containers/unit/Comments/Comment/DesktopView.tsx +++ b/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 = ({ data, tobeDeleteId, accountInfo }) => { - +
diff --git a/src/containers/unit/Comments/Comment/MobileView/index.tsx b/src/containers/unit/Comments/Comment/MobileView/index.tsx index 5dec41bff..49cc6c613 100644 --- a/src/containers/unit/Comments/Comment/MobileView/index.tsx +++ b/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 }) => {