From d0b667b532378fce2df4329ec776cfc53ef69381 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 22 Apr 2021 17:10:59 +0800 Subject: [PATCH 1/3] fix(avatars-row): adjust tooltip & margin effect --- src/components/AvatarsRow/MoreItem.tsx | 17 ++++-- src/components/AvatarsRow/index.tsx | 53 ++++++++++--------- src/components/AvatarsRow/styles/index.ts | 31 ++++++----- src/components/AvatarsRow/styles/more_item.ts | 12 +++-- .../DigestView/DesktopView/ActiveBadge.tsx | 28 ++-------- .../styles/digest_view/active_badge.ts | 12 +---- 6 files changed, 75 insertions(+), 78 deletions(-) diff --git a/src/components/AvatarsRow/MoreItem.tsx b/src/components/AvatarsRow/MoreItem.tsx index 58b9110f4..afd6bde50 100644 --- a/src/components/AvatarsRow/MoreItem.tsx +++ b/src/components/AvatarsRow/MoreItem.tsx @@ -1,6 +1,7 @@ import React from 'react' import { prettyNum } from '@/utils' +import { Br } from '@/components/Common' import Tooltip from '@/components/Tooltip' import type { TProps as TAvatarsProps } from './index' @@ -10,6 +11,7 @@ import { NumbersMore, TextMore, DotText, + StateInfoWrapper, TotalCommentStateHint, Focus, } from './styles/more_item' @@ -32,11 +34,20 @@ const MoreItem: React.FC = ({ showTotalNumber ? ( '更多' ) : ( - - 共 {total} 条评论 - + + + 评论: {total} + +
+ + 参与者: {total} + + ) } + delay={500} + placement="bottom-end" + noPadding > {showTotalNumber ? ( diff --git a/src/components/AvatarsRow/index.tsx b/src/components/AvatarsRow/index.tsx index 3130597b0..2abb1ef3d 100755 --- a/src/components/AvatarsRow/index.tsx +++ b/src/components/AvatarsRow/index.tsx @@ -21,10 +21,12 @@ import MoreItem from './MoreItem' import { getAvatarSize } from './styles/metric' import { Wrapper, + AvatarsWrapper, AvatarsItem, AvatarsImg, AvatarFallback, TotalOneOffset, + UserPopContent, } from './styles' /* eslint-disable-next-line */ @@ -91,31 +93,32 @@ const AvatarsRow: React.FC = ({ /> )} - {slice(0, limit, sortedUsers).map((user) => ( - - - onUserSelect(user)} - scrollPosition={scrollPosition} - fallback={ - - } - /> - - - ))} + + {slice(0, limit, sortedUsers).map((user) => ( + {user.nickname}} + delay={200} + contentHeight={getAvatarSize(size, 'number') as string} + noPadding + > + 1}> + onUserSelect(user)} + scrollPosition={scrollPosition} + fallback={ + + } + /> + + + ))} + ) } diff --git a/src/components/AvatarsRow/styles/index.ts b/src/components/AvatarsRow/styles/index.ts index c9df23140..0c37df76a 100755 --- a/src/components/AvatarsRow/styles/index.ts +++ b/src/components/AvatarsRow/styles/index.ts @@ -15,27 +15,29 @@ export const Wrapper = styled.ul<{ total: number }>` padding: 0px 8px 0px 0px; margin-right: ${({ total }) => getUlMarginRight(total)}; ` +export const AvatarsWrapper = styled.div` + ${css.flex()} + flex-direction: row-reverse; +` // height: 49px; -type TBaseAvatarItem = { size: TAvatarSize; noHoverMargin: boolean } -const BaseAvatarItem = styled.li` +type TAvatarsItem = { size: TAvatarSize; noMarginEffect: boolean } +export const AvatarsItem = styled.li` margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; position: relative; width: ${({ size }) => getLiSize(size)}; + z-index: 2; - &:hover { - margin-left: ${({ noHoverMargin }) => (noHoverMargin ? '0' : '10px')}; - margin-right: ${({ noHoverMargin }) => (noHoverMargin ? '0' : '10px')}; - transition-delay: 0.1s; + ${AvatarsWrapper}:hover & { + /* margin: 0 5px; */ + margin: ${({ noMarginEffect }) => { + console.log('noMarginEffect: ', noMarginEffect) + // return showMarginEffect ? '0 5px' : 0 + return noMarginEffect ? 0 : '0 5px;' + }}; + transition-delay: 0.3s; } - transition: all 0.1s; -` -export const AvatarsItem = styled(BaseAvatarItem)` - margin: 0px 0px 0px 0px; - padding: 0px 0px 0px 0px; - position: relative; - width: ${({ size }) => getLiSize(size)}; filter: grayscale(0.3); &:hover { filter: grayscale(0); @@ -86,3 +88,6 @@ export const AvatarFallback = styled(ImgFallback)` border: 1px solid; border-color: #113744; ` +export const UserPopContent = styled.div` + padding: 5px 10px; +` diff --git a/src/components/AvatarsRow/styles/more_item.ts b/src/components/AvatarsRow/styles/more_item.ts index 5f69405b1..caef80f55 100644 --- a/src/components/AvatarsRow/styles/more_item.ts +++ b/src/components/AvatarsRow/styles/more_item.ts @@ -11,6 +11,7 @@ const BaseAvatarItem = styled.li<{ size: string }>` position: relative; width: ${({ size }) => getAvatarSize(size)}; opacity: 0.75; + z-index: 1; &:hover { opacity: 1; } @@ -37,15 +38,18 @@ export const TextMore = styled(AvatarsMore)` export const DotText = styled.div` margin-top: -8px; ` +export const StateInfoWrapper = styled.div` + width: 95px; + padding: 8px 10px; +` export const TotalCommentStateHint = styled.div` - ${css.flex('justify-center')}; + ${css.flex('justify-end')}; color: ${theme('thread.articleDigest')}; - width: 80px; + width: 100%; font-size: 12px; ` export const Focus = styled.span` color: ${theme('thread.articleTitle')}; font-weight: bold; - margin-left: 2px; - margin-right: 2px; + margin-left: 4px; ` diff --git a/src/components/PostItem/DigestView/DesktopView/ActiveBadge.tsx b/src/components/PostItem/DigestView/DesktopView/ActiveBadge.tsx index b9a5f93bb..bfef74401 100644 --- a/src/components/PostItem/DigestView/DesktopView/ActiveBadge.tsx +++ b/src/components/PostItem/DigestView/DesktopView/ActiveBadge.tsx @@ -3,15 +3,7 @@ import React from 'react' import type { TPost } from '@/spec' import { ICON } from '@/config' -import Tooltip from '@/components/Tooltip' - -import { - Wrapper, - PopContent, - PopContentDate, - ItemInner, - Icon, -} from '../../styles/digest_view/active_badge' +import { Wrapper, ItemInner, Icon } from '../../styles/digest_view/active_badge' type TProps = { item: TPost @@ -20,20 +12,10 @@ type TProps = { const ActiveBadge: React.FC = ({ item }) => { return ( 0}> - -
最后回复
2020-03-11 - - } - placement="bottom" - noPadding - > - - - 4天前 - - + + + 4天前 + ) } diff --git a/src/components/PostItem/styles/digest_view/active_badge.ts b/src/components/PostItem/styles/digest_view/active_badge.ts index 0b57c8ef6..7be54f3d6 100644 --- a/src/components/PostItem/styles/digest_view/active_badge.ts +++ b/src/components/PostItem/styles/digest_view/active_badge.ts @@ -17,22 +17,14 @@ export const Wrapper = styled.div<{ hasComments: boolean }>` opacity: 0.8; ${Main}:hover & { - opacity: 1; + opacity: 0.9; + color: ${theme('thread.articleTitle')}; } transition: opacity 0.2s; ` export const ItemInner = styled.div` ${css.flex('align-center')}; ` -export const PopContent = styled.div` - ${css.flexColumn('align-end')}; - width: 100%; - min-width: 85px; - font-size: 12px; -` -export const PopContentDate = styled.div` - margin-top: 6px; -` export const Icon = styled(Img)` fill: ${theme('thread.articleDigest')}; ${css.size(12)}; From baa51671b1b2f05608bac4ceb13629afa4c5dea5 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 22 Apr 2021 17:45:55 +0800 Subject: [PATCH 2/3] fix(avatars-row): remove noMarginEffect prop --- src/components/AvatarsRow/index.tsx | 71 ++++++++++++++--------- src/components/AvatarsRow/styles/index.ts | 13 ++--- 2 files changed, 49 insertions(+), 35 deletions(-) diff --git a/src/components/AvatarsRow/index.tsx b/src/components/AvatarsRow/index.tsx index 2abb1ef3d..be373a929 100755 --- a/src/components/AvatarsRow/index.tsx +++ b/src/components/AvatarsRow/index.tsx @@ -61,6 +61,33 @@ export type TProps = { onTotalSelect: () => void } +const RealAvatar = ({ user, size, onUserSelect }) => { + return ( + {user.nickname}} + delay={200} + contentHeight={getAvatarSize(size, 'number') as string} + showArrow={false} + noPadding + > + + onUserSelect(user)} + scrollPosition={null} + fallback={ + + } + /> + + + ) +} + const AvatarsRow: React.FC = ({ size = SIZE.SMALL, total, @@ -93,32 +120,24 @@ const AvatarsRow: React.FC = ({ /> )} - - {slice(0, limit, sortedUsers).map((user) => ( - {user.nickname}} - delay={200} - contentHeight={getAvatarSize(size, 'number') as string} - noPadding - > - 1}> - onUserSelect(user)} - scrollPosition={scrollPosition} - fallback={ - - } - /> - - - ))} - + {total === 1 ? ( + + ) : ( + + {slice(0, limit, sortedUsers).map((user) => ( + + ))} + + )} ) } diff --git a/src/components/AvatarsRow/styles/index.ts b/src/components/AvatarsRow/styles/index.ts index 0c37df76a..51bf49ad9 100755 --- a/src/components/AvatarsRow/styles/index.ts +++ b/src/components/AvatarsRow/styles/index.ts @@ -20,30 +20,25 @@ export const AvatarsWrapper = styled.div` flex-direction: row-reverse; ` // height: 49px; -type TAvatarsItem = { size: TAvatarSize; noMarginEffect: boolean } +type TAvatarsItem = { size: TAvatarSize } export const AvatarsItem = styled.li` margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; position: relative; width: ${({ size }) => getLiSize(size)}; z-index: 2; + filter: grayscale(0.3); ${AvatarsWrapper}:hover & { - /* margin: 0 5px; */ - margin: ${({ noMarginEffect }) => { - console.log('noMarginEffect: ', noMarginEffect) - // return showMarginEffect ? '0 5px' : 0 - return noMarginEffect ? 0 : '0 5px;' - }}; + margin: 0 5px; transition-delay: 0.3s; } - filter: grayscale(0.3); &:hover { filter: grayscale(0); } - transition: all 0.1s; + transition: all 0.25s; ` export const TotalOneOffset = styled.span` margin-right: 10px; From 8c15dc7f8f2a7068ea44b78b6f43d2bc3a5c8a4e Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 22 Apr 2021 22:27:41 +0800 Subject: [PATCH 3/3] refactor(avatars-row): re-org codebase --- src/components/AvatarsRow/RealAvatar.tsx | 50 +++++++++++++ src/components/AvatarsRow/index.tsx | 40 +--------- src/components/AvatarsRow/styles/index.ts | 48 +----------- src/components/AvatarsRow/styles/more_item.ts | 1 + .../AvatarsRow/styles/real_avatar.ts | 75 +++++++++++++++++++ 5 files changed, 129 insertions(+), 85 deletions(-) create mode 100644 src/components/AvatarsRow/RealAvatar.tsx create mode 100644 src/components/AvatarsRow/styles/real_avatar.ts diff --git a/src/components/AvatarsRow/RealAvatar.tsx b/src/components/AvatarsRow/RealAvatar.tsx new file mode 100644 index 000000000..b4886fc3a --- /dev/null +++ b/src/components/AvatarsRow/RealAvatar.tsx @@ -0,0 +1,50 @@ +import React from 'react' + +import type { TUser } from '@/spec' +import Tooltip from '@/components/Tooltip' + +import { getAvatarSize } from './styles/metric' +import type { TAvatarSize } from './spec' + +import { + Wrapper, + AvatarsImg, + AvatarFallback, + UserPopContent, +} from './styles/real_avatar' + +type TProps = { + user?: TUser + size?: TAvatarSize + scrollPosition?: any + onUserSelect: (user: TUser) => void +} + +const RealAvatar: React.FC = ({ user, size, onUserSelect }) => { + return ( + {user.nickname}} + delay={200} + contentHeight={getAvatarSize(size, 'number') as string} + showArrow={false} + noPadding + > + + onUserSelect(user)} + scrollPosition={null} + fallback={ + + } + /> + + + ) +} + +export default RealAvatar diff --git a/src/components/AvatarsRow/index.tsx b/src/components/AvatarsRow/index.tsx index be373a929..ab2c2e1e3 100755 --- a/src/components/AvatarsRow/index.tsx +++ b/src/components/AvatarsRow/index.tsx @@ -13,21 +13,12 @@ import { AVATARS_LIST_LENGTH } from '@/config' import { SIZE } from '@/constant' import { buildLog } from '@/utils' -import Tooltip from '@/components/Tooltip' import type { TAvatarSize } from './spec' +import RealAvatar from './RealAvatar' import MoreItem from './MoreItem' -import { getAvatarSize } from './styles/metric' -import { - Wrapper, - AvatarsWrapper, - AvatarsItem, - AvatarsImg, - AvatarFallback, - TotalOneOffset, - UserPopContent, -} from './styles' +import { Wrapper, AvatarsWrapper, TotalOneOffset } from './styles' /* eslint-disable-next-line */ const log = buildLog('c:AvatarsRow:index') @@ -61,33 +52,6 @@ export type TProps = { onTotalSelect: () => void } -const RealAvatar = ({ user, size, onUserSelect }) => { - return ( - {user.nickname}} - delay={200} - contentHeight={getAvatarSize(size, 'number') as string} - showArrow={false} - noPadding - > - - onUserSelect(user)} - scrollPosition={null} - fallback={ - - } - /> - - - ) -} - const AvatarsRow: React.FC = ({ size = SIZE.SMALL, total, diff --git a/src/components/AvatarsRow/styles/index.ts b/src/components/AvatarsRow/styles/index.ts index 51bf49ad9..a48c8166b 100755 --- a/src/components/AvatarsRow/styles/index.ts +++ b/src/components/AvatarsRow/styles/index.ts @@ -1,10 +1,8 @@ import styled from 'styled-components' -import Img from '@/Img' import { theme, css } from '@/utils' -import ImgFallback from '@/components/ImgFallback' -import { getLiSize, getAvatarSize, getUlMarginRight } from './metric' +import { getAvatarSize, getUlMarginRight } from './metric' import type { TAvatarSize } from '../spec' export const Wrapper = styled.ul<{ total: number }>` @@ -19,46 +17,9 @@ export const AvatarsWrapper = styled.div` ${css.flex()} flex-direction: row-reverse; ` -// height: 49px; -type TAvatarsItem = { size: TAvatarSize } -export const AvatarsItem = styled.li` - margin: 0px 0px 0px 0px; - padding: 0px 0px 0px 0px; - position: relative; - width: ${({ size }) => getLiSize(size)}; - z-index: 2; - filter: grayscale(0.3); - - ${AvatarsWrapper}:hover & { - margin: 0 5px; - transition-delay: 0.3s; - } - - &:hover { - filter: grayscale(0); - } - - transition: all 0.25s; -` export const TotalOneOffset = styled.span` margin-right: 10px; ` -type TAvatarsImg = { size: string; onClick: () => void; scrollPosition: any } -export const AvatarsImg = styled(Img)` - border: 2px solid; - border-color: ${theme('thread.commentsUserBorder')}; - border-radius: 100px 100px 100px 100px; - color: #ffffff; - font-family: sans-serif; - font-size: 12px; - font-weight: 100; - - width: ${({ size }) => getAvatarSize(size)}; - height: ${({ size }) => getAvatarSize(size)}; - display: block; - - text-align: center; -` type TAvatarsMore = { size: TAvatarSize; total: number } export const AvatarsMore = styled.span` ${css.flex('align-both')}; @@ -79,10 +40,3 @@ export const AvatarsMore = styled.span` cursor: pointer; } ` -export const AvatarFallback = styled(ImgFallback)` - border: 1px solid; - border-color: #113744; -` -export const UserPopContent = styled.div` - padding: 5px 10px; -` diff --git a/src/components/AvatarsRow/styles/more_item.ts b/src/components/AvatarsRow/styles/more_item.ts index caef80f55..b75218068 100644 --- a/src/components/AvatarsRow/styles/more_item.ts +++ b/src/components/AvatarsRow/styles/more_item.ts @@ -22,6 +22,7 @@ const BaseAvatarItem = styled.li<{ size: string }>` export const Wrapper = styled(BaseAvatarItem)` ${css.media.mobile`display: none`}; ` + type TNumbersMore = { size: string; total: number } export const NumbersMore = styled(AvatarsMore)` height: ${({ size }) => getAvatarSize(size)}; diff --git a/src/components/AvatarsRow/styles/real_avatar.ts b/src/components/AvatarsRow/styles/real_avatar.ts new file mode 100644 index 000000000..a7815346b --- /dev/null +++ b/src/components/AvatarsRow/styles/real_avatar.ts @@ -0,0 +1,75 @@ +import styled from 'styled-components' + +import Img from '@/Img' +import { theme, css } from '@/utils' + +import ImgFallback from '@/components/ImgFallback' +import { getLiSize, getAvatarSize } from './metric' +import type { TAvatarSize } from '../spec' + +import { AvatarsWrapper } from './index' + +// height: 49px; +type TWrapper = { size: TAvatarSize } +export const Wrapper = styled.li` + margin: 0px 0px 0px 0px; + padding: 0px 0px 0px 0px; + position: relative; + width: ${({ size }) => getLiSize(size)}; + z-index: 2; + filter: grayscale(0.3); + + ${AvatarsWrapper}:hover & { + margin: 0 5px; + transition-delay: 0.3s; + } + + &:hover { + filter: grayscale(0); + } + + transition: all 0.25s; +` +type TAvatarsImg = { size: string; onClick: () => void; scrollPosition: any } +export const AvatarsImg = styled(Img)` + border: 2px solid; + border-color: ${theme('thread.commentsUserBorder')}; + border-radius: 100px 100px 100px 100px; + color: #ffffff; + font-family: sans-serif; + font-size: 12px; + font-weight: 100; + + width: ${({ size }) => getAvatarSize(size)}; + height: ${({ size }) => getAvatarSize(size)}; + display: block; + + text-align: center; +` +type TAvatarsMore = { size: TAvatarSize; total: number } +export const AvatarsMore = styled.span` + ${css.flex('align-both')}; + font-size: 14px; + border-color: #113744; + color: ${theme('thread.articleTitle')}; + background-color: #113744; + border-radius: 100px 100px 100px 100px; + font-family: sans-serif; + font-weight: ${({ total }) => (total >= 1000 ? 600 : 200)}; + + min-width: ${({ size }) => getAvatarSize(size)}; + height: ${({ size }) => getAvatarSize(size)}; + + padding-left: ${({ total }) => (total >= 1000 ? '5px' : '3px')}; + + &:hover { + cursor: pointer; + } +` +export const AvatarFallback = styled(ImgFallback)` + border: 1px solid; + border-color: #113744; +` +export const UserPopContent = styled.div` + padding: 5px 10px; +`