Jul 16, 2021 · Jul 14, 2021 · Jul 14, 2021 · Jul 14, 2021 · Jul 15, 2021 · Jul 16, 2021
diff --git a/public/icons/static/article/share-solid.svg b/public/icons/static/article/share-solid.svg
diff --git a/public/icons/static/article/share.svg b/public/icons/static/article/share.svg
diff --git a/public/icons/static/shape/close-circle.svg b/public/icons/static/shape/close-circle.svg
diff --git a/public/icons/static/shape/close.svg b/public/icons/static/shape/close.svg
diff --git a/public/icons/static/shape/link-outside.svg b/public/icons/static/shape/link-outside.svg
diff --git a/public/icons/static/shape/more-l.svg b/public/icons/static/shape/more-l.svg
diff --git a/public/icons/static/shape/next-article-solid.svg b/public/icons/static/shape/next-article-solid.svg
diff --git a/public/icons/static/shape/next-article.svg b/public/icons/static/shape/next-article.svg
diff --git a/public/icons/static/shape/previous-article-solid.svg b/public/icons/static/shape/previous-article-solid.svg
diff --git a/public/icons/static/shape/previous-article.svg b/public/icons/static/shape/previous-article.svg
diff --git a/public/icons/static/social/global.svg b/public/icons/static/social/global.svg
diff --git a/public/icons/static/social/twitter.svg b/public/icons/static/social/twitter.svg
diff --git a/public/icons/static/social/wechat-solid.svg b/public/icons/static/social/wechat-solid.svg
diff --git a/public/icons/static/social/wechat.svg b/public/icons/static/social/wechat.svg
diff --git a/public/icons/static/social/zhihu.svg b/public/icons/static/social/zhihu.svg
diff --git a/public/icons/static/social/zhihu.svg.1 b/public/icons/static/social/zhihu.svg.1
diff --git a/src/components/AvatarsRow/styles/more_item.ts b/src/components/AvatarsRow/styles/more_item.ts

 type TNumbersMore = { size: string; total: number }
 export const NumbersMore = styled(AvatarsMore)<TNumbersMore>`
  color: ${theme('thread.articleTitle')};
  height: ${({ size }) => getAvatarSize(size)};
  width: ${({ total }) => getMoreTextWidth(total)};
  font-weight: 400;
diff --git a/src/components/Buttons/IconButton.tsx b/src/components/Buttons/IconButton.tsx
 import { FC, memo, ReactNode } from 'react'

 import { ICON } from '@/config'

 import Tooltip from '@/components/Tooltip'
 import { Wrapper, Icon, Hint } from './styles/icon_button'

 export type TProps = {
  path: string
  size?: number
  mRight?: number
  mLeft?: number
  mTop?: number
  mBottom?: number
  dimWhenIdle?: boolean
  active?: boolean
  hint?: ReactNode | null
  hintDelay?: number
  hintPlacement?: 'top' | 'bottom'
  onClick?: () => void
 }

 const IconButton: FC<TProps> = ({
  path,
  size = 16,
  mLeft = 0,
  mRight = 10,
  mTop = 0,
  mBottom = 0,
  active = false,
  dimWhenIdle = false,
  hint = null,
  hintDelay = 1000,
  hintPlacement = 'top',
  onClick = console.log,
 }) => {
  return (
    <Wrapper
      size={size}
      mRight={mRight}
      mLeft={mLeft}
      mTop={mTop}
      mBottom={mBottom}
      onClick={onClick}
    >
      {hint ? (
        <Tooltip
          placement={hintPlacement}
          content={<Hint>{hint}</Hint>}
          noPadding
          delay={hintDelay}
        >
          <Icon
            src={`${ICON}/${path}`}
            size={size}
            $active={active}
            dimWhenIdle={dimWhenIdle}
          />
        </Tooltip>
      ) : (
        <Icon
          src={`${ICON}/${path}`}
          size={size}
          $active={active}
          dimWhenIdle={dimWhenIdle}
        />
      )}
    </Wrapper>
  )
 }

 export default memo(IconButton)
diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx
 export { default as NotifyButton } from './NotifyButton'
 export { default as FollowButton } from './FollowButton'
 export { default as YesOrNoButtons } from './YesOrNoButtons'
 export { default as IconButton } from './IconButton'
diff --git a/src/components/Buttons/styles/icon_button.ts b/src/components/Buttons/styles/icon_button.ts
 import styled from 'styled-components'

 import type { TActive, TSpace } from '@/spec'

 import Img from '@/Img'
 import { css, theme } from '@/utils'

 import type { TProps as TIconButtonProps } from '../IconButton'

 type TWrapper = Omit<TIconButtonProps, 'path'>
 export const Wrapper = styled.div<TWrapper>`
  position: relative;
  ${css.flex('align-both')};
  width: ${({ size }) => `${size}px`};
  height: ${({ size }) => `${size}px`};

  margin-left: ${({ mLeft }) => `${mLeft}px`};
  margin-right: ${({ mRight }) => `${mRight}px`};
  margin-top: ${({ mTop }) => `${mTop}px`};
  margin-bottom: ${({ mBottom }) => `${mBottom}px`};
 `

 type TIcon = { size: number; dimWhenIdle: boolean } & TSpace & TActive
 export const Icon = styled(Img)<TIcon>`
  fill: ${({ $active }) =>
    $active ? '#00a59b' : theme('thread.articleDigest')};
  display: block;
  width: ${({ size }) => `${size}px`};
  height: ${({ size }) => `${size}px`};

  opacity: ${({ dimWhenIdle }) => (dimWhenIdle ? 0.7 : 1)};

  &:hover {
    fill: #00a59b;
    opacity: 1;
    cursor: pointer;
  }

  transition: fill 0.2s;
 `

 export const Hint = styled.div`
  color: ${theme('thread.articleDigest')};
  text-align: center;
  min-width: 80px;
  padding: 5px;
 `
diff --git a/src/components/Buttons/styles/metircs/arrow_button.ts b/src/components/Buttons/styles/metircs/arrow_button.ts
 const MEDIUM_SIZE = 16
 const LARGE_SIZE = 18

 const TINY_MARGIN =6
 const TINY_MARGIN_HOVER =10
 const TINY_MARGIN =4
 const TINY_MARGIN_HOVER =7

 const SMALL_MARGIN = 6
 const SMALL_MARGIN_HOVER = 10
diff --git a/src/components/GotoTop/index.js b/src/components/GotoTop/index.js
diff --git a/src/components/GotoTop/index.tsx b/src/components/GotoTop/index.tsx
 /*
 *
 * GotoTop
 *
 */

 import { FC, memo } from 'react'

 import { scrollToHeader } from '@/utils'

 import { IconButton } from '@/components/Buttons'
 import { Wrapper } from './styles'

 type TProps = {
  testid?: string
 }

 const GotoTop: FC<TProps> = ({ testid }) => {
  return (
    <Wrapper testid={testid} onClick={scrollToHeader}>
      <IconButton
        path="shape/air-balloon.svg"
        hint="回到顶部"
        size={20}
        mLeft={5}
      />
    </Wrapper>
  )
 }

 export default memo(GotoTop)
diff --git a/src/components/GotoTop/styles/index.ts b/src/components/GotoTop/styles/index.ts
 import styled from 'styled-components'

 import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 import { css } from '@/utils'

 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
  'data-test-id': testid,
 }))<TTestable>`
  ${css.flex('align-both')};
  ${css.size(30)};
  position: relative;
 `
 export const Icon = styled(Img)`
  fill: #1e687f;
  ${css.size(20)};
  display: block;
  &:hover {
    fill: #25807d;
    cursor: pointer;
  }
 `
 export const Hint = styled.div`
  color: ${theme('thread.articleDigest')};
  position: absolute;
  right: -55px;
  font-size: 12px;
  opacity: 0;

  ${Wrapper}:hover & {
    opacity: 1;
  }
  transition: opacity 0.25s;
  transition-delay: 0.5s;
  ${css.flex('align-both')};
 `
 export const holder = 1
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,6 +25,7 @@ export const Wrapper = styled(BaseAvatarItem)`

		type TNumbersMore = { size: string; total: number }
		export const NumbersMore = styled(AvatarsMore)<TNumbersMore>`
		color: ${theme('thread.articleTitle')};
		height: ${({ size }) => getAvatarSize(size)};
		width: ${({ total }) => getMoreTextWidth(total)};
		font-weight: 400;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,72 @@
		import { FC, memo, ReactNode } from 'react'

		import { ICON } from '@/config'

		import Tooltip from '@/components/Tooltip'
		import { Wrapper, Icon, Hint } from './styles/icon_button'

		export type TProps = {
		path: string
		size?: number
		mRight?: number
		mLeft?: number
		mTop?: number
		mBottom?: number
		dimWhenIdle?: boolean
		active?: boolean
		hint?: ReactNode \| null
		hintDelay?: number
		hintPlacement?: 'top' \| 'bottom'
		onClick?: () => void
		}

		const IconButton: FC<TProps> = ({
		path,
		size = 16,
		mLeft = 0,
		mRight = 10,
		mTop = 0,
		mBottom = 0,
		active = false,
		dimWhenIdle = false,
		hint = null,
		hintDelay = 1000,
		hintPlacement = 'top',
		onClick = console.log,
		}) => {
		return (
		<Wrapper
		size={size}
		mRight={mRight}
		mLeft={mLeft}
		mTop={mTop}
		mBottom={mBottom}
		onClick={onClick}
		>
		{hint ? (
		<Tooltip
		placement={hintPlacement}
		content={<Hint>{hint}</Hint>}
		noPadding
		delay={hintDelay}
		>
		<Icon
		src={`${ICON}/${path}`}
		size={size}
		$active={active}
		dimWhenIdle={dimWhenIdle}
		/>
		</Tooltip>
		) : (
		<Icon
		src={`${ICON}/${path}`}
		size={size}
		$active={active}
		dimWhenIdle={dimWhenIdle}
		/>
		)}
		</Wrapper>
		)
		}

		export default memo(IconButton)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,3 +8,4 @@ export { default as DropdownButton } from './DropdownButton'
		export { default as NotifyButton } from './NotifyButton'
		export { default as FollowButton } from './FollowButton'
		export { default as YesOrNoButtons } from './YesOrNoButtons'
		export { default as IconButton } from './IconButton'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,47 @@
		import styled from 'styled-components'

		import type { TActive, TSpace } from '@/spec'

		import Img from '@/Img'
		import { css, theme } from '@/utils'

		import type { TProps as TIconButtonProps } from '../IconButton'

		type TWrapper = Omit<TIconButtonProps, 'path'>
		export const Wrapper = styled.div<TWrapper>`
		position: relative;
		${css.flex('align-both')};
		width: ${({ size }) => `${size}px`};
		height: ${({ size }) => `${size}px`};

		margin-left: ${({ mLeft }) => `${mLeft}px`};
		margin-right: ${({ mRight }) => `${mRight}px`};
		margin-top: ${({ mTop }) => `${mTop}px`};
		margin-bottom: ${({ mBottom }) => `${mBottom}px`};
		`

		type TIcon = { size: number; dimWhenIdle: boolean } & TSpace & TActive
		export const Icon = styled(Img)<TIcon>`
		fill: ${({ $active }) =>
		$active ? '#00a59b' : theme('thread.articleDigest')};
		display: block;
		width: ${({ size }) => `${size}px`};
		height: ${({ size }) => `${size}px`};

		opacity: ${({ dimWhenIdle }) => (dimWhenIdle ? 0.7 : 1)};

		&:hover {
		fill: #00a59b;
		opacity: 1;
		cursor: pointer;
		}

		transition: fill 0.2s;
		`

		export const Hint = styled.div`
		color: ${theme('thread.articleDigest')};
		text-align: center;
		min-width: 80px;
		padding: 5px;
		`
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,8 +5,8 @@ const SMALL_SIZE = 14
		const MEDIUM_SIZE = 16
		const LARGE_SIZE = 18

		const TINY_MARGIN =6
		const TINY_MARGIN_HOVER =10
		const TINY_MARGIN =4
		const TINY_MARGIN_HOVER =7

		const SMALL_MARGIN = 6
		const SMALL_MARGIN_HOVER = 10
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,31 @@
		/*
		*
		* GotoTop
		*
		*/

		import { FC, memo } from 'react'

		import { scrollToHeader } from '@/utils'

		import { IconButton } from '@/components/Buttons'
		import { Wrapper } from './styles'

		type TProps = {
		testid?: string
		}

		const GotoTop: FC<TProps> = ({ testid }) => {
		return (
		<Wrapper testid={testid} onClick={scrollToHeader}>
		<IconButton
		path="shape/air-balloon.svg"
		hint="回到顶部"
		size={20}
		mLeft={5}
		/>
		</Wrapper>
		)
		}

		export default memo(GotoTop)
Original file line number	Diff line number	Diff line change
		@@ -1,35 +1,12 @@
		import styled from 'styled-components'

		import type { TTestable } from '@/spec'
		import Img from '@/Img'
		import { css, theme } from '@/utils'
		import { css } from '@/utils'

		export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
		'data-test-id': testid,
		}))<TTestable>`
		${css.flex('align-both')};
		${css.size(30)};
		position: relative;
		`
		export const Icon = styled(Img)`
		fill: #1e687f;
		${css.size(20)};
		display: block;
		&:hover {
		fill: #25807d;
		cursor: pointer;
		}
		`
		export const Hint = styled.div`
		color: ${theme('thread.articleDigest')};
		position: absolute;
		right: -55px;
		font-size: 12px;
		opacity: 0;

		${Wrapper}:hover & {
		opacity: 1;
		}
		transition: opacity 0.25s;
		transition-delay: 0.5s;
		${css.flex('align-both')};
		`
		export const holder = 1