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

UI Adjustments (#77)

Browse source 
* UI Changes to better match the Overflow Design
This commit is contained in:
Marcos Rodriguez Vélez 2018-09-28 18:17:26 -04:00 • committed by Igor Korsakov
parent 7debdf912b
commit 761a0a1e86
5 changed files with 292 additions and 377 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
BlueComponents.js
View file

@ -190,11 +190,13 @@ export class BlueListItem extends Component {
render() { render() {
return ( return (
<ListItem <ListItem
bottomDivider
{...this.props} {...this.props}
containerStyle={{ containerStyle={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
borderBottomColor: 'transparent', borderBottomStartRadius: 20,
borderBottomWidth: 0, borderBottomEndRadius: 20,
borderBottomColor: '#ededed',
}} }}
titleStyle={{ titleStyle={{
color: BlueApp.settings.foregroundColor, color: BlueApp.settings.foregroundColor,
@ -202,6 +204,7 @@ export class BlueListItem extends Component {
fontWeight: '500', fontWeight: '500',
}} }}
subtitleStyle={{ color: '#9aa0aa' }} subtitleStyle={{ color: '#9aa0aa' }}
subtitleNumberOfLines={2}
/> />
); );
} }
@ -470,11 +473,6 @@ const stylesBlueIcon = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
}, },
containerRefresh: {
flex: 1,
position: 'absolute',
right: 10,
},
box1: { box1: {
position: 'relative', position: 'relative',
top: 15, top: 15,
@ -551,30 +549,6 @@ export class BluePlusIcon extends Component {
} }
} }
export class BlueRefreshIcon extends Component {
render() {
return (
<TouchableOpacity {...this.props} style={stylesBlueIcon.containerRefresh}>
<View style={stylesBlueIcon.box1}>
<View style={stylesBlueIcon.ballTransparrent}>
<Ionicons
{...this.props}
name={'ios-refresh'}
size={30}
style={{
color: BlueApp.settings.foregroundColor,
backgroundColor: 'transparent',
left: 8,
top: 2,
}}
/>
</View>
</View>
</TouchableOpacity>
);
}
}
export class BlueTransactionIncommingIcon extends Component { export class BlueTransactionIncommingIcon extends Component {
render() { render() {
return ( return (
@ -692,15 +666,7 @@ export class BlueTransactionOutgoingIcon extends Component {
export class BlueReceiveButtonIcon extends Component { export class BlueReceiveButtonIcon extends Component {
render() { render() {
return ( return (
<TouchableOpacity <TouchableOpacity {...this.props}>
{...this.props}
style={{
flex: 1,
position: 'absolute',
bottom: 30,
right: width / 2 + 5,
}}
>
<View> <View>
<View <View
style={{ style={{
@ -712,6 +678,7 @@ export class BlueReceiveButtonIcon extends Component {
backgroundColor: '#ccddf9', backgroundColor: '#ccddf9',
borderBottomLeftRadius: 15, borderBottomLeftRadius: 15,
borderTopLeftRadius: 15, borderTopLeftRadius: 15,
alignItems: 'center',
}} }}
> >
<View <View
@ -721,9 +688,10 @@ export class BlueReceiveButtonIcon extends Component {
borderBottomLeftRadius: 15, borderBottomLeftRadius: 15,
backgroundColor: 'transparent', backgroundColor: 'transparent',
transform: [{ rotate: '-45deg' }], transform: [{ rotate: '-45deg' }],
alignItems: 'center',
}} }}
> >
<Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#2f5fb3" iconStyle={{ left: 0, top: 15 }} /> <Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#2f5fb3" iconStyle={{ left: 5, top: 12 }} />
</View> </View>
<Text <Text
style={{ style={{
@ -731,12 +699,10 @@ export class BlueReceiveButtonIcon extends Component {
fontSize: (isIpad && 10) || 16, fontSize: (isIpad && 10) || 16,
fontWeight: '500', fontWeight: '500',
left: 5, left: 5,
top: 12,
backgroundColor: 'transparent', backgroundColor: 'transparent',
position: 'relative',
}} }}
> >
{loc.receive.list.header} {loc.receive.header}
</Text> </Text>
</View> </View>
</View> </View>
@ -748,15 +714,7 @@ export class BlueReceiveButtonIcon extends Component {
export class BlueSendButtonIcon extends Component { export class BlueSendButtonIcon extends Component {
render() { render() {
return ( return (
<TouchableOpacity <TouchableOpacity {...this.props}>
{...this.props}
style={{
flex: 1,
position: 'absolute',
bottom: 30,
left: width / 2 + 5,
}}
>
<View> <View>
<View <View
style={{ style={{
@ -768,6 +726,8 @@ export class BlueSendButtonIcon extends Component {
backgroundColor: '#ccddf9', backgroundColor: '#ccddf9',
borderBottomRightRadius: 15, borderBottomRightRadius: 15,
borderTopRightRadius: 15, borderTopRightRadius: 15,
alignItems: 'center',
paddingLeft: 15,
}} }}
> >
<View <View
@ -780,20 +740,17 @@ export class BlueSendButtonIcon extends Component {
transform: [{ rotate: '225deg' }], transform: [{ rotate: '225deg' }],
}} }}
> >
<Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#2f5fb3" iconStyle={{ left: 0, top: 0 }} /> <Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#2f5fb3" iconStyle={{ left: 2, top: 6 }} />
</View> </View>
<Text <Text
style={{ style={{
color: '#2f5fb3', color: '#2f5fb3',
fontSize: (isIpad && 10) || 16, fontSize: (isIpad && 10) || 16,
fontWeight: '500', fontWeight: '500',
left: 5,
top: 12,
backgroundColor: 'transparent', backgroundColor: 'transparent',
position: 'relative',
}} }}
> >
{loc.send.list.header} {loc.send.header}
</Text> </Text>
</View> </View>
</View> </View>
@ -898,7 +855,7 @@ export class NewWalletPannel extends Component {
return ( return (
<TouchableOpacity <TouchableOpacity
{...this.props} {...this.props}
style={{ paddingRight: 10, left: -20, paddingTop: 20 }} style={{ paddingRight: 10, left: -20, marginVertical: 6 }}
onPress={() => { onPress={() => {
if (this.handleClick) { if (this.handleClick) {
this.handleClick(); this.handleClick();
@ -910,7 +867,7 @@ export class NewWalletPannel extends Component {
style={{ style={{
padding: 15, padding: 15,
borderRadius: 10, borderRadius: 10,
height: 145, height: 164,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}} }}
@ -953,7 +910,7 @@ export class NewWalletPannel extends Component {
let sliderWidth = width * 1; let sliderWidth = width * 1;
let itemWidth = width * 0.82; let itemWidth = width * 0.82;
let sliderHeight = 175; let sliderHeight = 181;
export class WalletsCarousel extends Component { export class WalletsCarousel extends Component {
constructor(props) { constructor(props) {
@ -1013,14 +970,20 @@ export class WalletsCarousel extends Component {
return ( return (
<TouchableOpacity <TouchableOpacity
activeOpacity={1} activeOpacity={1}
style={{ paddingRight: 10, left: -20, paddingTop: 20 }} style={{ paddingRight: 10, left: -20, marginVertical: 6 }}
onPress={() => { onPress={() => {
if (WalletsCarousel.handleClick) { if (WalletsCarousel.handleClick) {
WalletsCarousel.handleClick(index); WalletsCarousel.handleClick(index);
} }
}} }}
> >
<LinearGradient colors={[gradient1, gradient2]} style={{ padding: 15, borderRadius: 10, height: 145 }}> <LinearGradient
shadowOpacity={0.4}
shadowOffset={{ width: 0, height: 0 }}
shadowRadius={4}
colors={[gradient1, gradient2]}
style={{ padding: 15, borderRadius: 10, height: 164 }}
>
<Image <Image
source={(new LightningCustodianWallet().type === item.type && require('./img/lnd-shape.png')) || require('./img/btc-shape.png')} source={(new LightningCustodianWallet().type === item.type && require('./img/lnd-shape.png')) || require('./img/btc-shape.png')}
style={{ style={{
@ -1034,6 +997,7 @@ export class WalletsCarousel extends Component {
<Text style={{ backgroundColor: 'transparent' }} /> <Text style={{ backgroundColor: 'transparent' }} />
<Text <Text
numberOfLines={1}
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
fontSize: 19, fontSize: 19,
@ -1043,6 +1007,7 @@ export class WalletsCarousel extends Component {
{item.getLabel()} {item.getLabel()}
</Text> </Text>
<Text <Text
numberOfLines={1}
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
fontWeight: 'bold', fontWeight: 'bold',
@ -1054,6 +1019,7 @@ export class WalletsCarousel extends Component {
</Text> </Text>
<Text style={{ backgroundColor: 'transparent' }} /> <Text style={{ backgroundColor: 'transparent' }} />
<Text <Text
numberOfLines={1}
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
fontSize: 13, fontSize: 13,
@ -1063,6 +1029,7 @@ export class WalletsCarousel extends Component {
{loc.wallets.list.latest_transaction} {loc.wallets.list.latest_transaction}
</Text> </Text>
<Text <Text
numberOfLines={1}
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
fontWeight: 'bold', fontWeight: 'bold',

12
loc/en.js
View file

@ -87,16 +87,13 @@ module.exports = {
conf: 'conf', conf: 'conf',
}, },
details: { details: {
title: 'transaction details', title: 'transaction',
from: 'Inputs', from: 'Inputs',
to: 'Outputs', to: 'Outputs',
}, },
}, },
send: { send: {
list: { header: 'Send',
tabBarLabel: 'Send',
header: 'send',
},
details: { details: {
title: 'create transaction', title: 'create transaction',
amount_fiels_is_not_valid: 'Amount field is not valid', amount_fiels_is_not_valid: 'Amount field is not valid',
@ -127,10 +124,7 @@ module.exports = {
}, },
}, },
receive: { receive: {
list: { header: 'Receive',
tabBarLabel: 'Receive',
header: 'receive',
},
details: { details: {
title: 'Share this address with payer', title: 'Share this address with payer',
}, },

2
screen/receive/details.js
View file

@ -12,7 +12,7 @@ const { width } = Dimensions.get('window');
export default class ReceiveDetails extends Component { export default class ReceiveDetails extends Component {
static navigationOptions = { static navigationOptions = {
header: ({ navigation }) => { header: ({ navigation }) => {
return <BlueHeaderDefaultSub leftText={loc.receive.list.header} onClose={() => navigation.goBack(null)} />; return <BlueHeaderDefaultSub leftText={loc.receive.header} onClose={() => navigation.goBack(null)} />;
}, },
}; };

67
screen/transactions/details.js
View file

@ -1,29 +1,10 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { View, Dimensions } from 'react-native'; import { View, ScrollView } from 'react-native';
import { import { BlueButton, SafeBlueArea, BlueCard, BlueText, BlueHeaderDefaultSub, BlueLoading, BlueSpacing20 } from '../../BlueComponents';
BlueButton,
SafeBlueArea,
BlueCard,
BlueText,
BlueHeaderDefaultSub,
BlueLoading,
BlueSpacing20,
BlueSpacing,
BlueSpacing40,
} from '../../BlueComponents';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
/** @type {AppStorage} */ /** @type {AppStorage} */
let BlueApp = require('../../BlueApp'); let BlueApp = require('../../BlueApp');
let loc = require('../../loc'); let loc = require('../../loc');
const { height, width } = Dimensions.get('window');
const aspectRatio = height / width;
let isIpad;
if (aspectRatio > 1.6) {
isIpad = false;
} else {
isIpad = true;
}
function onlyUnique(value, index, self) { function onlyUnique(value, index, self) {
return self.indexOf(value) === index; return self.indexOf(value) === index;
} }
@ -94,14 +75,7 @@ export default class TransactionsDetails extends Component {
return ( return (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}> <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
{(() => { <ScrollView style={{ flex: 1 }}>
if (isIpad) {
return <BlueSpacing40 />;
} else {
return <BlueSpacing />;
}
})()}
<BlueCard> <BlueCard>
{(() => { {(() => {
if (BlueApp.tx_metadata[this.state.tx.hash]) { if (BlueApp.tx_metadata[this.state.tx.hash]) {
@ -116,33 +90,31 @@ export default class TransactionsDetails extends Component {
} }
})()} })()}
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>{loc.transactions.details.from}</BlueText> <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{loc.transactions.details.from}</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.from.filter(onlyUnique).join(', ')}</BlueText> <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.from.filter(onlyUnique).join(', ')}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>{loc.transactions.details.to}</BlueText> <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{loc.transactions.details.to}</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}> <BlueText style={{ marginBottom: 26, color: 'grey' }}>
{arrDiff(this.state.from, this.state.to.filter(onlyUnique)).join(', ')} {arrDiff(this.state.from, this.state.to.filter(onlyUnique)).join(', ')}
</BlueText> </BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>Txid</BlueText> <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Txid</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.tx.hash}</BlueText> <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.hash}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>received</BlueText> <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Received</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}>{formatTime(this.state.tx.received)}</BlueText> <BlueText style={{ marginBottom: 26, color: 'grey' }}>{formatTime(this.state.tx.received)}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>confirmed</BlueText> <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Confirmed</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}>{formatTime(this.state.tx.confirmed)}</BlueText> <BlueText style={{ marginBottom: 26, color: 'grey' }}>{formatTime(this.state.tx.block_height)}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>confirmations</BlueText> <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Confirmations</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.tx.confirmations}</BlueText> <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.confirmations}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>inputs</BlueText> <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Inputs</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.tx.inputs.length}</BlueText> <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.inputs.length}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>outputs</BlueText> <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Outputs</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.tx.outputs.length}</BlueText> <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.outputs.length}</BlueText>
<BlueText style={{ marginBottom: 10 }} />
</BlueCard> </BlueCard>
{(() => { {(() => {
@ -159,6 +131,7 @@ export default class TransactionsDetails extends Component {
); );
} }
})()} })()}
</ScrollView>
</SafeBlueArea> </SafeBlueArea>
); );
} }

35
screen/wallets/list.js
View file

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { View, TouchableOpacity, Text, FlatList } from 'react-native'; import { View, TouchableOpacity, Text, FlatList, RefreshControl } from 'react-native';
import { import {
BlueText, BlueText,
BlueTransactionOnchainIcon, BlueTransactionOnchainIcon,
@ -13,7 +13,6 @@ import {
BlueTransactionOffchainIcon, BlueTransactionOffchainIcon,
BlueSendButtonIcon, BlueSendButtonIcon,
BlueReceiveButtonIcon, BlueReceiveButtonIcon,
BlueRefreshIcon,
BlueList, BlueList,
BlueListItem, BlueListItem,
BlueHeaderDefaultMain, BlueHeaderDefaultMain,
@ -104,16 +103,13 @@ export default class WalletsList extends Component {
showSend = wallet.allowSend(); showSend = wallet.allowSend();
showReceive = wallet.allowReceive(); showReceive = wallet.allowReceive();
} }
let showRereshButton = (BlueApp.getWallets().length > 0 && true) || false;
if (wallet && wallet.type === new LightningCustodianWallet().type && !showSend) { if (wallet && wallet.type === new LightningCustodianWallet().type && !showSend) {
showManageFundsBig = true; showManageFundsBig = true;
showManageFundsSmallButton = false; showManageFundsSmallButton = false;
showRereshButton = false;
} }
if (wallet && wallet.type === new LightningCustodianWallet().type && wallet.getBalance() > 0) { if (wallet && wallet.type === new LightningCustodianWallet().type && wallet.getBalance() > 0) {
showRereshButton = false;
showManageFundsSmallButton = true; showManageFundsSmallButton = true;
} }
@ -124,7 +120,6 @@ export default class WalletsList extends Component {
showSendButton: showSend, showSendButton: showSend,
showManageFundsBigButton: showManageFundsBig, showManageFundsBigButton: showManageFundsBig,
showManageFundsSmallButton, showManageFundsSmallButton,
showRereshButton,
dataSource: BlueApp.getTransactions(this.lastSnappedTo || 0), dataSource: BlueApp.getTransactions(this.lastSnappedTo || 0),
}); });
}, 1); }, 1);
@ -160,7 +155,6 @@ export default class WalletsList extends Component {
showManageFundsBigButton: false, showManageFundsBigButton: false,
showManageFundsSmallButton: false, showManageFundsSmallButton: false,
showSendButton: false, showSendButton: false,
showRereshButton: false,
// TODO: погуглить че это за ебала ds.cloneWithRows, можно ли быстрее сделать прогрузку транзакций на экран // TODO: погуглить че это за ебала ds.cloneWithRows, можно ли быстрее сделать прогрузку транзакций на экран
dataSource: BlueApp.getTransactions(index), dataSource: BlueApp.getTransactions(index),
}); });
@ -178,16 +172,13 @@ export default class WalletsList extends Component {
showReceive = wallet.allowReceive(); showReceive = wallet.allowReceive();
} }
console.log({ showSend }); console.log({ showSend });
let showRereshButton = true;
let showManageFundsSmallButton = true; let showManageFundsSmallButton = true;
if (wallet && wallet.type === new LightningCustodianWallet().type && !showSend) { if (wallet && wallet.type === new LightningCustodianWallet().type && !showSend) {
showManageFundsBig = true; showManageFundsBig = true;
showRereshButton = false;
showManageFundsSmallButton = false; showManageFundsSmallButton = false;
} }
if (wallet && wallet.type === new LightningCustodianWallet().type) { if (wallet && wallet.type === new LightningCustodianWallet().type) {
showRereshButton = false;
} else { } else {
showManageFundsSmallButton = false; showManageFundsSmallButton = false;
} }
@ -201,7 +192,6 @@ export default class WalletsList extends Component {
showManageFundsBigButton: showManageFundsBig, showManageFundsBigButton: showManageFundsBig,
showManageFundsSmallButton, showManageFundsSmallButton,
showSendButton: showSend, showSendButton: showSend,
showRereshButton,
}), }),
50, 50,
); // just to animate it, no real function ); // just to animate it, no real function
@ -268,7 +258,7 @@ export default class WalletsList extends Component {
} }
} }
_keyExtractor = item => item.hash; _keyExtractor = (item, index) => index.toString();
render() { render() {
const { navigate } = this.props.navigation; const { navigate } = this.props.navigation;
@ -321,9 +311,6 @@ export default class WalletsList extends Component {
})()} })()}
{(() => { {(() => {
if (this.state.isTransactionsLoading) {
return <BlueLoading />;
} else {
return ( return (
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row', height: 50 }}> <View style={{ flexDirection: 'row', height: 50 }}>
@ -338,11 +325,6 @@ export default class WalletsList extends Component {
> >
{loc.transactions.list.title} {loc.transactions.list.title}
</Text> </Text>
{(() => {
if (this.state.showRereshButton) {
return <BlueRefreshIcon onPress={() => this.refreshTransactions()} />;
}
})()}
</View> </View>
<View <View
@ -384,6 +366,9 @@ export default class WalletsList extends Component {
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<BlueList> <BlueList>
<FlatList <FlatList
refreshControl={
<RefreshControl onRefresh={() => this.refreshTransactions()} refreshing={this.state.isTransactionsLoading} />
}
data={this.state.dataSource} data={this.state.dataSource}
extraData={this.state.dataSource} extraData={this.state.dataSource}
keyExtractor={this._keyExtractor} keyExtractor={this._keyExtractor}
@ -454,13 +439,9 @@ export default class WalletsList extends Component {
textStyle: { color: 'orange' }, textStyle: { color: 'orange' },
containerStyle: { marginTop: 0 }, containerStyle: { marginTop: 0 },
}} }}
chevron={false} hideChevron
chevronColor="transparent"
rightTitle={new BigNumber((rowData.item.value && rowData.item.value) || 0).div(100000000).toString()} rightTitle={new BigNumber((rowData.item.value && rowData.item.value) || 0).div(100000000).toString()}
rightTitleStyle={{ rightTitleStyle={{
position: 'relative',
right: -30,
top: -7,
fontWeight: '600', fontWeight: '600',
fontSize: 16, fontSize: 16,
color: rowData.item.value / 100000000 < 0 ? BlueApp.settings.foregroundColor : '#37c0a1', color: rowData.item.value / 100000000 < 0 ? BlueApp.settings.foregroundColor : '#37c0a1',
@ -473,9 +454,8 @@ export default class WalletsList extends Component {
</View> </View>
</View> </View>
); );
}
})()} })()}
<View style={{ flex: 1, flexDirection: 'row', alignSelf: 'center', position: 'absolute', bottom: 30 }}>
{(() => { {(() => {
if (this.state.showReceiveButton) { if (this.state.showReceiveButton) {
return ( return (
@ -545,6 +525,7 @@ export default class WalletsList extends Component {
); );
} }
})()} })()}
</View>
</SafeBlueArea> </SafeBlueArea>
); );
} }