Skip to content

Commit b9f500e

Browse files
author
Sachin Maheshwari
committed
Used old component and divided card component in header and body components.
1 parent 1261268 commit b9f500e

File tree

10 files changed

+202
-226
lines changed

10 files changed

+202
-226
lines changed

‎src/components/LinksMenu/LinksMenu.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,3 @@
4444
color: $tc-dark-blue
4545
}
4646
}
47-
.panel {
48-
box-shadow:none;
49-
}

‎src/components/ProjectInfo/ProjectCardBody.jsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React, { PropTypes as PT } from 'react'
2+
import { Link } from 'react-router-dom'
3+
import TextTruncate from 'react-text-truncate'
4+
import ProjectProgress from '../ProjectProgress/ProjectProgress'
5+
import ProjectStatus from '../ProjectStatus/ProjectStatus'
6+
import { PROJECT_STATUS_ACTIVE } from '../../config/constants'
7+
import './ProjectCardBody.scss'
8+
9+
function ProjectCardBody({ project, duration, currentMemberRole }) {
10+
if (!project) return null
11+
12+
return (
13+
<div className="project-card-body">
14+
<TextTruncate
15+
containerClassName="project-description"
16+
line={4}
17+
truncateText="..."
18+
text={project.description}
19+
textTruncateChild={<span><Link className="read-more-link" to={`/projects/${project.id}/specification`}> read more </Link></span>}
20+
/>
21+
<div className="project-status">
22+
{project.status !== PROJECT_STATUS_ACTIVE &&
23+
<ProjectStatus
24+
status={project.status}
25+
showText
26+
withoutLabel
27+
currentMemberRole={currentMemberRole}
28+
canEdit={false}
29+
unifiedHeader={false}
30+
/>
31+
}
32+
{project.status === PROJECT_STATUS_ACTIVE &&
33+
<ProjectProgress {...duration} viewType={ProjectProgress.ViewTypes.CIRCLE} percent={46}>
34+
<span className="progress-text">{duration.percent}% completed</span>
35+
</ProjectProgress>
36+
}
37+
</div>
38+
</div>
39+
)
40+
}
41+
42+
ProjectCardBody.defaultTypes = {
43+
}
44+
45+
ProjectCardBody.propTypes = {
46+
project: PT.object.isRequired,
47+
currentMemberRole: PT.string,
48+
duration: PT.object.isRequired
49+
}
50+
51+
export default ProjectCardBody

‎src/components/ProjectInfo/ProjectCardBody.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import 'tc-includes';
2+
3+
.project-card-body {
4+
flex: 2;
5+
.project-description {
6+
overflow: hidden;
7+
max-height: 120px;
8+
min-height: 120px;
9+
color: $tc-gray-80;
10+
11+
.read-more-link {
12+
white-space: nowrap;
13+
color: $tc-dark-blue-90;
14+
}
15+
}
16+
17+
.project-status {
18+
border-top: 1px solid $tc-gray-10;
19+
border-bottom: 1px solid $tc-gray-10;
20+
padding: 10px 0px;
21+
display: flex;
22+
justify-content: center;
23+
24+
.status-header {
25+
.status-label {
26+
text-transform: uppercase;
27+
}
28+
}
29+
30+
.project-progress {
31+
display: flex;
32+
.progress-text {
33+
text-transform: uppercase;
34+
margin-left: 10px;
35+
line-height: 16px;
36+
}
37+
}
38+
}
39+
}

‎src/components/ProjectInfo/ProjectCardHeader.jsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import _ from 'lodash'
2+
import moment from 'moment'
3+
import React, { PropTypes as PT } from 'react'
4+
import TextTruncate from 'react-text-truncate'
5+
import { findCategory } from '../../config/projectWizard'
6+
import SVGIconImage from '../SVGIconImage'
7+
import './ProjectCardHeader.scss'
8+
9+
function ProjectCardHeader({ project }) {
10+
if (!project) return null
11+
12+
const category = findCategory(project.type)
13+
// icon for the category, use default generic work project icon for categories which no longer exist now
14+
const categoryIcon = _.get(category, 'icon', 'tech-32px-outline-work-project')
15+
return (
16+
<div className="project-card-header">
17+
<div className="project-header">
18+
<div className="project-type-icon"><SVGIconImage filePath={categoryIcon} /></div>
19+
<div className="project-sub-header">
20+
<div className="project-name">
21+
<TextTruncate
22+
containerClassName="project-name"
23+
line={1}
24+
truncateText="..."
25+
text={project.name}
26+
/>
27+
</div>
28+
<div className="project-date">{moment(project.updatedAt).format('MMM DD, YYYY')}</div>
29+
</div>
30+
</div>
31+
</div>
32+
)
33+
}
34+
35+
ProjectCardHeader.defaultTypes = {
36+
}
37+
38+
ProjectCardHeader.propTypes = {
39+
project: PT.object.isRequired
40+
}
41+
42+
export default ProjectCardHeader

