archive/Sphere
Archived
1
Fork 0
Code Releases Packages Activity

Add latest build details to element

Browse source
This commit is contained in:
Jake Howard 2016-02-24 18:00:50 +00:00
parent d89584813b
commit e7b20542d0
1 changed files with 28 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,20 +15,28 @@ const styles = StyleSheet.create({
alignItems: 'stretch', alignItems: 'stretch',
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: 1, borderBottomWidth: 2,
marginBottom: 5, marginVertical: 2.5,
flexDirection: 'row' flexDirection: 'row',
}, },
cell: { repoCell: {
paddingHorizontal: 4, paddingHorizontal: 4,
paddingVertical: 2 paddingVertical: 3,
flex: 0.74
}, },
imageCell: { buildCell: {
width: 45, flex: 0.35
},
colourPanel: {
flex: 0.02
}, },
repoName: { repoName: {
fontSize: 14, fontSize: 15,
fontWeight: '500' fontWeight: '500'
},
details: {
fontSize: 13,
fontWeight: '300'
} }
}); });
@ -51,9 +59,14 @@ export default class ProjectItem extends React.Component {
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);
seconds = seconds - (minutes * 60); seconds = seconds - (minutes * 60);
const format = minutes + ':' + seconds; const buildTime = minutes + ':' + seconds;
const commit = mostRecentBuild.all_commit_details[0];
return ( return (
<Text>{ format }</Text> <View>
<Text style={styles.details} >T: { buildTime }</Text>
<Text style={styles.details} >B: { commit.branch }</Text>
<Text style={styles.details} >#{ mostRecentBuild.build_num }</Text>
</View>
); );
} }
@ -64,20 +77,19 @@ export default class ProjectItem extends React.Component {
const statusColour = mostRecentBuild.failed ? '#ED5C5C' : '#42C88A'; const statusColour = mostRecentBuild.failed ? '#ED5C5C' : '#42C88A';
let username; let username;
if (this.props.userDetails && this.props.userDetails.login !== project.username) { if (this.props.userDetails && this.props.userDetails.login !== project.username) {
username = project.username; username = project.username + '/';
} else {
username = 'me';
} }
const buildDetails = mostRecentBuild ? this._displayMoreInfo(mostRecentBuild) : null; const buildDetails = mostRecentBuild ? this._displayMoreInfo(mostRecentBuild) : null;
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={[styles.imageCell, {backgroundColor: statusColour}]}> <View style={styles.repoCell}>
<Text style={styles.repoName}>{username}{project.reponame}</Text>
</View> </View>
<View style={styles.cell}> <View style={styles.buildCell}>
<Text style={styles.repoName}>{username}/{project.reponame}</Text>
{ buildDetails } { buildDetails }
</View> </View>
<View style={[styles.colourPanel, {backgroundColor: statusColour}]} />
</View> </View>
); );
} }