lukechilds
/
BlueWallet
mirror of https://github.com/lukechilds/BlueWallet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

localNotifications
Marcos Rodriguez Vélez 6 years ago
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
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 144
      BlueComponents.js
  2. 4
      MainBottomTabs.js
  3. 1
      screen/receive.js
  4. 7
      screen/receive/details.js
  5. 8
      screen/receive/list.js
  6. 3
      screen/send/details.js
  7. 2
      screen/send/scanQrAddress.js
  8. 1
      screen/wallets.js
  9. 6
      screen/wallets/add.js
  10. 7
      screen/wallets/details.js
  11. 7
      screen/wallets/export.js
  12. 6
      screen/wallets/import.js
  13. 15
      screen/wallets/list.js
  14. 2
      screen/wallets/scanQrWif.js

144
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,43 +320,45 @@ export class BlueHeader extends Component {
export class BlueHeaderDefaultSub extends Component {
render() {
return (
<Header
{...this.props}
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
onPress={() => {
// eslint-disable-next-line
if (this.props.onClose) this.props.onClose();
}}
>
<View style={stylesBlueIcon.box}>
<View style={stylesBlueIcon.ballTransparrent}>
<Icon name="times" size={16} type="font-awesome" color={BlueApp.settings.foregroundColor} />
<SafeAreaView style={{ backgroundColor: "#FFFFFF" }}>
<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={() => {
// eslint-disable-next-line
if (this.props.onClose) this.props.onClose();
}}
>
<View style={stylesBlueIcon.box}>
<View style={stylesBlueIcon.ballTransparrent}>
<Icon name="times" size={16} type="font-awesome" color={BlueApp.settings.foregroundColor} />
</View>
</View>
</View>
</TouchableOpacity>
}
/>
</TouchableOpacity>
}
/>
</SafeAreaView>
);
}
}
@ -365,29 +366,8 @@ export class BlueHeaderDefaultSub extends Component {
export class BlueHeaderDefaultMain extends Component {
render() {
return (
<Header
{...this.props}
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={
<SafeAreaView style={{ backgroundColor: "#FFFFFF" }}>
<View style={{ height: 120 }}>
<TouchableOpacity
onPress={() => {
// eslint-disable-next-line
@ -400,8 +380,42 @@ export class BlueHeaderDefaultMain extends Component {
</View>
</View>
</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,
},
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 = {

Write Preview
Loading…
Cancel
Save