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

Commit 0c1b21a

Browse files
mydearxymmydearxym
authored
feat(gtd-thread): basic UI & Concept (#1275)
* fix(generator): missing container index template * fix(generator): fmt * feat(gtd-thread): basic UI * style(gtd-thread): adjust mini * refactor(gtd-thread): extract & adjust page styles * feat(gtd-thread): cool action banner UI * refactor(gtd-thread): title style
1 parent 7e87589 commit 0c1b21a

File tree

40 files changed

+590
-36
lines changed

40 files changed

+590
-36
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type { TThread } from '@/spec'
44
import { THREAD } from '@/constant'
55

66
import ArticlesThread from '@/containers//thread/ArticlesThread'
7+
import GtdThread from '@/containers//thread/GtdThread'
78
// import ReposThread from '@/containers/thread/ReposThread'
89
import CperMapThread from '@/containers/thread/CperMapThread'
910

@@ -46,7 +47,8 @@ const ThreadContent: FC<TProps> = ({ thread }) => {
4647
return <CperMapThread />
4748

4849
default:
49-
return <ArticlesThread />
50+
return <GtdThread />
51+
// return <ArticlesThread />
5052
}
5153
}
5254

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import ThemePalette from '@/containers/layout/ThemePalette'
1616
// import Header from '@/widgets/Header'
1717

1818
// import Header from '@/containers/unit/Header'
19+
// import Footer from '@/containers/unit/Footer'
1920
// import ModeLine from '@/containers/unit/ModeLine'
2021

2122
// import Drawer from '@/containers/tool/Drawer'

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { FC, memo } from 'react'
2+
3+
import { ICON } from '@/config'
4+
import { mockUsers } from '@/utils/mock'
5+
6+
import { IconSwitcher } from '@/widgets/Switcher'
7+
import AvatarsRow from '@/widgets/AvatarsRow'
8+
import { Space } from '@/widgets/Common'
9+
10+
import {
11+
Wrapper,
12+
Title,
13+
Count,
14+
ModeWrapper,
15+
LeftPart,
16+
RightPart,
17+
JoinTitle,
18+
NewButton,
19+
} from './styles/actions'
20+
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+
34+
const Actions: FC = () => {
35+
return (
36+
<Wrapper>
37+
<LeftPart>
38+
<Title>
39+
看板墙
40+
<Count>23</Count>
41+
</Title>
42+
</LeftPart>
43+
<RightPart>
44+
<ModeWrapper>
45+
<IconSwitcher
46+
items={switchItems}
47+
activeKey="kanban"
48+
onChange={console.log}
49+
/>
50+
</ModeWrapper>
51+
<Space right={20} />
52+
<JoinTitle>参与者</JoinTitle>
53+
<AvatarsRow size="medium" users={mockUsers(6)} total={20} />
54+
<Space right={25} />
55+
<NewButton size="medium">新&nbsp;增</NewButton>
56+
</RightPart>
57+
</Wrapper>
58+
)
59+
}
60+
61+
export default memo(Actions)

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/* *
2+
* GtdThread
3+
*
4+
*/
5+
6+
import { FC } from 'react'
7+
8+
// import { buildLog } from '@/utils/logger'
9+
import { bond } from '@/utils/mobx'
10+
import { getRandomInt } from '@/utils/helper'
11+
12+
import { SpaceGrow } from '@/widgets/Common'
13+
import IconButton from '@/widgets/Buttons/IconButton'
14+
import GtdItem from '@/widgets/GtdItem'
15+
16+
import Actions from './Actions'
17+
18+
import type { TStore } from './store'
19+
import {
20+
Wrapper,
21+
ColumnsWrapper,
22+
Column,
23+
Header,
24+
Title,
25+
Label,
26+
SubTitle,
27+
TODOIcon,
28+
WipIcon,
29+
DoneIcon,
30+
} from './styles'
31+
import { useInit } from './logic' /* eslint-disable-next-line */
32+
33+
// const log = buildLog('C:GtdThread')
34+
35+
type TProps = {
36+
gtdThread?: TStore
37+
testid?: string
38+
}
39+
40+
const GtdThreadContainer: FC<TProps> = ({
41+
gtdThread: store,
42+
testid = 'gtd-thread',
43+
}) => {
44+
useInit(store)
45+
46+
return (
47+
<Wrapper testid={testid}>
48+
<Actions />
49+
50+
<ColumnsWrapper>
51+
<Column>
52+
<Header>
53+
<Title>
54+
<Label>已排期</Label>
55+
<TODOIcon />
56+
<SpaceGrow />
57+
<IconButton path="shape/more-l.svg" mRight={2} />
58+
</Title>
59+
<SubTitle>{getRandomInt(5, 20)} 项</SubTitle>
60+
</Header>
61+
<GtdItem />
62+
<GtdItem />
63+
<GtdItem />
64+
<GtdItem />
65+
<GtdItem />
66+
<GtdItem />
67+
</Column>
68+
<Column>
69+
<Header>
70+
<Title>
71+
<Label>正在完善</Label>
72+
<WipIcon />
73+
<SpaceGrow />
74+
<IconButton path="shape/more-l.svg" mRight={2} />
75+
</Title>
76+
<SubTitle>{getRandomInt(5, 20)} 项</SubTitle>
77+
</Header>
78+
<GtdItem />
79+
<GtdItem />
80+
<GtdItem />
81+
<GtdItem />
82+
<GtdItem />
83+
<GtdItem />
84+
</Column>
85+
<Column>
86+
<Header>
87+
<Title>
88+
<Label>已完成</Label>
89+
<DoneIcon />
90+
<SpaceGrow />
91+
<IconButton path="shape/more-l.svg" mRight={2} />
92+
</Title>
93+
<SubTitle>{getRandomInt(5, 20)} 项</SubTitle>
94+
</Header>
95+
<GtdItem />
96+
<GtdItem />
97+
<GtdItem />
98+
<GtdItem />
99+
<GtdItem />
100+
<GtdItem />
101+
</Column>
102+
</ColumnsWrapper>
103+
</Wrapper>
104+
)
105+
}
106+
107+
export default bond(GtdThreadContainer, 'gtdThread') as FC<TProps>

