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.

Commit346abb6

Browse files
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 parent8b78c73 commit346abb6

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
importThemePalettefrom'@/containers/layout/ThemePalette'
16+
importBannerNotifyfrom'@/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
<SEOmetric={metric}config={seoConfig}/>
8485
<InnerWrappermetric={metric}sidebarPin={sidebarPin}>
86+
<BannerNotify
87+
metric={metric}
88+
layout={globalLayout.bannerNotify}
89+
bg={globalLayout.bannerNotifyBg}
90+
/>
8591
{/*@ts-ignore */}
8692
<ContentWrapperoffsetLeft={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
constroot=getParent(self)asTRootStore
5657
returnroot.wallpaperEditor.wallpapers
5758
},
59+
getglobalLayout():TGlobalLayout{
60+
constroot=getParent(self)asTRootStore
61+
returnroot.dashboardThread.globalLayout
62+
},
5863
}))
5964
.actions((self)=>({
6065
toast(type,options):void{
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+
importtype{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+
importColorSelectorfrom'@/widgets/ColorSelector'
10+
importArrowButtonfrom'@/widgets/Buttons/ArrowButton'
11+
importCheckLabelfrom'@/widgets/CheckLabel'
12+
13+
import{SETTING_FIELD}from'../constant'
14+
importSectionLabelfrom'../SectionLabel'
15+
importSavingBarfrom'../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+
typeTProps={
40+
layout:TBannerNotifyLayout
41+
isLayoutTouched:boolean
42+
isBgTouched:boolean
43+
saving:boolean
44+
bg:TColorName
45+
}
46+
47+
constBannerNotifyLayout: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+
<NotifyBarbg={bg}>
83+
<NotifyDesc>这是一条全局通知，全站可见。</NotifyDesc>
84+
<SpaceGrow/>
85+
<NotifySolidLinkbg={bg}>查看详情</NotifySolidLink>
86+
<Spaceleft={5}/>
87+
<CrossIcon/>
88+
</NotifyBar>
89+
90+
<Main>
91+
<ListsWrapper>
92+
<Barlong={60}thin/>
93+
<Brbottom={14}/>
94+
<Barlong={50}thin/>
95+
<Brbottom={14}/>
96+
<Barlong={55}thin/>
97+
<Brbottom={14}/>
98+
<Barlong={40}thin/>
99+
<Brbottom={14}/>
100+
</ListsWrapper>
101+
<TagssWrapper>
102+
<Brbottom={10}/>
103+
<Barlong={60}thin/>
104+
<Brbottom={6}/>
105+
<Barlong={85}thin/>
106+
<Brbottom={6}/>
107+
<Barlong={50}thin/>
108+
<Brbottom={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+
<Spaceright={40}/>
122+
<Layout
123+
onClick={()=>
124+
edit(BANNER_NOTIFY_LAYOUT.CENTER,'bannerNotifyLayout')
125+
}
126+
>
127+
<Block$active={layout===BANNER_NOTIFY_LAYOUT.CENTER}>
128+
<NotifyBarbg={bg}center>
129+
<NotifyDesc>这是一条全局通知，全站可见。</NotifyDesc>
130+
<NotifyLink>查看详情</NotifyLink>
131+
<Spaceleft={5}/>
132+
<ArrowIcon/>
133+
</NotifyBar>
134+
135+
<Main>
136+
<ListsWrapper>
137+
<Barlong={60}thin/>
138+
<Brbottom={14}/>
139+
<Barlong={50}thin/>
140+
<Brbottom={14}/>
141+
<Barlong={55}thin/>
142+
<Brbottom={14}/>
143+
<Barlong={40}thin/>
144+
<Brbottom={14}/>
145+
</ListsWrapper>
146+
<TagssWrapper>
147+
<Brbottom={10}/>
148+
<Barlong={60}thin/>
149+
<Brbottom={6}/>
150+
<Barlong={85}thin/>
151+
<Brbottom={6}/>
152+
<Barlong={50}thin/>
153+
<Brbottom={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+
<Brtop={30}/>
175+
<SavingBar
176+
isTouched={isBgTouched}
177+
field={SETTING_FIELD.BANNER_NOTIFY_BG}
178+
loading={saving}
179+
>
180+
<BgWrapper>
181+
<div>背景色</div>
182+
<BgLabelbg={bg}>
183+
<ColorSelector
184+
activeColor={bg}
185+
onChange={(color)=>edit(color,'bannerNotifyBg')}
186+
placement="right"
187+
offset={[-1,15]}
188+
>
189+
<TheColorcolor={bg}/>
190+
</ColorSelector>
191+
</BgLabel>
192+
</BgWrapper>
193+
</SavingBar>
194+
</Wrapper>
195+
)
196+
}
197+
198+
exportdefaultmemo(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
importBannerLayoutfrom'./BannerLayout'
1010
importPostListLayoutfrom'./PostListLayout'
1111
importChangelogLayoutfrom'./ChangelogLayout'
12+
importBannerNotifyLayoutfrom'./BannerNotifyLayout'
1213

1314
importtype{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
<Dividertop={30}bottom={60}/>
71+
<BannerNotifyLayout
72+
layout={bannerNotifyLayout}
73+
bg={bannerNotifyBg}
74+
isLayoutTouched={touched.bannerNotifyLayout}
75+
isBgTouched={touched.bannerNotifyBg}
76+
saving={saving}
77+
/>
78+
<Dividertop={20}bottom={60}/>
6879
<Wallpaperwallpaper={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
getcurCommunity():TCommunity{
@@ -106,6 +116,12 @@ const DashboardThread = T.model('DashboardThread', {
106116
constprimaryColorTouched=slf.primaryColor!==initSettings.primaryColor
107117
constbrandLayoutTouched=slf.brandLayout!==initSettings.brandLayout
108118
constbannerLayoutTouched=slf.bannerLayout!==initSettings.bannerLayout
119+
constbannerNotifyLayoutTouched=
120+
slf.bannerNotifyLayout!==initSettings.bannerNotifyLayout
121+
122+
constbannerNotifyBgTouched=
123+
slf.bannerNotifyBg!==initSettings.bannerNotifyBg
124+
109125
constpostLayoutTouched=slf.postLayout!==initSettings.postLayout
110126
constchangelogLayoutTouched=
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)
[8]ページ先頭
©2009-2025 Movatter.jp