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 a63505f

Browse files
mydearxymmydearxym
authored
refactor(dashboard): Improve mobile posts view (#1346)
* refactor(icon-switch): adjust props for local icon * refactor(posts-example): mobile mockup & re-org * refactor(posts-example): adjust mobile example * refactor(posts-example): mobile example for upvote-first * refactor(posts-example): mobile layout adjust * refactor(posts-example): mobile layout adjust * refactor(posts-example): mobile layout for comments style
1 parent 8506376 commit a63505f

File tree

44 files changed

+732
-450
lines changed

Some content is hidden

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

44 files changed

+732
-450
lines changed

‎src/containers/thread/KanbanThread/Actions.tsx

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

3-
import { ICON } from '@/config'
43
import { mockUsers } from '@/utils/mock'
54

6-
import { IconSwitcher } from '@/widgets/Switcher'
75
import Facepile from '@/widgets/Facepile'
8-
import { Space } from '@/widgets/Common'
96

107
import {
118
Wrapper,
129
Title,
1310
Count,
14-
ModeWrapper,
1511
LeftPart,
1612
RightPart,
1713
KanbanIcon,
1814
JoinTitle,
1915
} from './styles/actions'
2016

21-
const switchItems = [
22-
{
23-
key: 'kanban',
24-
iconSrc: `${ICON}/article/comment-reply-mode.svg`,
25-
desc: '看板模式',
26-
},
27-
{
28-
key: 'list',
29-
iconSrc: `${ICON}/article/comment-timeline-mode.svg`,
30-
desc: '列表模式',
31-
},
32-
]
33-
3417
const Actions: FC = () => {
3518
return (
3619
<Wrapper>
@@ -42,14 +25,6 @@ const Actions: FC = () => {
4225
</Title>
4326
</LeftPart>
4427
<RightPart>
45-
<ModeWrapper>
46-
<IconSwitcher
47-
items={switchItems}
48-
activeKey="kanban"
49-
onChange={console.log}
50-
/>
51-
</ModeWrapper>
52-
<Space right={20} />
5328
<JoinTitle>参与者</JoinTitle>
5429
<Facepile
5530
size="medium"

‎src/containers/unit/Comments/HeadBar/StateBar/Actions.tsx

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

3-
import { ICON } from '@/config'
43
import { SVG } from '@/constant'
54

65
import IconButton from '@/widgets/Buttons/IconButton'
@@ -24,12 +23,12 @@ const actionIconConfig = {
2423
const switchItems = [
2524
{
2625
key: MODE.REPLIES,
27-
iconSrc: `${ICON}/article/comment-reply-mode.svg`,
26+
icon: SVG.REPLY_MODE,
2827
desc: '回复模式',
2928
},
3029
{
3130
key: MODE.TIMELINE,
32-
iconSrc: `${ICON}/article/comment-timeline-mode.svg`,
31+
icon: SVG.TIMELINE_MODE,
3332
desc: '时间线模式',
3433
},
3534
]

‎src/widgets/DashboardDesc/PostListExample.tsx

Lines changed: 0 additions & 109 deletions
This file was deleted.

‎src/widgets/DashboardDesc/PostListExample/Desktop.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/*
2+
*
3+
* DashboardDesc
4+
*
5+
*/
6+
7+
import { FC, memo, Fragment } from 'react'
8+
9+
import type { TPost } from '@/spec'
10+
import { POST_LAYOUT } from '@/constant'
11+
12+
import { buildLog } from '@/utils/logger'
13+
14+
import { Divider, Br } from '@/widgets/Common'
15+
import PostItem from '@/widgets/PostItem'
16+
17+
import { Title, SubTitle, Desc } from '../styles/post_list_example'
18+
19+
/* eslint-disable-next-line */
20+
const log = buildLog('c:DashboardDesc:index')
21+
22+
type TProps = {
23+
articles: TPost[]
24+
}
25+
26+
const PostListExample: FC<TProps> = ({ articles }) => {
27+
return (
28+
<Fragment>
29+
<Title>
30+
紧凑简洁
31+
<SubTitle>(默认)</SubTitle>
32+
</Title>
33+
<Desc>侧重展示标题与参与 Upvotes 的用户</Desc>
34+
<Divider />
35+
{articles.map((item) => (
36+
<PostItem
37+
key={item.id}
38+
article={item}
39+
c11n={{}}
40+
curCommunity={{ raw: 'demo' }}
41+
/>
42+
))}
43+
44+
<Br bottom={80} />
45+
<Title>三段式</Title>
46+
<Desc>侧重展示发帖者与参与讨论的用户</Desc>
47+
<Divider />
48+
49+
{articles.map((item) => (
50+
<PostItem
51+
key={item.id}
52+
article={item}
53+
c11n={{}}
54+
curCommunity={{ raw: 'demo' }}
55+
layout={POST_LAYOUT.COMMENT_FIRST}
56+
/>
57+
))}
58+
</Fragment>
59+
)
60+
}
61+
62+
export default memo(PostListExample)

‎src/widgets/DashboardDesc/PostListExample/Mobile.tsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { FC, memo } from 'react'
2+
3+
import type { TPost } from '@/spec'
4+
import { POST_LAYOUT } from '@/constant'
5+
import { Divider, Br } from '@/widgets/Common'
6+
import MobileMockup from '@/widgets/MobileMockup'
7+
import PostItem from '@/widgets/PostItem'
8+
9+
import {
10+
MobileWrapper,
11+
Title,
12+
SubTitle,
13+
Desc,
14+
} from '../styles/post_list_example'
15+
16+
type TProps = {
17+
articles: TPost[]
18+
}
19+
20+
const Mobile: FC<TProps> = ({ articles }) => {
21+
return (
22+
<MobileWrapper>
23+
<Title>
24+
紧凑简洁
25+
<SubTitle>(默认)</SubTitle>
26+
</Title>
27+
<Desc>侧重展示标题与参与 Upvotes 的用户</Desc>
28+
<Divider />
29+
<MobileMockup>
30+
{articles.map((item) => (
31+
<PostItem
32+
key={item.id}
33+
article={item}
34+
c11n={{}}
35+
curCommunity={{ raw: 'demo' }}
36+
isMobilePreview
37+
/>
38+
))}
39+
</MobileMockup>
40+
<Br bottom={80} />
41+
<Title>三段式</Title>
42+
<Desc>侧重展示发帖者与参与讨论的用户</Desc>
43+
<Divider />
44+
<MobileMockup>
45+
{articles.map((item) => (
46+
<PostItem
47+
key={item.id}
48+
article={item}
49+
c11n={{}}
50+
curCommunity={{ raw: 'demo' }}
51+
layout={POST_LAYOUT.COMMENT_FIRST}
52+
isMobilePreview
53+
/>
54+
))}
55+
</MobileMockup>
56+
</MobileWrapper>
57+
)
58+
}
59+
60+
export default memo(Mobile)

‎src/widgets/DashboardDesc/PostListExample/index.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/*
2+
*
3+
* DashboardDesc
4+
*
5+
*/
6+
7+
import { FC, memo, useState } from 'react'
8+
9+
import { SVG } from '@/constant'
10+
import { buildLog } from '@/utils/logger'
11+
12+
import { IconSwitcher } from '@/widgets/Switcher'
13+
import NoticeBar from '@/widgets/NoticeBar'
14+
15+
import type { TPreviewDevice } from '../spec'
16+
import { DEMO_POSTS, PREVIEW_MODE } from '../constant'
17+
import Mobile from './Mobile'
18+
import Desktop from './Desktop'
19+
20+
import { Wrapper, MediaWrapper } from '../styles/post_list_example'
21+
22+
/* eslint-disable-next-line */
23+
const log = buildLog('c:DashboardDesc:index')
24+
25+
const switchItems = [
26+
{
27+
key: PREVIEW_MODE.DESKTOP,
28+
icon: SVG.DESKTOP,
29+
desc: '桌面端',
30+
},
31+
{
32+
key: PREVIEW_MODE.MOBILE,
33+
icon: SVG.MOBILE,
34+
desc: '手机端',
35+
},
36+
]
37+
38+
const PostListExample: FC = () => {
39+
const [mode, setMode] = useState<TPreviewDevice>(PREVIEW_MODE.DESKTOP)
40+
41+
return (
42+
<Wrapper>
43+
<NoticeBar
44+
type="info"
45+
content="列表中的帖子仅为展示布局参考，非真实存在。"
46+
bottom={30}
47+
/>
48+
49+
<MediaWrapper>
50+
<IconSwitcher
51+
items={switchItems}
52+
activeKey={mode}
53+
onChange={(item) => setMode(item.key as TPreviewDevice)}
54+
/>
55+
</MediaWrapper>
56+
57+
{mode === PREVIEW_MODE.DESKTOP && <Desktop articles={DEMO_POSTS} />}
58+
{mode === PREVIEW_MODE.MOBILE && <Mobile articles={DEMO_POSTS} />}
59+
</Wrapper>
60+
)
61+
}
62+
63+
export default memo(PostListExample)

0 commit comments

Comments
 (0)