‎src/components/ProjectInfo/ProjectCardHeader.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@import 'tc-includes';
2+
3+
.project-card-header {
4+
flex: 1;
5+
.project-header {
6+
display: flex;
7+
flex-direction: row;
8+
min-height: 40px;
9+
max-height: 40px;
10+
overflow: hidden;
11+
12+
.project-sub-header {
13+
display: flex;
14+
flex-direction: column;
15+
margin-left: 4 * $base_unit;
16+
line-height: 3 * $base_unit;
17+
18+
.project-name {
19+
color: $tc-black;
20+
}
21+
22+
.project-date {
23+
@include tc-body-extra-small;
24+
text-transform: uppercase;
25+
line-height: 4 * $base_unit;
26+
color: $tc-gray-50;
27+
}
28+
}
29+
}
30+
}
31+
32+

‎src/components/ProjectInfo/ProjectInfo.jsx‎

Lines changed: 25 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,32 @@
1-
import React, {PropTypes, Component} from 'react'
2-
import Panel from '../Panel/Panel'
3-
import ProjectType from '../ProjectType/ProjectType'
4-
import ProjectStatusSection from '../ProjectStatusSection/ProjectStatusSection'
5-
import ProjectProgress from '../ProjectProgress/ProjectProgress'
6-
import DeleteProjectModal from './DeleteProjectModal'
7-
import wrapInPanel from '../PanelProject/wrapInPanel'
8-
const ProgressPanel = wrapInPanel(ProjectProgress)
9-
10-
require('./ProjectInfo.scss')
11-
12-
class ProjectInfo extends Component {
13-
14-
constructor(props) {
15-
super(props)
16-
this.toggleProjectDelete = this.toggleProjectDelete.bind(this)
17-
this.onConfirmDelete = this.onConfirmDelete.bind(this)
18-
}
19-
20-
componentWillMount() {
21-
this.setState({ showDeleteConfirm: false })
22-
}
23-
24-
toggleProjectDelete() {
25-
this.setState({ showDeleteConfirm: !this.state.showDeleteConfirm })
26-
}
27-
28-
onConfirmDelete() {
29-
this.props.onDeleteProject()
30-
}
1+
import React, { PropTypes as PT } from 'react'
2+
import ProjectCardHeader from './ProjectCardHeader'
3+
import ProjectCardBody from './ProjectCardBody'
4+
import './ProjectInfo.scss'
5+
6+
function ProjectInfo({ project, duration, currentMemberRole }) {
7+
if (!project) return null
8+
9+
return (
10+
<div className="project-info">
11+
<ProjectCardHeader
12+
project={project}
13+
/>
14+
<ProjectCardBody
15+
project={project}
16+
currentMemberRole={currentMemberRole}
17+
duration={duration}
18+
/>
19+
</div>
20+
)
21+
}
3122

32-
render() {
33-
const { projectId, description, type, directLinks, devices, currentMemberRole, status, onChangeStatus, duration,
34-
canDeleteProject } = this.props
35-
const { showDeleteConfirm } = this.state
36-
const displayProgress = status !== 'cancelled'
37-
return (
38-
<Panel>
39-
<Panel.Title>Project</Panel.Title>
40-
{ canDeleteProject && !showDeleteConfirm &&
41-
<Panel.DeleteBtn onClick={this.toggleProjectDelete} />
42-
}
43-
{ showDeleteConfirm &&
44-
<DeleteProjectModal
45-
onCancel={this.toggleProjectDelete}
46-
onConfirm={this.onConfirmDelete}
47-
/>
48-
}
49-
<ProjectType projectId={projectId} type={type} devices={devices} description={ description } />
50-
<ProjectStatusSection directLinks={directLinks} currentMemberRole={currentMemberRole} status={status} onChangeStatus={onChangeStatus} />
51-
{displayProgress && <ProgressPanel {...duration}>
52-
{duration.text}
53-
</ProgressPanel>}
54-
{/* <ProjectProgress title="Budget" percent={budget.percent} type="working">
55-
{budget.text}
56-
</ProjectProgress> */}
57-
</Panel>
58-
)
59-
}
23+
ProjectInfo.defaultTypes = {
6024
}
6125

6226
ProjectInfo.propTypes = {
63-
currentMemberRole: PropTypes.string,
64-
type: PropTypes.string.isRequired,
65-
devices: PropTypes.array.isRequired,
66-
directLinks: PropTypes.array,
67-
status: PropTypes.string.isRequired,
68-
onChangeStatus: PropTypes.func.isRequired,
69-
duration: PropTypes.object.isRequired,
70-
budget: PropTypes.object.isRequired
27+
project: PT.object.isRequired,
28+
currentMemberRole: PT.string,
29+
duration: PT.object.isRequired
7130
}
7231

7332
export default ProjectInfo

‎src/components/ProjectInfo/ProjectInfo.scss‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
@import 'tc-includes';
22

3-
.project-description {
4-
color: $tc-gray-80;
5-
@include tc-label-md;
6-
7-
.read-more-link {
8-
white-space: nowrap;
9-
color: $tc-dark-blue-90;
10-
}
3+
.project-info {
4+
display: flex;
5+
flex-direction: column;
6+
background-color: $tc-white;
7+
border-top-left-radius: 6px;
8+
border-top-right-radius: 6px;
9+
padding: 4 * $base_unit;
10+
@include tc-label-md;
11+
}
12+
.panel {
13+
box-shadow:none !important;
1114
}

‎src/components/ProjectInfo/ProjectSidebarInfo.jsx‎

Lines changed: 0 additions & 76 deletions
This file was deleted.

0 commit comments

Comments
 (0)