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

Commit 322816d

Browse files
mydearxymmydearxym
authored
feat(help-thread): baisc UI & UX (#1284)
* feat(help-thread): basic UI * style(help-thread): the cover look
1 parent 1fa2953 commit 322816d

File tree

16 files changed

+316
-9
lines changed

16 files changed

+316
-9
lines changed

‎src/containers/content/CommunityContent/ThreadContent.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import { FC, memo } from 'react'
33
import type { TThread } from '@/spec'
44
import { THREAD } from '@/constant'
55

6-
import ArticlesThread from '@/containers//thread/ArticlesThread'
6+
// import ArticlesThread from '@/containers//thread/ArticlesThread'
77
// import GtdThread from '@/containers//thread/GtdThread'
88
// import ChangeThread from '@/containers//thread/ChangelogThread'
99
// import ReposThread from '@/containers/thread/ReposThread'
1010
import CperMapThread from '@/containers/thread/CperMapThread'
11-
import AboutThread from '@/containers/thread/AboutThread'
11+
// import AboutThread from '@/containers/thread/AboutThread'
12+
import HelpThread from '@/containers/thread/HelpThread'
1213

1314
import WipThread from './WipThread'
1415

@@ -52,7 +53,8 @@ const ThreadContent: FC<TProps> = ({ thread }) => {
5253
// return <AboutThread />
5354
// return <GtdThread />
5455
// return <ChangeThread />
55-
return <ArticlesThread />
56+
// return <ArticlesThread />
57+
return <HelpThread />
5658
}
5759
}
5860

‎src/containers/layout/GlobalLayout/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import dynamic from 'next/dynamic'
99
import { isMobile } from 'react-device-detect'
1010

1111
import type { TSEO, TMetric } from '@/spec'
12-
import { SIZE, C11N, BODY_SCROLLER } from '@/constant'
12+
import { SIZE, BODY_SCROLLER } from '@/constant'
1313
import { bond } from '@/utils/mobx'
1414

1515
import ThemePalette from '@/containers/layout/ThemePalette'
@@ -25,7 +25,7 @@ import ThemePalette from '@/containers/layout/ThemePalette'
2525
import type { TStore } from './store'
2626
import SEO from './SEO'
2727

28-
import { CustomScroller, Sidebar, Footer, ModeLine } from './dynamic'
28+
import { CustomScroller, Footer, ModeLine } from './dynamic'
2929
import { Wrapper, InnerWrapper, BodyWrapper, ContentWrapper } from './styles'
3030
import { useInit, onPageScrollDirhange, childrenWithProps } from './logic'
3131

