refactor(post-item): preview in sidebar by default (#1312)

Author: mydearxym

src/containers/tool/Drawer/AddOn/CloseButton.tsx

@@ -8,9 +8,9 @@ const CloseButton: FC = () => {
     <IconButton
       icon="close"
       onClick={closeDrawer}
+      mTop={4}
       size={20}
-      mLeft={7}
-      dimWhenIdle
+      mLeft={6}
     />
   )
 }

src/containers/tool/Drawer/AddOn/ShareButton.tsx

@@ -9,9 +9,9 @@ const ShareButton: FC = () => {
       onClick={shareTo}
       path="article/share.svg"
       size={15}
-      mTop={12}
+      mTop={9}
       mRight={14}
-      mLeft={15}
+      mLeft={12}
       hint="分享内容"
       hintPlacement="bottom"
       dimWhenIdle

src/containers/tool/Drawer/styles/add_on/index.ts

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import css, { theme } from '@/utils/css'
 
 export const Wrapper = styled.div`
+  /* border: 1px solid tomato; */
   width: 60px;
   ${css.flexColumn('align-end')};
 
@@ -11,20 +12,35 @@ export const Wrapper = styled.div`
   `};
 `
 export const TopArea = styled.div<{ showShare: boolean }>`
-  width: 30px;
+  width: 42px;
   height: ${({ showShare }) => (showShare ? '80px' : '50px')};
-
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 34px;
   display: block;
   background: white;
-  border-bottom-left-radius: 40px;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 28px;
   box-shadow: ${theme('drawer.closerShadow')};
   ${css.flexColumn('align-both')}
-  padding-left: 16px;
+  padding-left: 12px;
+  z-index: 100000;
   transform: rotate(2deg);
 
+  &:before {
+    content: '';
+    position: absolute;
+    background: white;
+    bottom: -7px;
+    right: -9px;
+    width: 25px;
+    height: 9px;
+    transform: rotate(42deg);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 15px;
+    /* border: 1px solid lightgrey; */
+  }
+
   &:after {
     // this is for cover the box-shadow
     content: '';
@@ -34,7 +50,6 @@ export const TopArea = styled.div<{ showShare: boolean }>`
     right: -10px;
     width: 10px;
     height: 100%;
-    /* border: 1px solid tomato; */
   }
 `
 export const MobileCloser = styled.div`

src/widgets/Buttons/IconButton.tsx

@@ -73,21 +73,20 @@ const IconButton: FC<TProps> = ({
       mBottom={mBottom}
       onClick={onClick}
     >
-      <>
-        {hint ? (
-          <Tooltip
-            placement={hintPlacement}
-            content={<Hint>{hint}</Hint>}
-            noPadding
-            delay={hintDelay}
-          >
-            <Content>{realIcon}</Content>
-          </Tooltip>
-        ) : (
+      {hint ? (
+        <Tooltip
+          placement={hintPlacement}
+          content={<Hint>{hint}</Hint>}
+          noPadding
+          delay={hintDelay}
+          forceZIndex
+        >
           <Content>{realIcon}</Content>
-        )}
-        <HoverBg size={size} />
-      </>
+        </Tooltip>
+      ) : (
+        <Content>{realIcon}</Content>
+      )}
+      <HoverBg size={size} />
     </Wrapper>
   )
 }

src/widgets/Buttons/styles/icon_button.ts

@@ -29,7 +29,7 @@ import MoreIcon from '@/icons/More'
 
 import type { TProps as TIconButtonProps } from '../IconButton'
 
