mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-06-28 00:40:07 +02:00
sequence select
This commit is contained in:
parent
ab8e742ce3
commit
9d4035de96
5 changed files with 61 additions and 34 deletions
|
@ -7,13 +7,7 @@
|
|||
var React = require('react-native');
|
||||
var {
|
||||
AppRegistry,
|
||||
Image,
|
||||
Navigator,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableHighlight,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
var Routes = require('../constants/Routes');
|
||||
|
@ -46,10 +40,4 @@ var LearnGitBranching = React.createClass({
|
|||
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
headerSpacer: {
|
||||
height: 40
|
||||
},
|
||||
});
|
||||
|
||||
AppRegistry.registerComponent('LearnGitBranching', () => LearnGitBranching);
|
||||
|
|
27
src/js/native_react_views/AppViews.js
Normal file
27
src/js/native_react_views/AppViews.js
Normal file
|
@ -0,0 +1,27 @@
|
|||
/**
|
||||
* Simple views for the app that dont really change.
|
||||
*/
|
||||
|
||||
var React = require('react-native');
|
||||
var Routes = require('../constants/Routes');
|
||||
var {
|
||||
StyleSheet,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
var HeaderSpacer = React.createClass({
|
||||
|
||||
render: function() {
|
||||
return <View style={styles.headerSpacer} />;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
headerSpacer: {
|
||||
height: 20,
|
||||
backgroundColor: '#FFF'
|
||||
},
|
||||
});
|
||||
|
||||
module.exports.HeaderSpacer = HeaderSpacer;
|
|
@ -9,6 +9,10 @@ var {
|
|||
} = React;
|
||||
|
||||
var AppStyles = require('../constants/AppStyles');
|
||||
var AppViews = require('../native_react_views/AppViews');
|
||||
var {
|
||||
HeaderSpacer,
|
||||
} = AppViews;
|
||||
var TerminalCardView = require('../native_react_views/TerminalCardView');
|
||||
var NavButton = require('../native_react_views/NavButton');
|
||||
|
||||
|
@ -21,7 +25,7 @@ var NUXView = React.createClass({
|
|||
render: function() {
|
||||
return (
|
||||
<View style={styles.background}>
|
||||
<View style={styles.headerSpacer} />
|
||||
<HeaderSpacer />
|
||||
<View style={styles.container}>
|
||||
<TerminalCardView>
|
||||
<View style={styles.welcomeTextContainer}>
|
||||
|
@ -47,7 +51,7 @@ var NUXView = React.createClass({
|
|||
text="Let's Get Started!"
|
||||
onPress={() => {
|
||||
this.props.navigator.push(
|
||||
Routes.getRouteForID(Routes.LEVEL_SELECT)
|
||||
Routes.getRouteForID(Routes.SEQUENCE_SELECT)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
@ -69,10 +73,6 @@ var styles = StyleSheet.create({
|
|||
container: {
|
||||
padding: 12,
|
||||
},
|
||||
headerSpacer: {
|
||||
height: 20,
|
||||
backgroundColor: '#FFF'
|
||||
},
|
||||
welcomeTextContainer: {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
|
|
|
@ -7,6 +7,7 @@ var {
|
|||
View,
|
||||
} = React;
|
||||
|
||||
// TODO -- style this!
|
||||
class NavButton extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
|
|
|
@ -9,6 +9,12 @@ var {
|
|||
} = React;
|
||||
|
||||
var AppStyles = require('../constants/AppStyles');
|
||||
var AppViews = require('../native_react_views/AppViews');
|
||||
var {
|
||||
HeaderSpacer,
|
||||
} = AppViews;
|
||||
var TerminalCardView = require('../native_react_views/TerminalCardView');
|
||||
var NavButton = require('../native_react_views/NavButton');
|
||||
|
||||
var SequenceSelectView = React.createClass({
|
||||
|
||||
|
@ -19,18 +25,21 @@ var SequenceSelectView = React.createClass({
|
|||
render: function() {
|
||||
return (
|
||||
<View style={styles.background}>
|
||||
<View style={styles.headerSpacer} />
|
||||
<ScrollView>
|
||||
<View>
|
||||
<NavButton
|
||||
text="Level 1"
|
||||
onPress={() => {
|
||||
this.props.navigator.push(
|
||||
Routes.getRouteForID(Routes.LEVEL_SELECT)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<HeaderSpacer />
|
||||
<ScrollView style={styles.container}>
|
||||
<View style={styles.headerSpacer} />
|
||||
<TerminalCardView>
|
||||
<View>
|
||||
<NavButton
|
||||
text="Level 1"
|
||||
onPress={() => {
|
||||
this.props.navigator.push(
|
||||
Routes.getRouteForID(Routes.LEVEL_SELECT)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</TerminalCardView>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
|
@ -39,14 +48,16 @@ var SequenceSelectView = React.createClass({
|
|||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
container: {
|
||||
padding: 8,
|
||||
},
|
||||
headerSpacer: {
|
||||
height: 24,
|
||||
},
|
||||
background: {
|
||||
backgroundColor: AppStyles.blueBackground,
|
||||
flex: 1
|
||||
},
|
||||
headerSpacer: {
|
||||
height: 20,
|
||||
backgroundColor: '#EFEDEE',
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = SequenceSelectView;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue