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

Commit 589ff9d

Browse files
mydearxymmydearxym
authored
feat(help-center): 3 mode to show (#1295)
1 parent 47ee765 commit 589ff9d

File tree

17 files changed

+353
-61
lines changed

17 files changed

+353
-61
lines changed

‎src/containers/thread/HelpThread/Category.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ type TProps = {
66
color: string
77
title: string
88
desc: string
9+
column?: number
910
}
1011

11-
const Category: FC<TProps> = ({ color, title, desc }) => {
12+
const Category: FC<TProps> = ({ color, title, desc, column = 2 }) => {
1213
return (
13-
<Wrapper color={color}>
14+
<Wrapper color={color} column={column}>
1415
<Header>
1516
<Icon />
1617
<Title color={color}>{title}</Title>

‎src/containers/thread/HelpThread/FaqLayout.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { FC, memo } from 'react'
2+
3+
import FaqList from '@/widgets/FaqList'
4+
import { Wrapper } from './styles/faq_layout'
5+
6+
type TProps = {
7+
testid?: string
8+
}
9+
10+
const FaqLayout: FC<TProps> = ({ testid = 'FaqLayout' }) => {
11+
return (
12+
<Wrapper>
13+
<FaqList mode="collapse" />
14+
</Wrapper>
15+
)
16+
}
17+
18+
export default memo(FaqLayout)

‎src/containers/thread/HelpThread/FullLayout.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { FC, memo } from 'react'
2+
3+
import Category from './Category'
4+
import FaqList from '@/widgets/FaqList'
5+
6+
import { Wrapper, CatsWrapper } from './styles/full_layout'
7+
8+
type TProps = {
9+
testid?: string
10+
}
11+
12+
const FullLayout: FC<TProps> = ({ testid = 'FullLayout' }) => {
13+
return (
14+
<Wrapper>
15+
<CatsWrapper>
16+
<Category color="orange" title="Get Started" desc="Get Started" />
17+
<Category
18+
color="red"
19+
title="CI/CD and DevOps"
20+
desc="CI/CD and DevOps"
21+
/>
22+
<Category
23+
color="blue"
24+
title="Collaborative Coding"
25+
desc="Collaborative Coding"
26+
/>
27+
<Category
28+
color="green"
29+
title="Developers"
30+
desc="Collaborative Coding"
31+
/>
32+
<Category
33+
color="purple"
34+
title="Enterprise and Teams"
35+
desc="Enterprise and Teams"
36+
/>
37+
<Category
38+
color="red"
39+
title="CI/CD and DevOps"
40+
desc="CI/CD and DevOps"
41+
/>
42+
<Category
43+
color="blue"
44+
title="Collaborative Coding"
45+
desc="Collaborative Coding"
46+
/>
47+
<Category
48+
color="green"
49+
title="Developers"
50+
desc="Collaborative Coding"
51+
/>
52+
<Category
53+
color="purple"
54+
title="Enterprise and Teams"
55+
desc="Enterprise and Teams"
56+
/>
57+
</CatsWrapper>
58+
<FaqList />
59+
</Wrapper>
60+
)
61+
}
62+
63+
export default memo(FullLayout)

‎src/containers/thread/HelpThread/HelpCenterLayout.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { FC, memo } from 'react'
2+
3+
import Category from './Category'
4+
import { Wrapper, CatsWrapper } from './styles/helpcenter_layout'
5+
6+
type TProps = {
7+
testid?: string
8+
}
9+
10+
const HelpCenterLayout: FC<TProps> = ({ testid = 'FaqLayout' }) => {
11+
return (
12+
<Wrapper>
13+
<CatsWrapper>
14+
<Category
15+
color="orange"
16+
title="Get Started"
17+
desc="Get Started"
18+
column={3}
19+
/>
20+
<Category
21+
color="red"
22+
title="CI/CD and DevOps"
23+
desc="CI/CD and DevOps"
24+
column={3}
25+
/>
26+
<Category
27+
color="blue"
28+
title="Collaborative Coding"
29+
desc="Collaborative Coding"
30+
column={3}
31+
/>
32+
<Category
33+
color="green"
34+
title="Developers"
35+
desc="Collaborative Coding"
36+
column={3}
37+
/>
38+
<Category
39+
color="purple"
40+
title="Enterprise and Teams"
41+
desc="Enterprise and Teams"
42+
column={3}
43+
/>
44+
<Category
45+
color="red"
46+
title="CI/CD and DevOps"
47+
desc="CI/CD and DevOps"
48+
column={3}
49+
/>
50+
<Category
51+
color="blue"
52+
title="Collaborative Coding"
53+
desc="Collaborative Coding"
54+
column={3}
55+
/>
56+
<Category
57+
color="green"
58+
title="Developers"
59+
desc="Collaborative Coding"
60+
column={3}
61+
/>
62+
<Category
63+
color="purple"
64+
title="Enterprise and Teams"
65+
desc="Enterprise and Teams"
66+
column={3}
67+
/>
68+
</CatsWrapper>
69+
</Wrapper>
70+
)
71+
}
72+
73+
export default memo(HelpCenterLayout)

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

Lines changed: 8 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ import { bond } from '@/utils/mobx'
1010

1111
import type { TStore } from './store'
1212

13-
import FaqList from '@/widgets/FaqList'
14-
import Category from './Category'
13+
import HelpCenterLayout from './HelpCenterLayout'
14+
import FullLayout from './FullLayout'
15+
import FaqLayout from './FaqLayout'
1516

16-
import { Wrapper, MainWrapper, CatsWapper } from './styles'
17+
import { Wrapper } from './styles'
1718
import { useInit } from './logic' /* eslint-disable-next-line */
1819

1920
// const log = buildLog('C:HelpThread')
@@ -32,55 +33,13 @@ const HelpThreadContainer: FC<TProps> = ({
3233
desc = 'desc',
3334
}) => {
3435
useInit(store)
36+
const { mode } = store
3537

3638
return (
3739
<Wrapper testid={testid}>
38-
<MainWrapper>
39-
<CatsWapper>
40-
<Category color="orange" title="Get Started" desc="Get Started" />
41-
<Category
42-
color="red"
43-
title="CI/CD and DevOps"
44-
desc="CI/CD and DevOps"
45-
/>
46-
<Category
47-
color="blue"
48-
title="Collaborative Coding"
49-
desc="Collaborative Coding"
50-
/>
51-
<Category
52-
color="green"
53-
title="Developers"
54-
desc="Collaborative Coding"
55-
/>
56-
<Category
57-
color="purple"
58-
title="Enterprise and Teams"
59-
desc="Enterprise and Teams"
60-
/>
61-
<Category
62-
color="red"
63-
title="CI/CD and DevOps"
64-
desc="CI/CD and DevOps"
65-
/>
66-
<Category
67-
color="blue"
68-
title="Collaborative Coding"
69-
desc="Collaborative Coding"
70-
/>
71-
<Category
72-
color="green"
73-
title="Developers"
74-
desc="Collaborative Coding"
75-
/>
76-
<Category
77-
color="purple"
78-
title="Enterprise and Teams"
79-
desc="Enterprise and Teams"
80-
/>
81-
</CatsWapper>
82-
</MainWrapper>
83-
<FaqList />
40+
{mode === 'full' && <FullLayout />}
41+
{mode === 'faq' && <FaqLayout />}
42+
{mode === 'helpcenter' && <HelpCenterLayout />}
8443
</Wrapper>
8544
)
8645
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ import { markStates, toJS } from '@/utils/mobx'
1212
/* eslint-disable-next-line */
1313
const log = buildLog('S:HelpThread')
1414

15-
const HelpThread = T.model('HelpThread', {})
15+
const HelpThread = T.model('HelpThread', {
16+
mode: T.optional(T.enumeration(['full', 'helpcenter', 'faq']), 'full'),
17+
})
1618
.views((self) => ({
1719
get curCommunity(): TCommunity {
1820
const root = getParent(self) as TRootStore

‎src/containers/thread/HelpThread/styles/category.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import css, { theme } from '@/utils/css'
55

66
import LaptopSVG from '@/icons/Laptop'
77

8-
type TWrapper = TTestable | { color?: string }
8+
type TWrapper = TTestable & { color?: string; column: number }
99
export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
1010
'data-test-id': testid,
1111
}))<TWrapper>`
1212
${css.flexColumn()};
1313
background: transparent;
14-
width: 50%;
14+
width: ${({ column }) => (column === 2 ? '50%' : '33%')};
1515
min-height: 80px;
1616
padding: 15px 20px;
1717
padding-left: 0;

‎src/containers/thread/HelpThread/styles/faq_layout.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import styled from 'styled-components'
2+
3+
import css from '@/utils/css'
4+
import { MainWrapper } from './index'
5+
6+
export const Wrapper = styled(MainWrapper)`
7+
${css.flexColumn()};
8+
width: 100%;
9+
max-width: 800px;
10+
margin-top: 20px;
11+
padding-left: 22px;
12+
border-right: none;
13+
`
14+
export const Holder = styled.div``

‎src/containers/thread/HelpThread/styles/full_layout.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import styled from 'styled-components'
2+
3+
import css, { theme } from '@/utils/css'
4+
import { MainWrapper } from './index'
5+
6+
export const Wrapper = styled.div`
7+
${css.flex()};
8+
width: 100%;
9+
margin-top: 10px;
10+
`
11+
12+
export const CatsWrapper = styled(MainWrapper)`
13+
${css.flex()};
14+
flex-wrap: wrap;
15+
16+
flex-grow: 1;
17+
width: 100%;
18+
min-height: 600px;
19+
20+
background: transparent;
21+
border-radius: 6px;
22+
margin-top: 5px;
23+
padding-left: 22px;
24+
padding-right: 50px;
25+
26+
border-right: 1px solid;
27+
border-right-color: ${theme('border')};
28+
`

‎src/containers/thread/HelpThread/styles/helpcenter_layout.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import styled from 'styled-components'
2+
3+
import css from '@/utils/css'
4+
import { MainWrapper } from './index'
5+
6+
export const Wrapper = styled.div`
7+
${css.flexColumn()};
8+
width: 100%;
9+
margin-top: 10px;
10+
padding-left: 22;
11+
border-right: none;
12+
`
13+
export const CatsWrapper = styled(MainWrapper)`
14+
${css.flex()};
15+
flex-wrap: wrap;
16+
17+
flex-grow: 1;
18+
width: 100%;
19+
min-height: 600px;
20+
21+
border-radius: 6px;
22+
padding-right: 20px;
23+
margin-top: 5px;
24+
border-right: none;
25+
`

0 commit comments

Comments
 (0)