Skip to content

Commit 19e846a

Browse files
author
seraphimrose
committed
detail frame
1 parent c051eff commit 19e846a

File tree

13 files changed

+173
-21
lines changed

13 files changed

+173
-21
lines changed

‎app/action/detail.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createAction } from 'redux-act'
2+
import { fromJS } from 'immutable'
3+
4+
export const toggleDetail = createAction("Show card detail", data => fromJS(data))

‎app/component/app/app.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ body {
1010
height: 100%;
1111
width: 100%;
1212
background: #000;
13-
opacity: 0.4;
14-
z-index: -1;
13+
opacity: 0.5;
14+
z-index: 1;
1515
}

‎app/component/app/index.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
import React from 'react'
22

33
import Board from 'component/board'
4+
import Detail from 'component/detail'
45

56
import './app.css'
67

78
export default (props) => (
89
<div>
910
<Board {...props}/>
10-
<div id="mask"></div>
11+
{props.showDetail && (
12+
<div>
13+
<Detail
14+
card={props.card.get(props.detailIndex)}
15+
tag={props.tag}
16+
member={props.member}
17+
/>
18+
<div id="mask"></div>
19+
</div>
20+
)}
1121
</div>
1222
)

‎app/component/card/card.css

+4
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@
4848
}
4949
}
5050

51+
:local(.content) {
52+
overflow: hidden;
53+
}
54+
5155
:local(.title) {
5256
padding-left: 2px;
5357
}

‎app/component/card/index.js

+17-14
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { DragSource, DropTarget } from 'react-dnd';
55
import { findDOMNode } from 'react-dom'
66

77
import { removeCard, moveCard } from 'action/entity'
8+
import { toggleDetail } from 'action/detail'
89
import style from './card.css'
910

1011
const cardDragSource = {
@@ -100,20 +101,22 @@ export default class Card extends Component {
100101
onClick={() => dispatch(removeCard({listIndex, index}))}
101102
/>
102103
</div>
103-
<div className={style.title}>
104-
{card.get('title')}
105-
</div>
106-
<div className={style.hint}></div>
107-
<div className={style.member}>
108-
{card.get('member').map(value => (
109-
<Tooltip
110-
key={value}
111-
placement="top"
112-
title={member.getIn([value, 'name'])}
113-
>
114-
<img src={member.getIn([value, 'avatar'])} />
115-
</Tooltip>
116-
))}
104+
<div className={style.content} onClick={() => dispatch(toggleDetail({index}))}>
105+
<div className={style.title}>
106+
{card.get('title')}
107+
</div>
108+
<div className={style.hint}></div>
109+
<div className={style.member}>
110+
{card.get('member').map(value => (
111+
<Tooltip
112+
key={value}
113+
placement="top"
114+
title={member.getIn([value, 'name'])}
115+
>
116+
<img src={member.getIn([value, 'avatar'])} />
117+
</Tooltip>
118+
))}
119+
</div>
117120
</div>
118121
</div>
119122
))

‎app/component/detail/detail.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
:local(.detail) {
2+
position: absolute;
3+
left: 0;
4+
top: 0;
5+
z-index: 100;
6+
}

