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.

Commit5866d6c

Browse files
committed
style(dashboard): adjust notify bar
1 parent346abb6 commit5866d6c

File tree

5 files changed

+63
-11
lines changed

5 files changed

+63
-11
lines changed

‎src/containers/thread/DashboardThread/UI/BannerNotifyLayout.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,13 @@ import {
2020
Layout,
2121
LayoutTitle,
2222
Block,
23+
Row,
2324
Bar,
25+
NotifyTextBar,
2426
NotifyBar,
2527
NotifyDesc,
26-
NotifyLink,
2728
NotifySolidLink,
29+
NotifyIcon,
2830
CrossIcon,
2931
ArrowIcon,
3032
Main,
@@ -80,9 +82,14 @@ const BannerNotifyLayout: FC<TProps> = ({
8082
>
8183
<Block$active={layout===BANNER_NOTIFY_LAYOUT.DEFAULT}>
8284
<NotifyBarbg={bg}>
83-
<NotifyDesc>这是一条全局通知，全站可见。</NotifyDesc>
85+
<NotifyIcon/>
86+
<NotifyDesc>
87+
<NotifyTextBarlong={120}thin/>
88+
</NotifyDesc>
8489
<SpaceGrow/>
85-
<NotifySolidLinkbg={bg}>查看详情</NotifySolidLink>
90+
<NotifySolidLinkbg={bg}>
91+
<NotifyTextBarlong={30}thin/>
92+
</NotifySolidLink>
8693
<Spaceleft={5}/>
8794
<CrossIcon/>
8895
</NotifyBar>
@@ -126,10 +133,19 @@ const BannerNotifyLayout: FC<TProps> = ({
126133
>
127134
<Block$active={layout===BANNER_NOTIFY_LAYOUT.CENTER}>
128135
<NotifyBarbg={bg}center>
129-
<NotifyDesc>这是一条全局通知，全站可见。</NotifyDesc>
130-
<NotifyLink>查看详情</NotifyLink>
131-
<Spaceleft={5}/>
132-
<ArrowIcon/>
136+
<SpaceGrow/>
137+
<Row>
138+
<NotifyIcon/>
139+
<NotifyDesc>
140+
<NotifyTextBarlong={80}thin/>
141+
</NotifyDesc>
142+
<Spaceright={10}/>
143+
<NotifyTextBarlong={20}thin/>
144+
<Spaceleft={5}/>
145+
<ArrowIcon/>
146+
</Row>
147+
<SpaceGrow/>
148+
<CrossIcon/>
133149
</NotifyBar>
134150

135151
<Main>

‎src/containers/thread/DashboardThread/styles/ui/banner_notify_layout.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import css, { theme } from '@/utils/css'
1010
import{Divider}from'@/widgets/Common'
1111
importCrossSVGfrom'@/icons/CloseCross'
1212
importArrowSVGfrom'@/icons/Arrow'
13+
importNotifySVGfrom'@/icons/Trumpet'
1314

1415
import{BaseSection,BlockBase}from'.'
1516

@@ -39,9 +40,6 @@ export const NotifyDesc = styled.div`
3940
font-size: 8px;
4041
font-weight: 600;
4142
`
42-
exportconstNotifyLink=styled(NotifyDesc)`
43-
text-decoration: underline;
44-
`
4543
exportconstNotifySolidLink=styled.div<{bg:TColorName}>`
4644
background:${({ bg})=>
4745
includes(bg,[COLOR_NAME.BLACK])
@@ -55,6 +53,11 @@ export const NotifySolidLink = styled.div<{ bg: TColorName }>`
5553
font-weight: bold;
5654
padding: 0 4px;
5755
`
56+
exportconstNotifyIcon=styled(NotifySVG)`
57+
${css.size(8)};
58+
fill: white;
59+
margin-right: 6px;
60+
`
5861
exportconstCrossIcon=styled(CrossSVG)`
5962
fill: white;
6063
${css.size(8)};
@@ -117,6 +120,10 @@ export const Bar = styled.div<TBar>`
117120
border-radius: 5px;
118121
opacity:${({ thin})=>(thin ?0.6 :1)};
119122
`
123+
exportconstNotifyTextBar=styled(Bar)`
124+
width:${({ long})=>`${long||10}px`};
125+
background: white;
126+
`
120127
exportconstCircle=styled.div<{radius?:number}>`
121128
${({ radius})=>`${css.circle(radius||22)}`};
122129
background:${theme('thread.articleTitle')};

‎src/widgets/BannerNotify/index.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
LinkText,
1818
LinkBtn,
1919
Row,
20+
NotifyIcon,
2021
CrossIcon,
2122
ArrowIcon,
2223
}from'./styles'
@@ -43,7 +44,11 @@ const BannerNotify: FC<TProps> = ({
4344
metric={metric}
4445
center={layout===BANNER_NOTIFY_LAYOUT.CENTER}
4546
>
46-
<Desc>我们将在 10 月发布新的版本，敬请期待。</Desc>
47+
<Row>
48+
<NotifyIcon/>
49+
<Desc>我们将在 10 月发布新的版本，敬请期待。</Desc>
50+
</Row>
51+
4752
<Row>
4853
{layout===BANNER_NOTIFY_LAYOUT.DEFAULT ?(
4954
<Fragment>

‎src/widgets/BannerNotify/styles/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { COLORS, COLOR_NAME } from '@/constant'
88
importcssfrom'@/utils/css'
99
importCrossSVGfrom'@/icons/CloseCross'
1010
importArrowSVGfrom'@/icons/Arrow'
11+
importNotifySVGfrom'@/icons/Trumpet'
1112

1213
typeTWrapper=TTestable&{bg:TColorName}
1314
exportconstWrapper=styled.div.attrs(({ testid}:TTestable)=>({
@@ -58,6 +59,11 @@ export const Row = styled.div`
5859
${css.flex('align-center')};
5960
margin-left: 10px;
6061
`
62+
exportconstNotifyIcon=styled(NotifySVG)`
63+
${css.size(15)};
64+
margin-right: 12px;
65+
fill: white;
66+
`
6167
exportconstCrossIcon=styled(CrossSVG)`
6268
${css.size(12)};
6369
fill: white;

‎src/widgets/Icons/Trumpet.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import{memo,SVGProps}from'react'
2+
3+
constSVG=(props:SVGProps<SVGSVGElement>)=>{
4+
return(
5+
<svg
6+
className="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+
<pathd="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"/>
14+
</svg>
15+
)
16+
}
17+
18+
exportdefaultmemo(SVG)

0 commit comments

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