mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-02-22 15:04:50 +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() {
return (
<ListItem
bottomDivider
{...this.props}
containerStyle={{
backgroundColor: 'transparent',
borderBottomColor: 'transparent',
borderBottomWidth: 0,
borderBottomStartRadius: 20,
borderBottomEndRadius: 20,
borderBottomColor: '#ededed',
}}
titleStyle={{
color: BlueApp.settings.foregroundColor,
@ -202,6 +204,7 @@ export class BlueListItem extends Component {
fontWeight: '500',
}}
subtitleStyle={{ color: '#9aa0aa' }}
subtitleNumberOfLines={2}
/>
);
}
@ -470,11 +473,6 @@ const stylesBlueIcon = StyleSheet.create({
container: {
flex: 1,
},
containerRefresh: {
flex: 1,
position: 'absolute',
right: 10,
},
box1: {
position: 'relative',
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 {
render() {
return (
@ -692,15 +666,7 @@ export class BlueTransactionOutgoingIcon extends Component {
export class BlueReceiveButtonIcon extends Component {
render() {
return (
<TouchableOpacity
{...this.props}
style={{
flex: 1,
position: 'absolute',
bottom: 30,
right: width / 2 + 5,
}}
>
<TouchableOpacity {...this.props}>
<View>
<View
style={{
@ -712,6 +678,7 @@ export class BlueReceiveButtonIcon extends Component {
backgroundColor: '#ccddf9',
borderBottomLeftRadius: 15,
borderTopLeftRadius: 15,
alignItems: 'center',
}}
>
<View
@ -721,9 +688,10 @@ export class BlueReceiveButtonIcon extends Component {
borderBottomLeftRadius: 15,
backgroundColor: 'transparent',
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>
<Text
style={{
@ -731,12 +699,10 @@ export class BlueReceiveButtonIcon extends Component {
fontSize: (isIpad && 10) || 16,
fontWeight: '500',
left: 5,
top: 12,
backgroundColor: 'transparent',
position: 'relative',
}}
>
{loc.receive.list.header}
{loc.receive.header}
</Text>
</View>
</View>
@ -748,15 +714,7 @@ export class BlueReceiveButtonIcon extends Component {
export class BlueSendButtonIcon extends Component {
render() {
return (
<TouchableOpacity
{...this.props}
style={{
flex: 1,
position: 'absolute',
bottom: 30,
left: width / 2 + 5,
}}
>
<TouchableOpacity {...this.props}>
<View>
<View
style={{
@ -768,6 +726,8 @@ export class BlueSendButtonIcon extends Component {
backgroundColor: '#ccddf9',
borderBottomRightRadius: 15,
borderTopRightRadius: 15,
alignItems: 'center',
paddingLeft: 15,
}}
>
<View
@ -780,20 +740,17 @@ export class BlueSendButtonIcon extends Component {
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>
<Text
style={{
color: '#2f5fb3',
fontSize: (isIpad && 10) || 16,
fontWeight: '500',
left: 5,
top: 12,
backgroundColor: 'transparent',
position: 'relative',
}}
>
{loc.send.list.header}
{loc.send.header}
</Text>
</View>
</View>
@ -898,7 +855,7 @@ export class NewWalletPannel extends Component {
return (
<TouchableOpacity
{...this.props}
style={{ paddingRight: 10, left: -20, paddingTop: 20 }}
style={{ paddingRight: 10, left: -20, marginVertical: 6 }}
onPress={() => {
if (this.handleClick) {
this.handleClick();
@ -910,7 +867,7 @@ export class NewWalletPannel extends Component {
style={{
padding: 15,
borderRadius: 10,
height: 145,
height: 164,
justifyContent: 'center',
alignItems: 'center',
}}
@ -953,7 +910,7 @@ export class NewWalletPannel extends Component {
let sliderWidth = width * 1;
let itemWidth = width * 0.82;
let sliderHeight = 175;
let sliderHeight = 181;
export class WalletsCarousel extends Component {
constructor(props) {
@ -1013,14 +970,20 @@ export class WalletsCarousel extends Component {
return (
<TouchableOpacity
activeOpacity={1}
style={{ paddingRight: 10, left: -20, paddingTop: 20 }}
style={{ paddingRight: 10, left: -20, marginVertical: 6 }}
onPress={() => {
if (WalletsCarousel.handleClick) {
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
source={(new LightningCustodianWallet().type === item.type && require('./img/lnd-shape.png')) || require('./img/btc-shape.png')}
style={{
@ -1034,6 +997,7 @@ export class WalletsCarousel extends Component {
<Text style={{ backgroundColor: 'transparent' }} />
<Text
numberOfLines={1}
style={{
backgroundColor: 'transparent',
fontSize: 19,
@ -1043,6 +1007,7 @@ export class WalletsCarousel extends Component {
{item.getLabel()}
</Text>
<Text
numberOfLines={1}
style={{
backgroundColor: 'transparent',
fontWeight: 'bold',
@ -1054,6 +1019,7 @@ export class WalletsCarousel extends Component {
</Text>
<Text style={{ backgroundColor: 'transparent' }} />
<Text
numberOfLines={1}
style={{
backgroundColor: 'transparent',
fontSize: 13,
@ -1063,6 +1029,7 @@ export class WalletsCarousel extends Component {
{loc.wallets.list.latest_transaction}
</Text>
<Text
numberOfLines={1}
style={{
backgroundColor: 'transparent',
fontWeight: 'bold',

12
loc/en.js
View file

@ -87,16 +87,13 @@ module.exports = {
conf: 'conf',
},
details: {
title: 'transaction details',
title: 'transaction',
from: 'Inputs',
to: 'Outputs',
},
},
send: {
list: {
tabBarLabel: 'Send',
header: 'send',
},
header: 'Send',
details: {
title: 'create transaction',
amount_fiels_is_not_valid: 'Amount field is not valid',
@ -127,10 +124,7 @@ module.exports = {
},
},
receive: {
list: {
tabBarLabel: 'Receive',
header: 'receive',
},
header: 'Receive',
details: {
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 {
static navigationOptions = {
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 { View, Dimensions } from 'react-native';
import {
BlueButton,
SafeBlueArea,
BlueCard,
BlueText,
BlueHeaderDefaultSub,
BlueLoading,
BlueSpacing20,
BlueSpacing,
BlueSpacing40,
} from '../../BlueComponents';
import { View, ScrollView } from 'react-native';
import { BlueButton, SafeBlueArea, BlueCard, BlueText, BlueHeaderDefaultSub, BlueLoading, BlueSpacing20 } from '../../BlueComponents';
import PropTypes from 'prop-types';
/** @type {AppStorage} */
let BlueApp = require('../../BlueApp');
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) {
return self.indexOf(value) === index;
}
@ -94,14 +75,7 @@ export default class TransactionsDetails extends Component {
return (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
{(() => {
if (isIpad) {
return <BlueSpacing40 />;
} else {
return <BlueSpacing />;
}
})()}
<ScrollView style={{ flex: 1 }}>
<BlueCard>
{(() => {
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={{ marginBottom: 6, color: 'grey' }}>{this.state.from.filter(onlyUnique).join(', ')}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{loc.transactions.details.from}</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={{ marginBottom: 6, color: 'grey' }}>
<BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{loc.transactions.details.to}</BlueText>
<BlueText style={{ marginBottom: 26, color: 'grey' }}>
{arrDiff(this.state.from, this.state.to.filter(onlyUnique)).join(', ')}
</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>Txid</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.tx.hash}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Txid</BlueText>
<BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.hash}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>received</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}>{formatTime(this.state.tx.received)}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Received</BlueText>
<BlueText style={{ marginBottom: 26, color: 'grey' }}>{formatTime(this.state.tx.received)}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>confirmed</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}>{formatTime(this.state.tx.confirmed)}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>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={{ marginBottom: 6, color: 'grey' }}>{this.state.tx.confirmations}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Confirmations</BlueText>
<BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.confirmations}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>inputs</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.tx.inputs.length}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Inputs</BlueText>
<BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.inputs.length}</BlueText>
<BlueText style={{ fontSize: 16, fontWeight: '500' }}>outputs</BlueText>
<BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.tx.outputs.length}</BlueText>
<BlueText style={{ marginBottom: 10 }} />
<BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Outputs</BlueText>
<BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.outputs.length}</BlueText>
</BlueCard>
{(() => {
@ -159,6 +131,7 @@ export default class TransactionsDetails extends Component {
);
}
})()}
</ScrollView>
</SafeBlueArea>
);
}

35
screen/wallets/list.js
View file

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