feat(comment): fold & redesign (#1126)

* fix(copy-button): avoid un-expected animation with value change

* fix(tooltip): z-index edge case

* fix(switcher-icon): active style adjust

* fix(report): reset view on close

* feat(comment): basic fold/extand UI/UX

* feat(comment): range bar wip

Author: mydearxym

public/icons/static/emotion/emotion.svg

@@ -2,16 +2,11 @@ import { FC, memo, useEffect, useState } from 'react'
 
 import { ICON } from '@/config'
 import { IconButton } from '@/components/Buttons'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
 
 import { AnimateOnChange } from 'react-animation'
 import { CopyedHintIcon } from '../styles/copy_button'
 
-type TProps = {
-  value: string
-}
-
-const CopyButton: FC<TProps> = ({ value }) => {
+const CopyButton: FC = () => {
   const [done, setDone] = useState(false)
 
   useEffect(() => {
@@ -28,9 +23,13 @@ const CopyButton: FC<TProps> = ({ value }) => {
       durationOut={100}
     >
       {!done && (
-        <CopyToClipboard text={value} onCopy={() => setDone(true)}>
-          <IconButton path="article/clipboard.svg" mRight={5} />
-        </CopyToClipboard>
+        <IconButton
+          path="article/clipboard.svg"
+          mRight={5}
+          onClick={() => {
+            setDone(true)
+          }}
+        />
       )}
       {done && <CopyedHintIcon src={`${ICON}/shape/checked.svg`} />}
     </AnimateOnChange>

src/components/Buttons/CopyButton/Animate.tsx

@@ -1,6 +1,8 @@
 import { FC, memo } from 'react'
 import dynamic from 'next/dynamic'
 
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+
 import IconButton from '../IconButton'
 import { Wrapper } from '../styles/copy_button'
 
@@ -19,7 +21,9 @@ type TProps = {
 const CopyButton: FC<TProps> = ({ value }) => {
   return (
     <Wrapper>
-      <AnimatedCopyButton value={value} />
+      <CopyToClipboard text={value}>
+        <AnimatedCopyButton />
+      </CopyToClipboard>
     </Wrapper>
   )
 }

src/components/Buttons/CopyButton/index.tsx

@@ -49,19 +49,12 @@ const TabLabel: React.FC<TTabLabel> = ({ item, activeKey, onChange }) => {
   }
 
   return (
-    <Tooltip
-      content={<DescText>{item.desc}</DescText>}
-      placement="bottom"
-      delay={500}
-      noPadding
-    >
-      <Label onClick={() => onChange(item)}>
-        {!nilOrEmpty(item.localIcon) && <>{item.localIcon}</>}
-        {!nilOrEmpty(item.iconSrc) && (
-          <Icon src={item.iconSrc} checked={activeKey === item.key} />
-        )}
-      </Label>
-    </Tooltip>
+    <Label onClick={() => onChange(item)}>
+      {!nilOrEmpty(item.localIcon) && <>{item.localIcon}</>}
+      {!nilOrEmpty(item.iconSrc) && (
+        <Icon src={item.iconSrc} checked={activeKey === item.key} />
+      )}
+    </Label>
   )
 }
 
@@ -79,12 +72,16 @@ const IconSwitcher: FC<TProps> = ({ items, activeKey, onChange }) => {
       <AccessZone />
       <Tabs>
         {items.map((item) => (
-          <TabLabel
+          <Tooltip
             key={item.key}
-            item={item}
-            activeKey={activeKey}
-            onChange={onChange}
-          />
+            content={<DescText>{item.desc}</DescText>}
+            placement="top"
+            delay={500}
+            forceZIndex
+            noPadding
+          >
+            <TabLabel item={item} activeKey={activeKey} onChange={onChange} />
+          </Tooltip>
         ))}
         <Slider index={slideIndex} />
       </Tabs>

src/components/Switcher/IconSwitcher.tsx

@@ -43,7 +43,6 @@ export const Label = styled.label`
   width: ${width};
   height: ${height};
   font-size: 15px;
-  z-index: 2;
   transition: color 0.15s ease-in;
 
   &:hover {
@@ -57,11 +56,15 @@ export const DescText = styled.div`
 `
 export const Icon = styled(Img)<{ checked: boolean }>`
   fill: ${({ checked }) =>
-    checked ? '#66b5e8' : theme('thread.articleDigest')};
+    checked ? theme('thread.articleTitle') : theme('thread.articleDigest')};
   width: ${({ checked }) => (checked ? '14px' : '12px')};
   height: ${({ checked }) => (checked ? '14px' : '12px')};
   display: block;
   transition: all 0.25s;
+
+  &:hover {
+    fill: #66b5e8;
+  }
 `
 export const Slider = styled.span<{ index: number }>`
   ${css.flex()};

src/components/Switcher/styles/icon_selector.ts

@@ -41,6 +41,17 @@ type TProps = {
   // 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 的滑动遮罩）的场景下，需要将外层
+   * 的 ContentWrapper z-index 置为 1, 否则滑动遮罩会在最外面。
+   *
+   * 理论上 zIndex 一直设置为 1，也没问题，但是会导致某些使用了 Tooltip 的地方有严重的粘滞感，比如 “CopyRight” 那里。
+   * 暂时没有精力看 Tippy 的具体实现，小心使用。
+   */
+  forceZIndex?: boolean
+
   onShow?: () => void
   onHide?: () => void
   onConfirm?: () => void
@@ -57,6 +68,7 @@ const Tooltip: FC<TProps> = ({
   content,
   hideOnClick = true,
   showArrow = false,
+  forceZIndex = false,
   footerBehavior = 'default',
   trigger = 'mouseenter focus',
   onConfirm,
@@ -66,15 +78,15 @@ const Tooltip: FC<TProps> = ({
   const [active, setActive] = useState(false)
 
   const ContentComp = showArrow ? (
-    <ContentWrapper contentHeight={contentHeight}>
+    <ContentWrapper contentHeight={contentHeight} forceZIndex={forceZIndex}>
       {active && placement === 'bottom' && <TopArrow />}
       {active && placement === 'top' && <BottomArrow />}
       {active && placement === 'right' && <LeftArrow />}
 
       <div>{children}</div>
     </ContentWrapper>
   ) : (
-    <ContentWrapper contentHeight={contentHeight}>
+    <ContentWrapper contentHeight={contentHeight} forceZIndex={forceZIndex}>
       <div>{children}</div>
     </ContentWrapper>
   )

src/components/Tooltip/index.tsx

@@ -26,10 +26,11 @@ export const NoPaddingStyledTippy = styled(StyledTippy)`
     padding: 0;
   }
 `
-export const ContentWrapper = styled.div<{ contentHeight: string }>`
+type TContentWrapper = { contentHeight: string; forceZIndex: boolean }
+export const ContentWrapper = styled.div<TContentWrapper>`
   position: relative;
   height: ${({ contentHeight }) => contentHeight};
-  /* z-index: 1; */
+  z-index: ${({ forceZIndex }) => (forceZIndex ? 1 : 0)};
 `
 const Arrow = styled.div`
   position: absolute;

src/components/Tooltip/styles/index.ts

@@ -18,4 +18,5 @@ export const UpWrapper = styled.div`
 `
 export const CountWrapper = styled.div`
   margin-top: -4px;
+  margin-left: 1px;
 `

src/components/Upvote/styles/comment_layout.ts

@@ -36,7 +36,7 @@ export const selectItem = (checkedItemRaw: string): void => {
   store.mark({ checkedItemRaw, view: 'detail' })
 }
 
-export const close = (): void => store.mark({ show: false })
+export const close = (): void => store.mark({ show: false, view: 'main' })
 
 const DataResolver = [
   {

src/containers/tool/AbuseReport/logic.ts

@@ -45,7 +45,7 @@ export const LogoWrapper = styled.div<{ noBg: boolean }>`
   margin-bottom: 5px;
 `
 export const Logo = styled(Img)<{ small: boolean }>`
-  fill: #e7f2f7; // ${theme('thread.articleTitle')};
+  fill: ${theme('thread.articleTitle')};
   ${({ small }) => (small ? css.circle('24px') : css.circle('38px'))};
   filter: saturate(0.6);
   opacity: 0.8;