Browse Source

Updated navigation headers to better match design

localNotifications
Marcos Rodriguez Vélez 6 years ago
parent
commit
505e1891d4
  1. 18
      BlueComponents.js
  2. 44
      MainBottomTabs.js
  3. 2
      loc/en.js
  4. 2
      loc/es.js
  5. 12
      screen/receive/details.js
  6. 14
      screen/send/confirm.js
  7. 8
      screen/send/create.js
  8. 11
      screen/send/details.js
  9. 10
      screen/send/success.js
  10. 14
      screen/settings/about.js
  11. 15
      screen/settings/encryptStorage.js
  12. 15
      screen/settings/language.js
  13. 24
      screen/settings/settings.js
  14. 10
      screen/transactions/details.js
  15. 13
      screen/wallets/add.js
  16. 12
      screen/wallets/details.js

18
BlueComponents.js

@ -146,6 +146,24 @@ export class BlueButtonLink extends Component {
}
}
export const BlueNavigationStyle = (navigation, withNavigationCloseButton = false) => ({
headerStyle: {
backgroundColor: '#FFFFFF',
borderBottomWidth: 0,
},
headerTitleStyle: {
fontWeight: '600',
color: '#0c2550',
},
headerTintColor: '#0c2550',
headerRight: withNavigationCloseButton ? (
<TouchableOpacity style={{ marginHorizontal: 16 }} onPress={() => navigation.goBack(null)}>
<Icon name="times" size={24} type="font-awesome" color="#0c2550" />
</TouchableOpacity>
) : null,
headerBackTitle: null,
});
export const BlueCopyToClipboardButton = ({ stringToCopy }) => {
return (
<TouchableOpacity {...this.props} onPress={() => Clipboard.setString(stringToCopy)}>

44
MainBottomTabs.js

@ -33,6 +33,18 @@ const WalletsStackNavigator = createStackNavigator({
screen: WalletsList,
path: 'wallets',
},
WalletTransactions: {
screen: WalletTransactions,
},
TransactionDetails: {
screen: details,
},
RBF: {
screen: rbf,
},
CreateRBF: {
screen: createrbf,
},
Settings: {
screen: Settings,
path: 'Settings',
@ -58,15 +70,6 @@ const WalletsStackNavigator = createStackNavigator({
},
});
const SuccessTransactionStackNavigation = createStackNavigator(
{
Success: {
screen: Success,
},
},
{ mode: 'modal', headerMode: 'none' },
);
const CreateTransactionStackNavigator = createStackNavigator({
SendDetails: {
screen: sendDetails,
@ -84,6 +87,9 @@ const CreateTransactionStackNavigator = createStackNavigator({
headerTintColor: '#0c2550',
},
},
Success: {
screen: Success,
},
});
const MainBottomTabs = createStackNavigator(
@ -95,9 +101,6 @@ const MainBottomTabs = createStackNavigator(
header: null,
},
},
WalletTransactions: {
screen: WalletTransactions,
},
AddWallet: {
screen: AddWallet,
},
@ -124,23 +127,6 @@ const MainBottomTabs = createStackNavigator(
},
},
TransactionDetails: {
screen: details,
},
Success: {
screen: SuccessTransactionStackNavigation,
navigationOptions: {
header: null,
gesturesEnabled: false,
},
},
RBF: {
screen: rbf,
},
CreateRBF: {
screen: createrbf,
},
//
ReceiveDetails: {

2
loc/en.js

@ -91,7 +91,7 @@ module.exports = {
conf: 'conf',
},
details: {
title: 'Transaction details',
title: 'Transaction',
from: 'Input',
to: 'Output',
copy: 'Copy',

2
loc/es.js

@ -91,7 +91,7 @@ module.exports = {
conf: 'conf',
},
details: {
title: 'Detalles de Transaccion',
title: 'Transaccion',
from: 'De',
to: 'A',
copy: 'Copiar',

12
screen/receive/details.js

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { Animated, StyleSheet, View, TouchableOpacity, Clipboard, Share } from 'react-native';
import QRCode from 'react-native-qrcode';
import { BlueLoading, SafeBlueArea, BlueButton, BlueHeaderDefaultSub, is } from '../../BlueComponents';
import { BlueLoading, SafeBlueArea, BlueButton, BlueNavigationStyle, is } from '../../BlueComponents';
import PropTypes from 'prop-types';
/** @type {AppStorage} */
let BlueApp = require('../../BlueApp');
@ -9,11 +9,11 @@ let loc = require('../../loc');
// let EV = require('../../events');
export default class ReceiveDetails extends Component {
static navigationOptions = {
header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.receive.header.toLowerCase()} onClose={() => navigation.goBack(null)} />;
},
};
static navigationOptions = ({ navigation }) => ({
...BlueNavigationStyle(navigation, true),
title: loc.receive.header,
headerLeft: null,
});
constructor(props) {
super(props);

14
screen/send/confirm.js

@ -2,20 +2,17 @@
import React, { Component } from 'react';
import { ActivityIndicator, TouchableOpacity, StyleSheet, View } from 'react-native';
import { Text } from 'react-native-elements';
import { BlueButton, SafeBlueArea, BlueCard, BlueSpacing40, BlueHeaderDefaultSub } from '../../BlueComponents';
import { BlueButton, SafeBlueArea, BlueCard, BlueSpacing40, BlueNavigationStyle } from '../../BlueComponents';
import { BitcoinUnit } from '../../models/bitcoinUnits';
import PropTypes from 'prop-types';
let loc = require('../../loc');
let EV = require('../../events');
export default class Confirm extends Component {
static navigationOptions = {
headerStyle: {
backgroundColor: '#FFFFFF',
borderBottomWidth: 0,
},
headerTintColor: '#0c2550',
};
static navigationOptions = () => ({
...BlueNavigationStyle(null, false),
title: loc.send.confirm.header,
});
constructor(props) {
super(props);
@ -64,7 +61,6 @@ export default class Confirm extends Component {
render() {
return (
<SafeBlueArea style={{ flex: 1, paddingTop: 19 }}>
<BlueHeaderDefaultSub leftText={loc.send.confirm.header.toLowerCase()} rightComponent={null} />
<BlueCard style={{ alignItems: 'center', flex: 1 }}>
<View style={{ flexDirection: 'row', justifyContent: 'center', paddingTop: 16, paddingBottom: 16 }}>
<Text

8
screen/send/create.js

@ -1,11 +1,16 @@
import React, { Component } from 'react';
import { TextInput, TouchableOpacity, Clipboard, StyleSheet, ScrollView } from 'react-native';
import { Text } from 'react-native-elements';
import { BlueHeaderDefaultSub, SafeBlueArea, BlueCard, BlueText } from '../../BlueComponents';
import { BlueNavigationStyle, SafeBlueArea, BlueCard, BlueText } from '../../BlueComponents';
import PropTypes from 'prop-types';
let loc = require('../../loc');
export default class SendCreate extends Component {
static navigationOptions = () => ({
...BlueNavigationStyle,
title: loc.send.create.details,
});
constructor(props) {
super(props);
console.log('send/create constructor');
@ -30,7 +35,6 @@ export default class SendCreate extends Component {
render() {
return (
<SafeBlueArea style={{ flex: 1, paddingTop: 19 }}>
<BlueHeaderDefaultSub leftText={loc.send.create.details.toLowerCase()} rightComponent={null} />
<ScrollView>
<BlueCard style={{ alignItems: 'center', flex: 1 }}>
<BlueText style={{ color: '#0c2550', fontWeight: '500' }}>{loc.send.create.this_is_hex}</BlueText>

11
screen/send/details.js

@ -12,7 +12,7 @@ import {
Slider,
} from 'react-native';
import { Text, Icon } from 'react-native-elements';
import { BlueHeaderDefaultSub, BlueButton } from '../../BlueComponents';
import { BlueNavigationStyle, BlueButton } from '../../BlueComponents';
import PropTypes from 'prop-types';
import Modal from 'react-native-modal';
import NetworkTransactionFees, { NetworkTransactionFee } from '../../models/networkTransactionFees';
@ -30,11 +30,10 @@ let currency = require('../../currency');
const btcAddressRx = /^[a-zA-Z0-9]{26,35}$/;
export default class SendDetails extends Component {
static navigationOptions = {
header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.send.header.toLowerCase()} onClose={() => navigation.goBack(null)} />;
},
};
static navigationOptions = ({ navigation }) => ({
...BlueNavigationStyle(navigation, true),
title: loc.send.header,
});
constructor(props) {
super(props);

10
screen/send/success.js

@ -8,20 +8,22 @@ import PropTypes from 'prop-types';
let loc = require('../../loc');
export default class Success extends Component {
static navigationOptions = {
header: null,
};
constructor(props) {
super(props);
console.log('send/create constructor');
this.state = {
amount: props.navigation.getParam('amount'),
address: props.navigation.getParam('address'),
fee: props.navigation.getParam('fee'),
};
}
async componentDidMount() {
console.log('send/create - componentDidMount');
console.log('address = ', this.state.address);
Haptic.notification(Haptic.NotificationTypes.Success);
}
@ -82,7 +84,7 @@ export default class Success extends Component {
<BlueCard>
<BlueButton
onPress={() => {
this.props.navigation.getParam('dismissModal')();
this.props.navigation.dismiss();
}}
title={loc.send.success.done}
style={{ maxWidth: 263, paddingHorizontal: 56 }}
@ -98,11 +100,11 @@ Success.propTypes = {
goBack: PropTypes.function,
getParam: PropTypes.function,
navigate: PropTypes.function,
dismiss: PropTypes.function,
state: PropTypes.shape({
params: PropTypes.shape({
amount: PropTypes.string,
fee: PropTypes.number,
address: PropTypes.string,
}),
}),
}),

14
screen/settings/about.js

@ -9,7 +9,7 @@ import {
SafeBlueArea,
BlueCard,
BlueText,
BlueHeaderDefaultSub,
BlueNavigationStyle,
} from '../../BlueComponents';
import PropTypes from 'prop-types';
/** @type {AppStorage} */
@ -18,13 +18,10 @@ const { width, height } = Dimensions.get('window');
let loc = require('../../loc/');
export default class About extends Component {
static navigationOptions = {
headerStyle: {
backgroundColor: '#FFFFFF',
borderBottomWidth: 0,
},
headerTintColor: '#0c2550',
};
static navigationOptions = () => ({
...BlueNavigationStyle(),
title: loc.settings.about,
});
constructor(props) {
super(props);
@ -46,7 +43,6 @@ export default class About extends Component {
return (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
<BlueHeaderDefaultSub leftText={loc.settings.about} rightComponent={null} />
<ScrollView>
<BlueCard>
<BlueText h4>BlueWallet is free and opensource Bitcoin wallet. Licensed MIT.</BlueText>

15
screen/settings/encryptStorage.js

@ -2,7 +2,7 @@
import React, { Component } from 'react';
import { View } from 'react-native';
import { FormValidationMessage } from 'react-native-elements';
import { BlueLoading, BlueSpacing20, BlueButton, SafeBlueArea, BlueCard, BlueText, BlueHeaderDefaultSub } from '../../BlueComponents';
import { BlueLoading, BlueSpacing20, BlueButton, SafeBlueArea, BlueCard, BlueText, BlueNavigationStyle } from '../../BlueComponents';
import PropTypes from 'prop-types';
/** @type {AppStorage} */
let BlueApp = require('../../BlueApp');
@ -10,13 +10,10 @@ let prompt = require('../../prompt');
let loc = require('../../loc');
export default class EncryptStorage extends Component {
static navigationOptions = {
headerStyle: {
backgroundColor: '#FFFFFF',
borderBottomWidth: 0,
},
headerTintColor: '#0c2550',
};
static navigationOptions = () => ({
...BlueNavigationStyle(),
title: loc.settings.encrypt_storage,
});
constructor(props) {
super(props);
@ -40,8 +37,6 @@ export default class EncryptStorage extends Component {
return (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
<BlueHeaderDefaultSub leftText={loc.settings.encrypt_storage.toLowerCase()} rightComponent={null} />
<BlueCard>
{(() => {
if (this.state.storageIsEncrypted) {

15
screen/settings/language.js

@ -1,19 +1,16 @@
import React, { Component } from 'react';
import { Picker } from 'react-native';
import { BlueLoading, SafeBlueArea, BlueCard, BlueHeaderDefaultSub } from '../../BlueComponents';
import { BlueLoading, SafeBlueArea, BlueCard, BlueNavigationStyle } from '../../BlueComponents';
import PropTypes from 'prop-types';
/** @type {AppStorage} */
let BlueApp = require('../../BlueApp');
let loc = require('../../loc');
export default class Language extends Component {
static navigationOptions = {
headerStyle: {
backgroundColor: '#FFFFFF',
borderBottomWidth: 0,
},
headerTintColor: '#0c2550',
};
static navigationOptions = () => ({
...BlueNavigationStyle(),
title: loc.settings.language,
});
constructor(props) {
super(props);
@ -37,8 +34,6 @@ export default class Language extends Component {
return (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
<BlueHeaderDefaultSub leftText={loc.settings.language.toLowerCase()} rightComponent={null} />
<BlueCard>
<Picker
selectedValue={this.state.language}

24
screen/settings/settings.js

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import { BlueLoading, SafeBlueArea, BlueHeaderDefaultSub, BlueListItem } from '../../BlueComponents';
import { ScrollView, TouchableOpacity } from 'react-native';
import { BlueLoading, SafeBlueArea, BlueNavigationStyle, BlueHeaderDefaultSub, BlueListItem } from '../../BlueComponents';
import PropTypes from 'prop-types';
/** @type {AppStorage} */
let BlueApp = require('../../BlueApp');
@ -8,13 +8,7 @@ let loc = require('../../loc');
export default class Settings extends Component {
static navigationOptions = {
navigationOptions: {
headerStyle: {
backgroundColor: '#FFFFFF',
borderBottomWidth: 0,
},
headerTintColor: '#0c2550',
},
...BlueNavigationStyle,
};
constructor(props) {
@ -41,10 +35,16 @@ export default class Settings extends Component {
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
<BlueHeaderDefaultSub leftText={loc.settings.header} rightComponent={null} />
<ScrollView maxHeight={450}>
<BlueListItem title={loc.settings.encrypt_storage} onPress={() => this.props.navigation.navigate('EncryptStorage')} />
<TouchableOpacity onPress={() => this.props.navigation.navigate('EncryptStorage')}>
<BlueListItem title={loc.settings.encrypt_storage} />
</TouchableOpacity>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Language')}>
<BlueListItem title={loc.settings.language} />
</TouchableOpacity>
<BlueListItem title={loc.settings.currency} />
<BlueListItem title={loc.settings.language} onPress={() => this.props.navigation.navigate('Language')} />
<BlueListItem title={loc.settings.about} onPress={() => this.props.navigation.navigate('About')} />
<TouchableOpacity onPress={() => this.props.navigation.navigate('About')}>
<BlueListItem title={loc.settings.about} />
</TouchableOpacity>
</ScrollView>
</SafeBlueArea>
);

10
screen/transactions/details.js

@ -9,6 +9,7 @@ import {
BlueLoading,
BlueSpacing20,
BlueCopyToClipboardButton,
BlueNavigationStyle,
} from '../../BlueComponents';
import PropTypes from 'prop-types';
/** @type {AppStorage} */
@ -37,11 +38,9 @@ function formatTime(time) {
}
export default class TransactionsDetails extends Component {
static navigationOptions = {
header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.transactions.details.title.toLowerCase()} onClose={() => navigation.goBack(null)} />;
},
};
static navigationOptions = () => ({
...BlueNavigationStyle(),
});
constructor(props) {
super(props);
@ -84,6 +83,7 @@ export default class TransactionsDetails extends Component {
return (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
<BlueHeaderDefaultSub leftText={loc.transactions.details.title} rightComponent={null} />
<ScrollView style={{ flex: 1 }}>
<BlueCard>
{(() => {

13
screen/wallets/add.js

@ -12,10 +12,9 @@ import {
BlueButton,
SafeBlueArea,
BlueCard,
BlueHeaderDefaultSub,
BlueNavigationStyle,
} from '../../BlueComponents';
import { RadioGroup, RadioButton } from 'react-native-flexi-radio-button';
import PropTypes from 'prop-types';
import { HDSegwitP2SHWallet } from '../../class/hd-segwit-p2sh-wallet';
import { LightningCustodianWallet } from '../../class/lightning-custodian-wallet';
@ -28,11 +27,11 @@ let loc = require('../../loc');
const { width } = Dimensions.get('window');
export default class WalletsAdd extends Component {
static navigationOptions = {
header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.wallets.add.title} onClose={() => navigation.goBack(null)} />;
},
};
static navigationOptions = ({ navigation }) => ({
...BlueNavigationStyle(navigation, true),
title: loc.wallets.add.title,
headerLeft: null,
});
constructor(props) {
super(props);

12
screen/wallets/details.js

@ -9,7 +9,7 @@ import {
BlueFormLabel,
BlueFormInputAddress,
BlueSpacing20,
BlueHeaderDefaultSub,
BlueNavigationStyle,
} from '../../BlueComponents';
import PropTypes from 'prop-types';
let EV = require('../../events');
@ -18,11 +18,11 @@ let BlueApp = require('../../BlueApp');
let loc = require('../../loc');
export default class WalletDetails extends Component {
static navigationOptions = {
header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.wallets.details.title} onClose={() => navigation.goBack(null)} />;
},
};
static navigationOptions = ({ navigation }) => ({
...BlueNavigationStyle(navigation, true),
title: loc.wallets.details.title,
headerLeft: null,
});
constructor(props) {
super(props);

Loading…
Cancel
Save