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 8506376

Browse files
mydearxymmydearxym
authored
feat(dashboard): new social editor UI/UX (#1345)
* refactor(social-editor): basic setup * chore(type): SIZE naming - > Size * chore(social-editor): add more social icons * refactor(dashboard): move sidebar to left * refactor(social-editor): expand ux * refactor(dashboard): adjust tags style * refactor(social-editor): basic function * style(social-editor): adjust delete btn
1 parent 1c77ddb commit 8506376

Some content is hidden

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

89 files changed

+1017
-257
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type { TPostLayout } from '@/spec'
44

55
import { Br } from '@/widgets/Common'
66
import OSSUploader from '@/widgets/OSSUploader'
7+
import SocialEditor from '@/widgets/SocialEditor'
78

89
import Portal from '../Portal'
910
import SectionLabel from '../SectionLabel'
@@ -44,6 +45,7 @@ const BasicInfo: FC<TProps> = ({ testid = 'basic-info' }) => {
4445
<Inputer />
4546
<Label>社区 URL</Label>
4647
<Inputer />
48+
<SocialEditor />
4749

4850
<Br bottom={40} />
4951
<SectionLabel title="其它信息" />

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

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

33
import { Br } from '@/widgets/Common'
4+
import Sticky from '@/widgets/Sticky'
45

56
import { TAB } from './constant'
67
import type { TTab } from './spec'
@@ -15,93 +16,104 @@ type TProps = {
1516
const Sidebar: FC<TProps> = ({ curTab }) => {
1617
return (
1718
<Wrapper>
18-
<Folder>
19-
<Icon.Basic />
20-
<Title>基础设置</Title>
21-
</Folder>
22-
<Item
23-
$active={TAB.BASIC_INFO === curTab}
24-
onClick={() => tabOnChange(TAB.BASIC_INFO)}
25-
>
26-
关于社区
27-
</Item>
28-
<Item $active={TAB.UI === curTab} onClick={() => tabOnChange(TAB.UI)}>
29-
外观布局
30-
</Item>
31-
<Item
32-
$active={TAB.THREADS === curTab}
33-
onClick={() => tabOnChange(TAB.THREADS)}
34-
>
35-
社区板块
36-
</Item>
37-
<Item
38-
$active={TAB.ADMINS === curTab}
39-
onClick={() => tabOnChange(TAB.ADMINS)}
40-
>
41-
管理员
42-
</Item>
19+
<Sticky offsetTop={30}>
20+
<Folder>
21+
<Icon.Basic />
22+
<Title>基础设置</Title>
23+
</Folder>
24+
<Item
25+
$active={TAB.BASIC_INFO === curTab}
26+
onClick={() => tabOnChange(TAB.BASIC_INFO)}
27+
>
28+
关于社区
29+
</Item>
30+
<Item $active={TAB.UI === curTab} onClick={() => tabOnChange(TAB.UI)}>
31+
外观布局
32+
</Item>
33+
<Item
34+
$active={TAB.THREADS === curTab}
35+
onClick={() => tabOnChange(TAB.THREADS)}
36+
>
37+
社区板块
38+
</Item>
39+
<Item
40+
$active={TAB.ADMINS === curTab}
41+
onClick={() => tabOnChange(TAB.ADMINS)}
42+
>
43+
管理员
44+
</Item>
4345

44-
<Br top={30} />
45-
<Folder>
46-
<Icon.Analysis />
47-
<Title>统计分析</Title>
48-
</Folder>
49-
<Item>--</Item>
50-
<Br top={30} />
51-
<Folder>
52-
<Icon.Management />
53-
<Title>内容管理</Title>
54-
</Folder>
55-
<Item $active={TAB.TAGS === curTab} onClick={() => tabOnChange(TAB.TAGS)}>
56-
标签
57-
</Item>
58-
<Item $active={TAB.POST === curTab} onClick={() => tabOnChange(TAB.POST)}>
59-
帖子
60-
</Item>
61-
<Item
62-
$active={TAB.KANBAN === curTab}
63-
onClick={() => tabOnChange(TAB.KANBAN)}
64-
>
65-
看板
66-
</Item>
67-
<Item
68-
$active={TAB.CHANGELOG === curTab}
69-
onClick={() => tabOnChange(TAB.CHANGELOG)}
70-
>
71-
更新日志
72-
</Item>
73-
<Item $active={TAB.HELP === curTab} onClick={() => tabOnChange(TAB.HELP)}>
74-
帮助台
75-
</Item>
76-
<Item
77-
$active={TAB.BLACKHOUSE === curTab}
78-
onClick={() => tabOnChange(TAB.BLACKHOUSE)}
79-
>
80-
小黑屋
81-
</Item>
82-
<Br top={30} />
83-
<Folder>
84-
<Icon.Bind />
85-
<Title>绑定集成</Title>
86-
</Folder>
87-
<Item
88-
$active={TAB.DOMAIN === curTab}
89-
onClick={() => tabOnChange(TAB.DOMAIN)}
90-
>
91-
域名
92-
</Item>
93-
<Item
94-
$active={TAB.THIRD_PART === curTab}
95-
onClick={() => tabOnChange(TAB.THIRD_PART)}
96-
>
97-
外部应用
98-
</Item>
99-
<Item
100-
$active={TAB.WIDGETS === curTab}
101-
onClick={() => tabOnChange(TAB.WIDGETS)}
102-
>
103-
网站组件
104-
</Item>
46+
<Br top={30} />
47+
<Folder>
48+
<Icon.Analysis />
49+
<Title>统计分析</Title>
50+
</Folder>
51+
<Item>--</Item>
52+
<Br top={30} />
53+
<Folder>
54+
<Icon.Management />
55+
<Title>内容管理</Title>
56+
</Folder>
57+
<Item
58+
$active={TAB.TAGS === curTab}
59+
onClick={() => tabOnChange(TAB.TAGS)}
60+
>
61+
标签
62+
</Item>
63+
<Item
64+
$active={TAB.POST === curTab}
65+
onClick={() => tabOnChange(TAB.POST)}
66+
>
67+
帖子
68+
</Item>
69+
<Item
70+
$active={TAB.KANBAN === curTab}
71+
onClick={() => tabOnChange(TAB.KANBAN)}
72+
>
73+
看板
74+
</Item>
75+
<Item
76+
$active={TAB.CHANGELOG === curTab}
77+
onClick={() => tabOnChange(TAB.CHANGELOG)}
78+
>
79+
更新日志
80+
</Item>
81+
<Item
82+
$active={TAB.HELP === curTab}
83+
onClick={() => tabOnChange(TAB.HELP)}
84+
>
85+
帮助台
86+
</Item>
87+
<Item
88+
$active={TAB.BLACKHOUSE === curTab}
89+
onClick={() => tabOnChange(TAB.BLACKHOUSE)}
90+
>
91+
小黑屋
92+
</Item>
93+
<Br top={30} />
94+
<Folder>
95+
<Icon.Bind />
96+
<Title>绑定集成</Title>
97+
</Folder>
98+
<Item
99+
$active={TAB.DOMAIN === curTab}
100+
onClick={() => tabOnChange(TAB.DOMAIN)}
101+
>
102+
域名
103+
</Item>
104+
<Item
105+
$active={TAB.THIRD_PART === curTab}
106+
onClick={() => tabOnChange(TAB.THIRD_PART)}
107+
>
108+
外部应用
109+
</Item>
110+
<Item
111+
$active={TAB.WIDGETS === curTab}
112+
onClick={() => tabOnChange(TAB.WIDGETS)}
113+
>
114+
网站组件
115+
</Item>
116+
</Sticky>
105117
</Wrapper>
106118
)
107119
}

‎src/containers/thread/DashboardThread/Tags/CategorySelector.tsx

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

3-
import { Space } from '@/widgets/Common'
4-
5-
import {
6-
Wrapper,
7-
CatsWrapper,
8-
CatButton,
9-
Hint,
10-
} from '../styles/tags/category_selector'
3+
import Button from '@/widgets/Buttons/Button'
4+
import { Wrapper, CatsWrapper, Hint } from '../styles/tags/category_selector'
115

126
const TagCats = [
137
{
@@ -50,31 +44,30 @@ type TProps = {
5044

5145
const CategorySelector: FC<TProps> = () => {
5246
const [cat, setCat] = useState('0')
53-
const CAT_SPACE = 12
5447

5548
return (
5649
<Wrapper>
57-
<Hint>分组:</Hint>
50+
<Hint>标签分组:</Hint>
5851
<CatsWrapper>
59-
<CatButton
52+
<Button
6053
ghost
6154
size="small"
6255
noBorder={cat !== '0'}
6356
onClick={() => setCat('0')}
6457
>
6558
全部
66-
</CatButton>
67-
<Space right={CAT_SPACE} />
59+
</Button>
60+
6861
{TagCats.map((item) => (
69-
<CatButton
62+
<Button
7063
key={item.raw}
7164
ghost
7265
size="small"
7366
noBorder={cat !== item.raw}
7467
onClick={() => setCat(item.raw)}
7568
>
7669
{item.title}
77-
</CatButton>
70+
</Button>
7871
))}
7972
</CatsWrapper>
8073
</Wrapper>

‎src/containers/thread/DashboardThread/Tags/ThreadSelector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const ThreadSelector: FC = () => {
1414

1515
return (
1616
<Wrapper>
17-
<Hint>板块</Hint>
17+
<Hint>社区板块:</Hint>
1818
<CatsWrapper>
1919
<CatButton
2020
ghost={thread !== THREAD.POST}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const DashboardThreadContainer: FC<TProps> = ({
4343

4444
return (
4545
<Wrapper testid={testid}>
46+
<Sidebar curTab={curTab} />
4647
<MainWrapper>
4748
{curTab === TAB.BASIC_INFO && <BasicInfo />}
4849
{curTab === TAB.UI && <UI settings={uiSettings} touched={touched} />}
@@ -54,7 +55,6 @@ const DashboardThreadContainer: FC<TProps> = ({
5455
{curTab === TAB.THIRD_PART && <ThirdPart />}
5556
{curTab === TAB.WIDGETS && <Widgets />}
5657
</MainWrapper>
57-
<Sidebar curTab={curTab} />
5858
</Wrapper>
5959
)
6060
}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,8 @@ export const MainWrapper = styled.div`
1515
1616
background: transparent;
1717
margin-top: 30px;
18-
padding-left: 25px;
19-
padding-right: 80px;
20-
margin-right: 68px;
21-
border-right: 1px solid;
22-
border-right-color: ${theme('border')};
18+
padding-left: 80px;
19+
margin-left: 42px;
20+
border-left: 1px solid;
21+
border-left-color: ${theme('border')};
2322
`

‎src/containers/thread/DashboardThread/styles/saving_bar.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
1010
'data-test-id': testid,
1111
}))<TWrapper>`
1212
${css.flex('align-center')};
13-
width: 100%;
13+
width: ${({ gradientDirection }) =>
14+
gradientDirection === 'right' ? 'calc(100% + 10px)' : '100%'};
1415
height: 42px;
15-
/* background: linear-gradient(to right, #f7f7f7 60%, transparent); // to-theme */
1616
background: ${({ gradientDirection }) =>
1717
`linear-gradient(to ${gradientDirection}, #f7f7f7 60%, transparent)`};
1818
padding: 0 10px;

‎src/containers/thread/DashboardThread/styles/sidebar.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
1313
'data-test-id': testid,
1414
}))<TTestable>`
1515
${css.flexColumn()};
16-
width: 184px;
17-
min-width: 184px;
16+
width: 154px;
17+
min-width: 154px;
1818
color: ${theme('thread.articleDigest')};
19-
padding-top: 25px;
19+
padding-top: 32px;
20+
padding-left: 25px;
2021
`
2122
export const Folder = styled.div`
2223
${css.flex('align-center')};

‎src/containers/thread/DashboardThread/styles/tags/category_selector.ts

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

3-
import Button from '@/widgets/Buttons/Button'
43
import css, { theme } from '@/utils/css'
54

65
export const Wrapper = styled.div`
@@ -11,14 +10,14 @@ export const Wrapper = styled.div`
1110
export const Hint = styled.div`
1211
font-size: 13px;
1312
color: ${theme('thread.articleDigest')};
14-
margin-top: 2px;
15-
width: 50px;
13+
opacity: 0.8;
14+
margin-top: 3px;
15+
width: 70px;
16+
min-width: 70px;
1617
`
1718
export const CatsWrapper = styled.div`
1819
${css.flex('align-center')};
1920
flex-wrap: wrap;
2021
margin-left: 15px;
21-
`
22-
export const CatButton = styled(Button)`
23-
margin-bottom: 10px;
22+
gap: 14px;
2423
`

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import styled from 'styled-components'
33
import css from '@/utils/css'
44

55
export const Wrapper = styled.div`
6-
padding: 0 80px;
6+
padding: 0 100px;
7+
padding-right: 120px;
78
`
89
export const InnerWrapper = styled.div`
910
${css.flexColumn()};

0 commit comments

Comments
 (0)