-const CloseCross = dynamic(() => import('@/icons/CloseCross'), {
+const CloseCross = dynamic(() => import('@/icons/CloseLight'), {
   ssr: false,
 })
 
@@ -64,6 +64,7 @@ export const HoverBg = styled.div<{ size: number }>`
   top: -2px;
   background: ${theme('hoverBg')};
   opacity: 0;
+  cursor: pointer;
 
   ${Wrapper}:hover & {
     opacity: 1;

src/widgets/Icons/CloseLight.tsx

@@ -0,0 +1,18 @@
+import { memo, SVGProps } from 'react'
+
+const CloseLight = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="icon"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      {...props}
+    >
+      <path d="m512 451.67 225.835-225.835a42.667 42.667 0 0 1 60.33 60.33L572.331 512l225.834 225.835a42.667 42.667 0 0 1-60.33 60.33L512 572.331 286.165 798.165a42.667 42.667 0 1 1-60.33-60.33L451.669 512 225.835 286.165a42.667 42.667 0 0 1 60.33-60.33L512 451.669z" />
+    </svg>
+  )
+}
+
+export default memo(CloseLight)

src/widgets/Modal/styles/index.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 import type { TActive } from '@/spec'
 import css, { theme, animate } from '@/utils/css'
-import CloseCrossSVG from '@/icons/CloseCross'
+import CloseCrossSVG from '@/icons/CloseLight'
 
 // display: ${props => (props.show ? 'block' : 'none')};
 export const Mask = styled.div<TActive>`
@@ -53,13 +53,13 @@ export const ChildrenWrapper = styled.div`
 type TCloseBtn = { mode: string }
 export const CloseBtn = styled(CloseCrossSVG)<TCloseBtn>`
   position: absolute;
-  top: 12px;
-  right: 14px;
+  top: 16px;
+  right: 18px;
   fill: ${({ mode }) =>
     mode === 'default' ? theme('thread.extraInfo') : theme('baseColor.red')};
   ${css.size(20)};
   z-index: ${css.zIndex.modalCloseBtn};
-  opacity: 0.5;
+  opacity: 0.8;
 
   &:hover {
     animation: ${animate.pulse} 0.3s linear;

src/widgets/PostItem/DesktopView/Header.tsx

@@ -1,18 +1,20 @@
-import { FC, useCallback } from 'react'
-import Router from 'next/router'
+import { FC } from 'react'
 import dynamic from 'next/dynamic'
 
 import type { TPost } from '@/spec'
-import { ARTICLE_THREAD } from '@/constant'
+import { EVENT } from '@/constant'
+
+import { send } from '@/utils/helper'
 
 import AvatarsRow from '@/widgets/AvatarsRow'
 // import TagsList from '@/widgets/TagsList'
 
-import { Wrapper, Brief, Title } from '../styles/desktop_view/header'
-
-// const AvatarsRow = dynamic(() => import('@/widgets/AvatarsRow'), {
-//   ssr: false,
-// })
+import {
+  Wrapper,
+  Brief,
+  Title,
+  AvatarsWrapper,
+} from '../styles/desktop_view/header'
 
 const TagsList = dynamic(() => import('@/widgets/TagsList'), {
   ssr: false,
@@ -23,28 +25,25 @@ type TProps = {
 }
 
 const Header: FC<TProps> = ({ item }) => {
-  const gotoArticle = useCallback(() => {
-    Router.push(`/${ARTICLE_THREAD.POST}/${item.id}`)
-  }, [item.id])
+  // const gotoArticle = useCallback(() => {
+  //   Router.push(`/${ARTICLE_THREAD.POST}/${item.id}`)
+  // }, [item.id])
 
   return (
     <Wrapper>
       <Brief>
-        <Title onClick={gotoArticle}>{item.title}</Title>
-        {/* {item.linkAddr && (
-          <TitleLink>
-            <LinkIcon />
-            <span style={{ marginLeft: 9 }}>{parseDomain(item.linkAddr)}</span>
-          </TitleLink>
-        )} */}
-
+        <Title onClick={() => send(EVENT.PREVIEW_ARTICLE, { article: item })}>
+          {item.title}
+        </Title>
         {/*  @ts-ignore */}
         <TagsList items={item.articleTags} mLeft={12} />
       </Brief>
-      <AvatarsRow
-        users={item.commentsParticipants}
-        total={item.commentsCount}
-      />
+      <AvatarsWrapper>
+        <AvatarsRow
+          users={item.commentsParticipants}
+          total={item.commentsCount}
+        />
+      </AvatarsWrapper>
     </Wrapper>
   )
 }

src/widgets/PostItem/styles/desktop_view/header.ts

@@ -13,10 +13,11 @@ export const Brief = styled.div`
   color: ${theme('thread.articleTitle')};
 `
 export const Title = styled.div`
+  position: relative;
   font-size: 15px;
   font-weight: 600;
   color: ${theme('thread.articleTitle')};
-  text-decoration: none;
+
   @media (max-width: 1450px) {
     ${css.cutRest('500px')};
   }
@@ -29,13 +30,14 @@ export const Title = styled.div`
 
   &:hover {
     color: ${theme('thread.articleDigest')};
-    text-decoration: underline;
-    text-decoration-color: ${theme('thread.articleDigest')};
     cursor: pointer;
   }
 
   transition: color 0.2s;
 `
+export const TitlePopInfo = styled.div`
+  padding: 4px 8px;
+`
 export const TitleLink = styled.div`
   position: relative;
   font-size: 15px;
@@ -52,3 +54,7 @@ export const LinkIcon = styled(LinkSVG)`
   left: -5px;
   ${css.size(12)};
 `
+
+export const AvatarsWrapper = styled.div`
+  margin-top: -1px;
+`

src/widgets/Tooltip/RealTooltip.tsx

@@ -4,18 +4,17 @@
  * use custom animation Globally at GlobalStyle.ts
  */
 
-import { FC, ReactNode, useState, useRef, memo } from 'react'
+import { FC, useState, useRef, memo } from 'react'
 import { hideAll } from 'tippy.js'
 
-import type { TTooltipPlacement } from '@/spec'
-
 import css from '@/utils/css'
 import { buildLog } from '@/utils/logger'
 import { isString } from '@/utils/validator'
 import { isDescendant } from '@/utils/dom'
 
 import useOutsideClick from '@/hooks/useOutsideClick'
 
+import type { TProps } from './index'
 import ConfirmFooter from './ConfirmFooter'
 import { FOOTER_BEHAVIOR } from './constant'
 
@@ -32,39 +31,6 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:Tooltip:index')
 
-type TProps = {
-  children: ReactNode
-  content: string | ReactNode
-  placement?: TTooltipPlacement
-  // more options see: https://atomiks.github.io/tippyjs/all-options/
-  delay?: number
-  duration?: number
-  trigger?: 'mouseenter focus' | 'click'
-  hideOnClick?: boolean
-  noPadding?: boolean
-  showArrow?: boolean
-  behavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
-  // currently only for AvatarsRow, it will collapse the height
-  // for same reason, figure out later
-  contentHeight?: string
-
-  /**
-   * z-index is a magic number for IconSwitcher's mask situation,
-   * DO NOT USE unless you know what you are doing
-   *  在类似 IconSwitcher 的场景下（有一个基于 positon: absolute 的滑动遮罩）的场景下，需要将外层
-   * 的 ChildrenWrapper z-index 置为 1, 否则滑动遮罩会在最外面。
-   *
-   * 理论上 zIndex 一直设置为 1，也没问题，但是会导致某些使用了 Tooltip 的地方有严重的粘滞感，比如 “CopyRight” 那里。
-   * 暂时没有精力看 Tippy 的具体实现，小心使用。
-   */
-  forceZIndex?: boolean
-  interactive?: boolean
-
-  onShow?: () => void
-  onHide?: () => void
-  onConfirm?: () => void
-}
-
 const Tooltip: FC<TProps> = ({
   children,
   noPadding = false,
@@ -73,6 +39,7 @@ const Tooltip: FC<TProps> = ({
   onShow,
   placement = 'top',
   delay = 0,
+  offset = [5, 5],
   duration = 0,
   content,
   hideOnClick = true,
@@ -149,7 +116,8 @@ const Tooltip: FC<TProps> = ({
     zIndex: css.zIndex.popover,
     active: true,
     delay: [delay, 0] as [number, number],
-    offset: [5, 5] as [number, number],
+    offset,
+    // offset: [0, -8] as [number, number],
     duration,
     trigger,
     // see https://github.com/atomiks/tippyjs/issues/751#issuecomment-611979594 for detail