mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-01-19 05:45:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updated Main screen header design. Moved all react-native-elements Header to be react-navigation's header prop instead of being inside render()

Browse Source
This commit is contained in:
Marcos Rodriguez Vélez 2018-09-18 21:59:16 -04:00
parent e5d6a1b033
commit 5a2f2020fc
No known key found for this signature in database
GPG Key ID: 2C5D5738B268636C
14 changed files with 112 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
BlueComponents.js
View File

@ -1,10 +1,9 @@
/** @type {AppStorage} */
import React, { Component } from 'react';
import { SafeAreaView } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { LinearGradient, Constants } from 'expo';
import { Icon, Button, FormLabel, FormInput, Card, Text, Header, List, ListItem } from 'react-native-elements';
import { TouchableOpacity, ActivityIndicator, View, StyleSheet, Dimensions, Image } from 'react-native';
import { TouchableOpacity, ActivityIndicator, View, StyleSheet, Dimensions, Image, SafeAreaView } from 'react-native';
import { WatchOnlyWallet, LegacyWallet } from './class';
import Carousel from 'react-native-snap-carousel';
import { HDLegacyP2PKHWallet } from './class/hd-legacy-p2pkh-wallet';
@ -321,9 +320,10 @@ export class BlueHeader extends Component {
export class BlueHeaderDefaultSub extends Component {
render() {
return (
<SafeAreaView style={{ backgroundColor: "#FFFFFF" }}>
<Header
{...this.props}
backgroundColor="transparent"
backgroundColor="#FFFFFF"
outerContainerStyles={{
borderBottomColor: 'transparent',
borderBottomWidth: 0,
@ -358,6 +358,7 @@ export class BlueHeaderDefaultSub extends Component {
</TouchableOpacity>
}
/>
</SafeAreaView>
);
}
}
@ -365,9 +366,23 @@ export class BlueHeaderDefaultSub extends Component {
export class BlueHeaderDefaultMain extends Component {
render() {
return (
<SafeAreaView style={{ backgroundColor: "#FFFFFF" }}>
<View style={{ height: 120 }}>
<TouchableOpacity
onPress={() => {
// eslint-disable-next-line
if (this.props.onClose) this.props.onClose();
}}
>
<View style={stylesBlueIcon.box}>
<View style={stylesBlueIcon.ballTransparrent}>
<Icon name="kebab-horizontal" size={22} type="octicon" color={BlueApp.settings.foregroundColor} />
</View>
</View>
</TouchableOpacity>
<Header
{...this.props}
backgroundColor="transparent"
backgroundColor="#FFFFFF"
outerContainerStyles={{
borderBottomColor: 'transparent',
borderBottomWidth: 0,
@ -389,19 +404,18 @@ export class BlueHeaderDefaultMain extends Component {
}
rightComponent={
<TouchableOpacity
onPress={() => {
// eslint-disable-next-line
if (this.props.onClose) this.props.onClose();
onPress={this.props.onNewWalletPress}
style={{
height: 48,
alignSelf: 'flex-end',
}}
>
<View style={stylesBlueIcon.box}>
<View style={stylesBlueIcon.ballTransparrent}>
<Icon name="kebab-horizontal" size={22} type="octicon" color={BlueApp.settings.foregroundColor} />
</View>
</View>
<BluePlusIcon />
</TouchableOpacity>
}
/>
</View>
</SafeAreaView>
);
}
}
@ -486,7 +500,9 @@ const stylesBlueIcon = StyleSheet.create({
top: 15,
},
box: {
position: 'relative',
alignSelf: 'flex-end',
paddingHorizontal: 14,
paddingTop: 8,
},
boxIncomming: {
position: 'relative',

4
MainBottomTabs.js
View File

@ -14,9 +14,6 @@ const Tabs = createStackNavigator(
Wallets: {
screen: wallets,
path: 'wallets',
navigationOptions: {
title: 'Wallets',
},
},
Transactions: {
screen: transactions,
@ -36,6 +33,7 @@ const Tabs = createStackNavigator(
},
},
{
mode: 'modal',
headerMode: 'none',
},
);

1
screen/receive.js
View File

@ -9,7 +9,6 @@ const ReceiveNavigator = createStackNavigator(
},
},
{
headerMode: 'none',
mode: 'modal',
},
);

7
screen/receive/details.js
View File

@ -18,8 +18,11 @@ let loc = require('../../loc');
const { width } = Dimensions.get('window');
export default class ReceiveDetails extends Component {
static navigationOptions = {
tabBarVisible: false,
header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.receive.list.header} onClose={() => navigation.goBack(null)} />;
},
};
constructor(props) {
@ -82,8 +85,6 @@ export default class ReceiveDetails extends Component {
return (
<SafeBlueArea style={{ flex: 1 }}>
<BlueSpacingVariable />
<BlueHeaderDefaultSub leftText={loc.receive.list.header} onClose={() => this.props.navigation.goBack()} />
<BlueCard
containerStyle={{
alignItems: 'center',

8
screen/receive/list.js
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { FlatList, Text, StyleSheet } from 'react-native';
import { FlatList, StyleSheet } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { BlueLoading, SafeBlueArea, BlueCard, BlueListItem, BlueHeader } from '../../BlueComponents';
import PropTypes from 'prop-types';
@ -9,12 +9,6 @@ let EV = require('../../events');
let loc = require('../../loc');
export default class ReceiveList extends Component {
static navigationOptions = {
tabBarLabel: loc.receive.list.tabBarLabel,
tabBarIcon: ({ tintColor, focused }) => (
<Ionicons name={focused ? 'ios-cash' : 'ios-cash-outline'} size={26} style={{ color: tintColor }} />
),
};
constructor(props) {
super(props);

3
screen/send/details.js
View File

@ -23,9 +23,6 @@ let loc = require('../../loc');
const btcAddressRx = /^[a-zA-Z0-9]{26,35}$/;
export default class SendDetails extends Component {
static navigationOptions = {
tabBarVisible: false,
};
constructor(props) {
super(props);

2
screen/send/scanQrAddress.js
View File

@ -7,7 +7,7 @@ let EV = require('../../events');
export default class CameraExample extends React.Component {
static navigationOptions = {
tabBarVisible: false,
header: null,
};
state = {

1
screen/wallets.js
View File

@ -81,7 +81,6 @@ const WalletsNavigator = createStackNavigator(
},
},
{
headerMode: 'none',
mode: 'modal',
},
);

6
screen/wallets/add.js
View File

@ -30,7 +30,9 @@ const { width } = Dimensions.get('window');
export default class WalletsAdd extends Component {
static navigationOptions = {
tabBarVisible: false,
header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.wallets.add.title} onClose={() => navigation.goBack(null)} />;
},
};
constructor(props) {
@ -73,8 +75,6 @@ export default class WalletsAdd extends Component {
return (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1, paddingTop: 40 }}>
<BlueSpacingVariable />
<BlueHeaderDefaultSub leftText={loc.wallets.add.title} onClose={() => this.props.navigation.goBack()} />
<BlueCard>
<BlueFormLabel>{loc.wallets.add.wallet_name}</BlueFormLabel>
<BlueFormInput

7
screen/wallets/details.js
View File

@ -19,7 +19,9 @@ let loc = require('../../loc');
export default class WalletDetails extends Component {
static navigationOptions = {
tabBarVisible: false,
header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.wallets.details.title} onClose={() => navigation.goBack(null)} />;
},
};
constructor(props) {
@ -78,9 +80,6 @@ export default class WalletDetails extends Component {
return (
<SafeBlueArea style={{ flex: 1 }}>
<BlueSpacingVariable />
<BlueHeaderDefaultSub leftText={loc.wallets.details.title} onClose={() => this.props.navigation.goBack()} />
<BlueCard style={{ alignItems: 'center', flex: 1 }}>
{(() => {
if (this.state.wallet.getAddress()) {

7
screen/wallets/export.js
View File

@ -16,8 +16,11 @@ if (aspectRatio > 1.6) {
}
export default class WalletExport extends Component {
static navigationOptions = {
tabBarVisible: false,
header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.wallets.export.title} onClose={() => navigation.goBack(null)} />;
},
};
constructor(props) {
@ -74,8 +77,6 @@ export default class WalletExport extends Component {
return <BlueSpacing />;
}
})()}
<BlueHeaderDefaultSub leftText={loc.wallets.export.title} onClose={() => this.props.navigation.goBack()} />
<BlueCard style={{ alignItems: 'center', flex: 1 }}>
{(() => {
if (this.state.wallet.getAddress()) {

6
screen/wallets/import.js
View File

@ -30,7 +30,9 @@ const { width } = Dimensions.get('window');
export default class WalletsImport extends Component {
static navigationOptions = {
tabBarVisible: false,
header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.wallets.import.title} onClose={() => navigation.goBack(null)} />;
},
};
constructor(props) {
@ -209,8 +211,6 @@ export default class WalletsImport extends Component {
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1, paddingTop: 40 }}>
<KeyboardAvoidingView behavior="position" enabled>
<BlueSpacingVariable />
<BlueHeaderDefaultSub leftText={loc.wallets.import.title} onClose={() => this.props.navigation.goBack()} />
<BlueFormLabel>{loc.wallets.import.explanation}</BlueFormLabel>
<BlueFormMultiInput
value={this.state.label}

15
screen/wallets/list.js
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { View, TouchableOpacity, Dimensions, Text, FlatList } from 'react-native';
import { View, TouchableOpacity, Dimensions, Text, FlatList, StyleSheet } from 'react-native';
import {
BlueText,
BlueTransactionOnchainIcon,
@ -31,8 +31,17 @@ let loc = require('../../loc');
const { width } = Dimensions.get('window');
export default class WalletsList extends Component {
static navigationOptions = {
tabBarVisible: false,
header: ({ navigation }) => {
return (
<BlueHeaderDefaultMain
leftText={loc.wallets.list.title}
onNewWalletPress={() => navigation.navigate('AddWallet')}
onClose={() => navigation.navigate('Settings')}
/>
);
},
};
constructor(props) {
@ -273,8 +282,6 @@ export default class WalletsList extends Component {
return (
<SafeBlueArea>
<BlueHeaderDefaultMain leftText={loc.wallets.list.title} onClose={() => navigate('Settings')} />
<WalletsCarousel
data={BlueApp.getWallets().concat(false)}
handleClick={index => {

2
screen/wallets/scanQrWif.js
View File

@ -15,7 +15,7 @@ let loc = require('../../loc');
export default class ScanQrWif extends React.Component {
static navigationOptions = {
tabBarVisible: false,
header: null,
};
state = {