‎app/component/detail/index.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React, { Component } from 'react'
2+
import Icon from 'antd/lib/icon'
3+
4+
import style from './detail.css'
5+
6+
export default class Detail extends Component {
7+
constructor(props) {
8+
super(props)
9+
}
10+
11+
render() {
12+
const {
13+
card,
14+
member,
15+
tag
16+
} = this.props
17+
18+
return (
19+
<div className={style.detail}>
20+
<div className={style.header}>
21+
<div className={style.title}>
22+
{card.get('title')}
23+
</div>
24+
<div className={style.control}>
25+
<Icon className={style.icon} type="cross" />
26+
</div>
27+
</div>
28+
<div className={style.content}>
29+
<div className={style.main}>
30+
<div className={style.main}>
31+
<div className={style.feature}>
32+
<div className={style.member}>
33+
<div>Members</div>
34+
{card.get('member').map(v => (
35+
<img
36+
key={v}
37+
src={member.getIn([v, 'avatar'])}
38+
/>
39+
))}
40+
</div>
41+
<div className={style.tag}>
42+
<div>Labels</div>
43+
{card.get('tag').map(v => (
44+
<div key={v}
45+
className={"tag-" + tag.getIn([v, 'color'])}>
46+
{tag.getIn([v, 'title'])}
47+
</div>
48+
))}
49+
</div>
50+
<div className={style.dueDate}>
51+
<div>Due Date</div>
52+
{card.get('dueDate')}
53+
</div>
54+
<div className={style.lastUpdate}>
55+
<div>Last Update</div>
56+
{card.get('lastUpdate')}
57+
</div>
58+
<div className={style.desc}>
59+
<div>Description</div>
60+
{card.get('desc')}
61+
</div>
62+
</div>
63+
<div className={style.checkList}>
64+
{card.get('checkList') &&
65+
card.get('checkList').map(v => (
66+
<div key={v}>none</div>
67+
))}
68+
</div>
69+
<div className={style.comment}>
70+
<div>Add Comment</div>
71+
<textarea></textarea>
72+
<button>Send</button>
73+
</div>
74+
<div className={style.activity}>
75+
<div>Activity</div>
76+
{card.get('activity') &&
77+
card.get('activity').map(v => (
78+
<div key={v}></div>
79+
))}
80+
</div>
81+
</div>
82+
</div>
83+
<div className={style.sider}>
84+
<div>Members</div>
85+
<div>Labels</div>
86+
<div>CheckList</div>
87+
<div>Due Date</div>
88+
</div>
89+
</div>
90+
</div>
91+
)
92+
}
93+
}

‎app/config/entity.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,12 @@ export default {
1919
1: {
2020
title: "testing",
2121
tag: ['1', '2'],
22-
member: ['1', '2']
22+
member: ['1', '2'],
23+
dueDate: null,
24+
lastUpdate: null,
25+
desc: null,
26+
checkList: [],
27+
activity: []
2328
},
2429
2: {
2530
title: "test233",

‎app/reducer/detail.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { fromJS } from 'immutable'
2+
import { createReducer } from 'redux-act'
3+
import * as actions from 'action/detail'
4+
5+
const initialState = fromJS({
6+
showDetail: false,
7+
detailIndex: null
8+
})
9+
10+
export default createReducer({
11+
[actions.toggleDetail]: (state, data) =>
12+
state.set('showDetail', !state.get('showDetail'))
13+
.set('detailIndex', data.get('index'))
14+
}, initialState)

‎app/reducer/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { combineReducers } from 'redux'
22
import entity from './entity'
33
import next from './next'
4+
import detail from './detail'
45

5-
export default combineReducers({entity, next})
6+
export default combineReducers({entity, next, detail})

‎app/selector/appSelector.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import entitySelector from './entitySelector'
22
import nextSelector from './nextSelector'
3+
import detailSelector from './detailSelector'
34
import immutableSelector from './immutableSelector'
45

56
export default immutableSelector(
67
entitySelector,
78
nextSelector,
8-
(entity, next) => ({
9-
...entity, next
9+
detailSelector,
10+
(entity, next, detail) => ({
11+
...entity, next, ...detail
1012
})
1113
)

‎app/selector/detailSelector.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import immutableSelector from './immutableSelector'
2+
3+
export default immutableSelector(
4+
(state) => state.detail.get('showDetail'),
5+
(state) => state.detail.get('detailIndex'),
6+
(showDetail, detailIndex) => ({
7+
showDetail, detailIndex
8+
})
9+
)

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"history": "1.13.1",
1010
"immutable": "3.7.6",
1111
"lodash": "^3.10.0",
12+
"moment": "^2.13.0",
1213
"postcss-color-rgba-fallback": "^2.0.0",
1314
"postcss-pseudoelements": "^3.0.0",
1415
"querystring": "^0.2.0",

0 commit comments

Comments
 (0)