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

Commit 35cfafd

Browse files
mydearxymmydearxym
authored
feat: dashboard save confirm bar (#1340)
* style: adjust colors * feat: basic UI * style(saving-bar): adjust background * refactor(saving-bar): enhance show & rallback logic
1 parent b838e38 commit 35cfafd

File tree

16 files changed

+210
-30
lines changed

16 files changed

+210
-30
lines changed

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { FC, memo, ReactNode } from 'react'
2+
3+
import type { TSpace } from '@/spec'
4+
import { SpaceGrow } from '@/widgets/Common'
5+
import YesOrNoButtons from '@/widgets/Buttons/YesOrNoButtons'
6+
7+
import type { TSettingField } from './spec.d'
8+
import {
9+
Wrapper,
10+
HintWrapper,
11+
InfoIcon,
12+
HintText,
13+
Hint,
14+
ActionWrapper,
15+
} from './styles/saving_bar'
16+
17+
import { rollbackEdit } from './logic'
18+
19+
type TProps = {
20+
field: TSettingField
21+
prefix?: string
22+
hint?: ReactNode
23+
} & TSpace
24+
25+
const SavingBar: FC<TProps> = ({
26+
field,
27+
prefix = '是否保存',
28+
hint = null,
29+
...restProps
30+
}) => {
31+
return (
32+
<Wrapper {...restProps}>
33+
<HintWrapper>
34+
<InfoIcon />
35+
<HintText>
36+
{prefix}
37+
{hint && <Hint>{hint}</Hint>} ?
38+
</HintText>
39+
</HintWrapper>
40+
<SpaceGrow />
41+
<ActionWrapper>
42+
<YesOrNoButtons
43+
cancelText="取消"
44+
confirmText="确定"
45+
space={4}
46+
onCancel={() => rollbackEdit(field)}
47+
/>
48+
</ActionWrapper>
49+
</Wrapper>
50+
)
51+
}
52+
53+
export default memo(SavingBar)

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import Button from '@/widgets/Buttons/Button'
99
import { Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
1010
import CheckLabel from '@/widgets/CheckLabel'
1111

12+
import { SETTING_FIELD } from '../constant'
1213
import SectionLabel from '../SectionLabel'
14+
import SavingBar from '../SavingBar'
1315

1416
import {
1517
Wrapper,
@@ -29,9 +31,10 @@ import { edit } from '../logic'
2931

3032
type TProps = {
3133
layout: TBannerLayout
34+
isTouched: boolean
3235
}
3336

34-
const BannerLayout: FC<TProps> = ({ layout }) => {
37+
const BannerLayout: FC<TProps> = ({ layout, isTouched }) => {
3538
return (
3639
<Wrapper>
3740
<SectionLabel
@@ -102,7 +105,7 @@ const BannerLayout: FC<TProps> = ({ layout }) => {
102105
</Block>
103106
<LayoutTitle $active={layout === BANNER_LAYOUT.HEADER}>
104107
<CheckLabel
105-
title="布局 A"
108+
title="标题式"
106109
$active={layout === BANNER_LAYOUT.HEADER}
107110
top={15}
108111
left={-15}
@@ -163,14 +166,15 @@ const BannerLayout: FC<TProps> = ({ layout }) => {
163166
</Block>
164167
<LayoutTitle $active={layout === BANNER_LAYOUT.TABBER}>
165168
<CheckLabel
166-
title="布局 B"
169+
title="标签卡式"
167170
$active={layout === BANNER_LAYOUT.TABBER}
168171
top={15}
169172
left={-15}
170173
/>
171174
</LayoutTitle>
172175
</Layout>
173176
</SelectWrapper>
177+
{isTouched && <SavingBar top={20} field={SETTING_FIELD.BANNER_LAYOUT} />}
174178
</Wrapper>
175179
)
176180
}

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import Button from '@/widgets/Buttons/Button'
99
import { Br, Space, SpaceGrow, Divider, Inline } from '@/widgets/Common'
1010
import CheckLabel from '@/widgets/CheckLabel'
1111

12+
import { SETTING_FIELD } from '../constant'
1213
import SectionLabel from '../SectionLabel'
14+
import SavingBar from '../SavingBar'
1315

1416
import {
1517
Wrapper,
@@ -33,9 +35,10 @@ import { edit } from '../logic'
3335

3436
type TProps = {
3537
layout: TChangelogLayout
38+
isTouched: boolean
3639
}
3740

38-
const ChangelogLayout: FC<TProps> = ({ layout }) => {
41+
const ChangelogLayout: FC<TProps> = ({ layout, isTouched }) => {
3942
return (
4043
<Wrapper>
4144
<SectionLabel
@@ -162,7 +165,7 @@ const ChangelogLayout: FC<TProps> = ({ layout }) => {
162165
</Block>
163166
<LayoutTitle $active={layout === CHANGELOG_LAYOUT.FOLD}>
164167
<CheckLabel
165-
title="布局 A"
168+
title="折叠历史发布"
166169
$active={layout === CHANGELOG_LAYOUT.FOLD}
167170
top={15}
168171
left={-15}
@@ -232,14 +235,18 @@ const ChangelogLayout: FC<TProps> = ({ layout }) => {
232235
</Block>
233236
<LayoutTitle $active={layout === CHANGELOG_LAYOUT.NORMAL}>
234237
<CheckLabel
235-
title="布局 B"
238+
title="全展开"
236239
$active={layout === CHANGELOG_LAYOUT.NORMAL}
237240
top={15}
238241
left={-15}
239242
/>
240243
</LayoutTitle>
241244
</Layout>
242245
</SelectWrapper>
246+
247+
{isTouched && (
248+
<SavingBar top={20} field={SETTING_FIELD.CHANGELOG_LAYOUT} />
249+
)}
243250
</Wrapper>
244251
)
245252
}

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import Button from '@/widgets/Buttons/Button'
99
import { Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
1010
import CheckLabel from '@/widgets/CheckLabel'
1111

12+
import { SETTING_FIELD } from '../constant'
1213
import SectionLabel from '../SectionLabel'
14+
import SavingBar from '../SavingBar'
1315

1416
import {
1517
Wrapper,
@@ -28,9 +30,10 @@ import { edit } from '../logic'
2830

2931
type TProps = {
3032
layout: TPostLayout
33+
isTouched: boolean
3134
}
3235

33-
const PostListLayout: FC<TProps> = ({ layout }) => {
36+
const PostListLayout: FC<TProps> = ({ layout, isTouched }) => {
3437
return (
3538
<Wrapper>
3639
<SectionLabel
@@ -79,7 +82,7 @@ const PostListLayout: FC<TProps> = ({ layout }) => {
7982
</Block>
8083
<LayoutTitle $active={layout === POST_LAYOUT.UPVOTE_FIRST}>
8184
<CheckLabel
82-
title="布局 A"
85+
title="紧凑式"
8386
$active={layout === POST_LAYOUT.UPVOTE_FIRST}
8487
top={15}
8588
left={-15}
@@ -123,14 +126,15 @@ const PostListLayout: FC<TProps> = ({ layout }) => {
123126
</Block>
124127
<LayoutTitle $active={layout === POST_LAYOUT.COMMENT_FIRST}>
125128
<CheckLabel
126-
title="布局 B"
129+
title="三列式"
127130
$active={layout === POST_LAYOUT.COMMENT_FIRST}
128131
top={15}
129132
left={-15}
130133
/>
131134
</LayoutTitle>
132135
</Layout>
133136
</SelectWrapper>
137+
{isTouched && <SavingBar top={20} field={SETTING_FIELD.POST_LAYOUT} />}
134138
</Wrapper>
135139
)
136140
}

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,18 @@ import { Inline } from '@/widgets/Common'
66
import ColorSelector from '@/widgets/ColorSelector'
77

88
import SectionLabel from '../SectionLabel'
9+
import SavingBar from '../SavingBar'
10+
11+
import { SETTING_FIELD } from '../constant'
912
import { Wrapper, Label, TheColor } from '../styles/ui/primary_color'
1013
import { edit } from '../logic'
1114

1215
type TProps = {
1316
primaryColor: TColorName
17+
isTouched: boolean
1418
}
1519

16-
const PrimaryColor: FC<TProps> = ({ primaryColor }) => {
20+
const PrimaryColor: FC<TProps> = ({ primaryColor, isTouched }) => {
1721
return (
1822
<Wrapper>
1923
<SectionLabel
@@ -34,11 +38,12 @@ const PrimaryColor: FC<TProps> = ({ primaryColor }) => {
3438
activeColor={primaryColor}
3539
onChange={(color) => edit(color, 'primaryColor')}
3640
placement="right"
37-
offset={[0, 15]}
41+
offset={[-1, 15]}
3842
>
3943
<TheColor color={primaryColor} />
4044
</ColorSelector>
4145
</Label>
46+
{isTouched && <SavingBar top={20} field={SETTING_FIELD.PRIMARY_COLOR} />}
4247
</Wrapper>
4348
)
4449
}

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ import BannerLayout from './BannerLayout'
77
import PostListLayout from './PostListLayout'
88
import ChangelogLayout from './ChangelogLayout'
99

10-
import type { TUiSettings } from '../spec'
10+
import type { TUiSettings, TTouched } from '../spec'
1111
import { Wrapper } from '../styles/ui'
1212

1313
type TProps = {
1414
settings: TUiSettings
15+
touched: TTouched
1516
}
1617

17-
const UI: FC<TProps> = ({ settings }) => {
18+
const UI: FC<TProps> = ({ settings, touched }) => {
1819
const { primaryColor, bannerLayout, postLayout, changelogLayout, wallpaper } =
1920
settings
2021

@@ -25,10 +26,16 @@ const UI: FC<TProps> = ({ settings }) => {
2526
desc="社区基本外观，主题色，以及常见布局自定义。"
2627
/>
2728

28-
<PrimaryColor primaryColor={primaryColor} />
29-
<BannerLayout layout={bannerLayout} />
30-
<PostListLayout layout={postLayout} />
31-
<ChangelogLayout layout={changelogLayout} />
29+
<PrimaryColor
30+
primaryColor={primaryColor}
31+
isTouched={touched.primaryColor}
32+
/>
33+
<BannerLayout layout={bannerLayout} isTouched={touched.bannerLayout} />
34+
<PostListLayout layout={postLayout} isTouched={touched.postLayout} />
35+
<ChangelogLayout
36+
layout={changelogLayout}
37+
isTouched={touched.changelogLayout}
38+
/>
3239
<Wallpaper wallpaper={wallpaper} />
3340
</Wrapper>
3441
)

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import type { TTab } from './spec'
1+
import type { SnakeUpperCase } from '@/spec'
2+
3+
import type { TTab, TSettingField } from './spec'
24

35
export const TAB = {
46
OVERVIEW: 'overview',
@@ -22,4 +24,9 @@ export const TAB = {
2224
WIDGETS: 'widgets',
2325
} as Record<Uppercase<TTab>, TTab>
2426

25-
export const holder = 1
27+
export const SETTING_FIELD = {
28+
PRIMARY_COLOR: 'primaryColor',
29+
POST_LAYOUT: 'postLayout',
30+
BANNER_LAYOUT: 'bannerLayout',
31+
CHANGELOG_LAYOUT: 'changelogLayout',
32+
} as Record<SnakeUpperCase<TSettingField>, TSettingField>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,13 @@ const DashboardThreadContainer: FC<TProps> = ({
3838
testid = 'dashboard-thread',
3939
}) => {
4040
useInit(store)
41-
const { curTab, uiSettings } = store
42-
console.log('uiSettings: ', uiSettings)
41+
const { curTab, uiSettings, touched } = store
4342

4443
return (
4544
<Wrapper testid={testid}>
4645
<MainWrapper>
4746
{curTab === TAB.BASIC_INFO && <BasicInfo />}
48-
{curTab === TAB.UI && <UI settings={uiSettings} />}
47+
{curTab === TAB.UI && <UI settings={uiSettings} touched={touched} />}
4948
{curTab === TAB.ADMINS && <Admin />}
5049
{curTab === TAB.THREADS && <Threads />}
5150

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { TEditValue } from '@/spec'
55
import { buildLog } from '@/utils/logger'
66
import { updateEditing } from '@/utils/mobx'
77

8-
import type { TTab } from './spec'
8+
import type { TTab, TSettingField } from './spec'
99
// import S from './schma'
1010
import type { TStore } from './store'
1111

@@ -18,6 +18,13 @@ export const tabOnChange = (curTab: TTab): void => {
1818
store.mark({ curTab })
1919
}
2020

21+
/**
22+
* rollback editing value to init value
23+
*/
24+
export const rollbackEdit = (field: TSettingField): void => {
25+
store.rollbackEdit(field)
26+
}
27+
2128
export const edit = (e: TEditValue, key: string): void => {
2229
updateEditing(store, key, e)
2330
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,16 @@ export type TUiSettings = {
3434
postLayout: TPostLayout
3535
changelogLayout: TChangelogLayout
3636
}
37+
38+
export type TTouched = {
39+
primaryColor: boolean
40+
bannerLayout: boolean
41+
postLayout: boolean
42+
changelogLayout: boolean
43+
}
44+
45+
export type TSettingField =
46+
| 'primaryColor'
47+
| 'postLayout'
48+
| 'bannerLayout'
49+
| 'changelogLayout'

0 commit comments

Comments
 (0)