‎src/containers/thread/GtdThread/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:GtdThread')
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/GtdThread/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/GtdThread/store.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
* GtdThread 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:GtdThread')
14+
15+
const GtdThread = T.model('GtdThread', {})
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 GtdThread>
30+
31+
export default GtdThread

‎src/containers/thread/GtdThread/styles/actions.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import styled from 'styled-components'
2+
3+
import css, { theme } from '@/utils/css'
4+
import Button from '@/widgets/Buttons/Button'
5+
6+
export const Wrapper = styled.div`
7+
${css.flex('justify-between', 'align-center')};
8+
padding: 0 2px;
9+
`
10+
export const Title = styled.div`
11+
${css.flex('align-center')};
12+
color: ${theme('thread.articleTitle')};
13+
font-size: 15px;
14+
font-weight: 500;
15+
margin-top: 6px;
16+
`
17+
export const Count = styled.div`
18+
color: ${theme('thread.articleDigest')};
19+
font-size: 12px;
20+
margin-left: 8px;
21+
opacity: 0.8;
22+
margin-top: 2px;
23+
font-weight: 400;
24+
`
25+
export const LeftPart = styled.div`
26+
${css.flex('align-center')};
27+
`
28+
export const ModeWrapper = styled.div`
29+
margin-top: 2px;
30+
transform: scale(0.85);
31+
`
32+
export const RightPart = styled.div`
33+
${css.flex('align-center')};
34+
`
35+
export const JoinTitle = styled.div`
36+
color: ${theme('thread.articleDigest')};
37+
font-size: 12px;
38+
margin-right: 10px;
39+
margin-top: 3px;
40+
`
41+
export const NewButton = styled(Button)`
42+
border-radius: 12px;
43+
height: 30px;
44+
`

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import styled from 'styled-components'
2+
3+
import type { TTestable } from '@/spec'
4+
import css, { theme } from '@/utils/css'
5+
6+
import GtdWipSVG from '@/icons/GtdWip'
7+
import GtdDoneSVG from '@/icons/GtdDone'
8+
import GtdTodoSVG from '@/icons/GtdTodo'
9+
10+
export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
11+
'data-test-id': testid,
12+
}))<TTestable>`
13+
width: 100%;
14+
padding: 10px 25px;
15+
`
16+
export const ColumnsWrapper = styled.div`
17+
${css.flex('align-start', 'justify-between')};
18+
min-height: 500px;
19+
margin-top: 60px;
20+
`
21+
export const Column = styled.div`
22+
${css.flexColumn('align-start')};
23+
width: 29%;
24+
min-height: 70vh;
25+
/* border: 1px solid; */
26+
/* border-color: ${theme('thread.extraInfo')}; */
27+
`
28+
export const Header = styled.div`
29+
border-bottom: 2px solid;
30+
border-bottom-color: ${theme('thread.articleDigest')};
31+
padding-bottom: 22px;
32+
width: 100%;
33+
padding-left: 3px;
34+
`
35+
export const Title = styled.div`
36+
${css.flex('align-center')};
37+
`
38+
export const SubTitle = styled.div`
39+
color: ${theme('thread.articleDigest')};
40+
opacity: 0.8;
41+
font-size: 13px;
42+
margin-top: 4px;
43+
`
44+
export const Label = styled.div`
45+
color: ${theme('thread.articleTitle')};
46+
font-size: 15px;
47+
font-weight: 600;
48+
margin-right: 10px;
49+
`
50+
export const TODOIcon = styled(GtdTodoSVG)`
51+
${css.size(12)};
52+
fill: ${theme('thread.extraInfo')};
53+
`
54+
export const WipIcon = styled(GtdWipSVG)`
55+
${css.size(12)};
56+
fill: ${theme('thread.extraInfo')};
57+
`
58+
export const DoneIcon = styled(GtdDoneSVG)`
59+
${css.size(12)};
60+
fill: ${theme('thread.extraInfo')};
61+
`

‎src/containers/thread/GtdThread/tests/index.test.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import React from 'react'
2+
// import { shallow } from 'enzyme'
3+
4+
// import GtdThread from '../index'
5+
6+
describe('TODO <GtdThread />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(true)
9+
})
10+
})

0 commit comments

Comments
 (0)