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.

refactor(avatars-row): adjust popover & animation#1065

Merged
mydearxym merged 3 commits intodevfromadjust-avatars-raw-popover
Apr 22, 2021
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletionssrc/components/AvatarsRow/MoreItem.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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'
Expand All@@ -10,6 +11,7 @@ import {
NumbersMore,
TextMore,
DotText,
StateInfoWrapper,
TotalCommentStateHint,
Focus,
} from './styles/more_item'
Expand All@@ -32,11 +34,20 @@ const MoreItem: React.FC<TProps> = ({
showTotalNumber ? (
'更多'
) : (
<TotalCommentStateHint>
共 <Focus>{total}</Focus> 条评论
</TotalCommentStateHint>
<StateInfoWrapper>
<TotalCommentStateHint>
评论: <Focus>{total}</Focus>
</TotalCommentStateHint>
<Br top={5} />
<TotalCommentStateHint>
参与者: <Focus>{total}</Focus>
</TotalCommentStateHint>
</StateInfoWrapper>
)
}
delay={500}
placement="bottom-end"
noPadding
>
{showTotalNumber ? (
<TextMore size={size} total={total}>
Expand Down
50 changes: 50 additions & 0 deletionssrc/components/AvatarsRow/RealAvatar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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<TProps> = ({ user, size, onUserSelect }) => {
return (
<Tooltip
content={<UserPopContent>{user.nickname}</UserPopContent>}
delay={200}
contentHeight={getAvatarSize(size, 'number') as string}
showArrow={false}
noPadding
>
<Wrapper key={user.id} size={size}>
<AvatarsImg
src={user.avatar}
size={size}
onClick={() => onUserSelect(user)}
scrollPosition={null}
fallback={
<AvatarFallback
size={getAvatarSize(size, 'number') as number}
user={user}
/>
}
/>
</Wrapper>
</Tooltip>
)
}

export default RealAvatar
50 changes: 18 additions & 32 deletionssrc/components/AvatarsRow/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,19 +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,
AvatarsItem,
AvatarsImg,
AvatarFallback,
TotalOneOffset,
} from './styles'
import { Wrapper, AvatarsWrapper, TotalOneOffset } from './styles'

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

{slice(0, limit, sortedUsers).map((user) => (
<Tooltip
key={user.id}
content={user.nickname}
duration={0}
delay={300}
contentHeight={getAvatarSize(size, 'number') as string}
noPadding
>
<AvatarsItem size={size} noHoverMargin={total === 1}>
<AvatarsImg
src={user.avatar}
{total === 1 ? (
<RealAvatar
user={sortedUsers[0]}
size={size}
onUserSelect={onUserSelect}
/>
) : (
<AvatarsWrapper>
{slice(0, limit, sortedUsers).map((user) => (
<RealAvatar
key={user.id}
user={user}
size={size}
onClick={() => onUserSelect(user)}
scrollPosition={scrollPosition}
fallback={
<AvatarFallback
size={getAvatarSize(size, 'number') as number}
user={user}
/>
}
onUserSelect={onUserSelect}
/>
</AvatarsItem>
</Tooltip>
))}
))}
</AvatarsWrapper>
)}
</Wrapper>
)
}
Expand Down
54 changes: 4 additions & 50 deletionssrc/components/AvatarsRow/styles/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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 }>`
Expand All@@ -15,53 +13,13 @@ export const Wrapper = styled.ul<{ total: number }>`
padding: 0px 8px 0px 0px;
margin-right: ${({ total }) => getUlMarginRight(total)};
`
// height: 49px;
type TBaseAvatarItem = { size: TAvatarSize; noHoverMargin: boolean }
const BaseAvatarItem = styled.li<TBaseAvatarItem>`
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
width: ${({ size }) => getLiSize(size)};

&:hover {
margin-left: ${({ noHoverMargin }) => (noHoverMargin ? '0' : '10px')};
margin-right: ${({ noHoverMargin }) => (noHoverMargin ? '0' : '10px')};
transition-delay: 0.1s;
}
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);
}

transition: all 0.1s;
export const AvatarsWrapper = styled.div`
${css.flex()}
flex-direction: row-reverse;
`
export const TotalOneOffset = styled.span`
margin-right: 10px;
`
type TAvatarsImg = { size: string; onClick: () => void; scrollPosition: any }
export const AvatarsImg = styled(Img)<TAvatarsImg>`
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<TAvatarsMore>`
${css.flex('align-both')};
Expand All@@ -82,7 +40,3 @@ export const AvatarsMore = styled.span<TAvatarsMore>`
cursor: pointer;
}
`
export const AvatarFallback = styled(ImgFallback)`
border: 1px solid;
border-color: #113744;
`
13 changes: 9 additions & 4 deletionssrc/components/AvatarsRow/styles/more_item.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
}
Expand All@@ -21,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)<TNumbersMore>`
height: ${({ size }) => getAvatarSize(size)};
Expand All@@ -37,15 +39,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;
`
75 changes: 75 additions & 0 deletionssrc/components/AvatarsRow/styles/real_avatar.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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<TWrapper>`
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)<TAvatarsImg>`
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<TAvatarsMore>`
${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;
`
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -20,20 +12,10 @@ type TProps = {
const ActiveBadge: React.FC<TProps> = ({ item }) => {
return (
<Wrapper hasComments={item.commentsCount > 0}>
<Tooltip
content={
<PopContent>
<div>最后回复</div> <PopContentDate>2020-03-11</PopContentDate>
</PopContent>
}
placement="bottom"
noPadding
>
<ItemInner>
<Icon src={`${ICON}/shape/activity.svg`} />
4天前
</ItemInner>
</Tooltip>
<ItemInner title="最后回复: 2020-03-11 14:33">
<Icon src={`${ICON}/shape/activity.svg`} />
4天前
</ItemInner>
</Wrapper>
)
}
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp