Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 31df66f

Browse files
mydearxymmydearxym
authored
refactor(avatars-row): adjust popover & animation (#1065)
* fix(avatars-row): adjust tooltip & margin effect * fix(avatars-row): remove noMarginEffect prop * refactor(avatars-row): re-org codebase
1 parent f15f26f commit 31df66f

File tree

8 files changed

+177
-122
lines changed

8 files changed

+177
-122
lines changed

‎src/components/AvatarsRow/MoreItem.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react'
22

33
import { prettyNum } from '@/utils'
4+
import { Br } from '@/components/Common'
45
import Tooltip from '@/components/Tooltip'
56

67
import type { TProps as TAvatarsProps } from './index'
@@ -10,6 +11,7 @@ import {
1011
NumbersMore,
1112
TextMore,
1213
DotText,
14+
StateInfoWrapper,
1315
TotalCommentStateHint,
1416
Focus,
1517
} from './styles/more_item'
@@ -32,11 +34,20 @@ const MoreItem: React.FC<TProps> = ({
3234
showTotalNumber ? (
3335
'更多'
3436
) : (
35-
<TotalCommentStateHint>
36-
共 <Focus>{total}</Focus> 条评论
37-
</TotalCommentStateHint>
37+
<StateInfoWrapper>
38+
<TotalCommentStateHint>
39+
评论: <Focus>{total}</Focus>
40+
</TotalCommentStateHint>
41+
<Br top={5} />
42+
<TotalCommentStateHint>
43+
参与者: <Focus>{total}</Focus>
44+
</TotalCommentStateHint>
45+
</StateInfoWrapper>
3846
)
3947
}
48+
delay={500}
49+
placement="bottom-end"
50+
noPadding
4051
>
4152
{showTotalNumber ? (
4253
<TextMore size={size} total={total}>

‎src/components/AvatarsRow/RealAvatar.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react'
2+
3+
import type { TUser } from '@/spec'
4+
import Tooltip from '@/components/Tooltip'
5+
6+
import { getAvatarSize } from './styles/metric'
7+
import type { TAvatarSize } from './spec'
8+
9+
import {
10+
Wrapper,
11+
AvatarsImg,
12+
AvatarFallback,
13+
UserPopContent,
14+
} from './styles/real_avatar'
15+
16+
type TProps = {
17+
user?: TUser
18+
size?: TAvatarSize
19+
scrollPosition?: any
20+
onUserSelect: (user: TUser) => void
21+
}
22+
23+
const RealAvatar: React.FC<TProps> = ({ user, size, onUserSelect }) => {
24+
return (
25+
<Tooltip
26+
content={<UserPopContent>{user.nickname}</UserPopContent>}
27+
delay={200}
28+
contentHeight={getAvatarSize(size, 'number') as string}
29+
showArrow={false}
30+
noPadding
31+
>
32+
<Wrapper key={user.id} size={size}>
33+
<AvatarsImg
34+
src={user.avatar}
35+
size={size}
36+
onClick={() => onUserSelect(user)}
37+
scrollPosition={null}
38+
fallback={
39+
<AvatarFallback
40+
size={getAvatarSize(size, 'number') as number}
41+
user={user}
42+
/>
43+
}
44+
/>
45+
</Wrapper>
46+
</Tooltip>
47+
)
48+
}
49+
50+
export default RealAvatar

‎src/components/AvatarsRow/index.tsx‎

Lines changed: 18 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,12 @@ import { AVATARS_LIST_LENGTH } from '@/config'
1313
import { SIZE } from '@/constant'
1414
import { buildLog } from '@/utils'
1515

16-
import Tooltip from '@/components/Tooltip'
1716
import type { TAvatarSize } from './spec'
1817

18+
import RealAvatar from './RealAvatar'
1919
import MoreItem from './MoreItem'
2020

21-
import { getAvatarSize } from './styles/metric'
22-
import {
23-
Wrapper,
24-
AvatarsItem,
25-
AvatarsImg,
26-
AvatarFallback,
27-
TotalOneOffset,
28-
} from './styles'
21+
import { Wrapper, AvatarsWrapper, TotalOneOffset } from './styles'
2922

3023
/* eslint-disable-next-line */
3124
const log = buildLog('c:AvatarsRow:index')
@@ -91,31 +84,24 @@ const AvatarsRow: React.FC<TProps> = ({
9184
/>
9285
)}
9386

94-
{slice(0, limit, sortedUsers).map((user) => (
95-
<Tooltip
96-
key={user.id}
97-
content={user.nickname}
98-
duration={0}
99-
delay={300}
100-
contentHeight={getAvatarSize(size, 'number') as string}
101-
noPadding
102-
>
103-
<AvatarsItem size={size} noHoverMargin={total === 1}>
104-
<AvatarsImg
105-
src={user.avatar}
87+
{total === 1 ? (
88+
<RealAvatar
89+
user={sortedUsers[0]}
90+
size={size}
91+
onUserSelect={onUserSelect}
92+
/>
93+
) : (
94+
<AvatarsWrapper>
95+
{slice(0, limit, sortedUsers).map((user) => (
96+
<RealAvatar
97+
key={user.id}
98+
user={user}
10699
size={size}
107-
onClick={() => onUserSelect(user)}
108-
scrollPosition={scrollPosition}
109-
fallback={
110-
<AvatarFallback
111-
size={getAvatarSize(size, 'number') as number}
112-
user={user}
113-
/>
114-
}
100+
onUserSelect={onUserSelect}
115101
/>
116-
</AvatarsItem>
117-
</Tooltip>
118-
))}
102+
))}
103+
</AvatarsWrapper>
104+
)}
119105
</Wrapper>
120106
)
121107
}

‎src/components/AvatarsRow/styles/index.ts‎

Lines changed: 4 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import styled from 'styled-components'
22

3-
import Img from '@/Img'
43
import { theme, css } from '@/utils'
54

6-
import ImgFallback from '@/components/ImgFallback'
7-
import { getLiSize, getAvatarSize, getUlMarginRight } from './metric'
5+
import { getAvatarSize, getUlMarginRight } from './metric'
86
import type { TAvatarSize } from '../spec'
97

108
export const Wrapper = styled.ul<{ total: number }>`
@@ -15,53 +13,13 @@ export const Wrapper = styled.ul<{ total: number }>`
1513
padding: 0px 8px 0px 0px;
1614
margin-right: ${({ total }) => getUlMarginRight(total)};
1715
`
18-
// height: 49px;
19-
type TBaseAvatarItem = { size: TAvatarSize; noHoverMargin: boolean }
20-
const BaseAvatarItem = styled.li<TBaseAvatarItem>`
21-
margin: 0px 0px 0px 0px;
22-
padding: 0px 0px 0px 0px;
23-
position: relative;
24-
width: ${({ size }) => getLiSize(size)};
25-
26-
&:hover {
27-
margin-left: ${({ noHoverMargin }) => (noHoverMargin ? '0' : '10px')};
28-
margin-right: ${({ noHoverMargin }) => (noHoverMargin ? '0' : '10px')};
29-
transition-delay: 0.1s;
30-
}
31-
transition: all 0.1s;
32-
`
33-
34-
export const AvatarsItem = styled(BaseAvatarItem)`
35-
margin: 0px 0px 0px 0px;
36-
padding: 0px 0px 0px 0px;
37-
position: relative;
38-
width: ${({ size }) => getLiSize(size)};
39-
filter: grayscale(0.3);
40-
&:hover {
41-
filter: grayscale(0);
42-
}
43-
44-
transition: all 0.1s;
16+
export const AvatarsWrapper = styled.div`
17+
${css.flex()}
18+
flex-direction: row-reverse;
4519
`
4620
export const TotalOneOffset = styled.span`
4721
margin-right: 10px;
4822
`
49-
type TAvatarsImg = { size: string; onClick: () => void; scrollPosition: any }
50-
export const AvatarsImg = styled(Img)<TAvatarsImg>`
51-
border: 2px solid;
52-
border-color: ${theme('thread.commentsUserBorder')};
53-
border-radius: 100px 100px 100px 100px;
54-
color: #ffffff;
55-
font-family: sans-serif;
56-
font-size: 12px;
57-
font-weight: 100;
58-
59-
width: ${({ size }) => getAvatarSize(size)};
60-
height: ${({ size }) => getAvatarSize(size)};
61-
display: block;
62-
63-
text-align: center;
64-
`
6523
type TAvatarsMore = { size: TAvatarSize; total: number }
6624
export const AvatarsMore = styled.span<TAvatarsMore>`
6725
${css.flex('align-both')};
@@ -82,7 +40,3 @@ export const AvatarsMore = styled.span<TAvatarsMore>`
8240
cursor: pointer;
8341
}
8442
`
85-
export const AvatarFallback = styled(ImgFallback)`
86-
border: 1px solid;
87-
border-color: #113744;
88-
`

‎src/components/AvatarsRow/styles/more_item.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const BaseAvatarItem = styled.li<{ size: string }>`
1111
position: relative;
1212
width: ${({ size }) => getAvatarSize(size)};
1313
opacity: 0.75;
14+
z-index: 1;
1415
&:hover {
1516
opacity: 1;
1617
}
@@ -21,6 +22,7 @@ const BaseAvatarItem = styled.li<{ size: string }>`
2122
export const Wrapper = styled(BaseAvatarItem)`
2223
${css.media.mobile`display: none`};
2324
`
25+
2426
type TNumbersMore = { size: string; total: number }
2527
export const NumbersMore = styled(AvatarsMore)<TNumbersMore>`
2628
height: ${({ size }) => getAvatarSize(size)};
@@ -37,15 +39,18 @@ export const TextMore = styled(AvatarsMore)`
3739
export const DotText = styled.div`
3840
margin-top: -8px;
3941
`
42+
export const StateInfoWrapper = styled.div`
43+
width: 95px;
44+
padding: 8px 10px;
45+
`
4046
export const TotalCommentStateHint = styled.div`
41-
${css.flex('justify-center')};
47+
${css.flex('justify-end')};
4248
color: ${theme('thread.articleDigest')};
43-
width: 80px;
49+
width: 100%;
4450
font-size: 12px;
4551
`
4652
export const Focus = styled.span`
4753
color: ${theme('thread.articleTitle')};
4854
font-weight: bold;
49-
margin-left: 2px;
50-
margin-right: 2px;
55+
margin-left: 4px;
5156
`

‎src/components/AvatarsRow/styles/real_avatar.ts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import styled from 'styled-components'
2+
3+
import Img from '@/Img'
4+
import { theme, css } from '@/utils'
5+
6+
import ImgFallback from '@/components/ImgFallback'
7+
import { getLiSize, getAvatarSize } from './metric'
8+
import type { TAvatarSize } from '../spec'
9+
10+
import { AvatarsWrapper } from './index'
11+
12+
// height: 49px;
13+
type TWrapper = { size: TAvatarSize }
14+
export const Wrapper = styled.li<TWrapper>`
15+
margin: 0px 0px 0px 0px;
16+
padding: 0px 0px 0px 0px;
17+
position: relative;
18+
width: ${({ size }) => getLiSize(size)};
19+
z-index: 2;
20+
filter: grayscale(0.3);
21+
22+
${AvatarsWrapper}:hover & {
23+
margin: 0 5px;
24+
transition-delay: 0.3s;
25+
}
26+
27+
&:hover {
28+
filter: grayscale(0);
29+
}
30+
31+
transition: all 0.25s;
32+
`
33+
type TAvatarsImg = { size: string; onClick: () => void; scrollPosition: any }
34+
export const AvatarsImg = styled(Img)<TAvatarsImg>`
35+
border: 2px solid;
36+
border-color: ${theme('thread.commentsUserBorder')};
37+
border-radius: 100px 100px 100px 100px;
38+
color: #ffffff;
39+
font-family: sans-serif;
40+
font-size: 12px;
41+
font-weight: 100;
42+
43+
width: ${({ size }) => getAvatarSize(size)};
44+
height: ${({ size }) => getAvatarSize(size)};
45+
display: block;
46+
47+
text-align: center;
48+
`
49+
type TAvatarsMore = { size: TAvatarSize; total: number }
50+
export const AvatarsMore = styled.span<TAvatarsMore>`
51+
${css.flex('align-both')};
52+
font-size: 14px;
53+
border-color: #113744;
54+
color: ${theme('thread.articleTitle')};
55+
background-color: #113744;
56+
border-radius: 100px 100px 100px 100px;
57+
font-family: sans-serif;
58+
font-weight: ${({ total }) => (total >= 1000 ? 600 : 200)};
59+
60+
min-width: ${({ size }) => getAvatarSize(size)};
61+
height: ${({ size }) => getAvatarSize(size)};
62+
63+
padding-left: ${({ total }) => (total >= 1000 ? '5px' : '3px')};
64+
65+
&:hover {
66+
cursor: pointer;
67+
}
68+
`
69+
export const AvatarFallback = styled(ImgFallback)`
70+
border: 1px solid;
71+
border-color: #113744;
72+
`
73+
export const UserPopContent = styled.div`
74+
padding: 5px 10px;
75+
`

‎src/components/PostItem/DigestView/DesktopView/ActiveBadge.tsx‎

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,7 @@ import React from 'react'
33
import type { TPost } from '@/spec'
44
import { ICON } from '@/config'
55

6-
import Tooltip from '@/components/Tooltip'
7-
8-
import {
9-
Wrapper,
10-
PopContent,
11-
PopContentDate,
12-
ItemInner,
13-
Icon,
14-
} from '../../styles/digest_view/active_badge'
6+
import { Wrapper, ItemInner, Icon } from '../../styles/digest_view/active_badge'
157

168
type TProps = {
179
item: TPost
@@ -20,20 +12,10 @@ type TProps = {
2012
const ActiveBadge: React.FC<TProps> = ({ item }) => {
2113
return (
2214
<Wrapper hasComments={item.commentsCount > 0}>
23-
<Tooltip
24-
content={
25-
<PopContent>
26-
<div>最后回复</div> <PopContentDate>2020-03-11</PopContentDate>
27-
</PopContent>
28-
}
29-
placement="bottom"
30-
noPadding
31-
>
32-
<ItemInner>
33-
<Icon src={`${ICON}/shape/activity.svg`} />
34-
4天前
35-
</ItemInner>
36-
</Tooltip>
15+
<ItemInner title="最后回复: 2020-03-11 14:33">
16+
<Icon src={`${ICON}/shape/activity.svg`} />
17+
4天前
18+
</ItemInner>
3719
</Wrapper>
3820
)
3921
}

0 commit comments

Comments
 (0)