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 346abb6

Browse files
mydearxymmydearxym
authored
feat(dashboard): add banner notify setting (#1353)
* refactor(dashboard): add banner notify setting * refactor(dashboard): sync banner notify store to global * refactor(dashboard): add color setting to notify bg
1 parent 8b78c73 commit 346abb6

File tree

15 files changed

+557
-1
lines changed

15 files changed

+557
-1
lines changed

‎src/containers/layout/GlobalLayout/index.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { SIZE, BODY_SCROLLER } from '@/constant'
1313
import { bond } from '@/utils/mobx'
1414

1515
import ThemePalette from '@/containers/layout/ThemePalette'
16+
import BannerNotify from '@/widgets/BannerNotify'
1617
// import Header from '@/widgets/Header'
1718

1819
// import Footer from '@/containers/unit/Footer'
@@ -61,7 +62,7 @@ const GlobalLayoutContainer: FC<TProps> = ({
6162
// load debug graph
6263
useInit(store, { isMobile })
6364

64-
const { sidebarPin, wallpaper, wallpapers } = store
65+
const { sidebarPin, wallpaper, wallpapers, globalLayout } = store
6566

6667
return (
6768
<ThemePalette>
@@ -82,6 +83,11 @@ const GlobalLayoutContainer: FC<TProps> = ({
8283
<Wrapper>
8384
<SEO metric={metric} config={seoConfig} />
8485
<InnerWrapper metric={metric} sidebarPin={sidebarPin}>
86+
<BannerNotify
87+
metric={metric}
88+
layout={globalLayout.bannerNotify}
89+
bg={globalLayout.bannerNotifyBg}
90+
/>
8591
{/* @ts-ignore */}
8692
<ContentWrapper offsetLeft={sidebarPin}>
8793
{/* @ts-ignore */}

‎src/containers/layout/GlobalLayout/store.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import type {
1111
TC11N,
1212
TCommunity,
1313
TWallpaper,
14+
TGlobalLayout,
1415
} from '@/spec'
1516
import { markStates, toJS } from '@/utils/mobx'
1617

@@ -55,6 +56,10 @@ const GlobalLayout = T.model('GlobalLayoutStore', {
5556
const root = getParent(self) as TRootStore
5657
return root.wallpaperEditor.wallpapers
5758
},
59+
get globalLayout(): TGlobalLayout {
60+
const root = getParent(self) as TRootStore
61+
return root.dashboardThread.globalLayout
62+
},
5863
}))
5964
.actions((self) => ({
6065
toast(type, options): void {

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

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
import { FC, memo } from 'react'
2+
3+
import type { TBannerNotifyLayout, TColorName } from '@/spec'
4+
5+
import { BANNER_NOTIFY_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant'
6+
import { callDashboardDesc } from '@/utils/helper'
7+
8+
import { Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
9+
import ColorSelector from '@/widgets/ColorSelector'
10+
import ArrowButton from '@/widgets/Buttons/ArrowButton'
11+
import CheckLabel from '@/widgets/CheckLabel'
12+
13+
import { SETTING_FIELD } from '../constant'
14+
import SectionLabel from '../SectionLabel'
15+
import SavingBar from '../SavingBar'
16+
17+
import {
18+
Wrapper,
19+
SelectWrapper,
20+
Layout,
21+
LayoutTitle,
22+
Block,
23+
Bar,
24+
NotifyBar,
25+
NotifyDesc,
26+
NotifyLink,
27+
NotifySolidLink,
28+
CrossIcon,
29+
ArrowIcon,
30+
Main,
31+
ListsWrapper,
32+
TagssWrapper,
33+
BgWrapper,
34+
BgLabel,
35+
TheColor,
36+
} from '../styles/ui/banner_notify_layout'
37+
import { edit } from '../logic'
38+
39+
type TProps = {
40+
layout: TBannerNotifyLayout
41+
isLayoutTouched: boolean
42+
isBgTouched: boolean
43+
saving: boolean
44+
bg: TColorName
45+
}
46+
47+
const BannerNotifyLayout: FC<TProps> = ({
48+
layout,
49+
isLayoutTouched,
50+
isBgTouched,
51+
saving,
52+
bg,
53+
}) => {
54+
return (
55+
<Wrapper>
56+
<SectionLabel
57+
title="横幅通知"
58+
desc={
59+
<>
60+
全局横幅通知的样式，当用户设置内容时会以一下样式展示。
61+
<Inline>
62+
<ArrowButton
63+
onClick={() =>
64+
callDashboardDesc(DASHBOARD_DESC_LAYOUT.POST_LIST)
65+
}
66+
size="tiny"
67+
arrowStyle="simple"
68+
>
69+
查看示例
70+
</ArrowButton>
71+
</Inline>
72+
</>
73+
}
74+
/>
75+
<SelectWrapper>
76+
<Layout
77+
onClick={() =>
78+
edit(BANNER_NOTIFY_LAYOUT.DEFAULT, 'bannerNotifyLayout')
79+
}
80+
>
81+
<Block $active={layout === BANNER_NOTIFY_LAYOUT.DEFAULT}>
82+
<NotifyBar bg={bg}>
83+
<NotifyDesc>这是一条全局通知，全站可见。</NotifyDesc>
84+
<SpaceGrow />
85+
<NotifySolidLink bg={bg}>查看详情</NotifySolidLink>
86+
<Space left={5} />
87+
<CrossIcon />
88+
</NotifyBar>
89+
90+
<Main>
91+
<ListsWrapper>
92+
<Bar long={60} thin />
93+
<Br bottom={14} />
94+
<Bar long={50} thin />
95+
<Br bottom={14} />
96+
<Bar long={55} thin />
97+
<Br bottom={14} />
98+
<Bar long={40} thin />
99+
<Br bottom={14} />
100+
</ListsWrapper>
101+
<TagssWrapper>
102+
<Br bottom={10} />
103+
<Bar long={60} thin />
104+
<Br bottom={6} />
105+
<Bar long={85} thin />
106+
<Br bottom={6} />
107+
<Bar long={50} thin />
108+
<Br bottom={6} />
109+
</TagssWrapper>
110+
</Main>
111+
</Block>
112+
<LayoutTitle $active={layout === BANNER_NOTIFY_LAYOUT.DEFAULT}>
113+
<CheckLabel
114+
title="常规式"
115+
$active={layout === BANNER_NOTIFY_LAYOUT.DEFAULT}
116+
top={15}
117+
left={-15}
118+
/>
119+
</LayoutTitle>
120+
</Layout>
121+
<Space right={40} />
122+
<Layout
123+
onClick={() =>
124+
edit(BANNER_NOTIFY_LAYOUT.CENTER, 'bannerNotifyLayout')
125+
}
126+
>
127+
<Block $active={layout === BANNER_NOTIFY_LAYOUT.CENTER}>
128+
<NotifyBar bg={bg} center>
129+
<NotifyDesc>这是一条全局通知，全站可见。</NotifyDesc>
130+
<NotifyLink>查看详情</NotifyLink>
131+
<Space left={5} />
132+
<ArrowIcon />
133+
</NotifyBar>
134+
135+
<Main>
136+
<ListsWrapper>
137+
<Bar long={60} thin />
138+
<Br bottom={14} />
139+
<Bar long={50} thin />
140+
<Br bottom={14} />
141+
<Bar long={55} thin />
142+
<Br bottom={14} />
143+
<Bar long={40} thin />
144+
<Br bottom={14} />
145+
</ListsWrapper>
146+
<TagssWrapper>
147+
<Br bottom={10} />
148+
<Bar long={60} thin />
149+
<Br bottom={6} />
150+
<Bar long={85} thin />
151+
<Br bottom={6} />
152+
<Bar long={50} thin />
153+
<Br bottom={6} />
154+
</TagssWrapper>
155+
</Main>
156+
</Block>
157+
<LayoutTitle $active={layout === BANNER_NOTIFY_LAYOUT.CENTER}>
158+
<CheckLabel
159+
title="居中式"
160+
$active={layout === BANNER_NOTIFY_LAYOUT.CENTER}
161+
top={15}
162+
left={-15}
163+
/>
164+
</LayoutTitle>
165+
</Layout>
166+
</SelectWrapper>
167+
<SavingBar
168+
isTouched={isLayoutTouched}
169+
field={SETTING_FIELD.BANNER_NOTIFY_LAYOUT}
170+
loading={saving}
171+
top={20}
172+
/>
173+
174+
<Br top={30} />
175+
<SavingBar
176+
isTouched={isBgTouched}
177+
field={SETTING_FIELD.BANNER_NOTIFY_BG}
178+
loading={saving}
179+
>
180+
<BgWrapper>
181+
<div>背景色</div>
182+
<BgLabel bg={bg}>
183+
<ColorSelector
184+
activeColor={bg}
185+
onChange={(color) => edit(color, 'bannerNotifyBg')}
186+
placement="right"
187+
offset={[-1, 15]}
188+
>
189+
<TheColor color={bg} />
190+
</ColorSelector>
191+
</BgLabel>
192+
</BgWrapper>
193+
</SavingBar>
194+
</Wrapper>
195+
)
196+
}
197+
198+
export default memo(BannerNotifyLayout)

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import BrandLayout from './BrandLayout'
99
import BannerLayout from './BannerLayout'
1010
import PostListLayout from './PostListLayout'
1111
import ChangelogLayout from './ChangelogLayout'
12+
import BannerNotifyLayout from './BannerNotifyLayout'
1213

1314
import type { TUiSettings, TTouched } from '../spec'
1415
import { Wrapper } from '../styles/ui'
@@ -23,6 +24,8 @@ const UI: FC<TProps> = ({ settings, touched }) => {
2324
primaryColor,
2425
brandLayout,
2526
bannerLayout,
27+
bannerNotifyLayout,
28+
bannerNotifyBg,
2629
postLayout,
2730
changelogLayout,
2831
wallpaper,
@@ -65,6 +68,14 @@ const UI: FC<TProps> = ({ settings, touched }) => {
6568
saving={saving}
6669
/>
6770
<Divider top={30} bottom={60} />
71+
<BannerNotifyLayout
72+
layout={bannerNotifyLayout}
73+
bg={bannerNotifyBg}
74+
isLayoutTouched={touched.bannerNotifyLayout}
75+
isBgTouched={touched.bannerNotifyBg}
76+
saving={saving}
77+
/>
78+
<Divider top={20} bottom={60} />
6879
<Wallpaper wallpaper={wallpaper} />
6980
</Wrapper>
7081
)

‎src/containers/thread/DashboardThread/constant.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ export const SETTING_FIELD = {
3232
POST_LAYOUT: 'postLayout',
3333
BRAND_LAYOUT: 'brandLayout',
3434
BANNER_LAYOUT: 'bannerLayout',
35+
BANNER_NOTIFY_LAYOUT: 'bannerNotifyLayout',
36+
BANNER_NOTIFY_BG: 'bannerNotifyBg',
3537
CHANGELOG_LAYOUT: 'changelogLayout',
3638
TAG: 'tag',
3739
ALIAS: 'alias',

‎src/containers/thread/DashboardThread/spec.d.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import type {
77
TChangelogLayout,
88
TBrandLayout,
99
TBannerLayout,
10+
TBannerNotifyLayout,
1011
TTag,
1112
} from '@/spec'
1213

@@ -69,6 +70,8 @@ export type TUiSettings = {
6970
primaryColor: TColorName
7071
brandLayout: TBrandLayout
7172
bannerLayout: TBannerLayout
73+
bannerNotifyLayout: TBannerNotifyLayout
74+
bannerNotifyBg: TColorName
7275
postLayout: TPostLayout
7376
changelogLayout: TChangelogLayout
7477
}
@@ -77,6 +80,8 @@ export type TTouched = {
7780
primaryColor: boolean
7881
brandLayout: boolean
7982
bannerLayout: boolean
83+
bannerNotifyLayout: boolean
84+
bannerNotifyBg: boolean
8085
postLayout: boolean
8186
changelogLayout: boolean
8287
alias: boolean
@@ -90,6 +95,8 @@ export type TSettingField =
9095
| 'postLayout'
9196
| 'brandLayout'
9297
| 'bannerLayout'
98+
| 'bannerNotifyLayout'
99+
| 'bannerNotifyBg'
93100
| 'changelogLayout'
94101
| 'tag'
95102
| 'alias'

‎src/containers/thread/DashboardThread/store.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { mockTags } from '@/utils/mock'
1111
import {
1212
BRAND_LAYOUT,
1313
BANNER_LAYOUT,
14+
BANNER_NOTIFY_LAYOUT,
1415
CHANGELOG_LAYOUT,
1516
POST_LAYOUT,
1617
COLORS,
@@ -54,6 +55,11 @@ const settingsModalFields = {
5455
T.enumeration(values(BANNER_LAYOUT)),
5556
BANNER_LAYOUT.HEADER,
5657
),
58+
bannerNotifyLayout: T.optional(
59+
T.enumeration(values(BANNER_NOTIFY_LAYOUT)),
60+
BANNER_NOTIFY_LAYOUT.DEFAULT,
61+
),
62+
bannerNotifyBg: T.optional(T.enumeration(keys(COLORS)), 'BLACK'),
5763
changelogLayout: T.optional(
5864
T.enumeration(values(CHANGELOG_LAYOUT)),
5965
CHANGELOG_LAYOUT.FOLD,
@@ -81,6 +87,8 @@ const DashboardThread = T.model('DashboardThread', {
8187
changelogLayout,
8288
postLayout,
8389
bannerLayout,
90+
bannerNotifyLayout,
91+
bannerNotifyBg,
8492
brandLayout,
8593
} = initSettings
8694

@@ -90,6 +98,8 @@ const DashboardThread = T.model('DashboardThread', {
9098
post: postLayout,
9199
changelog: changelogLayout,
92100
banner: bannerLayout,
101+
bannerNotify: bannerNotifyLayout,
102+
bannerNotifyBg,
93103
}
94104
},
95105
get curCommunity(): TCommunity {
@@ -106,6 +116,12 @@ const DashboardThread = T.model('DashboardThread', {
106116
const primaryColorTouched = slf.primaryColor !== initSettings.primaryColor
107117
const brandLayoutTouched = slf.brandLayout !== initSettings.brandLayout
108118
const bannerLayoutTouched = slf.bannerLayout !== initSettings.bannerLayout
119+
const bannerNotifyLayoutTouched =
120+
slf.bannerNotifyLayout !== initSettings.bannerNotifyLayout
121+
122+
const bannerNotifyBgTouched =
123+
slf.bannerNotifyBg !== initSettings.bannerNotifyBg
124+
109125
const postLayoutTouched = slf.postLayout !== initSettings.postLayout
110126
const changelogLayoutTouched =
111127
slf.changelogLayout !== initSettings.changelogLayout
@@ -116,6 +132,8 @@ const DashboardThread = T.model('DashboardThread', {
116132
primaryColor: primaryColorTouched,
117133
brandLayout: brandLayoutTouched,
118134
bannerLayout: bannerLayoutTouched,
135+
bannerNotifyLayout: bannerNotifyLayoutTouched,
136+
bannerNotifyBg: bannerNotifyBgTouched,
119137
postLayout: postLayoutTouched,
120138
changelogLayout: changelogLayoutTouched,
121139
alias: aliasTouched,
@@ -167,6 +185,8 @@ const DashboardThread = T.model('DashboardThread', {
167185
'primaryColor',
168186
'brandLayout',
169187
'bannerLayout',
188+
'bannerNotifyLayout',
189+
'bannerNotifyBg',
170190
'postLayout',
171191
'changelogLayout',
172192
],

0 commit comments

Comments
 (0)