@@ -63,7 +63,7 @@ const GlobalLayoutContainer: FC<TProps> = ({
6363
<Fragment>
6464
<SEO metric={metric} config={seoConfig} />
6565
<InnerWrapper metric={metric} sidebarPin={sidebarPin}>
66-
{!noSidebar && bannerLayout !== C11N.HOLY_GRAIL && <Sidebar />}
66+
{/* {!noSidebar && bannerLayout !== C11N.HOLY_GRAIL && <Sidebar />} */}
6767
<Addon />
6868
<ContentWrapper offsetLeft={sidebarPin}>
6969
<CustomScroller

‎src/containers/layout/GlobalLayout/styles/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const Wrapper = styled.div`
1717
height: 100%;
1818
left: 0;
1919
top: 0;
20-
background-image: url(${ASSETS_ENDPOINT}/space-background.svg);
20+
/* background-image: url(${ASSETS_ENDPOINT}/space-background.svg); */
2121
/* background-attachment: fixed; */
2222
/* see https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/ */
2323
will-change: transform;

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { FC, memo } from 'react'
2+
3+
import { Wrapper, Header, Icon, Title, Item, MoreLink } from './styles/category'
4+
5+
type TProps = {
6+
color: string
7+
title: string
8+
desc: string
9+
}
10+
11+
const Category: FC<TProps> = ({ color, title, desc }) => {
12+
return (
13+
<Wrapper color={color}>
14+
<Header>
15+
<Icon />
16+
<Title color={color}>{title}</Title>
17+
</Header>
18+
<Item color={color}>{desc}</Item>
19+
<Item color={color}>{desc}</Item>
20+
<Item color={color}>{desc}</Item>
21+
<MoreLink>查看全部</MoreLink>
22+
</Wrapper>
23+
)
24+
}
25+
26+
export default memo(Category)

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/* *
2+
* HelpThread
3+
*
4+
*/
5+
6+
import { FC } from 'react'
7+
8+
// import { buildLog } from '@/utils/logger'
9+
import { bond } from '@/utils/mobx'
10+
11+
import type { TStore } from './store'
12+
import Category from './Category'
13+
14+
import { Wrapper, MainWrapper, CatsWapper } from './styles'
15+
import { useInit } from './logic' /* eslint-disable-next-line */
16+
17+
// const log = buildLog('C:HelpThread')
18+
19+
type TProps = {
20+
helpThread?: TStore
21+
testid?: string
22+
title?: string
23+
desc?: string
24+
}
25+
26+
const HelpThreadContainer: FC<TProps> = ({
27+
helpThread: store,
28+
testid = 'help-thread',
29+
title = 'title',
30+
desc = 'desc',
31+
}) => {
32+
useInit(store)
33+
34+
return (
35+
<Wrapper testid={testid}>
36+
<MainWrapper>
37+
<CatsWapper>
38+
<Category color="orange" title="Get Started" desc="Get Started" />
39+
<Category
40+
color="red"
41+
title="CI/CD and DevOps"
42+
desc="CI/CD and DevOps"
43+
/>
44+
<Category
45+
color="blue"
46+
title="Collaborative Coding"
47+
desc="Collaborative Coding"
48+
/>
49+
<Category
50+
color="green"
51+
title="Developers"
52+
desc="Collaborative Coding"
53+
/>
54+
<Category
55+
color="purple"
56+
title="Enterprise and Teams"
57+
desc="Enterprise and Teams"
58+
/>
59+
<Category
60+
color="red"
61+
title="CI/CD and DevOps"
62+
desc="CI/CD and DevOps"
63+
/>
64+
<Category
65+
color="blue"
66+
title="Collaborative Coding"
67+
desc="Collaborative Coding"
68+
/>
69+
<Category
70+
color="green"
71+
title="Developers"
72+
desc="Collaborative Coding"
73+
/>
74+
<Category
75+
color="purple"
76+
title="Enterprise and Teams"
77+
desc="Enterprise and Teams"
78+
/>
79+
</CatsWapper>
80+
</MainWrapper>
81+
</Wrapper>
82+
)
83+
}
84+
85+
export default bond(HelpThreadContainer, 'helpThread') as FC<TProps>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { useEffect } from 'react'
2+
// import { } from 'ramda'
3+
4+
import { buildLog } from '@/utils/logger'
5+
6+
// import S from './schma'
7+
import type { TStore } from './store'
8+
9+
let store: TStore | undefined
10+
11+
/* eslint-disable-next-line */
12+
const log = buildLog('L:HelpThread')
13+
14+
export const someMethod = (): void => {
15+
//
16+
}
17+
18+
// ###############################
19+
// init & uninit handlers
20+
// ###############################
21+
22+
export const useInit = (_store: TStore): void => {
23+
useEffect(() => {
24+
store = _store
25+
log('useInit: ', store)
26+
// return () => store.reset()
27+
}, [_store])
28+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { gql } from '@urql/core'
2+
3+
const simpleMutation = gql`
4+
mutation ($id: ID!) {
5+
post(id: $id) {
6+
id
7+
}
8+
}
9+
`
10+
const simpleQuery = gql`
11+
query ($filter: filter!) {
12+
post(id: $id) {
13+
id
14+
}
15+
}
16+
`
17+
18+
const schema = {
19+
simpleMutation,
20+
simpleQuery,
21+
}
22+
23+
export default schema

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
* HelpThread store
3+
*/
4+
5+
import { types as T, getParent, Instance } from 'mobx-state-tree'
6+
// import {} from 'ramda'
7+
8+
import type { TCommunity, TRootStore } from '@/spec'
9+
import { buildLog } from '@/utils/logger'
10+
import { markStates, toJS } from '@/utils/mobx'
11+
12+
/* eslint-disable-next-line */
13+
const log = buildLog('S:HelpThread')
14+
15+
const HelpThread = T.model('HelpThread', {})
16+
.views((self) => ({
17+
get curCommunity(): TCommunity {
18+
const root = getParent(self) as TRootStore
19+
20+
return toJS(root.viewing.community)
21+
},
22+
}))
23+
.actions((self) => ({
24+
mark(sobj: Record<string, unknown>): void {
25+
markStates(sobj, self)
26+
},
27+
}))
28+
29+
export type TStore = Instance<typeof HelpThread>
30+
31+
export default HelpThread

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import styled from 'styled-components'
2+
3+
import type { TTestable } from '@/spec'
4+
import css, { theme } from '@/utils/css'
5+
6+
import LaptopSVG from '@/icons/Laptop'
7+
8+
type TWrapper = TTestable | { color?: string }
9+
export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
10+
'data-test-id': testid,
11+
}))<TWrapper>`
12+
${css.flexColumn()};
13+
background: transparent;
14+
width: 33%;
15+
min-height: 80px;
16+
padding: 15px 20px;
17+
padding-left: 0;
18+
margin-bottom: 20px;
19+
20+
transition: all 0.2s;
21+
`
22+
23+
export const Header = styled.div`
24+
${css.flex('align-center')};
25+
margin-bottom: 10px;
26+
`
27+
export const Icon = styled(LaptopSVG)`
28+
${css.size(16)};
29+
fill: ${theme('thread.extraInfo')};
30+
margin-right: 10px;
31+
`
32+
export const Title = styled.div<{ color: string }>`
33+
color: ${theme('thread.articleTitle')};
34+
font-size: 18px;
35+
font-weight: 600;
36+
`
37+
export const Item = styled.div<{ color: string }>`
38+
color: ${theme('thread.articleDigest')};
39+
font-size: 14px;
40+
margin-bottom: 4px;
41+
margin-left: 25px;
42+
43+
&:hover {
44+
color: ${theme('thread.articleTitle')};
45+
cursor: pointer;
46+
}
47+
48+
transition: all 0.2s;
49+
`
50+
51+
export const MoreLink = styled.div`
52+
color: #175199; // to-theme
53+
font-size: 13px;
54+
margin-top: 5px;
55+
margin-left: 24px;
56+
57+
&:hover {
58+
cursor: pointer;
59+
}
60+
61+
transition: all 0.2s;
62+
`

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

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

0 commit comments

Comments
 (0)