Add info button
This commit is contained in:
parent
97528e62c7
commit
c274fbead0
2 changed files with 32 additions and 10 deletions
|
@ -2,7 +2,7 @@ import React from 'react-native';
|
||||||
import GlobalStyles from '../../settings/styles';
|
import GlobalStyles from '../../settings/styles';
|
||||||
import TokenHelp from '../login/token-help';
|
import TokenHelp from '../login/token-help';
|
||||||
|
|
||||||
var dismissKeyboard = require('dismissKeyboard');
|
const dismissKeyboard = require('dismissKeyboard');
|
||||||
|
|
||||||
const {
|
const {
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
|
@ -31,24 +31,31 @@ const styles = StyleSheet.create({
|
||||||
textAlign: 'center'
|
textAlign: 'center'
|
||||||
},
|
},
|
||||||
loginButton: {
|
loginButton: {
|
||||||
flex: 1,
|
flex: 0.9,
|
||||||
backgroundColor: GlobalStyles.get('CIRCLE_GREEN'),
|
backgroundColor: GlobalStyles.get('CIRCLE_GREEN'),
|
||||||
|
borderColor: GlobalStyles.get('CIRCLE_GREEN'),
|
||||||
|
},
|
||||||
|
infoButton: {
|
||||||
|
flex: 0.15,
|
||||||
|
backgroundColor: GlobalStyles.get('CIRCLE_GREY'),
|
||||||
|
borderColor: GlobalStyles.get('CIRCLE_GREY'),
|
||||||
|
},
|
||||||
|
button: {
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
padding: 10,
|
padding: 10,
|
||||||
borderColor: GlobalStyles.get('CIRCLE_GREEN'),
|
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
borderRadius: 12
|
borderRadius: 12,
|
||||||
|
margin: 5
|
||||||
},
|
},
|
||||||
loginButtonText: {
|
buttonText: {
|
||||||
fontSize: 18,
|
fontSize: 18,
|
||||||
color: 'white',
|
color: 'white',
|
||||||
},
|
},
|
||||||
buttonContainer: {
|
buttonContainer: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
padding: 10,
|
margin: 5
|
||||||
paddingVertical: 15
|
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
fontSize: 30,
|
fontSize: 30,
|
||||||
|
@ -80,6 +87,7 @@ export default class Login extends React.Component {
|
||||||
this.textChanged = this.textChanged.bind(this);
|
this.textChanged = this.textChanged.bind(this);
|
||||||
this.showTokenHelp = this.showTokenHelp.bind(this);
|
this.showTokenHelp = this.showTokenHelp.bind(this);
|
||||||
this.hideTokenHelp = this.hideTokenHelp.bind(this);
|
this.hideTokenHelp = this.hideTokenHelp.bind(this);
|
||||||
|
this.showAbout = this.showAbout.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
textChanged(token) {
|
textChanged(token) {
|
||||||
|
@ -90,6 +98,10 @@ export default class Login extends React.Component {
|
||||||
dismissKeyboard();
|
dismissKeyboard();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showAbout() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
showTokenHelp() {
|
showTokenHelp() {
|
||||||
dismissKeyboard();
|
dismissKeyboard();
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -142,13 +154,21 @@ export default class Login extends React.Component {
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
<View style={styles.buttonContainer}>
|
<View style={styles.buttonContainer}>
|
||||||
<TouchableHighlight
|
<TouchableHighlight
|
||||||
style={styles.loginButton}
|
style={[styles.button, styles.loginButton]}
|
||||||
onPress={this.validate}
|
onPress={this.validate}
|
||||||
underlayColor={GlobalStyles.get('CIRCLE_GREY_DARK')}>
|
underlayColor={GlobalStyles.get('CIRCLE_GREY_DARK')}>
|
||||||
<Text style={[styles.loginButtonText, styles.text]}>
|
<Text style={[styles.buttonText, styles.text]}>
|
||||||
Authenticate
|
Authenticate
|
||||||
</Text>
|
</Text>
|
||||||
</TouchableHighlight>
|
</TouchableHighlight>
|
||||||
|
<TouchableHighlight
|
||||||
|
style={[styles.button, styles.infoButton]}
|
||||||
|
onPress={this.showAbout}
|
||||||
|
underlayColor={GlobalStyles.get('CIRCLE_GREY_DARK')}>
|
||||||
|
<Text style={[styles.buttonText, styles.text]}>
|
||||||
|
About
|
||||||
|
</Text>
|
||||||
|
</TouchableHighlight>
|
||||||
</View>
|
</View>
|
||||||
<TokenHelp open={this.state.showTokenHelp} onClose={this.hideTokenHelp} />
|
<TokenHelp open={this.state.showTokenHelp} onClose={this.hideTokenHelp} />
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -2,5 +2,7 @@ import { Map } from 'immutable';
|
||||||
|
|
||||||
export default Map({
|
export default Map({
|
||||||
CIRCLE_GREEN: '#229922',
|
CIRCLE_GREEN: '#229922',
|
||||||
CIRCLE_GREY_DARK: '#343434'
|
CIRCLE_GREY_DARK: '#343434',
|
||||||
|
CIRCLE_GREY: '#666',
|
||||||
|
CIRCLE_GREY_LIGHT: '#A7A7A7'
|
||||||
});
|
});
|
||||||
|
|
Reference in a new issue