Add click event

app/components/projects/ProjectItem.js

@@ -1,12 +1,12 @@
 import React from 'react-native';
 import GlobalStyles from '../../settings/styles';
 import { getProjectRecentBuilds } from '../../api/CircleCI';
-import moment from 'moment';
 
 const {
   View,
   Text,
-  StyleSheet
+  StyleSheet,
+  TouchableHighlight
 } = React;
 
 const styles = StyleSheet.create({
@@ -17,9 +17,11 @@ const styles = StyleSheet.create({
     backgroundColor: GlobalStyles.get('CIRCLE_ITEM_BG'),
     borderBottomColor: GlobalStyles.get('CIRCLE_ITEM_BORDER'),
     borderBottomWidth: 2,
-    marginVertical: 2.5,
     flexDirection: 'row',
   },
+  button: {
+    marginVertical: 2.5,
+  },
   repoCell: {
     paddingHorizontal: 4,
     paddingVertical: 3,
@@ -27,8 +29,7 @@ const styles = StyleSheet.create({
   },
   buildCell: {
     flex: 0.25,
-    paddingHorizontal: 6,
-    paddingVertical: 3,
+    padding: 4,
     borderLeftColor: GlobalStyles.get('CIRCLE_ITEM_BORDER'),
     borderLeftWidth: 1
   },
@@ -40,8 +41,9 @@ const styles = StyleSheet.create({
     fontWeight: '500'
   },
   details: {
-    fontSize: 13,
-    fontWeight: '300'
+    fontSize: 12.5,
+    fontWeight: '300',
+    marginLeft: 3
   }
 });
 
@@ -52,6 +54,7 @@ export default class ProjectItem extends React.Component {
       recentBuild: false
     };
     this._displayMoreInfo = this._displayMoreInfo.bind(this);
+    this._viewBuildDetails = this._viewBuildDetails.bind(this);
   }
 
   componentDidMount() {
@@ -60,6 +63,10 @@ export default class ProjectItem extends React.Component {
     }.bind(this));
   }
 
+  _viewBuildDetails() {
+
+  }
+
   _displayMoreInfo(mostRecentBuild) {
     let seconds = Math.floor(mostRecentBuild.build_time_millis / 1000);
     const minutes = Math.floor(seconds / 60);
@@ -68,9 +75,9 @@ export default class ProjectItem extends React.Component {
     const commit = mostRecentBuild.all_commit_details[0];
     return (
       <View style={styles.buildCell}>
-        <Text style={styles.details} >#{ mostRecentBuild.build_num }</Text>
-        <Text style={styles.details} >D: { buildTime }</Text>
-        <Text style={styles.details} >C: { commit.commit.substring(0, 6) }</Text>
+        <Text style={styles.details}>#{ mostRecentBuild.build_num }</Text>
+        <Text style={styles.details}>D: { buildTime }</Text>
+        <Text style={styles.details}>C: { commit.commit.substring(0, 6) }</Text>
       </View>
     );
   }
@@ -84,23 +91,28 @@ export default class ProjectItem extends React.Component {
       GlobalStyles.get('CIRCLE_TEST_FAIL') :
       GlobalStyles.get('CIRCLE_TEST_PASS');
     const username = this.props.userDetails && this.props.userDetails.login !== project.username ?
-      (<Text>U: {project.username}</Text>) : null;
+      (<Text style={styles.details}>U: {project.username}</Text>) : null;
 
     const language = project.language ?
-      (<Text>L: {project.language}</Text>) : null;
+      (<Text style={styles.details}>L: {project.language}</Text>) : null;
 
     const buildDetails = mostRecentBuild ? this._displayMoreInfo(mostRecentBuild) : null;
 
     return (
-      <View style={styles.container}>
-        <View style={styles.repoCell}>
-          <Text style={styles.repoName}>{project.reponame}</Text>
-          { username }
-          { language }
+      <TouchableHighlight
+        style={styles.button}
+        underlayColor={GlobalStyles.get('CIRCLE_BG')}
+        onPress={this._viewBuildDetails}>
+        <View style={styles.container}>
+          <View style={styles.repoCell}>
+            <Text style={styles.repoName}>{project.reponame}</Text>
+            { username }
+            { language }
+          </View>
+          { buildDetails }
+          <View style={[styles.colourPanel, {backgroundColor: statusColour}]} />
         </View>
-        { buildDetails }
-        <View style={[styles.colourPanel, {backgroundColor: statusColour}]} />
-      </View>
+      </TouchableHighlight>
     );
   }
 };