ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-29 00:21:41 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #74 from esteemapp/pin-code-design

Browse Source 
Pin code design
This commit is contained in:
Feruz M 2018-10-28 17:52:08 +02:00 committed by GitHub
commit a307b6980a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 106 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/buttons/views/circularButtonStyles.js
View File

@ -1,18 +1,19 @@
import EStyleSheet from "react-native-extended-stylesheet";
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
button: {
width: 60,
height: 60,
borderRadius: 60 / 2,
borderColor: "#357ce6",
width: '$deviceWidth / 7',
height: '$deviceWidth / 7',
borderRadius: '$deviceWidth / 14',
borderColor: '#357ce6',
borderWidth: 1,
backgroundColor: "transparent",
alignItems: "center",
justifyContent: "center",
backgroundColor: 'transparent',
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
color: "#357ce6",
fontSize: 16,
color: '#357ce6',
fontSize: 24,
fontWeight: '500',
},
});

19
src/components/buttons/views/iconButtomView.js
View File

@ -1,9 +1,9 @@
import React, { Component } from "react";
import { TouchableOpacity, Platform } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
import React, { Component } from 'react';
import { TouchableOpacity, Platform } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
// Styles
import styles from "./iconButtonStyles";
import styles from './iconButtonStyles';
/*
* Props Name Description Value
@ -37,7 +37,7 @@ class IconButtonView extends Component {
const { name, androidName } = this.props;
if (name) {
const isIos = Platform.OS === "ios";
const isIos = Platform.OS === 'ios';
let iconName;
if (isIos) {
@ -52,20 +52,15 @@ class IconButtonView extends Component {
render() {
const {
buttonStyle,
size,
style,
isCircle,
color,
buttonColor,
buttonStyle, size, style, isCircle, color, buttonColor,
} = this.props;
return (
<TouchableOpacity
style={[
buttonStyle,
isCircle && styles.circleButton,
buttonColor && { backgroundColor: buttonColor },
buttonStyle,
]}
onPress={() => this._handleOnPress()}
>

34
src/components/numericKeyboard/views/numericKeyboardStyles.js
View File

@ -1,28 +1,34 @@
import EStyleSheet from "react-native-extended-stylesheet";
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between",
width: "$deviceWidth / 1.8",
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-between',
width: '$deviceWidth / 1.8',
},
buttonGroup: {
width: "100%",
width: '100%',
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
flexDirection: 'row',
justifyContent: 'space-between',
},
lastButtonGroup: {
width: "63%",
width: '63%',
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignSelf: "flex-end",
flexDirection: 'row',
justifyContent: 'space-between',
alignSelf: 'flex-end',
},
iconButton: {
fontSize: 20,
color: "$primaryBlue",
fontSize: 25,
color: '$primaryBlue',
},
buttonWithoutBorder: {
borderWidth: 0,
},
button: {
borderColor: 'rgba(53, 124, 230, 0.2)',
},
});

4
src/components/numericKeyboard/views/numericKeyboardView.js
View File

@ -94,12 +94,12 @@ class NumericKeyboard extends Component {
value={0}
onPress={value => onPress && onPress(value)}
/>
<IconButton
handleOnPress={() => onPress && onPress('clear')}
isCircle
buttonStyle={styles.buttonWithoutBorder}
style={styles.iconButton}
name="close"
name="arrow-round-back"
/>
</View>
</View>

28
src/components/pinAnimatedInput/views/pinAnimatedInputStyles.js
View File

@ -1,22 +1,28 @@
import EStyleSheet from "react-native-extended-stylesheet";
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
container: {
flexDirection: "row",
alignSelf: "center",
flexDirection: 'row',
alignSelf: 'center',
},
activeInput: {
backgroundColor: "$primaryBlue",
backgroundColor: '$primaryBlue',
height: 10,
width: 10,
borderRadius: 20 / 2,
},
inputWithBackground: {
backgroundColor: '$primaryBlue',
},
input: {
alignItems: "center",
justifyContent: "center",
height: 20,
margin: 5,
width: 20,
alignItems: 'center',
justifyContent: 'center',
height: 18,
margin: 10,
width: 18,
borderRadius: 20 / 2,
borderWidth: 1,
borderColor: "$primaryBlue",
backgroundColor: "#fff",
borderColor: '$primaryBlue',
backgroundColor: '$white',
},
});

33
src/components/pinAnimatedInput/views/pinAnimatedInputView.js
View File

@ -1,14 +1,14 @@
import React, { Component } from "react";
import { Animated } from "react-native";
import React, { Component } from 'react';
import { Animated } from 'react-native';
// Styles
import styles from "./pinAnimatedInputStyles";
import styles from './pinAnimatedInputStyles';
class PinAnimatedInput extends Component {
/* Props
*
* @prop { string } pin - Description.
*
*
*/
constructor(props) {
super(props);
@ -32,21 +32,26 @@ class PinAnimatedInput extends Component {
]}
>
{[...Array(4)].map((val, index) => {
if (pin.length > index) {
if (pin.length - 1 === index) {
return (
<Animated.View
key={"passwordItem-" + index}
style={[styles.input, styles.activeInput]}
/>
<Animated.View key={`passwordItem-${index}`} style={styles.input}>
<Animated.View
key={`passwordItem-${index}`}
style={[styles.input, styles.activeInput]}
/>
</Animated.View>
);
} else {
} if (pin.length > index) {
return (
<Animated.View
key={"passwordItem-" + index}
style={styles.input}
/>
<Animated.View key={`passwordItem-${index}`} style={styles.input}>
<Animated.View
key={`passwordItem-${index}`}
style={[styles.input, styles.inputWithBackground]}
/>
</Animated.View>
);
}
return <Animated.View key={`passwordItem-${index}`} style={styles.input} />;
})}
</Animated.View>
);

