Project sidebar changes - creating new component ProjectSidebarInfo, changes in LinksMenu css

Author: Sachin Maheshwari

src/components/LinksMenu/LinksMenu.jsx

@@ -61,7 +61,7 @@ const LinksMenu = ({ links, limit, canDelete, isAddingNewLink, onAddingNewLink,
         }
       </ul>
       {links.length > limit && <div className="links-footer">
-        <a href="javascript:" onClick={() => onChangeLimit(10000)}>view more</a>
+        <a href="javascript:" onClick={() => onChangeLimit(10000)}>View all</a>
       </div>}
     </div>
   </Panel>

src/components/LinksMenu/LinksMenu.scss

@@ -4,7 +4,7 @@
   li{
     @include roboto-medium;
     font-size: $tc-label-md;
-    color: $tc-gray-70;
+    color: $tc-dark-blue;
     line-height: $base-unit*6;
     padding-left: $base-unit*4;
     display: flex;
@@ -29,12 +29,21 @@
   .links-footer{
     @include roboto;
     font-size: $tc-label-xs;
-    color: $tc-dark-blue-70;
+    color: $tc-gray-70;
     line-height: $base-unit*6;
     padding-left: $base-unit*4;
   }
 
   .delete-link-modal {
     margin-left: -4*$base-unit;
   }
+
+  li:before {
+   content: '\b7\a0';
+   font-size: 200%;
+   color: $tc-dark-blue
+  }
+}
+.panel {
+  box-shadow:none;
 }

src/components/ProjectInfo/ProjectSidebarInfo.jsx

@@ -0,0 +1,78 @@
+import _ from 'lodash'
+import moment from 'moment'
+import React, { PropTypes as PT } from 'react'
+import { Link } from 'react-router-dom'
+import TextTruncate from 'react-text-truncate'
+import { getProjectRoleForCurrentUser } from '../../helpers/projectHelper'
+import ProjectProgress from '../ProjectProgress/ProjectProgress'
+import ProjectStatus from '../ProjectStatus/ProjectStatus'
+import { findCategory } from '../../config/projectWizard'
+import SVGIconImage from '../SVGIconImage'
+import { PROJECT_STATUS_ACTIVE } from '../../config/constants'
+import './ProjectSidebarInfo.scss'
+
+function ProjectSidebarInfo({ project, duration, currentMemberRole}) {
+
+    if (!project) return null
+
+    const category = findCategory(project.type)
+    // icon for the category, use default generic work project icon for categories which no longer exist now
+    const categoryIcon = _.get(category, 'icon', 'tech-32px-outline-work-project')
+    return (
+        <div className="project-sidebar-info">
+            <div className="header">
+                <div className="project-header">
+                    <div className="project-type-icon"><SVGIconImage filePath={categoryIcon} /></div>
+                    <div className="project-details">
+                        <div className="project-name">
+                            <TextTruncate
+                                containerClassName="project-name"
+                                line={1}
+                                truncateText="..."
+                                text={project.name}
+                            />
+                        </div>
+                        <div className="project-date">{moment(project.updatedAt).format('MMM DD, YYYY')}</div>
+                    </div>
+                </div>
+            </div>
+            <div className="body">
+                <TextTruncate
+                    containerClassName="project-description"
+                    line={4}
+                    truncateText="..."
+                    text={project.description}
+                    textTruncateChild={<span><Link className="read-more-link" to={`/projects/${project.id}/specification`}> read more </Link></span>}
+                />
+                <div className="project-status">
+                    {project.status !== PROJECT_STATUS_ACTIVE &&
+                        <ProjectStatus
+                            status={project.status}
+                            showText
+                            withoutLabel
+                            currentMemberRole={currentMemberRole}
+                            canEdit={false}
+                            unifiedHeader={false}
+                        />
+                    }
+                    {project.status === PROJECT_STATUS_ACTIVE &&
+                        <ProjectProgress {...duration} viewType={ProjectProgress.ViewTypes.CIRCLE} percent={46}>
+                            <span className="progress-text">{duration.percent}% completed</span>
+                        </ProjectProgress>
+                    }
+                </div>
+            </div>
+        </div>
+    )
+}
+
+ProjectSidebarInfo.defaultTypes = {
+}
+
+ProjectSidebarInfo.propTypes = {
+    project: PT.object.isRequired,
+    currentMemberRole: PT.string,
+    duration: PT.object.isRequired,
+}
+
+export default ProjectSidebarInfo

src/components/ProjectInfo/ProjectSidebarInfo.scss

@@ -0,0 +1,71 @@
+@import 'tc-includes';
+
+.project-sidebar-info {
+  display: flex;
+  flex-direction: column;
+  background-color: $tc-white;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  padding: 4 * $base_unit;
+  
+  .header {
+    flex: 1;
+
+    .project-header {
+      display: flex;
+      flex-direction: row;
+      min-height: 60px;
+      max-height: 60px;
+      overflow: hidden;
+
+      .project-details {
+        display: flex;
+        flex-direction: column;
+        margin-left: 4 * $base_unit;
+
+        .project-name {
+          color: $tc-black;
+        }
+
+        .project-date {
+          @include tc-body-extra-small;
+          text-transform: uppercase;
+          line-height: 4 * $base_unit;
+          color: $tc-gray-50;
+        }
+      }
+    }
+  }
+
+  .body {
+    flex: 2;
+    .project-description {
+      overflow: hidden;
+      max-height: 120px;
+      min-height: 120px;
+    }
+
+    .project-status {
+      border-top: 1px solid $tc-gray-10;
+      border-bottom: 1px solid $tc-gray-10;
+      padding: 10px 0px;
+      display: flex;
+      justify-content: center;
+
+      .status-header {
+        .status-label {
+          text-transform: uppercase;
+        }
+      }
+
+      .project-progress {
+        display: flex;
+        .progress-text {
+          text-transform: uppercase;
+          margin-left: 10px;
+          line-height: 16px;
+        } 
+      }
+    }
+  }
+}

src/projects/detail/containers/ProjectInfoContainer.js

@@ -10,6 +10,7 @@ import { updateProject, deleteProject } from '../../actions/project'
 import { setDuration } from '../../../helpers/projectHelper'
 import { PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER,
    DIRECT_PROJECT_URL, SALESFORCE_PROJECT_LEAD_LINK, PROJECT_STATUS_CANCELLED } from '../../../config/constants'
+import ProjectSidebarInfo from '../../../components/ProjectInfo/ProjectSidebarInfo'
 
 class ProjectInfoContainer extends React.Component {
 
@@ -99,26 +100,18 @@ class ProjectInfoContainer extends React.Component {
     }
     return (
       <div>
-        <ProjectInfo
-          projectId={project.id}
-          canDeleteProject={canDeleteProject}
-          onDeleteProject={this.onDeleteProject}
-          directLinks={directLinks}
+        <ProjectSidebarInfo
+          project={project}
           currentMemberRole={currentMemberRole}
-          description={project.description}
-          type={project.type}
-          devices={ devices }
-          status={project.status} onChangeStatus={this.onChangeStatus}
           duration={duration}
-          budget={budget}
         />
         <LinksMenu
           links={project.bookmarks || []}
           canDelete={!!currentMemberRole}
           onAddNewLink={this.onAddNewLink}
           onDelete={this.onDeleteLink}
         />
-      <TeamManagementContainer projectId={project.id} members={project.members}/>
+        <TeamManagementContainer projectId={project.id} members={project.members} />
         <FooterV2 />
       </div>
     )