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

Commit 843238a

Browse files
mydearxymmydearxym
authored
feat(dashboard): basic UI settings (#1336)
* feat: wallpaper editor in ui settings * feat: add post layout settings UI/UX * chore: spec/constant for postlayout * style: adjust preview card * feat(widgets): add CheckLabel * refactor: move layout preview to drawer * refactor(post): add cat/state for preview * refactor(ArticleCatState): prop type -> cat * refactor(dashboard-post-layout): enhance post attrs * refactor(drawer): enhance type with extraInfo * chore: fix ci * chore: fix ci
1 parent d280178 commit 843238a

File tree

61 files changed

+951
-222
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+951
-222
lines changed

‎src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,19 +36,17 @@ const FixedHeader: FC<TProps> = ({
3636
<ContentWrapper metric={metric}>
3737
<Title>{article.title}</Title>
3838
<ArticleStateBadgeWrapper>
39-
{article.id === '239' && <ArticleCatState type="FEATURE" />}
40-
{article.id === '231' && <ArticleCatState type="BUG" />}
41-
{article.id === '227' && (
42-
<ArticleCatState type="BUG" state="TODO" />
43-
)}
39+
{article.id === '239' && <ArticleCatState cat="FEATURE" />}
40+
{article.id === '231' && <ArticleCatState cat="BUG" />}
41+
{article.id === '227' && <ArticleCatState cat="BUG" state="TODO" />}
4442
{article.id === '228' && (
45-
<ArticleCatState type="FEATURE" state="WIP" />
43+
<ArticleCatState cat="FEATURE" state="WIP" />
4644
)}
4745
{article.id === '226' && (
48-
<ArticleCatState type="QUESTION" state="RESOLVE" />
46+
<ArticleCatState cat="QUESTION" state="RESOLVE" />
4947
)}
5048
{article.id === '225' && (
51-
<ArticleCatState type="LOCK" state="LOCK" />
49+
<ArticleCatState cat="LOCK" state="LOCK" />
5250
)}
5351
</ArticleStateBadgeWrapper>
5452
</ContentWrapper>

‎src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,19 +69,17 @@ const PostLayout: FC<TProps> = ({ metric = METRIC.ARTICLE, article }) => {
6969
)} */}
7070
<DotDivider space={12} />
7171
<div>
72-
{article.id === '239' && <ArticleCatState type="FEATURE" />}
73-
{article.id === '231' && <ArticleCatState type="BUG" />}
74-
{article.id === '227' && (
75-
<ArticleCatState type="BUG" state="TODO" />
76-
)}
72+
{article.id === '239' && <ArticleCatState cat="FEATURE" />}
73+
{article.id === '231' && <ArticleCatState cat="BUG" />}
74+
{article.id === '227' && <ArticleCatState cat="BUG" state="TODO" />}
7775
{article.id === '228' && (
78-
<ArticleCatState type="FEATURE" state="WIP" />
76+
<ArticleCatState cat="FEATURE" state="WIP" />
7977
)}
8078
{article.id === '226' && (
81-
<ArticleCatState type="QUESTION" state="RESOLVE" />
79+
<ArticleCatState cat="QUESTION" state="RESOLVE" />
8280
)}
8381
{article.id === '225' && (
84-
<ArticleCatState type="LOCK" state="LOCK" />
82+
<ArticleCatState cat="LOCK" state="LOCK" />
8583
)}
8684
</div>
8785
</Header>

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

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import { FC, memo, useState } from 'react'
2+
3+
import type { TPostLayout } from '@/spec'
4+
5+
import { POST_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant'
6+
import { callDashboardDesc } from '@/utils/helper'
7+
8+
import Button from '@/widgets/Buttons/Button'
9+
import { Br, Space, SpaceGrow } from '@/widgets/Common'
10+
import CheckLabel from '@/widgets/CheckLabel'
11+
12+
import {
13+
Wrapper,
14+
Section,
15+
SelectWrapper,
16+
ExampleBtn,
17+
Title,
18+
Layout,
19+
LayoutTitle,
20+
Block,
21+
Bar,
22+
Circle,
23+
Row,
24+
Column,
25+
UpvoteIcon,
26+
CommentIcon,
27+
} from '../styles/ui/post_list_layout'
28+
29+
type TProps = {
30+
_layout?: TPostLayout
31+
}
32+
33+
const PostListLayout: FC<TProps> = ({ _layout = POST_LAYOUT.UPVOTE_FIRST }) => {
34+
const [layout, setLayout] = useState<TPostLayout>(POST_LAYOUT.UPVOTE_FIRST)
35+
36+
return (
37+
<Wrapper>
38+
<Section>
39+
<Row>
40+
<Title>讨论列表</Title>
41+
<SpaceGrow />
42+
<ExampleBtn>
43+
<Button
44+
size="tiny"
45+
ghost
46+
noBorder
47+
onClick={() => callDashboardDesc(DASHBOARD_DESC_LAYOUT.POST_LIST)}
48+
>
49+
查看示例
50+
</Button>
51+
</ExampleBtn>
52+
</Row>
53+
<SelectWrapper>
54+
<Layout onClick={() => setLayout(POST_LAYOUT.UPVOTE_FIRST)}>
55+
<Block $active={layout === POST_LAYOUT.UPVOTE_FIRST}>
56+
<Bar thin long={30} />
57+
<Br bottom={7} />
58+
<Row>
59+
<Bar long={60} />
60+
<Space right={5} />
61+
<Bar thin long={8} />
62+
<SpaceGrow />
63+
<CommentIcon />
64+
</Row>
65+
<Br bottom={10} />
66+
67+
<Bar long={80} thin />
68+
<Br bottom={10} />
69+
<Row>
70+
<UpvoteIcon size={15} />
71+
<Space right={5} />
72+
<Bar long={12} />
73+
<Space right={15} />
74+
<Bar long={12} thin />
75+
</Row>
76+
</Block>
77+
<LayoutTitle $active={layout === POST_LAYOUT.UPVOTE_FIRST}>
78+
<CheckLabel
79+
title="布局 A"
80+
$active={layout === POST_LAYOUT.UPVOTE_FIRST}
81+
top={10}
82+
left={-15}
83+
/>
84+
</LayoutTitle>
85+
</Layout>
86+
<Space right={40} />
87+
<Layout onClick={() => setLayout(POST_LAYOUT.COMMENT_FIRST)}>
88+
<Block $active={layout === POST_LAYOUT.COMMENT_FIRST}>
89+
<Row>
90+
<Column center>
91+
<Circle />
92+
<Br bottom={8} />
93+
<UpvoteIcon size={13} />
94+
<Br bottom={3} />
95+
<Bar long={50} />
96+
</Column>
97+
98+
<Space right={12} />
99+
100+
<Column grow>
101+
<Row>
102+
<Bar long={50} />
103+
<Space right={5} />
104+
<Bar thin long={8} />
105+
<SpaceGrow />
106+
<Bar long={20} />
107+
</Row>
108+
<Br bottom={8} />
109+
<Bar thin long={20} />
110+
<Br bottom={11} />
111+
<Bar thin long={80} />
112+
<Br bottom={10} />
113+
<Row>
114+
<Bar long={20} />
115+
<Space right={12} />
116+
<Bar thin long={20} />
117+
</Row>
118+
</Column>
119+
</Row>
120+
</Block>
121+
<LayoutTitle $active={layout === POST_LAYOUT.COMMENT_FIRST}>
122+
<CheckLabel
123+
title="布局 B"
124+
$active={layout === POST_LAYOUT.COMMENT_FIRST}
125+
top={10}
126+
left={-15}
127+
/>
128+
</LayoutTitle>
129+
</Layout>
130+
</SelectWrapper>
131+
</Section>
132+
</Wrapper>
133+
)
134+
}
135+
136+
export default memo(PostListLayout)

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { FC, memo, useCallback } from 'react'
2+
3+
import type { TWallpaper } from '@/spec'
4+
import { WIDTH } from '@/utils/css'
5+
import { callWallpaperEditor } from '@/utils/helper'
6+
import { parseWallpaperRaw } from '@/utils/wallpaper'
7+
8+
import { Space } from '@/widgets/Common'
9+
10+
import {
11+
Wrapper,
12+
Section,
13+
Title,
14+
Desc,
15+
PreviewWrapper,
16+
RealPreview,
17+
PreviewImage,
18+
ContentBlock,
19+
ContentBar,
20+
} from '../styles/ui/wallpaper'
21+
22+
type TProps = {
23+
wallpaper: TWallpaper
24+
}
25+
26+
const Wallpaper: FC<TProps> = ({ wallpaper }) => {
27+
const { background, effect } = parseWallpaperRaw(wallpaper)
28+
29+
const handleCallEditor = useCallback(() => callWallpaperEditor(), [])
30+
31+
return (
32+
<Wrapper>
33+
<Section>
34+
<Title>壁纸设置</Title>
35+
<PreviewWrapper>
36+
<PreviewImage
37+
onClick={handleCallEditor}
38+
style={{ background }}
39+
effect={effect}
40+
/>
41+
<Space right={20} />
42+
<RealPreview>
43+
<PreviewImage
44+
onClick={handleCallEditor}
45+
style={{ background }}
46+
effect={effect}
47+
/>
48+
<ContentBlock onClick={handleCallEditor}>
49+
<ContentBar long={30} />
50+
<ContentBar long={80} />
51+
<ContentBar long={60} />
52+
<ContentBar long={20} />
53+
<ContentBar long={70} />
54+
<ContentBar long={30} />
55+
</ContentBlock>
56+
</RealPreview>
57+
</PreviewWrapper>
58+
<Desc>
59+
壁纸为宽屏（屏幕尺寸大于 {WIDTH.COMMUNITY.PAGE}
60+
）下显示的背景图片，除内置壁纸外，你可以上传和社区话题相关的自定义图片。点击可更换。
61+
</Desc>
62+
</Section>
63+
</Wrapper>
64+
)
65+
}
66+
67+
export default memo(Wallpaper)

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

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

3+
import Wallpaper from './Wallpaper'
4+
import PostListLayout from './PostListLayout'
5+
6+
import type { TUiSettings } from '../spec'
37
import { Wrapper } from '../styles/ui'
48

59
type TProps = {
6-
testid?: string
10+
settings: TUiSettings
711
}
812

9-
const UI: FC<TProps> = ({ testid = 'ui' }) => {
13+
const UI: FC<TProps> = ({ settings }) => {
1014
return (
1115
<Wrapper>
12-
<div>UI</div>
16+
<PostListLayout />
17+
<Wallpaper wallpaper={settings.wallpaper} />
1318
</Wrapper>
1419
)
1520
}

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

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

4343
return (
4444
<Wrapper testid={testid}>
4545
<MainWrapper>
4646
{curTab === TAB.BASIC_INFO && <BasicInfo />}
47-
{curTab === TAB.UI && <UI />}
47+
{curTab === TAB.UI && <UI settings={uiSettings} />}
4848
{curTab === TAB.ADMINS && <Admin />}
4949
{curTab === TAB.THREADS && <Threads />}
5050

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { TWallpaper } from '@/spec'
2+
13
export type TTab =
24
| 'overview'
35
| 'basic_info'
@@ -7,3 +9,7 @@ export type TTab =
79
| 'third_part'
810
| 'admins'
911
| 'widgets'
12+
13+
export type TUiSettings = {
14+
wallpaper: TWallpaper
15+
}

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,32 @@ import type { TCommunity, TRootStore } from '@/spec'
99
import { buildLog } from '@/utils/logger'
1010
import { markStates, toJS } from '@/utils/mobx'
1111

12+
import type { TUiSettings } from './spec'
13+
1214
import { TAB } from './constant'
1315

1416
/* eslint-disable-next-line */
1517
const log = buildLog('S:DashboardThread')
1618

1719
const DashboardThread = T.model('DashboardThread', {
18-
curTab: T.optional(T.enumeration(values(TAB)), TAB.OVERVIEW),
20+
curTab: T.optional(T.enumeration(values(TAB)), TAB.UI),
1921
})
2022
.views((self) => ({
2123
get curCommunity(): TCommunity {
2224
const root = getParent(self) as TRootStore
2325

2426
return toJS(root.viewing.community)
2527
},
28+
get uiSettings(): TUiSettings {
29+
const root = getParent(self) as TRootStore
30+
const {
31+
wallpaperEditor: { wallpapers, wallpaper },
32+
} = root
33+
34+
return {
35+
wallpaper: wallpapers[wallpaper],
36+
}
37+
},
2638
}))
2739
.actions((self) => ({
2840
mark(sobj: Record<string, unknown>): void {

‎src/containers/thread/DashboardThread/styles/ui/index.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import styled from 'styled-components'
22

3-
import css from '@/utils/css'
3+
import css, { theme } from '@/utils/css'
44

55
export const Wrapper = styled.div`
6-
${css.flex()};
6+
${css.flexColumn()};
77
`
88

9-
export const Title = styled.div``
9+
export const BaseSection = styled.section`
10+
/* margin: 0 50px; */
11+
padding-bottom: 50px;
12+
border-bottom: 1px solid;
13+
margin-bottom: 40px;
14+
border-bottom-color: ${theme('border')};
15+
`

0 commit comments

Comments
 (0)