style(comments): header / footer redesign

src/components/Common/index.ts

@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import type { TSpace } from '@/spec'
 
 export const Br = styled.div<TSpace>`
-  margin-top: ${({ top }) => `${top}px` || 0};
-  margin-bottom: ${({ bottom }) => `${bottom}px` || 0};
+  margin-top: ${({ top }) => `${top || 0}px`};
+  margin-bottom: ${({ bottom }) => `${bottom || 0}px`};
 `
 export const Space = styled.span<TSpace>`
   margin-left: ${({ left }) => `${left}px` || 0};

src/components/Switcher/IconSwitcher.tsx

@@ -0,0 +1,100 @@
+/*
+ *
+ * IconSwitcher
+ *
+ */
+
+import React from 'react'
+import { findIndex, propEq } from 'ramda'
+
+import { buildLog, nilOrEmpty } from '@/utils'
+import Tooltip from '@/components/Tooltip'
+
+import {
+  Wrapper,
+  AccessZone,
+  Tabs,
+  DescText,
+  Icon,
+  Label,
+  Slider,
+} from './styles/icon_selector'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:IconSwitcher:index')
+
+type TItem = {
+  iconSrc?: string
+  localIcon?: React.ReactNode
+  key: string
+  desc?: string
+}
+
+type TIconComp = {
+  item: TItem
+  activeKey: string
+}
+
+type TTabLabel = {
+  item: TItem
+  activeKey: string
+  onChange: (item: TItem) => void
+}
+
+const TabLabel: React.FC<TTabLabel> = ({ item, activeKey, onChange }) => {
+  if (!item.desc) {
+    return (
+      <Label onClick={() => onChange(item)}>
+        {!nilOrEmpty(item.localIcon) && <>{item.localIcon}</>}
+        {!nilOrEmpty(item.iconSrc) && (
+          <Icon src={item.iconSrc} checked={activeKey === item.key} />
+        )}
+      </Label>
+    )
+  }
+
+  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>
+  )
+}
+
+type TProps = {
+  items: TItem[]
+  activeKey: string
+  onChange: (item: TItem) => void
+}
+
+const IconSwitcher: React.FC<TProps> = ({ items, activeKey, onChange }) => {
+  const slideIndex = findIndex(propEq('key', activeKey), items)
+
+  return (
+    <Wrapper testid="selectors">
+      <AccessZone />
+      <Tabs>
+        {items.map((item) => (
+          <TabLabel
+            key={item.key}
+            item={item}
+            activeKey={activeKey}
+            onChange={onChange}
+          />
+        ))}
+        <Slider index={slideIndex} />
+      </Tabs>
+    </Wrapper>
+  )
+}
+
+export default React.memo(IconSwitcher)

src/components/Switcher/styles/icon_selector.ts

@@ -50,22 +50,10 @@ export const Label = styled.label`
     cursor: pointer;
   }
 `
-export const IconHoverWrapper = styled.div`
-  position: relative;
-`
-export const HoverText = styled.span`
-  position: absolute;
-  width: 80px;
-  left: -20px;
-  top: 30px;
-  font-size: 12px;
-  opacity: 0;
-  overflow: hidden;
-  ${IconHoverWrapper}:hover & {
-    opacity: 1;
-  }
-  transition: opacity 0.25s;
-  transition-delay: 0.3s;
+export const DescText = styled.div`
+  ${css.flex('align-both')};
+  min-width: 90px;
+  padding: 5px 10px;
 `
 export const Icon = styled(Img)<{ checked: boolean }>`
   fill: ${({ checked }) =>
@@ -81,7 +69,7 @@ export const Slider = styled.span<{ index: number }>`
   width: ${width};
   height: ${height};
   background-color: #0b3546;
-  z-index: 1;
+  z-index: 0;
   border-radius: 6px;
 
   ${Wrapper}:hover & {

src/components/Switcher/styles/tabs/local_icon.ts

@@ -21,7 +21,7 @@ import TabPublishSVG from '@/SvgIcons/TabPublishSVG'
 import TabBillingSVG from '@/SvgIcons/TabBillingSVG'
 import TabCommentsSVG from '@/SvgIcons/TabCommentsSVG'
 import TabSettingsSVG from '@/SvgIcons/TabSettingsSVG'
-import TabFavoritesSVG from '@/SvgIcons/TabFavoritesSVG'
+import TabFavoritesSVG from '@/components/SvgIcons/TabFavoritesSVG'
 
 export const LableWrapper = styled.div`
   ${css.flex('align-center')};

src/components/Tooltip/styles/index.ts

@@ -29,6 +29,7 @@ export const NoPaddingStyledTippy = styled(StyledTippy)`
 export const ContentWrapper = styled.div<{ contentHeight: string }>`
   position: relative;
   height: ${({ contentHeight }) => contentHeight};
+  z-index: 1;
 `
 const Arrow = styled.div`
   position: absolute;

src/containers/unit/Comments/Comment/Actions.tsx

@@ -1,11 +1,16 @@
 import React from 'react'
 
 import type { TAccount, TComment } from '@/spec'
+import { ICON } from '@/config'
 
-import DotDivider from '@/components/DotDivider'
 import { SpaceGrow } from '@/components/Common'
 
-import { Wrapper, ReplyAction } from '../styles/comment/actions'
+import {
+  Wrapper,
+  ActionWrapper,
+  ReplyAction,
+  ActionIcon,
+} from '../styles/comment/actions'
 import { openUpdateEditor, openReplyEditor, onDelete } from '../logic'
 
 type TProps = {
@@ -27,13 +32,15 @@ const Actions: React.FC<TProps> = ({ data, accountInfo }) => {
     <Wrapper>
       <ReplyAction onClick={() => openReplyEditor(data)}>回复</ReplyAction>
       <SpaceGrow />
-      <ReplyAction>分享</ReplyAction>
-      <DotDivider radius={3} space={6} />
-      <ReplyAction>引用</ReplyAction>
-      <DotDivider radius={3} space={6} />
-      <ReplyAction>折叠</ReplyAction>
-      <DotDivider radius={3} space={6} />
-      <ReplyAction>举报</ReplyAction>
+      <ActionWrapper>
+        <ActionIcon src={`${ICON}/article/share.svg`} />
+      </ActionWrapper>
+      <ActionWrapper>
+        <ActionIcon src={`${ICON}/shape/quote.svg`} />
+      </ActionWrapper>
+      <ActionWrapper>
+        <ActionIcon src={`${ICON}/article/report.svg`} />
+      </ActionWrapper>
     </Wrapper>
   )
 }