From eca47e863c5aad5de5d81bcf839f446c3baffda5 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 18 Apr 2021 16:43:30 +0800 Subject: [PATCH 1/8] refactor(comments): isSolution & isAuthorUpvoted concept --- src/components/Common/index.ts | 4 +-- .../Switcher/styles/tabs/local_icon.ts | 2 +- .../unit/Comments/Comment/DesktopView.tsx | 34 ++++++++++++++++++- .../Comments/styles/comment/desktop_view.ts | 28 +++++++++++++-- .../unit/Comments/styles/comment/header.ts | 2 +- .../unit/Comments/styles/comment/upvote.ts | 1 - 6 files changed, 62 insertions(+), 9 deletions(-) diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts index 149f9c080..045838fcf 100755 --- a/src/components/Common/index.ts +++ b/src/components/Common/index.ts @@ -3,8 +3,8 @@ import styled from 'styled-components' import type { TSpace } from '@/spec' export const Br = styled.div` - margin-top: ${({ top }) => `${top}px` || 0}; - margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; + margin-top: ${({ top }) => `${top || 0}px`}; + margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; ` export const Space = styled.span` margin-left: ${({ left }) => `${left}px` || 0}; diff --git a/src/components/Switcher/styles/tabs/local_icon.ts b/src/components/Switcher/styles/tabs/local_icon.ts index cd5245c79..5c959eca6 100644 --- a/src/components/Switcher/styles/tabs/local_icon.ts +++ b/src/components/Switcher/styles/tabs/local_icon.ts @@ -21,7 +21,7 @@ import TabPublishSVG from '@/SvgIcons/TabPublishSVG' import TabBillingSVG from '@/SvgIcons/TabBillingSVG' import TabCommentsSVG from '@/SvgIcons/TabCommentsSVG' import TabSettingsSVG from '@/SvgIcons/TabSettingsSVG' -import TabFavoritesSVG from '@/SvgIcons/TabFavoritesSVG' +import TabFavoritesSVG from '@/components/SvgIcons/TabFavoritesSVG' export const LableWrapper = styled.div` ${css.flex('align-center')}; diff --git a/src/containers/unit/Comments/Comment/DesktopView.tsx b/src/containers/unit/Comments/Comment/DesktopView.tsx index 2b7717b24..bf36be57f 100644 --- a/src/containers/unit/Comments/Comment/DesktopView.tsx +++ b/src/containers/unit/Comments/Comment/DesktopView.tsx @@ -3,8 +3,10 @@ import { isEmpty } from 'ramda' import type { TAccount, TComment } from '@/spec' import { Global } from '@/utils' +import { ICON } from '@/config' import MarkDownRender from '@/components/MarkDownRender' +import Tooltip from '@/components/Tooltip' import Upvote from './Upvote' import Header from './Header' @@ -15,11 +17,15 @@ import Footer from './Footer' import { Wrapper, CommentWrapper, + SidebarWrapper, CommentContent, CommentBodyInfo, PinState, PinIcon, PinText, + AuthorUpvotedIcon, + SolutionIcon, + BadgePopContent, } from '../styles/comment/desktop_view' const getSelection = () => { @@ -37,6 +43,9 @@ type TProps = { const Comment: React.FC = ({ data, tobeDeleteId, accountInfo }) => { const pined = data.id === '360' || data.id === '377' + const isAuthorUpvoted = + data.id === '377' || data.id === '355' || data.id === '359' + const isSolution = data.id === '358' return ( @@ -48,7 +57,30 @@ const Comment: React.FC = ({ data, tobeDeleteId, accountInfo }) => { )} - + + + {isAuthorUpvoted && ( + 作者顶过} + placement="bottom" + noPadding + > + + + )} + {isSolution && ( + 最佳答案} + placement="bottom" + noPadding + > + + + )} +
diff --git a/src/containers/unit/Comments/styles/comment/desktop_view.ts b/src/containers/unit/Comments/styles/comment/desktop_view.ts index 7e1fd892f..ec7af69b9 100644 --- a/src/containers/unit/Comments/styles/comment/desktop_view.ts +++ b/src/containers/unit/Comments/styles/comment/desktop_view.ts @@ -26,13 +26,13 @@ export const PinState = styled.div` export const PinIcon = styled(PinSVG)` fill: ${theme('thread.articleDigest')}; ${css.size(14)}; - opacity: 0.8; + opacity: 0.9; transform: rotate(-30deg); ` export const PinText = styled.div` font-size: 12px; color: ${theme('thread.articleDigest')}; - margin-left: 12px; + margin-left: 14px; opacity: 0.8; ` @@ -41,12 +41,34 @@ export const CommentWrapper = styled.div<{ tobeDelete: boolean }>` ${css.flexGrow()}; filter: ${({ tobeDelete }) => (tobeDelete ? 'blur(3px)' : '')}; ` +export const SidebarWrapper = styled.div` + ${css.flexColumn('align-start')}; + height: 100%; + min-width: 34px; +` +export const BadgePopContent = styled.div` + padding: 5px 10px; + font-size: 12px; +` +export const AuthorUpvotedIcon = styled(Img)` + ${css.size(14)}; + fill: ${theme('comment.icon')}; + opacity: 0.6; + margin-top: 3px; +` +export const SolutionIcon = styled(Img)<{ isAuthorUpvoted: boolean }>` + ${css.size(14)}; + fill: ${theme('baseColor.green')}; + margin-top: ${({ isAuthorUpvoted }) => (isAuthorUpvoted ? '7px' : '3px')}; + margin-left: 1px; +` export const CommentBodyInfo = styled.div` ${css.flexColumn()}; width: 100%; ` export const CommentContent = styled.div` - font-size: 0.9rem; + font-size: 14px; + margin-left: 1px; ` export const LikeIcon = styled(Img)` fill: ${theme('comment.icon')}; diff --git a/src/containers/unit/Comments/styles/comment/header.ts b/src/containers/unit/Comments/styles/comment/header.ts index 19bdb12e3..3ae643bc5 100755 --- a/src/containers/unit/Comments/styles/comment/header.ts +++ b/src/containers/unit/Comments/styles/comment/header.ts @@ -7,7 +7,7 @@ import { Wrapper as CommentBlock } from './desktop_view' export const Wrapper = styled.div` ${css.flex('align-center')}; - margin-bottom: 14px; + margin-bottom: 15px; ` export const Avatar = styled(Img)` ${css.circle(24)}; diff --git a/src/containers/unit/Comments/styles/comment/upvote.ts b/src/containers/unit/Comments/styles/comment/upvote.ts index b82f24d9f..34cb4401f 100755 --- a/src/containers/unit/Comments/styles/comment/upvote.ts +++ b/src/containers/unit/Comments/styles/comment/upvote.ts @@ -6,7 +6,6 @@ import { theme, css } from '@/utils' export const Wrapper = styled.div` ${css.flexColumn('align-start', 'justify-start')}; color: ${theme('thread.articleTitle')}; - min-width: 32px; margin-top: 5px; ${css.media.mobile` From 3db76698147ee69d0c7b4a0b9c559d6d6178f267 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 18 Apr 2021 16:47:43 +0800 Subject: [PATCH 2/8] chore(comments): adjust styles --- src/containers/unit/Comments/Comment/DesktopView.tsx | 2 +- src/containers/unit/Comments/styles/comment/desktop_view.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/unit/Comments/Comment/DesktopView.tsx b/src/containers/unit/Comments/Comment/DesktopView.tsx index bf36be57f..2e5513218 100644 --- a/src/containers/unit/Comments/Comment/DesktopView.tsx +++ b/src/containers/unit/Comments/Comment/DesktopView.tsx @@ -45,7 +45,7 @@ const Comment: React.FC = ({ data, tobeDeleteId, accountInfo }) => { const pined = data.id === '360' || data.id === '377' const isAuthorUpvoted = data.id === '377' || data.id === '355' || data.id === '359' - const isSolution = data.id === '358' + const isSolution = data.id === '358' || data.id === '355' return ( diff --git a/src/containers/unit/Comments/styles/comment/desktop_view.ts b/src/containers/unit/Comments/styles/comment/desktop_view.ts index ec7af69b9..6a2678777 100644 --- a/src/containers/unit/Comments/styles/comment/desktop_view.ts +++ b/src/containers/unit/Comments/styles/comment/desktop_view.ts @@ -44,7 +44,7 @@ export const CommentWrapper = styled.div<{ tobeDelete: boolean }>` export const SidebarWrapper = styled.div` ${css.flexColumn('align-start')}; height: 100%; - min-width: 34px; + min-width: 35px; ` export const BadgePopContent = styled.div` padding: 5px 10px; From 7930ac078194af329a3a7ea3d9da9507c7bded30 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 18 Apr 2021 19:26:26 +0800 Subject: [PATCH 3/8] chore(comments): adjust styles wip --- .../unit/Comments/Comment/DesktopView.tsx | 10 ++++- src/containers/unit/Comments/List/List.tsx | 9 +++++ .../unit/Comments/List/RepliesList.tsx | 37 +++++++++++++++++++ .../Comments/styles/comment/desktop_view.ts | 31 +++++++++++++--- .../unit/Comments/styles/comment/footer.ts | 7 +++- .../unit/Comments/styles/list/list.ts | 14 +++++++ 6 files changed, 100 insertions(+), 8 deletions(-) create mode 100644 src/containers/unit/Comments/List/RepliesList.tsx create mode 100644 src/containers/unit/Comments/styles/list/list.ts diff --git a/src/containers/unit/Comments/Comment/DesktopView.tsx b/src/containers/unit/Comments/Comment/DesktopView.tsx index 2e5513218..8f422426f 100644 --- a/src/containers/unit/Comments/Comment/DesktopView.tsx +++ b/src/containers/unit/Comments/Comment/DesktopView.tsx @@ -26,6 +26,7 @@ import { AuthorUpvotedIcon, SolutionIcon, BadgePopContent, + RangeLine, } from '../styles/comment/desktop_view' const getSelection = () => { @@ -39,9 +40,15 @@ type TProps = { data: TComment accountInfo: TAccount tobeDeleteId: string + hasReplies?: boolean } -const Comment: React.FC = ({ data, tobeDeleteId, accountInfo }) => { +const Comment: React.FC = ({ + data, + tobeDeleteId, + accountInfo, + hasReplies = false, +}) => { const pined = data.id === '360' || data.id === '377' const isAuthorUpvoted = data.id === '377' || data.id === '355' || data.id === '359' @@ -80,6 +87,7 @@ const Comment: React.FC = ({ data, tobeDeleteId, accountInfo }) => { /> )} + diff --git a/src/containers/unit/Comments/List/List.tsx b/src/containers/unit/Comments/List/List.tsx index 85ebb34a8..0442fec4f 100644 --- a/src/containers/unit/Comments/List/List.tsx +++ b/src/containers/unit/Comments/List/List.tsx @@ -3,6 +3,7 @@ import React from 'react' import type { TAccount, TComment } from '@/spec' import Comment from '../Comment' +import RepliesList from './RepliesList' import DateDivider from './DateDivider' type TProps = { @@ -19,8 +20,16 @@ const List: React.FC = ({ entries, tobeDeleteId, accountInfo }) => ( data={c} tobeDeleteId={tobeDeleteId} accountInfo={accountInfo} + hasReplies={c.id === '377'} /> {(index === 1 || index === 3) && } + {c.id === '377' && ( + + )} ))} diff --git a/src/containers/unit/Comments/List/RepliesList.tsx b/src/containers/unit/Comments/List/RepliesList.tsx new file mode 100644 index 000000000..91bdc2c07 --- /dev/null +++ b/src/containers/unit/Comments/List/RepliesList.tsx @@ -0,0 +1,37 @@ +import React from 'react' + +import type { TAccount, TComment } from '@/spec' + +import DateDivider from './DateDivider' +import Comment from '../Comment' + +import { RepliesWrapper, RepliesCommentsWrapper } from '../styles/list/list' + +type TProps = { + entries: TComment[] + tobeDeleteId: string + accountInfo: TAccount +} + +const RepliesList: React.FC = ({ + entries, + tobeDeleteId, + accountInfo, +}) => ( + + {entries.slice(7, 9).map((c, index) => ( + + + {(index === 1 || index === 3) && } + + ))} + +) + +export default React.memo(RepliesList) diff --git a/src/containers/unit/Comments/styles/comment/desktop_view.ts b/src/containers/unit/Comments/styles/comment/desktop_view.ts index 6a2678777..7f042503c 100644 --- a/src/containers/unit/Comments/styles/comment/desktop_view.ts +++ b/src/containers/unit/Comments/styles/comment/desktop_view.ts @@ -5,16 +5,19 @@ import { theme, css } from '@/utils' import PinSVG from '@/SvgIcons/PinSVG' -export const Wrapper = styled.div<{ pined: boolean }>` +type TWrapper = { + pined: boolean +} + +export const Wrapper = styled.div` position: relative; ${css.flex()}; - margin-bottom: 14px; - padding: 15px 5px; + margin-left: 5px; + padding-top: ${({ pined }) => (pined ? '24px' : '15px')}; + padding-bottom: 0; position: relative; background: transparent; - border-bottom: 1px solid; - border-bottom-color: #0b4252; ` export const PinState = styled.div` position: absolute; @@ -62,6 +65,24 @@ export const SolutionIcon = styled(Img)<{ isAuthorUpvoted: boolean }>` margin-top: ${({ isAuthorUpvoted }) => (isAuthorUpvoted ? '7px' : '3px')}; margin-left: 1px; ` +export const RangeLine = styled.div<{ hasReplies: boolean }>` + flex-grow: 1; + width: 25px; + height: 100%; + border-left: 1px solid; + border-left-color: #004251; + margin-left: 6px; + margin-top: 8px; + opacity: 0; + opacity: ${({ hasReplies }) => (hasReplies ? 1 : 0)}; + + ${SidebarWrapper}:hover & { + opacity: 1; + cursor: pointer; + } + + transition: all 0.25s; +` export const CommentBodyInfo = styled.div` ${css.flexColumn()}; width: 100%; diff --git a/src/containers/unit/Comments/styles/comment/footer.ts b/src/containers/unit/Comments/styles/comment/footer.ts index ff8f3f1c0..4d30b2a41 100755 --- a/src/containers/unit/Comments/styles/comment/footer.ts +++ b/src/containers/unit/Comments/styles/comment/footer.ts @@ -1,10 +1,13 @@ import styled from 'styled-components' -import Img from '@/Img' -import { css, theme } from '@/utils' +// import Img from '@/Img' +import { css } from '@/utils' export const Wrapper = styled.div` ${css.flex('align-center')}; margin-top: 5px; + padding-bottom: 10px; + border-bottom: 1px solid; + border-bottom-color: #0a3846; ` export const holder = 1 diff --git a/src/containers/unit/Comments/styles/list/list.ts b/src/containers/unit/Comments/styles/list/list.ts new file mode 100644 index 000000000..e9a80c6b1 --- /dev/null +++ b/src/containers/unit/Comments/styles/list/list.ts @@ -0,0 +1,14 @@ +import styled from 'styled-components' + +// import { theme, css } from '@/utils' + +// min-height: 300px; +export const Wrapper = styled.div`` +export const RepliesWrapper = styled.div` + border-left: 1px solid; + border-left-color: #004251; + margin-left: 12px; +` +export const RepliesCommentsWrapper = styled.div` + margin-left: 24px; +` From 104caf8732068e71ef57aa07a22dfecfe3ac2bf7 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 18 Apr 2021 21:38:44 +0800 Subject: [PATCH 4/8] chore(comments): adjust styles wip --- src/containers/unit/Comments/Comment/DesktopView.tsx | 9 ++++++++- src/containers/unit/Comments/Comment/Footer.tsx | 11 +++++++++-- src/containers/unit/Comments/List/RepliesList.tsx | 3 +-- .../unit/Comments/styles/comment/desktop_view.ts | 8 +++----- .../unit/Comments/styles/comment/footer.ts | 12 +++++++++--- .../unit/Comments/styles/list/date_divider.ts | 1 + 6 files changed, 31 insertions(+), 13 deletions(-) diff --git a/src/containers/unit/Comments/Comment/DesktopView.tsx b/src/containers/unit/Comments/Comment/DesktopView.tsx index 8f422426f..b840e8bd4 100644 --- a/src/containers/unit/Comments/Comment/DesktopView.tsx +++ b/src/containers/unit/Comments/Comment/DesktopView.tsx @@ -41,6 +41,7 @@ type TProps = { accountInfo: TAccount tobeDeleteId: string hasReplies?: boolean + withoutBottomDivider?: boolean } const Comment: React.FC = ({ @@ -48,6 +49,7 @@ const Comment: React.FC = ({ tobeDeleteId, accountInfo, hasReplies = false, + withoutBottomDivider = false, }) => { const pined = data.id === '360' || data.id === '377' const isAuthorUpvoted = @@ -96,7 +98,12 @@ const Comment: React.FC = ({ {data.replyTo && } -