refactor(avatars-row): adjust popover & animation

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<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}>

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<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

src/components/AvatarsRow/index.tsx

@@ -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')
@@ -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>
   )
 }

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 }>`
@@ -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')};
@@ -82,7 +40,3 @@ export const AvatarsMore = styled.span<TAvatarsMore>`
     cursor: pointer;
   }
 `
-export const AvatarFallback = styled(ImgFallback)`
-  border: 1px solid;
-  border-color: #113744;
-`

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;
   }
@@ -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)};
@@ -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;
 `

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<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;
+`

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<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>
   )
 }