2
src/components/sideMenu/view/sideMenuStyles.js
View File

@ -59,7 +59,7 @@ export default EStyleSheet.create({
},
buttonText: {
fontSize: 18,
fontFamily: '$primaryFontFamily',
fontFamily: '$primaryFont',
textAlign: 'center',
margin: 10,
color: '$white',

2
src/screens/pinCode/screen/pinCodeScreen.js
View File

@ -52,7 +52,7 @@ class PinCodeScreen extends Component {
return (
<Container style={styles.container}>
<View style={styles.logoView}>
<Logo />
<Logo style={styles.logo} />
</View>
<View style={styles.titleView}>
<Text style={styles.title}>{`@${username}`}</Text>

33
src/screens/pinCode/screen/pinCodeStyles.js
View File

@ -1,47 +1,50 @@
import EStyleSheet from "react-native-extended-stylesheet";
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
container: {
flex: 1,
paddingTop: "$deviceHeight / 15",
paddingTop: '$deviceHeight / 15',
},
logoView: {
flex: 2,
},
logo: {
width: '$deviceWidth / 7',
},
titleView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
justifyContent: 'center',
alignItems: 'center',
},
title: {
color: "#357ce6",
color: '#357ce6',
fontSize: 20,
fontWeight: "bold",
fontWeight: 'bold',
},
informationView: {
flex: 1,
alignItems: "center",
alignItems: 'center',
},
animatedView: {
flex: 1,
alignItems: "center",
alignItems: 'center',
},
numericKeyboardView: {
flex: 6,
justifyContent: "center",
alignItems: "center",
alignSelf: "center",
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
},
forgotButtonView: {
flex: 2,
justifyContent: "center",
alignItems: "center",
justifyContent: 'center',
alignItems: 'center',
},
forgotButtonText: {
color: "#788187",
color: '$primaryDarkGray',
fontSize: 14,
marginTop: 25,
alignSelf: "center",
alignSelf: 'center',
marginBottom: 25,
},
});

3
src/screens/splash/container/splashContainer.js
View File

@ -18,7 +18,8 @@ class SplashContainer extends Component {
getAuthStatus().then((res) => {
getUserData().then((response) => {
if (response) {
navigation.navigate(ROUTES.DRAWER.MAIN);
navigation.navigate(ROUTES.SCREENS.PINCODE);
// navigation.navigate(ROUTES.DRAWER.MAIN);
} else {
navigation.navigate(ROUTES.SCREENS.LOGIN);
}

15
src/styles/logo.styles.js
View File

@ -1,14 +1,15 @@
import EStyleSheet from "react-native-extended-stylesheet";
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
alignItems: 'center',
justifyContent: 'center',
},
logo: {
width: "100%",
height: "100%",
backgroundColor: "transparent"
}
alignSelf: 'center',
width: '100%',
height: '100%',
backgroundColor: 'transparent',
},
});