mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-09-01 08:17:16 +02:00
no more RN
This commit is contained in:
Peter Cottle
parent
89ec0b86bf
commit
503376251e
6 changed files with 0 additions and 411 deletions
|
|
@ -1,27 +0,0 @@
|
|||
/**
|
||||
* 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;
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
var NavButton = require('../native_react_views/NavButton');
|
||||
var React = require('react-native');
|
||||
var Routes = require('../constants/Routes');
|
||||
|
||||
var {
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
var LevelSelectView = React.createClass({
|
||||
|
||||
propTypes: {
|
||||
navigator: React.PropTypes.object.isRequired,
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<ScrollView>
|
||||
<View style={styles.headerSpacer} />
|
||||
<View>
|
||||
<NavButton
|
||||
text="Go to top"
|
||||
onPress={() => {
|
||||
this.props.navigator.popToTop();
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
headerSpacer: {
|
||||
height: 40
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = LevelSelectView;
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
var assign = require('object-assign');
|
||||
var React = require('react-native');
|
||||
var Routes = require('../constants/Routes');
|
||||
var {
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} = 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 NUXView = React.createClass({
|
||||
|
||||
propTypes: {
|
||||
navigator: React.PropTypes.object.isRequired,
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<View style={styles.background}>
|
||||
<HeaderSpacer />
|
||||
<View style={styles.container}>
|
||||
<TerminalCardView>
|
||||
<View style={styles.textContainer}>
|
||||
<View style={styles.welcomeTextContainer}>
|
||||
<Text style={styles.welcomeText}>
|
||||
Welcome To...
|
||||
</Text>
|
||||
<Text style={styles.welcomeText}>
|
||||
Learn Git Branching!
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.introText}>
|
||||
Learn Git Branching is the most interactive
|
||||
and visual way to master Git.
|
||||
</Text>
|
||||
<Text style={styles.introText}>
|
||||
With over 30 tutorials and levels, everyone from
|
||||
absolute beginners to experienced Git wizards
|
||||
should find something challenging and new.
|
||||
</Text>
|
||||
</View>
|
||||
</TerminalCardView>
|
||||
<View style={styles.buttonContainer}>
|
||||
<NavButton
|
||||
text="Let's Get Started!"
|
||||
onPress={() => {
|
||||
this.props.navigator.push(
|
||||
Routes.getRouteForID(Routes.SEQUENCE_SELECT)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
textContainer: {
|
||||
padding: 8,
|
||||
},
|
||||
buttonContainer: {
|
||||
marginTop: 40,
|
||||
},
|
||||
background: {
|
||||
backgroundColor: AppStyles.blueBackground,
|
||||
flex: 1
|
||||
},
|
||||
container: {
|
||||
padding: 12,
|
||||
},
|
||||
welcomeTextContainer: {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
welcomeText: assign({}, AppStyles.terminalTextStyle, {
|
||||
fontSize: 24,
|
||||
marginBottom: 8
|
||||
}),
|
||||
introText: assign({}, AppStyles.terminalTextStyle, {
|
||||
marginTop: 8,
|
||||
flex: 1,
|
||||
marginBottom: 8
|
||||
}),
|
||||
});
|
||||
|
||||
module.exports = NUXView;
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
var React = require('react-native');
|
||||
var {
|
||||
PixelRatio,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableHighlight,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
// TODO -- style this!
|
||||
class NavButton extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<TouchableHighlight
|
||||
style={styles.button}
|
||||
underlayColor="#B5B5B5"
|
||||
onPress={this.props.onPress}>
|
||||
<Text style={styles.buttonText}>{this.props.text}</Text>
|
||||
</TouchableHighlight>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
button: {
|
||||
backgroundColor: 'white',
|
||||
padding: 15,
|
||||
borderBottomWidth: 1 / PixelRatio.get(),
|
||||
borderBottomColor: '#CDCDCD',
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = NavButton;
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
var assign = require('object-assign');
|
||||
var NavButton = require('../native_react_views/NavButton');
|
||||
var React = require('react-native');
|
||||
var Routes = require('../constants/Routes');
|
||||
var {
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableHighlight,
|
||||
View,
|
||||
} = 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 Levels = require('../../levels');
|
||||
|
||||
var intl = require('../intl');
|
||||
|
||||
var SequenceSelectView = React.createClass({
|
||||
|
||||
propTypes: {
|
||||
navigator: React.PropTypes.object.isRequired,
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<View style={styles.background}>
|
||||
<HeaderSpacer />
|
||||
<ScrollView style={styles.container}>
|
||||
<View style={styles.headerSpacer} />
|
||||
<TerminalCardView>
|
||||
<View style={styles.terminalContainer}>
|
||||
{Object.keys(Levels.levelSequences).map(
|
||||
sequenceID => this.renderSelector(sequenceID)
|
||||
)}
|
||||
</View>
|
||||
</TerminalCardView>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
renderSelector: function(sequenceID) {
|
||||
var info = Levels.sequenceInfo[sequenceID];
|
||||
var name = intl.getIntlKey(info, 'displayName');
|
||||
var about = intl.getIntlKey(info, 'about');
|
||||
|
||||
return (
|
||||
<TouchableHighlight
|
||||
onPress={() => {
|
||||
this.props.navigator.push(
|
||||
Routes.getRouteForID(Routes.LEVEL_SELECT)
|
||||
);
|
||||
}}
|
||||
underlayColor="#6E6E6E">
|
||||
<View>
|
||||
<View style={styles.textContainer}>
|
||||
<Text style={styles.sequenceName}>
|
||||
{name}
|
||||
</Text>
|
||||
<Text style={styles.sequenceAbout}>
|
||||
{about}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.divider} />
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
divider: {
|
||||
height: 1,
|
||||
marginBottom: 8,
|
||||
backgroundColor: '#FFF'
|
||||
},
|
||||
terminalContainer: {
|
||||
paddingTop: 8,
|
||||
paddingBottom: 8,
|
||||
},
|
||||
textContainer: {
|
||||
paddingLeft: 8,
|
||||
paddingRight: 8,
|
||||
},
|
||||
sequenceName: assign({}, AppStyles.terminalTextStyle, {
|
||||
fontSize: 20,
|
||||
}),
|
||||
sequenceAbout: assign({}, AppStyles.terminalTextStyle, {
|
||||
fontSize: 10,
|
||||
marginTop: 8,
|
||||
marginBottom: 8,
|
||||
}),
|
||||
container: {
|
||||
padding: 8,
|
||||
},
|
||||
headerSpacer: {
|
||||
height: 24,
|
||||
},
|
||||
background: {
|
||||
backgroundColor: AppStyles.blueBackground,
|
||||
flex: 1
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = SequenceSelectView;
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
var assign = require('object-assign');
|
||||
var React = require('react-native');
|
||||
var {
|
||||
PixelRatio,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
var AppStyles = require('../constants/AppStyles');
|
||||
|
||||
var TerminalCardView = React.createClass({
|
||||
propTypes: {
|
||||
text: React.PropTypes.string,
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<View style={styles.terminalWindow}>
|
||||
<View style={styles.terminalHeader}>
|
||||
<View style={styles.closeButton} />
|
||||
<View style={styles.minimizeButton} />
|
||||
<View style={styles.maximizeButton} />
|
||||
</View>
|
||||
<View style={styles.terminalTextContainer}>
|
||||
{this.renderInner()}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
renderInner: function() {
|
||||
return this.props.text ?
|
||||
<Text style={styles.terminalText}>
|
||||
{this.props.text}
|
||||
</Text> :
|
||||
this.props.children;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var BORDER_WIDTH = 1 / PixelRatio.get();
|
||||
var BORDER_RADIUS = 4;
|
||||
var BUTTON_SIZE = 12;
|
||||
var BUTTON_BORDER_RADIUS = BUTTON_SIZE - 2;
|
||||
var buttonStyle = {
|
||||
height: BUTTON_SIZE,
|
||||
width: BUTTON_SIZE,
|
||||
borderRadius: BUTTON_BORDER_RADIUS,
|
||||
};
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
terminalHeader: {
|
||||
height: 16,
|
||||
backgroundColor: AppStyles.terminalHeader,
|
||||
borderRadius: BORDER_RADIUS,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
paddingLeft: 4
|
||||
},
|
||||
|
||||
closeButton: assign({}, buttonStyle, {
|
||||
backgroundColor: '#fb625f',
|
||||
}),
|
||||
|
||||
minimizeButton: assign({}, buttonStyle, {
|
||||
backgroundColor: '#f9c57a',
|
||||
}),
|
||||
|
||||
maximizeButton: assign({}, buttonStyle, {
|
||||
backgroundColor: '#8ac872',
|
||||
}),
|
||||
|
||||
terminalWindow: {
|
||||
backgroundColor: AppStyles.terminalBackground,
|
||||
borderRadius: BORDER_RADIUS,
|
||||
shadowOpacity: 0.5,
|
||||
shadowRadius: 4,
|
||||
shadowOffset: {
|
||||
h: 2,
|
||||
w: 2,
|
||||
},
|
||||
},
|
||||
|
||||
terminalTextContainer: {
|
||||
borderWidth: 1 / PixelRatio.get(),
|
||||
borderColor: AppStyles.terminalBorder,
|
||||
borderRadius: BORDER_RADIUS
|
||||
},
|
||||
|
||||
terminalText: {
|
||||
color: AppStyles.terminalText,
|
||||
fontFamily: AppStyles.terminalFontFamily,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
module.exports = TerminalCardView;
|
||||
Loading…
Add table
Add a link
Reference in a new issue