mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-02-23 23:27:26 +01:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #70 from marcosrdz/master

Browse source 
Header updates
This commit is contained in:
Igor Korsakov 2018-09-19 22:31:08 +01:00 • committed by GitHub
commit 489c6707bf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 112 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
BlueComponents.js
View file

@ -1,10 +1,9 @@
/** @type {AppStorage} */ /** @type {AppStorage} */
import React, { Component } from 'react'; import React, { Component } from 'react';
import { SafeAreaView } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
import { LinearGradient, Constants } from 'expo'; import { LinearGradient, Constants } from 'expo';
import { Icon, Button, FormLabel, FormInput, Card, Text, Header, List, ListItem } from 'react-native-elements'; 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 { WatchOnlyWallet, LegacyWallet } from './class';
import Carousel from 'react-native-snap-carousel'; import Carousel from 'react-native-snap-carousel';
import { HDLegacyP2PKHWallet } from './class/hd-legacy-p2pkh-wallet'; import { HDLegacyP2PKHWallet } from './class/hd-legacy-p2pkh-wallet';
@ -321,43 +320,45 @@ export class BlueHeader extends Component {
export class BlueHeaderDefaultSub extends Component { export class BlueHeaderDefaultSub extends Component {
render() { render() {
return ( return (
<Header <SafeAreaView style={{ backgroundColor: "#FFFFFF" }}>
{...this.props} <Header
backgroundColor="transparent" {...this.props}
outerContainerStyles={{ backgroundColor="#FFFFFF"
borderBottomColor: 'transparent', outerContainerStyles={{
borderBottomWidth: 0, borderBottomColor: 'transparent',
}} borderBottomWidth: 0,
statusBarProps={{ barStyle: 'default' }} }}
leftComponent={ statusBarProps={{ barStyle: 'default' }}
<Text leftComponent={
style={{ <Text
fontWeight: 'bold', style={{
fontSize: 34, fontWeight: 'bold',
color: BlueApp.settings.foregroundColor, fontSize: 34,
}} color: BlueApp.settings.foregroundColor,
> }}
{ >
// eslint-disable-next-line {
this.props.leftText // eslint-disable-next-line
} this.props.leftText
</Text> }
} </Text>
rightComponent={ }
<TouchableOpacity rightComponent={
onPress={() => { <TouchableOpacity
// eslint-disable-next-line onPress={() => {
if (this.props.onClose) this.props.onClose(); // eslint-disable-next-line
}} if (this.props.onClose) this.props.onClose();
> }}
<View style={stylesBlueIcon.box}> >
<View style={stylesBlueIcon.ballTransparrent}> <View style={stylesBlueIcon.box}>
<Icon name="times" size={16} type="font-awesome" color={BlueApp.settings.foregroundColor} /> <View style={stylesBlueIcon.ballTransparrent}>
<Icon name="times" size={16} type="font-awesome" color={BlueApp.settings.foregroundColor} />
</View>
</View> </View>
</View> </TouchableOpacity>
</TouchableOpacity> }
} />
/> </SafeAreaView>
); );
} }
} }
@ -365,29 +366,8 @@ export class BlueHeaderDefaultSub extends Component {
export class BlueHeaderDefaultMain extends Component { export class BlueHeaderDefaultMain extends Component {
render() { render() {
return ( return (
<Header <SafeAreaView style={{ backgroundColor: "#FFFFFF" }}>
{...this.props} <View style={{ height: 120 }}>
backgroundColor="transparent"
outerContainerStyles={{
borderBottomColor: 'transparent',
borderBottomWidth: 0,
}}
statusBarProps={{ barStyle: 'default' }}
leftComponent={
<Text
style={{
fontWeight: 'bold',
fontSize: 34,
color: BlueApp.settings.foregroundColor,
}}
>
{
// eslint-disable-next-line
this.props.leftText
}
</Text>
}
rightComponent={
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
// eslint-disable-next-line // eslint-disable-next-line
@ -400,8 +380,42 @@ export class BlueHeaderDefaultMain extends Component {
</View> </View>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
} <Header
/> {...this.props}
backgroundColor="#FFFFFF"
outerContainerStyles={{
borderBottomColor: 'transparent',
borderBottomWidth: 0,
}}
statusBarProps={{ barStyle: 'default' }}
leftComponent={
<Text
style={{
fontWeight: 'bold',
fontSize: 34,
color: BlueApp.settings.foregroundColor,
}}
>
{
// eslint-disable-next-line
this.props.leftText
}
</Text>
}
rightComponent={
<TouchableOpacity
onPress={this.props.onNewWalletPress}
style={{
height: 48,
alignSelf: 'flex-end',
}}
>
<BluePlusIcon />
</TouchableOpacity>
}
/>
</View>
</SafeAreaView>
); );
} }
} }
@ -486,7 +500,9 @@ const stylesBlueIcon = StyleSheet.create({
top: 15, top: 15,
}, },
box: { box: {
position: 'relative', alignSelf: 'flex-end',
paddingHorizontal: 14,
paddingTop: 8,
}, },
boxIncomming: { boxIncomming: {
position: 'relative', position: 'relative',

4
MainBottomTabs.js
View file

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

1
screen/receive.js
View file

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

7
screen/receive/details.js
View file

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

8
screen/receive/list.js
View file

@ -1,5 +1,5 @@
import React, { Component } from 'react'; 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 Ionicons from 'react-native-vector-icons/Ionicons';
import { BlueLoading, SafeBlueArea, BlueCard, BlueListItem, BlueHeader } from '../../BlueComponents'; import { BlueLoading, SafeBlueArea, BlueCard, BlueListItem, BlueHeader } from '../../BlueComponents';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -9,12 +9,6 @@ let EV = require('../../events');
let loc = require('../../loc'); let loc = require('../../loc');
export default class ReceiveList extends Component { 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) { constructor(props) {
super(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}$/; const btcAddressRx = /^[a-zA-Z0-9]{26,35}$/;
export default class SendDetails extends Component { export default class SendDetails extends Component {
static navigationOptions = {
tabBarVisible: false,
};
constructor(props) { constructor(props) {
super(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 { export default class CameraExample extends React.Component {
static navigationOptions = { static navigationOptions = {
tabBarVisible: false, header: null,
}; };
state = { state = {

1
screen/wallets.js
View file

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

6
screen/wallets/add.js
View file

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

7
screen/wallets/details.js
View file

@ -19,7 +19,9 @@ let loc = require('../../loc');
export default class WalletDetails extends Component { export default class WalletDetails extends Component {
static navigationOptions = { static navigationOptions = {
tabBarVisible: false, header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.wallets.details.title} onClose={() => navigation.goBack(null)} />;
},
}; };
constructor(props) { constructor(props) {
@ -78,9 +80,6 @@ export default class WalletDetails extends Component {
return ( return (
<SafeBlueArea style={{ flex: 1 }}> <SafeBlueArea style={{ flex: 1 }}>
<BlueSpacingVariable /> <BlueSpacingVariable />
<BlueHeaderDefaultSub leftText={loc.wallets.details.title} onClose={() => this.props.navigation.goBack()} />
<BlueCard style={{ alignItems: 'center', flex: 1 }}> <BlueCard style={{ alignItems: 'center', flex: 1 }}>
{(() => { {(() => {
if (this.state.wallet.getAddress()) { 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 { export default class WalletExport extends Component {
static navigationOptions = { static navigationOptions = {
tabBarVisible: false, header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.wallets.export.title} onClose={() => navigation.goBack(null)} />;
},
}; };
constructor(props) { constructor(props) {
@ -74,8 +77,6 @@ export default class WalletExport extends Component {
return <BlueSpacing />; return <BlueSpacing />;
} }
})()} })()}
<BlueHeaderDefaultSub leftText={loc.wallets.export.title} onClose={() => this.props.navigation.goBack()} />
<BlueCard style={{ alignItems: 'center', flex: 1 }}> <BlueCard style={{ alignItems: 'center', flex: 1 }}>
{(() => { {(() => {
if (this.state.wallet.getAddress()) { 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 { export default class WalletsImport extends Component {
static navigationOptions = { static navigationOptions = {
tabBarVisible: false, header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.wallets.import.title} onClose={() => navigation.goBack(null)} />;
},
}; };
constructor(props) { constructor(props) {
@ -209,8 +211,6 @@ export default class WalletsImport extends Component {
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1, paddingTop: 40 }}> <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1, paddingTop: 40 }}>
<KeyboardAvoidingView behavior="position" enabled> <KeyboardAvoidingView behavior="position" enabled>
<BlueSpacingVariable /> <BlueSpacingVariable />
<BlueHeaderDefaultSub leftText={loc.wallets.import.title} onClose={() => this.props.navigation.goBack()} />
<BlueFormLabel>{loc.wallets.import.explanation}</BlueFormLabel> <BlueFormLabel>{loc.wallets.import.explanation}</BlueFormLabel>
<BlueFormMultiInput <BlueFormMultiInput
value={this.state.label} value={this.state.label}

15
screen/wallets/list.js
View file

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

2
screen/wallets/scanQrWif.js
View file

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