Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 5866d6c

Browse files
mydearxymmydearxym
committed
style(dashboard): adjust notify bar
1 parent 346abb6 commit 5866d6c

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
<NotifyBar bg={bg}>
83-
<NotifyDesc>这是一条全局通知，全站可见。</NotifyDesc>
85+
<NotifyIcon />
86+
<NotifyDesc>
87+
<NotifyTextBar long={120} thin />
88+
</NotifyDesc>
8489
<SpaceGrow />
85-
<NotifySolidLink bg={bg}>查看详情</NotifySolidLink>
90+
<NotifySolidLink bg={bg}>
91+
<NotifyTextBar long={30} thin />
92+
</NotifySolidLink>
8693
<Space left={5} />
8794
<CrossIcon />
8895
</NotifyBar>
@@ -126,10 +133,19 @@ const BannerNotifyLayout: FC<TProps> = ({
126133
>
127134
<Block $active={layout === BANNER_NOTIFY_LAYOUT.CENTER}>
128135
<NotifyBar bg={bg} center>
129-
<NotifyDesc>这是一条全局通知，全站可见。</NotifyDesc>
130-
<NotifyLink>查看详情</NotifyLink>
131-
<Space left={5} />
132-
<ArrowIcon />
136+
<SpaceGrow />
137+
<Row>
138+
<NotifyIcon />
139+
<NotifyDesc>
140+
<NotifyTextBar long={80} thin />
141+
</NotifyDesc>
142+
<Space right={10} />
143+
<NotifyTextBar long={20} thin />
144+
<Space left={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
import CrossSVG from '@/icons/CloseCross'
1212
import ArrowSVG from '@/icons/Arrow'
13+
import NotifySVG from '@/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-
export const NotifyLink = styled(NotifyDesc)`
43-
text-decoration: underline;
44-
`
4543
export const NotifySolidLink = 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+
export const NotifyIcon = styled(NotifySVG)`
57+
${css.size(8)};
58+
fill: white;
59+
margin-right: 6px;
60+
`
5861
export const CrossIcon = 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+
export const NotifyTextBar = styled(Bar)`
124+
width: ${({ long }) => `${long || 10}px`};
125+
background: white;
126+
`
120127
export const Circle = 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
import css from '@/utils/css'
99
import CrossSVG from '@/icons/CloseCross'
1010
import ArrowSVG from '@/icons/Arrow'
11+
import NotifySVG from '@/icons/Trumpet'
1112

1213
type TWrapper = TTestable & { bg: TColorName }
1314
export const Wrapper = 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+
export const NotifyIcon = styled(NotifySVG)`
63+
${css.size(15)};
64+
margin-right: 12px;
65+
fill: white;
66+
`
6167
export const CrossIcon = 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+
const SVG = (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+
<path d="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+
export default memo(SVG)

0 commit comments

Comments
 (0)