refactor(tags-bar): new tags design (#1144)

* style(digest): use thunder icon for preview

* style(tags): make tagsbar look nice

Author: mydearxym

src/components/DigestSentence/index.tsx

@@ -21,6 +21,7 @@ import {
   PreviewWrapper,
   PreviewText,
   PreviewIcon,
+  ThunderIcon,
 } from './styles'
 
 /* eslint-disable-next-line */
@@ -69,7 +70,7 @@ const DigestSentence: FC<TProps> = ({
       </MediaHintWrapper>
       <PreviewWrapper>
         <PreviewText>预览</PreviewText>
-        <PreviewIcon src={`${ICON}/shape/arrow-simple.svg`} />
+        <ThunderIcon />
       </PreviewWrapper>
     </Wrapper>
   )

src/components/DigestSentence/styles/index.ts

@@ -1,7 +1,9 @@
 import styled from 'styled-components'
 
 import type { TTestable, TSpace, TSIZE_SM } from '@/spec'
+
 import Img from '@/Img'
+import ThunderSVG from '@/icons/Thunder'
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 
@@ -66,5 +68,9 @@ export const PreviewIcon = styled(Img)`
 export const PreviewText = styled.span`
   color: ${theme('thread.extraInfo')};
   font-size: 12px;
-  margin-right: 5px;
+`
+export const ThunderIcon = styled(ThunderSVG)`
+  fill: ${theme('thread.extraInfo')};
+  ${css.size(18)};
+  transform: rotate(12deg);
 `

src/components/Icons/Thunder.tsx

@@ -0,0 +1,21 @@
+import { memo, SVGProps } from 'react'
+
+const Thunder = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="prefix__icon"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      {...props}
+    >
+      <defs>
+        <style />
+      </defs>
+      <path d="M668.672 468.053L385.877 833.024c-9.13 9.13-18.261 0-18.261-9.13L422.4 531.967H312.917c-9.13 0-9.13-9.13-9.13-9.13L586.58 157.866c9.131-9.131 18.262 0 18.262 9.13l-45.568 291.926h100.352c9.045 0 9.045 9.13 9.045 9.13z" />
+    </svg>
+  )
+}
+
+export default memo(Thunder)

src/components/Img/LazyLoadImg.tsx

@@ -1,7 +1,6 @@
 import { FC, Fragment, ReactNode, memo, useState } from 'react'
 
 import { LazyLoadImage } from 'react-lazy-load-image-component'
-import 'react-lazy-load-image-component/src/effects/blur.css'
 
 import { Wrapper, FallbackWrapper } from './styles/lazy_load_image'
 
@@ -24,7 +23,7 @@ const LazyLoadImg: FC<TProps> = ({
   src,
   alt = 'image',
   fallback = null,
-  visibleByDefault = false,
+  visibleByDefault = true,
 }) => {
   const [imgLoaded, setImgLoaded] = useState(false)
 

src/containers/layout/ThemePalette/ThirdPartyOverWrite.ts

@@ -58,6 +58,24 @@ const CustomOverWrite = createGlobalStyle`
     font-size: 1.3em;
     color: ${theme('editor.content')};
   }
+
+  .lazy-load-image-background.blur {
+    filter: blur(3px);
+  }
+
+  .lazy-load-image-background.blur.lazy-load-image-loaded {
+    filter: blur(0);
+    transition: filter 0.2s;
+  }
+
+  .lazy-load-image-background.blur > img {
+    opacity: 0;
+  }
+
+  .lazy-load-image-background.blur.lazy-load-image-loaded > img {
+    opacity: 1;
+    transition: opacity 0.2s;
+  }
 `
 
 export default CustomOverWrite

src/containers/thread/ThreadSidebar/ClassicLayout/DynamicPart.tsx

@@ -14,7 +14,7 @@ import Sticky from '@/components/Sticky'
 import PublishButton from '@/components/Buttons/PublishButton'
 import CommunityJoinBadge from '@/containers/tool/CommunityJoinBadge'
 import TagsBar from '@/containers/unit/TagsBar'
-import PromotionList from '@/components/PromotionList'
+// import PromotionList from '@/components/PromotionList'
 
 import type { TBaseProps } from '../index'
 
@@ -46,7 +46,7 @@ const ClassicLayout: FC<TProps> = ({
       <TagsBarWrapper>
         <TagsBar onSelect={onTagSelect} />
       </TagsBarWrapper>
-      <PromotionList onClose={onAdsClose} />
+      {/* <PromotionList onClose={onAdsClose} /> */}
     </Sticky>
   )
 }

src/containers/unit/TagsBar/DesktopView/Folder.tsx

@@ -82,7 +82,7 @@ const Folder: FC<TProps> = ({
         />
         <Title>{title}</Title>
         {!isFolderOpen && isActiveTagInFolder && (
-          <TagItem tag={activeTag} active inline />
+          <TagItem tag={activeTag} active />
         )}
       </Header>
 
@@ -109,7 +109,7 @@ const Folder: FC<TProps> = ({
               )
             }}
           >
-            <SubTogglePrefixIcon src={`${ICON}/shape/more.svg`} />
+            <SubTogglePrefixIcon src={`${ICON}/shape/more-l.svg`} />
             <SubToggleTitle>
               {curDisplayCount === MAX_DISPLAY_COUNT ? '展开更多' : '收起'}
             </SubToggleTitle>

src/containers/unit/TagsBar/DesktopView/GobackTag.tsx

@@ -12,7 +12,7 @@ type TProps = {
 const GobackTag: FC<TProps> = ({ onSelect }) => {
   return (
     <Wrapper onClick={() => onSelect(emptyTag)}>
-      <TagIcon src={`${ICON}/hash-solid.svg`} />
+      <TagIcon src={`${ICON}/shape/reset.svg`} />
       <TagTitle>全部标签</TagTitle>
     </Wrapper>
   )

src/containers/unit/TagsBar/DesktopView/TagItem.tsx

@@ -1,46 +1,42 @@
 import { FC } from 'react'
 
-import { Trans } from '@/utils/i18n'
 import type { TTag } from '@/spec'
+import { cutRest } from '@/utils/helper'
+import { Trans } from '@/utils/i18n'
 
+// import DotDivider from '@/components/DotDivider'
 // import TagCount from './TagCount'
 
 import {
   Wrapper,
   HashWrapper,
   HashSign,
-  TagTitle,
-  // CountInfoWrapper,
+  Tag,
+  Title,
+  RawWrapper,
+  Raw,
 } from '../styles/desktop_view/tag_item'
 
 type TProps = {
   tag: TTag
   active: boolean
   activeid?: string | null
-  inline?: boolean
   onSelect?: (tag?: TTag) => void
 }
 
-const TagItem: FC<TProps> = ({
-  tag,
-  active,
-  activeid,
-  inline = false,
-  onSelect,
-}) => {
+const TagItem: FC<TProps> = ({ tag, active, activeid, onSelect }) => {
   return (
-    <Wrapper $active={active} $inline={inline}>
+    <Wrapper $active={active}>
       <HashWrapper>
-        <HashSign
-          color={tag.color}
-          $active={active}
-          $inline={inline}
-          activeid={activeid}
-        />
+        <HashSign color={tag.color} $active={active} activeid={activeid} />
       </HashWrapper>
-      <TagTitle $active={active} $inline={inline} onClick={() => onSelect(tag)}>
-        {Trans(tag.title)}
-      </TagTitle>
+      <Tag $active={active} color={tag.color} onClick={() => onSelect(tag)}>
+        <Title>{cutRest(Trans(tag.title), 10)}</Title>
+        <RawWrapper $active={active}>
+          {/* <DotDivider radius={2} space={6} /> */}
+          <Raw>{tag.raw}</Raw>
+        </RawWrapper>
+      </Tag>
       {/* <SpaceGrow />
 
       {!inline && (

src/containers/unit/TagsBar/DesktopView/index.tsx

@@ -27,6 +27,7 @@ type TProps = Omit<TTagProps, 'view'>
 const TagsBarContainer: FC<TProps> = ({ tagsBar: store, onSelect }) => {
   useInit(store)
   const { groupedTags, tagsData, activeTagData } = store
+  console.log('# groupedTags -> ', groupedTags)
   const groupsKeys = keys(groupedTags) as string[]
 
   return (
@@ -35,7 +36,7 @@ const TagsBarContainer: FC<TProps> = ({ tagsBar: store, onSelect }) => {
         <GobackTag
           onSelect={(tag) => {
             onTagSelect(tag)
-            onSelect()
+            onSelect?.()
           }}
         />
       )}
@@ -48,7 +49,7 @@ const TagsBarContainer: FC<TProps> = ({ tagsBar: store, onSelect }) => {
           activeTag={activeTagData}
           onSelect={(tag) => {
             onTagSelect(tag)
-            onSelect()
+            onSelect?.()
           }}
         />
       ))}