From a1bd88ff1297999904aa4cc2047694a099e00e53 Mon Sep 17 00:00:00 2001 From: Valentine Wallace Date: Thu, 7 Feb 2019 03:06:00 +0000 Subject: [PATCH 1/7] Adjust font size of Home balance based on screen width. --- src/component/label.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/component/label.js b/src/component/label.js index 2a8e0d738..f943a2f3c 100644 --- a/src/component/label.js +++ b/src/component/label.js @@ -15,12 +15,11 @@ const balanceStyles = StyleSheet.create({ numeral: { fontFamily: 'WorkSans ExtraLight', fontSize: font.sizeXXXL, - lineHeight: font.lineHeightXXXL, + lineHeight: null, }, unit: { fontFamily: 'WorkSans Regular', fontSize: font.sizeL, - lineHeight: 60, marginLeft: 10, }, }); @@ -35,7 +34,13 @@ BalanceLabel.propTypes = { }; export const BalanceLabelNumeral = ({ children, style }) => ( - {children} + + {children} + ); BalanceLabelNumeral.propTypes = { From 19f1480c8b9f9aee575a5d447186e0cb172336aa Mon Sep 17 00:00:00 2001 From: Valentine Wallace Date: Thu, 7 Feb 2019 03:08:23 +0000 Subject: [PATCH 2/7] Alter BalanceLabelUnit component to accept arbitrary props. --- src/component/label.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/component/label.js b/src/component/label.js index f943a2f3c..ae2143b5e 100644 --- a/src/component/label.js +++ b/src/component/label.js @@ -48,8 +48,12 @@ BalanceLabelNumeral.propTypes = { style: RNText.propTypes.style, }; -export const BalanceLabelUnit = ({ children, style }) => - children ? {children} : null; +export const BalanceLabelUnit = ({ children, style, ...props }) => + children ? ( + + {children} + + ) : null; BalanceLabelUnit.propTypes = { children: PropTypes.string, From a3707a7891698b34220a15af67ce44c58175e0d4 Mon Sep 17 00:00:00 2001 From: Valentine Wallace Date: Thu, 7 Feb 2019 03:09:07 +0000 Subject: [PATCH 3/7] Add function calculateTopPadding to set the margin of unit labels. --- src/helper.js | 16 ++++++++++++++++ test/unit/helper.spec.js | 17 +++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/src/helper.js b/src/helper.js index e78ac4b16..1a1ad1e94 100644 --- a/src/helper.js +++ b/src/helper.js @@ -321,3 +321,19 @@ export const generateArc = (x, y, radius, startAngle, endAngle) => { 'Z', ].join(' '); }; + +/** + * Calculate the appropriate top padding for the btc unit that sits next to the main + * home screen balance. This is needed because the height of the balance adjusts + * dynamically to its width. + * @param {number} height The height of the balance. + * @return {number} The amount of padding to put at the top of the unit. + */ +export const calculateTopPadding = height => { + if (height >= 80) { + return 15; + } else if (height >= 60) { + return 10; + } + return 5; +}; diff --git a/test/unit/helper.spec.js b/test/unit/helper.spec.js index 768880d00..3c27c4926 100644 --- a/test/unit/helper.spec.js +++ b/test/unit/helper.spec.js @@ -812,4 +812,21 @@ describe('Helpers Unit Tests', () => { ); }); }); + + describe('calculateTopPadding()', () => { + it('should work for heights greater than 80', () => { + const padding = helpers.calculateTopPadding(85); + expect(padding, 'to equal', 15); + }); + + it('should work for 60 <= height < 80', () => { + const padding = helpers.calculateTopPadding(65); + expect(padding, 'to equal', 10); + }); + + it('should work for heights < 60', () => { + const padding = helpers.calculateTopPadding(40); + expect(padding, 'to equal', 5); + }); + }); }); From ce5b52b2ba8459c523c4a63ad4102c3e19d8e1ea Mon Sep 17 00:00:00 2001 From: Valentine Wallace Date: Thu, 7 Feb 2019 03:14:07 +0000 Subject: [PATCH 4/7] Dynamically adjust top padding of balance unit label. This is to ensure it stays level with the balance itself. --- src/view/home.js | 77 +++++++++++++++++++++++++++++++++++------------- 1 file changed, 57 insertions(+), 20 deletions(-) diff --git a/src/view/home.js b/src/view/home.js index 4b9e15743..fe78bec21 100644 --- a/src/view/home.js +++ b/src/view/home.js @@ -1,11 +1,12 @@ -import React from 'react'; +import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; import { observer } from 'mobx-react'; import PropTypes from 'prop-types'; import Background from '../component/background'; import MainContent from '../component/main-content'; import { Header, Title } from '../component/header'; -import { color } from '../component/style'; +import { createStyles, maxWidth } from '../component/media-query'; +import { color, breakWidth, smallBreakWidth } from '../component/style'; import { H4Text } from '../component/text'; import Icon from '../component/icon'; import ChannelIcon from '../asset/icon/channel'; @@ -17,6 +18,7 @@ import { SmallBalanceLabel, } from '../component/label'; import { Button, QrButton, GlasButton, DownButton } from '../component/button'; +import { calculateTopPadding } from '../helper'; // // Home View @@ -83,7 +85,7 @@ HomeView.propTypes = { // Balance Display // -const balanceStyles = StyleSheet.create({ +const baseBalanceStyles = { wrapper: { flex: 1, justifyContent: 'center', @@ -92,26 +94,61 @@ const balanceStyles = StyleSheet.create({ marginTop: 30, marginBottom: 5, }, -}); +}; -const BalanceDisplay = ({ - depositLabel, - channelBalanceLabel, - unitLabel, - toggleDisplayFiat, -}) => ( - - - +const balanceStyles = createStyles( + baseBalanceStyles, + + maxWidth(breakWidth, { + wrapper: { + width: 350, + }, + }), + + maxWidth(smallBreakWidth, { + wrapper: { + width: 250, + }, + }) ); +class BalanceDisplay extends Component { + constructor(props) { + super(props); + this.state = { + height: 80, + }; + } + + render() { + const { + depositLabel, + channelBalanceLabel, + unitLabel, + toggleDisplayFiat, + } = this.props; + return ( + + + + ); + } +} + BalanceDisplay.propTypes = { depositLabel: PropTypes.string.isRequired, channelBalanceLabel: PropTypes.string.isRequired, From cd5cfecdfbf4c87ef6ba36eb6d9e875aa09b7904 Mon Sep 17 00:00:00 2001 From: Valentine Wallace Date: Wed, 20 Feb 2019 01:51:05 +0000 Subject: [PATCH 5/7] Add wallet action to set balanceHeight in the store. --- src/action/wallet.js | 11 +++++++++++ src/store.js | 1 + test/unit/action/wallet.spec.js | 7 +++++++ 3 files changed, 19 insertions(+) diff --git a/src/action/wallet.js b/src/action/wallet.js index 342ead6c5..571ce69b6 100644 --- a/src/action/wallet.js +++ b/src/action/wallet.js @@ -511,6 +511,17 @@ class WalletAction { log.error('Getting exchange rate failed', err); } } + + /** + * Set the height of Home's main channel balance label. + * This is used for calculating the padding for the top of the btc + * unit next to the balance amount. + * @param {number} The height of the balance. + * @return {undefined} + */ + setBalanceHeight({ height }) { + this._store.balanceHeight = height; + } } export default WalletAction; diff --git a/src/store.js b/src/store.js index 8caa6cca5..c79fff467 100644 --- a/src/store.js +++ b/src/store.js @@ -37,6 +37,7 @@ export class Store { pubKey: null, walletAddress: null, displayCopied: false, + balanceHeight: 80, auth: { pin: '', newPin: '', diff --git a/test/unit/action/wallet.spec.js b/test/unit/action/wallet.spec.js index 94d01d91d..aa21e53c1 100644 --- a/test/unit/action/wallet.spec.js +++ b/test/unit/action/wallet.spec.js @@ -618,4 +618,11 @@ describe('Action Wallet Unit Tests', () => { expect(db.save, 'was not called'); }); }); + + describe('setBalanceHeight()', () => { + it('should set the balance height in the store', () => { + wallet.setBalanceHeight({ height: 42 }); + expect(store.balanceHeight, 'to equal', 42); + }); + }); }); From f9c8869e6ce7d3389965a930861ad5ed4a92c7d0 Mon Sep 17 00:00:00 2001 From: Valentine Wallace Date: Wed, 20 Feb 2019 01:53:29 +0000 Subject: [PATCH 6/7] Add computed property balancePaddingTop to set the top padding for the unit in theHome screen balance. --- src/computed/wallet.js | 19 +++++++++++++++++++ src/helper.js | 16 ---------------- test/unit/computed/wallet.spec.js | 18 ++++++++++++++++++ test/unit/helper.spec.js | 17 ----------------- 4 files changed, 37 insertions(+), 33 deletions(-) diff --git a/src/computed/wallet.js b/src/computed/wallet.js index a92f6413a..ae3314db1 100644 --- a/src/computed/wallet.js +++ b/src/computed/wallet.js @@ -42,6 +42,9 @@ const ComputedWallet = store => { } return newPassword.length >= MIN_PASSWORD_LENGTH; }, + get balancePaddingTop() { + return calculateTopPadding({ height: store.balanceHeight }); + }, }); }; @@ -59,4 +62,20 @@ const getNewPasswordCopy = ({ newPassword }) => { return ''; }; +/** + * Calculate the appropriate top padding for the btc unit that sits next to the main + * home screen balance. This is needed because the height of the balance adjusts + * dynamically to its width. + * @param {number} height The height of the balance. + * @return {number} The amount of padding to put at the top of the unit. + */ +const calculateTopPadding = ({ height }) => { + if (height >= 80) { + return 15; + } else if (height >= 60) { + return 10; + } + return 5; +}; + export default ComputedWallet; diff --git a/src/helper.js b/src/helper.js index 1a1ad1e94..e78ac4b16 100644 --- a/src/helper.js +++ b/src/helper.js @@ -321,19 +321,3 @@ export const generateArc = (x, y, radius, startAngle, endAngle) => { 'Z', ].join(' '); }; - -/** - * Calculate the appropriate top padding for the btc unit that sits next to the main - * home screen balance. This is needed because the height of the balance adjusts - * dynamically to its width. - * @param {number} height The height of the balance. - * @return {number} The amount of padding to put at the top of the unit. - */ -export const calculateTopPadding = height => { - if (height >= 80) { - return 15; - } else if (height >= 60) { - return 10; - } - return 5; -}; diff --git a/test/unit/computed/wallet.spec.js b/test/unit/computed/wallet.spec.js index 1726ee54f..dadbfb3f2 100644 --- a/test/unit/computed/wallet.spec.js +++ b/test/unit/computed/wallet.spec.js @@ -81,5 +81,23 @@ describe('Computed Wallet Unit Tests', () => { expect(store.newPasswordCopy, 'to match', /strong password/); expect(store.newPasswordSuccess, 'to equal', true); }); + + it('should set balance padding for heights > 80', () => { + store.balanceHeight = 85; + ComputedWallet(store); + expect(store.balancePaddingTop, 'to equal', 15); + }); + + it('should set balance padding for heights < 80', () => { + store.balanceHeight = 65; + ComputedWallet(store); + expect(store.balancePaddingTop, 'to equal', 10); + }); + + it('should work for heights < 60', () => { + store.balanceHeight = 40; + ComputedWallet(store); + expect(store.balancePaddingTop, 'to equal', 5); + }); }); }); diff --git a/test/unit/helper.spec.js b/test/unit/helper.spec.js index 3c27c4926..768880d00 100644 --- a/test/unit/helper.spec.js +++ b/test/unit/helper.spec.js @@ -812,21 +812,4 @@ describe('Helpers Unit Tests', () => { ); }); }); - - describe('calculateTopPadding()', () => { - it('should work for heights greater than 80', () => { - const padding = helpers.calculateTopPadding(85); - expect(padding, 'to equal', 15); - }); - - it('should work for 60 <= height < 80', () => { - const padding = helpers.calculateTopPadding(65); - expect(padding, 'to equal', 10); - }); - - it('should work for heights < 60', () => { - const padding = helpers.calculateTopPadding(40); - expect(padding, 'to equal', 5); - }); - }); }); From 647dccf6362e7f003bf240e3b7b13987ebd6a8d6 Mon Sep 17 00:00:00 2001 From: Valentine Wallace Date: Wed, 20 Feb 2019 01:54:18 +0000 Subject: [PATCH 7/7] Wire up new setBalanceHeight action and balancePaddingTop property into Home view. --- src/view/home.js | 76 +++++++++++++++++++++++------------------------- 1 file changed, 37 insertions(+), 39 deletions(-) diff --git a/src/view/home.js b/src/view/home.js index fe78bec21..62957740f 100644 --- a/src/view/home.js +++ b/src/view/home.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import { StyleSheet, View } from 'react-native'; import { observer } from 'mobx-react'; import PropTypes from 'prop-types'; @@ -18,7 +18,6 @@ import { SmallBalanceLabel, } from '../component/label'; import { Button, QrButton, GlasButton, DownButton } from '../component/button'; -import { calculateTopPadding } from '../helper'; // // Home View @@ -43,7 +42,12 @@ const HomeView = ({ transaction, nav, }) => { - const { depositLabel, channelBalanceLabel, unitLabel } = store; + const { + depositLabel, + channelBalanceLabel, + unitLabel, + balancePaddingTop, + } = store; return ( wallet.toggleDisplayFiat()} + setBalanceHeight={({ height }) => wallet.setBalanceHeight({ height })} + unitPaddingTop={balancePaddingTop} /> payment.init()} @@ -112,48 +118,40 @@ const balanceStyles = createStyles( }) ); -class BalanceDisplay extends Component { - constructor(props) { - super(props); - this.state = { - height: 80, - }; - } - - render() { - const { - depositLabel, - channelBalanceLabel, - unitLabel, - toggleDisplayFiat, - } = this.props; - return ( - - - - ); - } -} +const BalanceDisplay = ({ + depositLabel, + channelBalanceLabel, + unitLabel, + toggleDisplayFiat, + setBalanceHeight, + unitPaddingTop, +}) => ( + + + +); BalanceDisplay.propTypes = { depositLabel: PropTypes.string.isRequired, channelBalanceLabel: PropTypes.string.isRequired, unitLabel: PropTypes.string, toggleDisplayFiat: PropTypes.func.isRequired, + setBalanceHeight: PropTypes.func.isRequired, + unitPaddingTop: PropTypes.number.isRequired, }; //