chore: avatars group rename (#1318)

mydearxym · web-flow · commit 875c2673b0e2 · 2022-05-15T23:06:14.000+08:00
* style(avatar): adjust more item padding/color

* style(about-thread): adjust sidebar style

* style(publish): add publish icon

* style(about-thread): adjust title/desc font &amp; margin

* refactor(renaming): AvatarsRow -&gt; AvatarsGroup

* style(drawer): adjust animation feel

* style(drawer): turning animation feel
diff --git a/src/containers/content/WorksContent/index.tsx b/src/containers/content/WorksContent/index.tsx
@@ -12,7 +12,7 @@ import { buildLog } from '@/utils/logger'
 import { bond } from '@/utils/mobx'
 
 import Pagi from '@/widgets/Pagi'
-// import AvatarsRow from '@/widgets/AvatarsRow'
+// import AvatarsGroup from '@/widgets/AvatarsGroup'
 
 import type { TStore } from './store'
 
@@ -64,7 +64,7 @@ const WorksContentContainer: FC<TProps> = ({
           <Pagi margin={{ top: '60px', bottom: '80px' }} />
           {/* <PagiInfo>
               <PagiInfoTitle>活跃用户</PagiInfoTitle>
-              <AvatarsRow users={tmpUsers} total={10} showTotalNumber />
+              <AvatarsGroup users={tmpUsers} total={10} showTotalNumber />
             </PagiInfo> */}
         </MainContent>
         {!isMobile && <RightSidebar showSidebar={showSidebar} />}
diff --git a/src/containers/thread/AboutThread/Sidebar.tsx b/src/containers/thread/AboutThread/Sidebar.tsx
@@ -21,7 +21,7 @@ const Sidebar: FC = () => {
       <Block>
         <Title>官方主页</Title>
         <Desc>
-          <Linker src="https://groupher.com" left={-2} />
+          <Linker src="https://groupher.com" left={-2} top={12} />
         </Desc>
       </Block>
       <Block>
diff --git a/src/containers/thread/AboutThread/styles/index.ts b/src/containers/thread/AboutThread/styles/index.ts
@@ -16,33 +16,33 @@ export const MainWrapper = styled.div`
 
   background: transparent;
   border-radius: 6px;
-  margin-top: 14px;
-  padding-left: 25px;
+  margin-top: 25px;
+  padding-left: 22px;
 `
 export const Block = styled.div`
   margin-bottom: 30px;
   padding-bottom: 30px;
   border-bottom: 1px solid;
   border-bottom-color: ${theme('border')};
-  width: 660px;
+  width: 620px;
 `
 export const IntroBlock = styled(Block)`
   padding-right: 20px;
 `
 export const StateBlock = styled(Block)`
-  padding-right: 10px;
+  padding-right: 0;
 `
 export const MemberBlock = styled(Block)`
   border-bottom: none;
 `
 export const Title = styled.div`
-  font-size: 14px;
+  font-size: 16px;
   color: ${theme('thread.articleDigest')};
   font-weight: 600;
   margin-bottom: 15px;
 `
 export const Desc = styled.div`
-  font-size: 14px;
+  font-size: 15px;
   color: ${theme('thread.articleDigest')};
   line-height: 1.8;
 `
diff --git a/src/containers/thread/AboutThread/styles/members/index.ts b/src/containers/thread/AboutThread/styles/members/index.ts
@@ -25,7 +25,7 @@ export const Header = styled.div`
   margin-bottom: 30px;
 `
 export const Title = styled.div`
-  font-size: 14px;
+  font-size: 16px;
   color: ${theme('thread.articleDigest')};
   font-weight: 600;
 `
diff --git a/src/containers/thread/AboutThread/styles/sidebar.ts b/src/containers/thread/AboutThread/styles/sidebar.ts
@@ -5,15 +5,13 @@ import css, { theme } from '@/utils/css'
 export const Wrapper = styled.div`
   width: 300px;
   height: auto;
-  /* background: #f1f3f4; */
-  border: 1px solid;
-  border-color: ${theme('border')};
-  border-radius: 5px;
-  padding: 20px;
-  padding-top: 24px;
+  border-left: 1px solid;
+  border-left-color: ${theme('border')};
+  padding-left: 40px;
+  padding-top: 10px;
   padding-bottom: 0;
-  margin-top: 18px;
-  margin-left: 80px;
+  margin-top: 19px;
+  margin-left: 60px;
 `
 export const Block = styled.div`
   margin-bottom: 20px;
diff --git a/src/containers/thread/KanbanThread/Actions.tsx b/src/containers/thread/KanbanThread/Actions.tsx
@@ -4,7 +4,7 @@ import { ICON } from '@/config'
 import { mockUsers } from '@/utils/mock'
 
 import { IconSwitcher } from '@/widgets/Switcher'
-import AvatarsRow from '@/widgets/AvatarsRow'
+import AvatarsGroup from '@/widgets/AvatarsGroup'
 import { Space } from '@/widgets/Common'
 
 import {
@@ -51,7 +51,7 @@ const Actions: FC = () => {
         </ModeWrapper>
         <Space right={20} />
         <JoinTitle>参与者</JoinTitle>
-        <AvatarsRow size="medium" users={mockUsers(6)} total={20} />
+        <AvatarsGroup size="medium" users={mockUsers(6)} total={20} />
         {/* <Space right={25} /> */}
         {/* <NewButton size="medium">
           <BtnText>新增</BtnText>
diff --git a/src/containers/tool/Drawer/Viewer/DesktopView.tsx b/src/containers/tool/Drawer/Viewer/DesktopView.tsx
@@ -29,8 +29,7 @@ const DesktopView: FC<TProps> = ({
   articleNavi,
   children,
 }) => {
-  const visible2 = false
-
+  console.log('--> visible --> ', visible)
   return (
     <Fragment>
       <DrawerOverlay
diff --git a/src/containers/tool/Drawer/styles/index.ts b/src/containers/tool/Drawer/styles/index.ts
@@ -28,8 +28,8 @@ export const DrawerOverlay = styled.div<TActive>`
   background: ${({ visible }) => (visible ? theme('drawer.mask') : 'none')};
   opacity: ${({ visible }) => (visible ? 0.5 : 0)};
 
-  transition: visibility 0.25s linear, opacity 0.2s linear,
-    background 0.5s linear;
+  transition: visibility 0.1s ease-in, opacity 0.1s ease-in,
+    background 0.1s ease-in;
 `
 // see https://stackoverflow.com/questions/60079950/when-do-i-use-attrs-vs-passing-props-directly-with-styled-components
 
@@ -91,7 +91,7 @@ export const DrawerWrapper = styled.div.attrs(
 
   will-change: transform, max-width, opacity;
   // 在宽屏时滑出来时，是从内容页而不是实际的 window 页滑出, 加 delay 可以在视觉上抵消从外部滑入的跳动感
-  transition-delay: 0s, 0s, 0.06s;
+  transition-delay: 0s, 0s, 0.14s;
 
   ${css.media.mobile`
     right: 0;
diff --git a/src/containers/unit/Comments/HeadBar/PublishBar.tsx b/src/containers/unit/Comments/HeadBar/PublishBar.tsx
@@ -9,7 +9,7 @@ import {
   Avatar,
   UserName,
   ActionsWrapper,
-  EditIcon,
+  Publishcon,
 } from '../styles/head_bar/publish_bar'
 
 type TProps = {
@@ -35,7 +35,7 @@ const PublishBar: FC<TProps> = ({ closeEditor }) => {
         </Button>
 
         <Button size="small" space={10}>
-          <EditIcon />
+          <Publishcon />
           发布
         </Button>
       </ActionsWrapper>
diff --git a/src/containers/unit/Comments/styles/head_bar/publish_bar.ts b/src/containers/unit/Comments/styles/head_bar/publish_bar.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 import css, { theme } from '@/utils/css'
-import EditPenSVG from '@/icons/EditPen'
+import EditPublishSVG from '@/icons/EditPublish'
 import Img from '@/Img'
 
 export const Wrapper = styled.div`
@@ -22,8 +22,8 @@ export const UserName = styled.div`
 export const ActionsWrapper = styled.div`
   ${css.flex('align-center')};
 `
-export const EditIcon = styled(EditPenSVG)`
-  ${css.size(12)};
+export const Publishcon = styled(EditPublishSVG)`
+  ${css.size(13)};
   fill: white;
-  margin-right: 5px;
+  margin-right: 6px;
 `
diff --git a/src/widgets/AvatarsGroup/MoreItem.tsx b/src/widgets/AvatarsGroup/MoreItem.tsx
diff --git a/src/widgets/AvatarsGroup/RealAvatar.tsx b/src/widgets/AvatarsGroup/RealAvatar.tsx
diff --git a/src/widgets/AvatarsGroup/RealNumber.tsx b/src/widgets/AvatarsGroup/RealNumber.tsx
diff --git a/src/widgets/AvatarsGroup/index.tsx b/src/widgets/AvatarsGroup/index.tsx
@@ -1,6 +1,6 @@
 /*
  *
- * AvatarsRow
+ * AvatarsGroup
  *
  */
 
@@ -49,7 +49,7 @@ export const RealAvatar = dynamic(() => import('./RealAvatar'), {
 })
 
 /* eslint-disable-next-line */
-const log = buildLog('c:AvatarsRow:index')
+const log = buildLog('c:AvatarsGroup:index')
 
 const validUser = compose(not, isNil)
 
@@ -83,7 +83,7 @@ export type TProps = {
   onTotalSelect?: () => void
 }
 
-const AvatarsRow: FC<TProps> = ({
+const AvatarsGroup: FC<TProps> = ({
   size = SIZE.SMALL,
   total = null,
   users = [],
@@ -151,4 +151,4 @@ const AvatarsRow: FC<TProps> = ({
   )
 }
 
-export default trackWindowScroll(AvatarsRow)
+export default trackWindowScroll(AvatarsGroup)
diff --git a/src/widgets/AvatarsGroup/spec.d.ts b/src/widgets/AvatarsGroup/spec.d.ts
diff --git a/src/widgets/AvatarsGroup/styles/index.ts b/src/widgets/AvatarsGroup/styles/index.ts
diff --git a/src/widgets/AvatarsGroup/styles/metric.ts b/src/widgets/AvatarsGroup/styles/metric.ts
@@ -47,8 +47,8 @@ export const getTotalCountSize = (total: number): string => {
 }
 
 export const getMoreTextWidth = (total: number): string => {
-  if (total < 10) return '23px'
-  if (total >= 10 && total <= 99) return '32px'
+  if (total < 10) return '22px'
+  if (total >= 10 && total <= 99) return '28px'
   if (total >= 100 && total <= 999) return '44px'
 
   return '52px'
diff --git a/src/widgets/AvatarsGroup/styles/more_item.ts b/src/widgets/AvatarsGroup/styles/more_item.ts
diff --git a/src/widgets/AvatarsGroup/styles/real_avatar.ts b/src/widgets/AvatarsGroup/styles/real_avatar.ts
@@ -56,7 +56,7 @@ export const AvatarsMore = styled.span<TAvatarsMore>`
   min-width: ${({ size }) => getAvatarSize(size)};
   height: ${({ size }) => getAvatarSize(size)};
 
-  padding-left: ${({ total }) => (total >= 1000 ? '5px' : '3px')};
+  padding-left: ${({ total }) => (total >= 1000 ? '5px' : '0')};
   padding-top: 1px;
 
   &:hover {
diff --git a/src/widgets/AvatarsGroup/styles/real_number.ts b/src/widgets/AvatarsGroup/styles/real_number.ts
@@ -12,9 +12,11 @@ export const Wrapper = styled(AvatarsMore)<TWrapper>`
   height: ${({ size }) => getAvatarSize(size)};
   width: ${({ total }) => getMoreTextWidth(total)};
   font-weight: 400;
-  padding-left: 2px;
+  padding-left: 1px;
+  padding-top: 0.5px;
   margin-left: 4px;
   border-radius: 0 10px 10px 0;
+  font-size: 13px;
 `
 export const HighlightNumber = styled.div`
   font-weight: 500;
diff --git a/src/widgets/AvatarsGroup/tests/index.test.ts b/src/widgets/AvatarsGroup/tests/index.test.ts
@@ -1,9 +1,9 @@
 // import React from 'react'
 // import { shallow } from 'enzyme'
 
-// import AvatarsRow from '../index'
+// import AvatarsGroup from '../index'
 
-describe('<AvatarsRow />', () => {
+describe('<AvatarsGroup />', () => {
   it('TODO: Expect to have unit tests specified', () => {
     expect(true).toEqual(true)
   })
diff --git a/src/widgets/Icons/EditPublish.tsx b/src/widgets/Icons/EditPublish.tsx
@@ -0,0 +1,16 @@
+import { FC } from 'react'
+
+const EditPublish: FC = (props) => (
+  <svg
+    className="icon"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    width={200}
+    height={200}
+    {...props}
+  >
+    <path d="m840.533 132.267-691.2 401.066c-25.6 17.067-25.6 51.2 4.267 64L311.467 665.6 742.4 285.867c8.533-8.534 21.333 4.266 12.8 12.8L392.533 738.133V857.6c0 34.133 42.667 51.2 64 25.6L550.4 768l187.733 76.8c21.334 8.533 46.934-4.267 51.2-25.6L896 170.667c4.267-29.867-29.867-51.2-55.467-38.4z" />
+  </svg>
+)
+
+export default EditPublish
diff --git a/src/widgets/PostItem/DesktopView/Header.tsx b/src/widgets/PostItem/DesktopView/Header.tsx
@@ -6,7 +6,7 @@ import { EVENT } from '@/constant'
 
 import { send } from '@/utils/helper'
 
-import AvatarsRow from '@/widgets/AvatarsRow'
+import AvatarsGroup from '@/widgets/AvatarsGroup'
 // import TagsList from '@/widgets/TagsList'
 
 import {
@@ -39,7 +39,7 @@ const Header: FC<TProps> = ({ item }) => {
         <TagsList items={item.articleTags} left={12} />
       </Brief>
       <AvatarsWrapper>
-        <AvatarsRow
+        <AvatarsGroup
           users={item.commentsParticipants}
           total={item.commentsCount}
         />
diff --git a/src/widgets/Tooltip/index.tsx b/src/widgets/Tooltip/index.tsx
@@ -41,7 +41,7 @@ export type TProps = {
   noPadding?: boolean
   showArrow?: boolean
   behavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
-  // currently only for AvatarsRow, it will collapse the height
+  // currently only for AvatarsGroup, it will collapse the height
   // for same reason, figure out later
   contentHeight?: string
 
diff --git a/src/widgets/Upvote/DefaultLayout.tsx b/src/widgets/Upvote/DefaultLayout.tsx
@@ -11,7 +11,7 @@ import type { TUser } from '@/spec'
 import { buildLog } from '@/utils/logger'
 
 import { Space } from '@/widgets/Common'
-import AvatarsRow from '@/widgets/AvatarsRow'
+import AvatarsGroup from '@/widgets/AvatarsGroup'
 
 import UpvoteBtn from './UpvoteBtn'
 import Desc from './Desc'
@@ -61,7 +61,7 @@ const Upvote: FC<TProps> = ({
       <Count noOne={noOne}>{count}</Count>
       {!noOne && <LineDivider />}
       {!noOne && !isMobile && (
-        <AvatarsRow users={avatarList} showMore={false} />
+        <AvatarsGroup users={avatarList} showMore={false} />
       )}
       {!noOne && (
         <Desc
diff --git a/src/widgets/Upvote/KanbanLayout.tsx b/src/widgets/Upvote/KanbanLayout.tsx
@@ -11,7 +11,7 @@ import type { TUser } from '@/spec'
 import { buildLog } from '@/utils/logger'
 
 import { Space } from '@/widgets/Common'
-import AvatarsRow from '@/widgets/AvatarsRow'
+import AvatarsGroup from '@/widgets/AvatarsGroup'
 
 import UpvoteBtn from './UpvoteBtn'
 
@@ -59,7 +59,7 @@ const Upvote: FC<TProps> = ({
       <Space right={3} />
       <Count noOne={noOne}>{count}</Count>
       {!noOne && <LineDivider />}
-      {!noOne && !isMobile && <AvatarsRow users={avatarList} showMore />}
+      {!noOne && !isMobile && <AvatarsGroup users={avatarList} showMore />}
     </Wrapper>
   )
 }
diff --git a/src/widgets/Upvote/StickerLayout.tsx b/src/widgets/Upvote/StickerLayout.tsx
@@ -11,7 +11,7 @@ import { buildLog } from '@/utils/logger'
 
 import { UPVOTE_LAYOUT } from '@/constant'
 import AnimatedCount from '@/widgets/AnimatedCount'
-import AvatarsRow from '@/widgets/AvatarsRow'
+import AvatarsGroup from '@/widgets/AvatarsGroup'
 
 import UpvoteBtn from './UpvoteBtn'
 import {
@@ -54,7 +54,7 @@ const Upvote: FC<TProps> = ({
       </CountWrapper>
 
       <AvatarsWrapper count={count}>
-        <AvatarsRow users={avatarList} showMore={false} limit={3} />
+        <AvatarsGroup users={avatarList} showMore={false} limit={3} />
       </AvatarsWrapper>
     </Wrapper>
   )
diff --git a/src/widgets/Upvote/WorksArticleLayout.tsx b/src/widgets/Upvote/WorksArticleLayout.tsx
@@ -10,7 +10,7 @@ import type { TUser } from '@/spec'
 import { buildLog } from '@/utils/logger'
 import { SIZE, UPVOTE_LAYOUT } from '@/constant'
 
-import AvatarsRow from '@/widgets/AvatarsRow'
+import AvatarsGroup from '@/widgets/AvatarsGroup'
 import AnimatedCount from '@/widgets/AnimatedCount'
 
 import Desc from './Desc'
@@ -69,7 +69,7 @@ const Upvote: FC<TProps> = ({
       <DescWrapper>
         {!noOne && (
           <Avatars>
-            <AvatarsRow
+            <AvatarsGroup
               users={avatarList}
               showMore={false}
               limit={7}
diff --git a/src/widgets/Upvote/styles/post_list_layout.ts b/src/widgets/Upvote/styles/post_list_layout.ts
@@ -16,6 +16,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 `
 export const UpWrapper = styled.div`
   margin-left: 7px;
+  transform: scale(0.95);
 `
 export const CountWrapper = styled.div`
   margin-top: -6px;
diff --git a/utils/themes/skins/github.ts b/utils/themes/skins/github.ts
@@ -53,7 +53,7 @@ const github = {
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: '#FFFEDE',
-  textBadge: '#f5f5f5',
+  textBadge: '#f6f6f6',
 
   gtdBadge: {
     feat: '#3871e0',

Original file line number	Diff line number	Diff line change
@@ -16,33 +16,33 @@ export const MainWrapper = styled.div`
`16`	`16`
`17`	`17`	`background: transparent;`
`18`	`18`	`border-radius: 6px;`
`19`		`- margin-top: 14px;`
`20`		`- padding-left: 25px;`
	`19`	`+ margin-top: 25px;`
	`20`	`+ padding-left: 22px;`
`21`	`21`	`
`22`	`22`	export const Block = styled.div`
`23`	`23`	`margin-bottom: 30px;`
`24`	`24`	`padding-bottom: 30px;`
`25`	`25`	`border-bottom: 1px solid;`
`26`	`26`	`border-bottom-color: ${theme('border')};`
`27`		`- width: 660px;`
	`27`	`+ width: 620px;`
`28`	`28`	`
`29`	`29`	export const IntroBlock = styled(Block)`
`30`	`30`	`padding-right: 20px;`
`31`	`31`	`
`32`	`32`	export const StateBlock = styled(Block)`
`33`		`- padding-right: 10px;`
	`33`	`+ padding-right: 0;`
`34`	`34`	`
`35`	`35`	export const MemberBlock = styled(Block)`
`36`	`36`	`border-bottom: none;`
`37`	`37`	`
`38`	`38`	export const Title = styled.div`
`39`		`- font-size: 14px;`
	`39`	`+ font-size: 16px;`
`40`	`40`	`color: ${theme('thread.articleDigest')};`
`41`	`41`	`font-weight: 600;`
`42`	`42`	`margin-bottom: 15px;`
`43`	`43`	`
`44`	`44`	export const Desc = styled.div`
`45`		`- font-size: 14px;`
	`45`	`+ font-size: 15px;`
`46`	`46`	`color: ${theme('thread.articleDigest')};`
`47`	`47`	`line-height: 1.8;`
`48`	`48`	`
Original file line number	Diff line number	Diff line change
@@ -25,7 +25,7 @@ export const Header = styled.div`
`25`	`25`	`margin-bottom: 30px;`
`26`	`26`	`
`27`	`27`	export const Title = styled.div`
`28`		`- font-size: 14px;`
	`28`	`+ font-size: 16px;`
`29`	`29`	`color: ${theme('thread.articleDigest')};`
`30`	`30`	`font-weight: 600;`
`31`	`31`	`