archive/Sphere
Archived
1
Fork 0
Code Releases Packages Activity

Add click event

Browse source
This commit is contained in:
Jake Howard 2016-02-24 22:23:44 +00:00
parent d41a604f4a
commit 38bffac811
1 changed files with 32 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
app/components/projects/ProjectItem.js
View file

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