layout main details in row

This commit is contained in:
Jake Howard 2016-03-11 11:10:00 +00:00
parent 7e2920b694
commit 8528f19beb

View file

@ -46,6 +46,13 @@ const styles = StyleSheet.create({
fontSize: 12.5, fontSize: 12.5,
fontWeight: '300', fontWeight: '300',
marginLeft: 3 marginLeft: 3
},
detailsRow: {
flex: 1,
flexDirection: 'row'
},
mainDetails: {
marginRight: 10
} }
}); });
@ -76,7 +83,7 @@ export default class ProjectItem extends React.Component {
return ( return (
<View style={styles.buildCell}> <View style={styles.buildCell}>
<Text style={styles.details}><Icon name="pulse" /> #{ mostRecentBuild.build_num }</Text> <Text style={styles.details}><Icon name="pulse" /> #{ mostRecentBuild.build_num }</Text>
<Text style={styles.details}><Icon name="history" /> { buildTime }</Text> <Text style={styles.details}><Icon name="clock" /> { buildTime }</Text>
<Text style={styles.details}><Icon name="git-commit" /> { commit.commit.substring(0, 6) }</Text> <Text style={styles.details}><Icon name="git-commit" /> { commit.commit.substring(0, 6) }</Text>
</View> </View>
); );
@ -91,10 +98,10 @@ 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 style={styles.details}><Icon name="person" /> {project.username}</Text>) : null; (<Text style={[styles.details, styles.mainDetails]}><Icon name="person" /> {project.username}</Text>) : null;
const language = project.language ? const language = project.language ?
(<Text style={styles.details}><Icon name="keyboard" /> {project.language}</Text>) : null; (<Text style={[styles.details, styles.mainDetails]}><Icon name="keyboard" /> {project.language}</Text>) : null;
const buildDetails = mostRecentBuild ? this._displayMoreInfo(mostRecentBuild) : null; const buildDetails = mostRecentBuild ? this._displayMoreInfo(mostRecentBuild) : null;
@ -106,9 +113,11 @@ export default class ProjectItem extends React.Component {
<View style={styles.container}> <View style={styles.container}>
<View style={styles.repoCell}> <View style={styles.repoCell}>
<Text style={styles.repoName}>{project.reponame}</Text> <Text style={styles.repoName}>{project.reponame}</Text>
<View style={styles.detailsRow}>
{ username } { username }
{ language } { language }
</View> </View>
</View>
{ buildDetails } { buildDetails }
<View style={[styles.colourPanel, {backgroundColor: statusColour}]} /> <View style={[styles.colourPanel, {backgroundColor: statusColour}]} />
</View> </View>