Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit31df66f

Browse files
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 parentf15f26f commit31df66f

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
importReactfrom'react'
22

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

67
importtype{TPropsasTAvatarsProps}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+
<Brtop={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
<TextMoresize={size}total={total}>
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
importReactfrom'react'
2+
3+
importtype{TUser}from'@/spec'
4+
importTooltipfrom'@/components/Tooltip'
5+
6+
import{getAvatarSize}from'./styles/metric'
7+
importtype{TAvatarSize}from'./spec'
8+
9+
import{
10+
Wrapper,
11+
AvatarsImg,
12+
AvatarFallback,
13+
UserPopContent,
14+
}from'./styles/real_avatar'
15+
16+
typeTProps={
17+
user?:TUser
18+
size?:TAvatarSize
19+
scrollPosition?:any
20+
onUserSelect:(user:TUser)=>void
21+
}
22+
23+
constRealAvatar:React.FC<TProps>=({ user, size, onUserSelect})=>{
24+
return(
25+
<Tooltip
26+
content={<UserPopContent>{user.nickname}</UserPopContent>}
27+
delay={200}
28+
contentHeight={getAvatarSize(size,'number')asstring}
29+
showArrow={false}
30+
noPadding
31+
>
32+
<Wrapperkey={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')asnumber}
41+
user={user}
42+
/>
43+
}
44+
/>
45+
</Wrapper>
46+
</Tooltip>
47+
)
48+
}
49+
50+
exportdefaultRealAvatar

‎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-
importTooltipfrom'@/components/Tooltip'
1716
importtype{TAvatarSize}from'./spec'
1817

18+
importRealAvatarfrom'./RealAvatar'
1919
importMoreItemfrom'./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
constlog=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')asstring}
101-
noPadding
102-
>
103-
<AvatarsItemsize={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')asnumber}
112-
user={user}
113-
/>
114-
}
100+
onUserSelect={onUserSelect}
115101
/>
116-
</AvatarsItem>
117-
</Tooltip>
118-
))}
102+
))}
103+
</AvatarsWrapper>
104+
)}
119105
</Wrapper>
120106
)
121107
}
Lines changed: 4 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
importstyledfrom'styled-components'
22

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

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

108
exportconstWrapper=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-
typeTBaseAvatarItem={size:TAvatarSize;noHoverMargin:boolean}
20-
constBaseAvatarItem=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-
exportconstAvatarsItem=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+
exportconstAvatarsWrapper=styled.div`
17+
${css.flex()}
18+
flex-direction: row-reverse;
4519
`
4620
exportconstTotalOneOffset=styled.span`
4721
margin-right: 10px;
4822
`
49-
typeTAvatarsImg={size:string;onClick:()=>void;scrollPosition:any}
50-
exportconstAvatarsImg=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
typeTAvatarsMore={size:TAvatarSize;total:number}
6624
exportconstAvatarsMore=styled.span<TAvatarsMore>`
6725
${css.flex('align-both')};
@@ -82,7 +40,3 @@ export const AvatarsMore = styled.span<TAvatarsMore>`
8240
cursor: pointer;
8341
}
8442
`
85-
exportconstAvatarFallback=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
exportconstWrapper=styled(BaseAvatarItem)`
2223
${css.media.mobile`display: none`};
2324
`
25+
2426
typeTNumbersMore={size:string;total:number}
2527
exportconstNumbersMore=styled(AvatarsMore)<TNumbersMore>`
2628
height:${({ size})=>getAvatarSize(size)};
@@ -37,15 +39,18 @@ export const TextMore = styled(AvatarsMore)`
3739
exportconstDotText=styled.div`
3840
margin-top: -8px;
3941
`
42+
exportconstStateInfoWrapper=styled.div`
43+
width: 95px;
44+
padding: 8px 10px;
45+
`
4046
exportconstTotalCommentStateHint=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
exportconstFocus=styled.span`
4753
color:${theme('thread.articleTitle')};
4854
font-weight: bold;
49-
margin-left: 2px;
50-
margin-right: 2px;
55+
margin-left: 4px;
5156
`
Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
importstyledfrom'styled-components'
2+
3+
importImgfrom'@/Img'
4+
import{theme,css}from'@/utils'
5+
6+
importImgFallbackfrom'@/components/ImgFallback'
7+
import{getLiSize,getAvatarSize}from'./metric'
8+
importtype{TAvatarSize}from'../spec'
9+
10+
import{AvatarsWrapper}from'./index'
11+
12+
// height: 49px;
13+
typeTWrapper={size:TAvatarSize}
14+
exportconstWrapper=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+
typeTAvatarsImg={size:string;onClick:()=>void;scrollPosition:any}
34+
exportconstAvatarsImg=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+
typeTAvatarsMore={size:TAvatarSize;total:number}
50+
exportconstAvatarsMore=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+
exportconstAvatarFallback=styled(ImgFallback)`
70+
border: 1px solid;
71+
border-color: #113744;
72+
`
73+
exportconstUserPopContent=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
importtype{TPost}from'@/spec'
44
import{ICON}from'@/config'
55

6-
importTooltipfrom'@/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
typeTProps={
179
item:TPost
@@ -20,20 +12,10 @@ type TProps = {
2012
constActiveBadge:React.FC<TProps>=({ item})=>{
2113
return(
2214
<WrapperhasComments={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-
<Iconsrc={`${ICON}/shape/activity.svg`}/>
34-
4天前
35-
</ItemInner>
36-
</Tooltip>
15+
<ItemInnertitle="最后回复: 2020-03-11 14:33">
16+
<Iconsrc={`${ICON}/shape/activity.svg`}/>
17+
4天前
18+
</ItemInner>
3719
</Wrapper>
3820
)
3921
}

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp