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

Commit b838e38

Browse files
mydearxymmydearxym
authored
feat(dasboard): primary-color selector & re-org (#1339)
* chore: adjust text margins in settings comp * refactor: color setters with store support * refactor(color-selecor): add tooltip settings
1 parent b85cb81 commit b838e38

File tree

23 files changed

+297
-74
lines changed

23 files changed

+297
-74
lines changed

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

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import { FC, memo, useState } from 'react'
1+
import { FC, memo } from 'react'
22

33
import type { TBannerLayout } from '@/spec'
44

55
import { BANNER_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant'
66
import { callDashboardDesc } from '@/utils/helper'
77

88
import Button from '@/widgets/Buttons/Button'
9-
import { Br, Space, SpaceGrow } from '@/widgets/Common'
9+
import { Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
1010
import CheckLabel from '@/widgets/CheckLabel'
1111

1212
import SectionLabel from '../SectionLabel'
1313

1414
import {
1515
Wrapper,
1616
SelectWrapper,
17-
ExampleBtn,
1817
Layout,
1918
LayoutTitle,
2019
DividerLine,
@@ -26,22 +25,21 @@ import {
2625
ListsWrapper,
2726
TagssWrapper,
2827
} from '../styles/ui/banner_layout'
28+
import { edit } from '../logic'
2929

3030
type TProps = {
31-
_layout?: TBannerLayout
31+
layout: TBannerLayout
3232
}
3333

34-
const BannerLayout: FC<TProps> = ({ _layout = BANNER_LAYOUT.HEADER }) => {
35-
const [layout, setLayout] = useState<TBannerLayout>(BANNER_LAYOUT.HEADER)
36-
34+
const BannerLayout: FC<TProps> = ({ layout }) => {
3735
return (
3836
<Wrapper>
3937
<SectionLabel
4038
title="整体布局"
4139
desc={
4240
<>
4341
整体页面的 Header 布局，适用于除文章页的所有页面。
44-
<ExampleBtn>
42+
<Inline>
4543
<Button
4644
onClick={() =>
4745
callDashboardDesc(DASHBOARD_DESC_LAYOUT.POST_LIST)
@@ -52,12 +50,12 @@ const BannerLayout: FC<TProps> = ({ _layout = BANNER_LAYOUT.HEADER }) => {
5250
>
5351
查看示例
5452
</Button>
55-
</ExampleBtn>
53+
</Inline>
5654
</>
5755
}
5856
/>
5957
<SelectWrapper>
60-
<Layout onClick={() => setLayout(BANNER_LAYOUT.HEADER)}>
58+
<Layout onClick={() => edit(BANNER_LAYOUT.HEADER, 'bannerLayout')}>
6159
<Block $active={layout === BANNER_LAYOUT.HEADER}>
6260
<Row>
6361
<Bar thin long={16} />
@@ -106,13 +104,13 @@ const BannerLayout: FC<TProps> = ({ _layout = BANNER_LAYOUT.HEADER }) => {
106104
<CheckLabel
107105
title="布局 A"
108106
$active={layout === BANNER_LAYOUT.HEADER}
109-
top={10}
107+
top={15}
110108
left={-15}
111109
/>
112110
</LayoutTitle>
113111
</Layout>
114112
<Space right={40} />
115-
<Layout onClick={() => setLayout(BANNER_LAYOUT.TABBER)}>
113+
<Layout onClick={() => edit(BANNER_LAYOUT.TABBER, 'bannerLayout')}>
116114
<Block $active={layout === BANNER_LAYOUT.TABBER}>
117115
<Row>
118116
<Bar long={16} />
@@ -167,7 +165,7 @@ const BannerLayout: FC<TProps> = ({ _layout = BANNER_LAYOUT.HEADER }) => {
167165
<CheckLabel
168166
title="布局 B"
169167
$active={layout === BANNER_LAYOUT.TABBER}
170-
top={10}
168+
top={15}
171169
left={-15}
172170
/>
173171
</LayoutTitle>

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

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import { FC, memo, useState } from 'react'
1+
import { FC, memo } from 'react'
22

33
import type { TChangelogLayout } from '@/spec'
44

55
import { CHANGELOG_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant'
66
import { callDashboardDesc } from '@/utils/helper'
77

88
import Button from '@/widgets/Buttons/Button'
9-
import { Br, Space, SpaceGrow, Divider } from '@/widgets/Common'
9+
import { Br, Space, SpaceGrow, Divider, Inline } from '@/widgets/Common'
1010
import CheckLabel from '@/widgets/CheckLabel'
1111

1212
import SectionLabel from '../SectionLabel'
1313

1414
import {
1515
Wrapper,
1616
SelectWrapper,
17-
ExampleBtn,
1817
Layout,
1918
LayoutTitle,
2019
Block,
@@ -30,21 +29,21 @@ import {
3029
Picture,
3130
} from '../styles/ui/changelog_layout'
3231

32+
import { edit } from '../logic'
33+
3334
type TProps = {
34-
_layout?: TChangelogLayout
35+
layout: TChangelogLayout
3536
}
3637

37-
const ChangelogLayout: FC<TProps> = ({ _layout = CHANGELOG_LAYOUT.FOLD }) => {
38-
const [layout, setLayout] = useState<TChangelogLayout>(CHANGELOG_LAYOUT.FOLD)
39-
38+
const ChangelogLayout: FC<TProps> = ({ layout }) => {
4039
return (
4140
<Wrapper>
4241
<SectionLabel
4342
title="更新日志布局"
4443
desc={
4544
<>
46-
更新日志展现形式，可根据社区内容及团队理解选择合适的展现形式。
47-
<ExampleBtn>
45+
「更新日志」列表的展现形式，切换布局不影响已发布内容。
46+
<Inline>
4847
<Button
4948
onClick={() =>
5049
callDashboardDesc(DASHBOARD_DESC_LAYOUT.POST_LIST)
@@ -55,12 +54,12 @@ const ChangelogLayout: FC<TProps> = ({ _layout = CHANGELOG_LAYOUT.FOLD }) => {
5554
>
5655
查看示例
5756
</Button>
58-
</ExampleBtn>
57+
</Inline>
5958
</>
6059
}
6160
/>
6261
<SelectWrapper>
63-
<Layout onClick={() => setLayout(CHANGELOG_LAYOUT.FOLD)}>
62+
<Layout onClick={() => edit(CHANGELOG_LAYOUT.FOLD, 'changelogLayout')}>
6463
<Block $active={layout === CHANGELOG_LAYOUT.FOLD}>
6564
<Column>
6665
<Picture />
@@ -165,13 +164,15 @@ const ChangelogLayout: FC<TProps> = ({ _layout = CHANGELOG_LAYOUT.FOLD }) => {
165164
<CheckLabel
166165
title="布局 A"
167166
$active={layout === CHANGELOG_LAYOUT.FOLD}
168-
top={10}
167+
top={15}
169168
left={-15}
170169
/>
171170
</LayoutTitle>
172171
</Layout>
173172
<Space right={40} />
174-
<Layout onClick={() => setLayout(CHANGELOG_LAYOUT.NORMAL)}>
173+
<Layout
174+
onClick={() => edit(CHANGELOG_LAYOUT.NORMAL, 'changelogLayout')}
175+
>
175176
<Block $active={layout === CHANGELOG_LAYOUT.NORMAL}>
176177
<Column>
177178
<Picture small />
@@ -233,7 +234,7 @@ const ChangelogLayout: FC<TProps> = ({ _layout = CHANGELOG_LAYOUT.FOLD }) => {
233234
<CheckLabel
234235
title="布局 B"
235236
$active={layout === CHANGELOG_LAYOUT.NORMAL}
236-
top={10}
237+
top={15}
237238
left={-15}
238239
/>
239240
</LayoutTitle>

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

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import { FC, memo, useState } from 'react'
1+
import { FC, memo } from 'react'
22

33
import type { TPostLayout } from '@/spec'
44

55
import { POST_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant'
66
import { callDashboardDesc } from '@/utils/helper'
77

88
import Button from '@/widgets/Buttons/Button'
9-
import { Br, Space, SpaceGrow } from '@/widgets/Common'
9+
import { Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
1010
import CheckLabel from '@/widgets/CheckLabel'
1111

1212
import SectionLabel from '../SectionLabel'
1313

1414
import {
1515
Wrapper,
1616
SelectWrapper,
17-
ExampleBtn,
1817
Layout,
1918
LayoutTitle,
2019
Block,
@@ -25,22 +24,21 @@ import {
2524
UpvoteIcon,
2625
CommentIcon,
2726
} from '../styles/ui/post_list_layout'
27+
import { edit } from '../logic'
2828

2929
type TProps = {
30-
_layout?: TPostLayout
30+
layout: TPostLayout
3131
}
3232

33-
const PostListLayout: FC<TProps> = ({ _layout = POST_LAYOUT.UPVOTE_FIRST }) => {
34-
const [layout, setLayout] = useState<TPostLayout>(POST_LAYOUT.UPVOTE_FIRST)
35-
33+
const PostListLayout: FC<TProps> = ({ layout }) => {
3634
return (
3735
<Wrapper>
3836
<SectionLabel
39-
title="帖子布局"
37+
title="讨论区布局"
4038
desc={
4139
<>
42-
帖子列表展现形式，可根据社区内容及团队理解选择合适的展现形式。
43-
<ExampleBtn>
40+
「讨论区」列表的展现形式，可根据讨论内容侧重或偏好选择，切换布局不影响已发布内容。
41+
<Inline>
4442
<Button
4543
onClick={() =>
4644
callDashboardDesc(DASHBOARD_DESC_LAYOUT.POST_LIST)
@@ -51,12 +49,12 @@ const PostListLayout: FC<TProps> = ({ _layout = POST_LAYOUT.UPVOTE_FIRST }) => {
5149
>
5250
查看示例
5351
</Button>
54-
</ExampleBtn>
52+
</Inline>
5553
</>
5654
}
5755
/>
5856
<SelectWrapper>
59-
<Layout onClick={() => setLayout(POST_LAYOUT.UPVOTE_FIRST)}>
57+
<Layout onClick={() => edit(POST_LAYOUT.UPVOTE_FIRST, 'postLayout')}>
6058
<Block $active={layout === POST_LAYOUT.UPVOTE_FIRST}>
6159
<Bar thin long={30} />
6260
<Br bottom={7} />
@@ -83,13 +81,13 @@ const PostListLayout: FC<TProps> = ({ _layout = POST_LAYOUT.UPVOTE_FIRST }) => {
8381
<CheckLabel
8482
title="布局 A"
8583
$active={layout === POST_LAYOUT.UPVOTE_FIRST}
86-
top={10}
84+
top={15}
8785
left={-15}
8886
/>
8987
</LayoutTitle>
9088
</Layout>
9189
<Space right={40} />
92-
<Layout onClick={() => setLayout(POST_LAYOUT.COMMENT_FIRST)}>
90+
<Layout onClick={() => edit(POST_LAYOUT.COMMENT_FIRST, 'postLayout')}>
9391
<Block $active={layout === POST_LAYOUT.COMMENT_FIRST}>
9492
<Row>
9593
<Column center>
@@ -127,7 +125,7 @@ const PostListLayout: FC<TProps> = ({ _layout = POST_LAYOUT.UPVOTE_FIRST }) => {
127125
<CheckLabel
128126
title="布局 B"
129127
$active={layout === POST_LAYOUT.COMMENT_FIRST}
130-
top={10}
128+
top={15}
131129
left={-15}
132130
/>
133131
</LayoutTitle>

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

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,43 @@
11
import { FC, memo } from 'react'
22

3+
import type { TColorName } from '@/spec'
4+
import Button from '@/widgets/Buttons/Button'
5+
import { Inline } from '@/widgets/Common'
6+
import ColorSelector from '@/widgets/ColorSelector'
7+
38
import SectionLabel from '../SectionLabel'
49
import { Wrapper, Label, TheColor } from '../styles/ui/primary_color'
10+
import { edit } from '../logic'
11+
12+
type TProps = {
13+
primaryColor: TColorName
14+
}
515

6-
const PrimaryColor: FC = () => {
16+
const PrimaryColor: FC<TProps> = ({ primaryColor }) => {
717
return (
818
<Wrapper>
919
<SectionLabel
1020
title="主题色"
11-
desc="设置后会在按钮，标签选择器，功能性文字等组件显示该个性化主题色。"
21+
desc={
22+
<>
23+
设置后会在常见组件，功能性文字等位置显示该个性化主题色。参考
24+
<Inline left={-4}>
25+
<Button size="small" ghost noBorder>
26+
影响范围
27+
</Button>
28+
</Inline>
29+
</>
30+
}
1231
/>
13-
<Label>
14-
<TheColor />
32+
<Label color={primaryColor}>
33+
<ColorSelector
34+
activeColor={primaryColor}
35+
onChange={(color) => edit(color, 'primaryColor')}
36+
placement="right"
37+
offset={[0, 15]}
38+
>
39+
<TheColor color={primaryColor} />
40+
</ColorSelector>
1541
</Label>
1642
</Wrapper>
1743
)

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

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ import { WIDTH } from '@/utils/css'
55
import { callWallpaperEditor } from '@/utils/helper'
66
import { parseWallpaperRaw } from '@/utils/wallpaper'
77

8+
import Button from '@/widgets/Buttons/Button'
89
import CheckLabel from '@/widgets/CheckLabel'
9-
import { Space } from '@/widgets/Common'
10+
import { Space, Inline } from '@/widgets/Common'
1011

1112
import SectionLabel from '../SectionLabel'
1213

@@ -36,15 +37,24 @@ const Wallpaper: FC<TProps> = ({ wallpaper }) => {
3637
<Section>
3738
<SectionLabel
3839
title="壁纸设置"
39-
desc={`壁纸为宽屏（屏幕尺寸大于 ${WIDTH.COMMUNITY.PAGE}
40-
）下显示的背景图片，除内置壁纸外，你可以上传和社区话题相关的自定义图片。点击可更换。`}
40+
desc={
41+
<>
42+
「壁纸」为宽屏（屏幕尺寸大于 ${WIDTH.COMMUNITY.PAGE}
43+
）下，超出内容部分显示的背景图片，除内置壁纸外，你还可以上传和社区话题相关的自定义图片。
44+
<Inline>
45+
<Button onClick={handleCallEditor} size="small" ghost noBorder>
46+
更换壁纸。
47+
</Button>
48+
</Inline>
49+
</>
50+
}
4151
/>
4252

4353
<PreviewWrapper>
4454
<HoverMask onClick={handleCallEditor}>
4555
<UploadIcon />
4656
<PreviewImage style={{ background }} effect={effect} />
47-
<CheckLabel title="原图" top={10} left={-15} $active={false} />
57+
<CheckLabel title="原图" top={15} left={-15} $active={false} />
4858
</HoverMask>
4959

5060
<Space right={48} />
@@ -58,7 +68,7 @@ const Wallpaper: FC<TProps> = ({ wallpaper }) => {
5868
<ContentBar long={70} />
5969
<ContentBar long={30} />
6070
</ContentBlock>
61-
<CheckLabel title="预览效果" top={10} left={-15} $active={false} />
71+
<CheckLabel title="预览效果" top={15} left={-15} $active={false} />
6272
</RealPreview>
6373
</PreviewWrapper>
6474
</Section>

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,21 @@ type TProps = {
1515
}
1616

1717
const UI: FC<TProps> = ({ settings }) => {
18+
const { primaryColor, bannerLayout, postLayout, changelogLayout, wallpaper } =
19+
settings
20+
1821
return (
1922
<Wrapper>
2023
<Portal
2124
title="外观布局"
2225
desc="社区基本外观，主题色，以及常见布局自定义。"
2326
/>
2427

25-
<PrimaryColor />
26-
<BannerLayout />
27-
<PostListLayout />
28-
<ChangelogLayout />
29-
<Wallpaper wallpaper={settings.wallpaper} />
28+
<PrimaryColor primaryColor={primaryColor} />
29+
<BannerLayout layout={bannerLayout} />
30+
<PostListLayout layout={postLayout} />
31+
<ChangelogLayout layout={changelogLayout} />
32+
<Wallpaper wallpaper={wallpaper} />
3033
</Wrapper>
3134
)
3235
}

0 commit comments

Comments
 (0)