Project list items UI mockup

app/static/app/js/components/ProjectList.jsx

@@ -46,11 +46,11 @@ class ProjectList extends React.Component {
             return (<div>Loading projects...</div>);
         }
         else if (this.state.projects){
-            return (<div>
+            return (<ul className="list-group">
                     {this.state.projects.map(p => (
                         <ProjectListItem key={p.id} data={p} /> 
                     ))}
-                </div>);
+                </ul>);
         }else if (this.state.error){
             return (<div>An error occurred: {this.state.error}</div>);
         }else{

app/static/app/js/components/ProjectListItem.jsx

@@ -2,26 +2,49 @@ import React from 'react';
 import ProjectListItemPanel from './ProjectListItemPanel';
 
 class ProjectListItem extends React.Component {
-  constructor(){
-    super();
+  constructor(props){
+    super(props);
+
     this.state = {
-      collapsed: true
+      showPanel: false
     };
 
-    this.handleClick = this.handleClick.bind(this);
+    this.togglePanel = this.togglePanel.bind(this);
   }
 
-  handleClick(){
-    this.state.collapsed = !this.state.collapsed;
+  togglePanel(){
+    this.setState({
+      showPanel: !this.state.showPanel
+    });
   }
 
   render() {
     return (
-      <div onClick={this.handleClick}>
-        {this.props.data.name} {this.props.data.created_at}
+      <li className="project-list-item list-group-item"
+         href="javascript:void(0);">
+        <div className="btn-group pull-right">
+          <button type="button" className="btn btn-primary btn-sm">
+            <i className="glyphicon glyphicon-upload"></i>
+            Upload Images
+          </button>
+          <button type="button" className="btn btn-default btn-sm">
+            <i className="fa fa-globe"></i> Map View
+          </button>
+          <button type="button" className="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
+            <span className="caret"></span>
+          </button>
+          <ul className="dropdown-menu">
+            <li><a href="javascript:alert('TODO!');"><i className="fa fa-cube"></i> 3D View</a></li>
+          </ul>
+        </div>
 
-        {this.props.collapsed ? "" : <ProjectListItemPanel />}
-      </div>
+        <i style={{width: 14}} className={'fa ' + (this.state.showPanel ? 'fa-caret-down' : 'fa-caret-right')}>
+        </i> <a href="javascript:void(0);" onClick={this.togglePanel}>
+          {this.props.data.name}
+        </a>
+
+        {this.state.showPanel ? <ProjectListItemPanel /> : ""}
+      </li>
     );
   }
 }

app/static/app/js/components/ProjectListItemPanel.jsx

@@ -7,8 +7,8 @@ class ProjectListItemPanel extends React.Component {
 
   render() {
     return (
-      <div>
-      Sup!
+      <div className="project-list-item-panel">
+        TODO
       </div>
     );
   }

app/static/app/js/css/Dashboard.scss

@@ -1,3 +1,9 @@
 #dashboard-app{
-    background-color: yellow;
+    .project-list-item{
+        min-height: 60px;
+    }
+
+    .project-list-item-panel{
+        min-height: 100px;
+    }
 }