refactor(facepile): adjust more item (#1327)

Author: mydearxym

src/containers/thread/KanbanThread/Actions.tsx

@@ -51,7 +51,12 @@ const Actions: FC = () => {
         </ModeWrapper>
         <Space right={20} />
         <JoinTitle>参与者</JoinTitle>
-        <Facepile size="medium" users={mockUsers(6)} total={20} />
+        <Facepile
+          size="medium"
+          users={mockUsers(6)}
+          total={20}
+          showTotalNumber
+        />
         {/* <Space right={25} /> */}
         {/* <NewButton size="medium">
           <BtnText>新增</BtnText>

src/widgets/Facepile/MoreItem.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 
-import { Br } from '@/widgets/Common'
-import Tooltip from '@/widgets/Tooltip'
+// import { Br } from '@/widgets/Common'
+// import Tooltip from '@/widgets/Tooltip'
 
 import type { TProps as TAvatarsProps } from './index'
 
@@ -11,9 +11,9 @@ import {
   Wrapper,
   TextMore,
   DotText,
-  StateInfoWrapper,
-  TotalCommentStateHint,
-  Focus,
+  // StateInfoWrapper,
+  // TotalCommentStateHint,
+  // Focus,
 } from './styles/more_item'
 
 type TProps = Pick<
@@ -29,7 +29,15 @@ const MoreItem: FC<TProps> = ({
 }) => {
   return (
     <Wrapper size={size} onClick={() => onTotalSelect()}>
-      <Tooltip
+      {!showTotalNumber ? (
+        <TextMore size={size} total={total}>
+          <DotText>..</DotText>
+        </TextMore>
+      ) : (
+        <RealNumber total={total} size={size} />
+      )}
+
+      {/* <Tooltip
         content={
           showTotalNumber ? (
             '更多'
@@ -49,14 +57,8 @@ const MoreItem: FC<TProps> = ({
         placement="bottom-end"
         noPadding
       >
-        {showTotalNumber ? (
-          <TextMore size={size} total={total}>
-            <DotText>...</DotText>
-          </TextMore>
-        ) : (
-          <RealNumber total={total} size={size} />
-        )}
-      </Tooltip>
+        <div>...</div>
+      </Tooltip> */}
     </Wrapper>
   )
 }

src/widgets/Facepile/RealNumber.tsx

@@ -10,7 +10,7 @@ type TProps = Pick<TAvatarsProps, 'size' | 'total'>
 const RealNumber: FC<TProps> = ({ total, size }) => {
   return (
     <Wrapper total={total} size={size}>
-      {total > 15 ? (
+      {total > 100 ? (
         <HighlightNumber>{prettyNum(total)}</HighlightNumber>
       ) : (
         <Fragment>{prettyNum(total)}</Fragment>

src/widgets/Facepile/styles/index.ts

@@ -23,18 +23,15 @@ export const TotalOneOffset = styled.span`
 `
 type TAvatarsMore = { size: TAvatarSize; total: number }
 export const AvatarsMore = styled.span<TAvatarsMore>`
+  ${({ size }) => css.circle(getAvatarSize(size))};
   ${css.flex('align-both')};
   font-size: 14px;
-  border-color: ${theme('textBadge')}; // to-theme
+  border-color: ${theme('textBadge')};
   color: ${theme('thread.articleTitle')};
-  background-color: ${theme('textBadge')}; // to-theme
-  border-radius: 100px 100px 100px 100px;
+  background-color: ${theme('textBadge')};
   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 {

src/widgets/Facepile/styles/more_item.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 
 import css, { theme } from '@/utils/css'
+import { pixelAdd } from '@/utils/dom'
 
 import { Wrapper as BaseWrapper, AvatarsMore } from './index'
 import { getAvatarSize } from './metric'
@@ -13,7 +14,7 @@ const BaseAvatarItem = styled.li<{ size: string }>`
   z-index: 0;
   ${BaseWrapper}:hover & {
     margin-left: 0;
-    z-index: 1;
+    z-index: 0;
   }
 `
 export const Wrapper = styled(BaseAvatarItem)`
@@ -22,9 +23,16 @@ export const Wrapper = styled(BaseAvatarItem)`
 export const TextMore = styled(AvatarsMore)`
   font-size: 20px;
   padding-left: 4px;
+
+  ${({ size }) => css.circle(pixelAdd(getAvatarSize(size) as string, -2))};
+  ${css.flex('align-both')};
+  margin-left: 1px;
 `
 export const DotText = styled.div`
-  margin-top: -8px;
+  color: ${theme('thread.articleTitle')};
+  margin-top: -10px;
+  letter-spacing: -1px;
+  padding-right: 2px;
 `
 export const StateInfoWrapper = styled.div`
   width: 95px;

src/widgets/Facepile/styles/real_avatar.ts

@@ -14,7 +14,6 @@ export const Wrapper = styled.li<TWrapper>`
   padding: 0px 0px 0px 0px;
   position: relative;
   width: ${({ size }) => getLiSize(size)};
-  /* z-index: 2; */
 
   &:hover {
     z-index: 3;

src/widgets/Facepile/styles/real_number.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 
 import { theme } from '@/utils/css'
+import { pixelAdd } from '@/utils/dom'
 
 import { AvatarsMore } from './index'
 import { getAvatarSize, getMoreTextWidth } from './metric'
@@ -9,13 +10,14 @@ type TWrapper = { size: string; total: number }
 export const Wrapper = styled(AvatarsMore)<TWrapper>`
   background-color: ${theme('textBadge')};
   color: ${theme('thread.articleTitle')};
-  height: ${({ size }) => getAvatarSize(size)};
+  height: ${({ size }) => pixelAdd(getAvatarSize(size) as string, -2)};
+  min-height: ${({ size }) => pixelAdd(getAvatarSize(size) as string, -2)};
   width: ${({ total }) => getMoreTextWidth(total)};
+  min-width: ${({ total }) => getMoreTextWidth(total)};
   font-weight: 400;
   padding-left: 1px;
-  padding-top: 0.5px;
   margin-left: 4px;
-  border-radius: 0 10px 10px 0;
+  border-radius: 100%;
   font-size: 13px;
 `
 export const HighlightNumber = styled.div`