Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commitd1283cc

Browse files
authored
refactor(tags-bar): new tags design (#1144)
* style(digest): use thunder icon for preview* style(tags): make tagsbar look nice
1 parenta4fbdbb commitd1283cc

File tree

23 files changed

+273
-168
lines changed

23 files changed

+273
-168
lines changed

‎src/components/DigestSentence/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
PreviewWrapper,
2222
PreviewText,
2323
PreviewIcon,
24+
ThunderIcon,
2425
}from'./styles'
2526

2627
/* eslint-disable-next-line */
@@ -69,7 +70,7 @@ const DigestSentence: FC<TProps> = ({
6970
</MediaHintWrapper>
7071
<PreviewWrapper>
7172
<PreviewText>预览</PreviewText>
72-
<PreviewIconsrc={`${ICON}/shape/arrow-simple.svg`}/>
73+
<ThunderIcon/>
7374
</PreviewWrapper>
7475
</Wrapper>
7576
)

‎src/components/DigestSentence/styles/index.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
importstyledfrom'styled-components'
22

33
importtype{TTestable,TSpace,TSIZE_SM}from'@/spec'
4+
45
importImgfrom'@/Img'
6+
importThunderSVGfrom'@/icons/Thunder'
57
import{theme}from'@/utils/themes'
68
importcssfrom'@/utils/css'
79

@@ -66,5 +68,9 @@ export const PreviewIcon = styled(Img)`
6668
exportconstPreviewText=styled.span`
6769
color:${theme('thread.extraInfo')};
6870
font-size: 12px;
69-
margin-right: 5px;
71+
`
72+
exportconstThunderIcon=styled(ThunderSVG)`
73+
fill:${theme('thread.extraInfo')};
74+
${css.size(18)};
75+
transform: rotate(12deg);
7076
`

‎src/components/Icons/Thunder.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import{memo,SVGProps}from'react'
2+
3+
constThunder=(props:SVGProps<SVGSVGElement>)=>{
4+
return(
5+
<svg
6+
className="prefix__icon"
7+
viewBox="0 0 1024 1024"
8+
xmlns="http://www.w3.org/2000/svg"
9+
width={200}
10+
height={200}
11+
{...props}
12+
>
13+
<defs>
14+
<style/>
15+
</defs>
16+
<pathd="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"/>
17+
</svg>
18+
)
19+
}
20+
21+
exportdefaultmemo(Thunder)

‎src/components/Img/LazyLoadImg.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import{FC,Fragment,ReactNode,memo,useState}from'react'
22

33
import{LazyLoadImage}from'react-lazy-load-image-component'
4-
import'react-lazy-load-image-component/src/effects/blur.css'
54

65
import{Wrapper,FallbackWrapper}from'./styles/lazy_load_image'
76

@@ -24,7 +23,7 @@ const LazyLoadImg: FC<TProps> = ({
2423
src,
2524
alt='image',
2625
fallback=null,
27-
visibleByDefault=false,
26+
visibleByDefault=true,
2827
})=>{
2928
const[imgLoaded,setImgLoaded]=useState(false)
3029

‎src/containers/layout/ThemePalette/ThirdPartyOverWrite.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,24 @@ const CustomOverWrite = createGlobalStyle`
5858
font-size: 1.3em;
5959
color:${theme('editor.content')};
6060
}
61+
62+
.lazy-load-image-background.blur {
63+
filter: blur(3px);
64+
}
65+
66+
.lazy-load-image-background.blur.lazy-load-image-loaded {
67+
filter: blur(0);
68+
transition: filter 0.2s;
69+
}
70+
71+
.lazy-load-image-background.blur > img {
72+
opacity: 0;
73+
}
74+
75+
.lazy-load-image-background.blur.lazy-load-image-loaded > img {
76+
opacity: 1;
77+
transition: opacity 0.2s;
78+
}
6179
`
6280

6381
exportdefaultCustomOverWrite

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import Sticky from '@/components/Sticky'
1414
importPublishButtonfrom'@/components/Buttons/PublishButton'
1515
importCommunityJoinBadgefrom'@/containers/tool/CommunityJoinBadge'
1616
importTagsBarfrom'@/containers/unit/TagsBar'
17-
importPromotionListfrom'@/components/PromotionList'
17+
//import PromotionList from '@/components/PromotionList'
1818

1919
importtype{TBaseProps}from'../index'
2020

@@ -46,7 +46,7 @@ const ClassicLayout: FC<TProps> = ({
4646
<TagsBarWrapper>
4747
<TagsBaronSelect={onTagSelect}/>
4848
</TagsBarWrapper>
49-
<PromotionListonClose={onAdsClose}/>
49+
{/*<PromotionList onClose={onAdsClose} /> */}
5050
</Sticky>
5151
)
5252
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const Folder: FC<TProps> = ({
8282
/>
8383
<Title>{title}</Title>
8484
{!isFolderOpen&&isActiveTagInFolder&&(
85-
<TagItemtag={activeTag}activeinline/>
85+
<TagItemtag={activeTag}active/>
8686
)}
8787
</Header>
8888

@@ -109,7 +109,7 @@ const Folder: FC<TProps> = ({
109109
)
110110
}}
111111
>
112-
<SubTogglePrefixIconsrc={`${ICON}/shape/more.svg`}/>
112+
<SubTogglePrefixIconsrc={`${ICON}/shape/more-l.svg`}/>
113113
<SubToggleTitle>
114114
{curDisplayCount===MAX_DISPLAY_COUNT ?'展开更多' :'收起'}
115115
</SubToggleTitle>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ type TProps = {
1212
constGobackTag:FC<TProps>=({ onSelect})=>{
1313
return(
1414
<WrapperonClick={()=>onSelect(emptyTag)}>
15-
<TagIconsrc={`${ICON}/hash-solid.svg`}/>
15+
<TagIconsrc={`${ICON}/shape/reset.svg`}/>
1616
<TagTitle>全部标签</TagTitle>
1717
</Wrapper>
1818
)

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

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,42 @@
11
import{FC}from'react'
22

3-
import{Trans}from'@/utils/i18n'
43
importtype{TTag}from'@/spec'
4+
import{cutRest}from'@/utils/helper'
5+
import{Trans}from'@/utils/i18n'
56

7+
// import DotDivider from '@/components/DotDivider'
68
// import TagCount from './TagCount'
79

810
import{
911
Wrapper,
1012
HashWrapper,
1113
HashSign,
12-
TagTitle,
13-
// CountInfoWrapper,
14+
Tag,
15+
Title,
16+
RawWrapper,
17+
Raw,
1418
}from'../styles/desktop_view/tag_item'
1519

1620
typeTProps={
1721
tag:TTag
1822
active:boolean
1923
activeid?:string|null
20-
inline?:boolean
2124
onSelect?:(tag?:TTag)=>void
2225
}
2326

24-
constTagItem:FC<TProps>=({
25-
tag,
26-
active,
27-
activeid,
28-
inline=false,
29-
onSelect,
30-
})=>{
27+
constTagItem:FC<TProps>=({ tag, active, activeid, onSelect})=>{
3128
return(
32-
<Wrapper$active={active}$inline={inline}>
29+
<Wrapper$active={active}>
3330
<HashWrapper>
34-
<HashSign
35-
color={tag.color}
36-
$active={active}
37-
$inline={inline}
38-
activeid={activeid}
39-
/>
31+
<HashSigncolor={tag.color}$active={active}activeid={activeid}/>
4032
</HashWrapper>
41-
<TagTitle$active={active}$inline={inline}onClick={()=>onSelect(tag)}>
42-
{Trans(tag.title)}
43-
</TagTitle>
33+
<Tag$active={active}color={tag.color}onClick={()=>onSelect(tag)}>
34+
<Title>{cutRest(Trans(tag.title),10)}</Title>
35+
<RawWrapper$active={active}>
36+
{/* <DotDivider radius={2} space={6} /> */}
37+
<Raw>{tag.raw}</Raw>
38+
</RawWrapper>
39+
</Tag>
4440
{/* <SpaceGrow />
4541
4642
{!inline && (

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ type TProps = Omit<TTagProps, 'view'>
2727
constTagsBarContainer:FC<TProps>=({tagsBar:store, onSelect})=>{
2828
useInit(store)
2929
const{ groupedTags, tagsData, activeTagData}=store
30+
console.log('# groupedTags -> ',groupedTags)
3031
constgroupsKeys=keys(groupedTags)asstring[]
3132

3233
return(
@@ -35,7 +36,7 @@ const TagsBarContainer: FC<TProps> = ({ tagsBar: store, onSelect }) => {
3536
<GobackTag
3637
onSelect={(tag)=>{
3738
onTagSelect(tag)
38-
onSelect()
39+
onSelect?.()
3940
}}
4041
/>
4142
)}
@@ -48,7 +49,7 @@ const TagsBarContainer: FC<TProps> = ({ tagsBar: store, onSelect }) => {
4849
activeTag={activeTagData}
4950
onSelect={(tag)=>{
5051
onTagSelect(tag)
51-
onSelect()
52+
onSelect?.()
5253
}}
5354
/>
5455
))}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp