From 114af48b4afb1a8758cf316cf1df5196541fda64 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Tue, 25 Dec 2018 08:05:07 +1100 Subject: [PATCH 1/7] feat: Fixes #308. Change amount font size on Send page to fit in input field * Switches to font size that fits a value as small as 1 Wei on the screen when more than 9 digits entered * Switches back to default font size when amount of digits entered is 9 or less again * Caters for when user unchecks the Max Value button --- .../fether-react/src/Send/TxForm/TxForm.js | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/fether-react/src/Send/TxForm/TxForm.js b/packages/fether-react/src/Send/TxForm/TxForm.js index ae199c464..d343c2a9d 100644 --- a/packages/fether-react/src/Send/TxForm/TxForm.js +++ b/packages/fether-react/src/Send/TxForm/TxForm.js @@ -23,6 +23,9 @@ import withAccount from '../../utils/withAccount.js'; import withBalance, { withEthBalance } from '../../utils/withBalance'; import withTokens from '../../utils/withTokens'; +const DEFAULT_AMOUNT_FONT_SIZE = 3; +const DEFAULT_AMOUNT_MAX_CHARS = 9; +const AMOUNT_RESIZE_FONT_SIZE = 0.47 * DEFAULT_AMOUNT_FONT_SIZE; // Fits 1 Wei const MAX_GAS_PRICE = 40; // In Gwei const MIN_GAS_PRICE = 3; // Safelow gas price from GasStation, in Gwei @@ -39,6 +42,7 @@ class Send extends Component { state = { maxSelected: false }; + handleSubmit = values => { const { accountAddress, history, sendStore, token } = this.props; @@ -61,6 +65,23 @@ class Send extends Component { } }); + changeAmountFontSize = () => { + const amountElement = document.getElementById('amount'); + + if (!amountElement) { + return; + } + + if ( + amountElement.scrollWidth > amountElement.offsetWidth || + amountElement.value.length > DEFAULT_AMOUNT_MAX_CHARS + ) { + amountElement.style.fontSize = `${AMOUNT_RESIZE_FONT_SIZE}rem`; + } else { + amountElement.style.fontSize = `${DEFAULT_AMOUNT_FONT_SIZE}rem`; + } + }; + calculateMax = (gas, gasPrice) => { const { token, balance } = this.props; const gasBn = gas ? new BigNumber(gas) : new BigNumber(21000); @@ -158,6 +179,12 @@ class Send extends Component { + + {(value, previous) => { + this.changeAmountFontSize(); + }} + + { if (this.state.maxSelected) { mutators.recalculateMax(); + } else { + this.changeAmountFontSize(); } }} From 10e23f95a5c1aeb8014508cd40f3780b7b17aa76 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Sat, 5 Jan 2019 11:16:30 +1100 Subject: [PATCH 2/7] review-fix: Change CSS class depending on length of amount --- .../fether-react/src/Send/TxForm/TxForm.js | 33 +++++-------------- .../src/assets/sass/shared/_form.scss | 9 ++++- 2 files changed, 17 insertions(+), 25 deletions(-) diff --git a/packages/fether-react/src/Send/TxForm/TxForm.js b/packages/fether-react/src/Send/TxForm/TxForm.js index 9a6eada15..49a233825 100644 --- a/packages/fether-react/src/Send/TxForm/TxForm.js +++ b/packages/fether-react/src/Send/TxForm/TxForm.js @@ -23,9 +23,7 @@ import withAccount from '../../utils/withAccount.js'; import withBalance, { withEthBalance } from '../../utils/withBalance'; import withTokens from '../../utils/withTokens'; -const DEFAULT_AMOUNT_FONT_SIZE = 3; const DEFAULT_AMOUNT_MAX_CHARS = 9; -const AMOUNT_RESIZE_FONT_SIZE = 0.47 * DEFAULT_AMOUNT_FONT_SIZE; // Fits 1 Wei const MAX_GAS_PRICE = 40; // In Gwei const MIN_GAS_PRICE = 3; // Safelow gas price from GasStation, in Gwei @@ -65,21 +63,14 @@ class Send extends Component { } }); - changeAmountFontSize = () => { - const amountElement = document.getElementById('amount'); - - if (!amountElement) { - return; + changeAmountFontSize = values => { + if (!values.amount) { + return '-resize-font-default'; } - if ( - amountElement.scrollWidth > amountElement.offsetWidth || - amountElement.value.length > DEFAULT_AMOUNT_MAX_CHARS - ) { - amountElement.style.fontSize = `${AMOUNT_RESIZE_FONT_SIZE}rem`; - } else { - amountElement.style.fontSize = `${DEFAULT_AMOUNT_FONT_SIZE}rem`; - } + return values.amount.toString().length > DEFAULT_AMOUNT_MAX_CHARS + ? '-resize-font-small' // Resize to fit an amount as small as one Wei + : '-resize-font-default'; }; calculateMax = (gas, gasPrice) => { @@ -154,7 +145,9 @@ class Send extends Component {
- - {(value, previous) => { - this.changeAmountFontSize(); - }} - - { if (this.state.maxSelected) { mutators.recalculateMax(); - } else { - this.changeAmountFontSize(); } }} diff --git a/packages/fether-react/src/assets/sass/shared/_form.scss b/packages/fether-react/src/assets/sass/shared/_form.scss index ec4fcfd5f..33b76a232 100644 --- a/packages/fether-react/src/assets/sass/shared/_form.scss +++ b/packages/fether-react/src/assets/sass/shared/_form.scss @@ -125,13 +125,20 @@ } input.form_field_amount[type='number'] { - font-size: ms(6); line-height: ms(6) * 1.1; font-weight: 200; width: 100%; text-align: center; -webkit-appearance: none; + &.-resize-font-default { + font-size: ms(6); /* 3rem */ + } + + &.-resize-font-small { + font-size: 1.41rem; /* 0.47 * default */ + } + &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { opacity: 1; From 2fc83154953d187164a709325e955c549110d4f7 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Sat, 5 Jan 2019 11:25:08 +1100 Subject: [PATCH 3/7] refactor: Only pass the amount to the function --- packages/fether-react/src/Send/TxForm/TxForm.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/fether-react/src/Send/TxForm/TxForm.js b/packages/fether-react/src/Send/TxForm/TxForm.js index 49a233825..3ad598a54 100644 --- a/packages/fether-react/src/Send/TxForm/TxForm.js +++ b/packages/fether-react/src/Send/TxForm/TxForm.js @@ -63,15 +63,10 @@ class Send extends Component { } }); - changeAmountFontSize = values => { - if (!values.amount) { - return '-resize-font-default'; - } - - return values.amount.toString().length > DEFAULT_AMOUNT_MAX_CHARS + changeAmountFontSize = amount => + amount.toString().length > DEFAULT_AMOUNT_MAX_CHARS ? '-resize-font-small' // Resize to fit an amount as small as one Wei : '-resize-font-default'; - }; calculateMax = (gas, gasPrice) => { const { token, balance } = this.props; @@ -145,9 +140,11 @@ class Send extends Component {
Date: Sat, 5 Jan 2019 11:51:28 +1100 Subject: [PATCH 4/7] refactor: Use Modular Scale (ms) values instead of rem --- packages/fether-react/src/assets/sass/shared/_form.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fether-react/src/assets/sass/shared/_form.scss b/packages/fether-react/src/assets/sass/shared/_form.scss index 33b76a232..9e49cd980 100644 --- a/packages/fether-react/src/assets/sass/shared/_form.scss +++ b/packages/fether-react/src/assets/sass/shared/_form.scss @@ -132,11 +132,11 @@ input.form_field_amount[type='number'] { -webkit-appearance: none; &.-resize-font-default { - font-size: ms(6); /* 3rem */ + font-size: ms(6); } &.-resize-font-small { - font-size: 1.41rem; /* 0.47 * default */ + font-size: ms(2); } &::-webkit-inner-spin-button, From b951c1c00a8746e4ca429e8720f2db18d038eae3 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Sat, 5 Jan 2019 13:57:50 +1100 Subject: [PATCH 5/7] feat: Add animation to changing font size --- packages/fether-react/src/assets/sass/shared/_form.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/fether-react/src/assets/sass/shared/_form.scss b/packages/fether-react/src/assets/sass/shared/_form.scss index 9e49cd980..d19f00444 100644 --- a/packages/fether-react/src/assets/sass/shared/_form.scss +++ b/packages/fether-react/src/assets/sass/shared/_form.scss @@ -130,6 +130,8 @@ input.form_field_amount[type='number'] { width: 100%; text-align: center; -webkit-appearance: none; + -webkit-transition: font-size 0.5s; + transition: font-size 0.5s; &.-resize-font-default { font-size: ms(6); From 9b1406757143f0f948307f70e298f468e13623fc Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Sat, 5 Jan 2019 14:15:54 +1100 Subject: [PATCH 6/7] feat: Add medium account length to soften the transition --- packages/fether-react/src/Send/TxForm/TxForm.js | 17 +++++++++++++---- .../src/assets/sass/shared/_form.scss | 4 ++++ 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/fether-react/src/Send/TxForm/TxForm.js b/packages/fether-react/src/Send/TxForm/TxForm.js index 3ad598a54..38145779d 100644 --- a/packages/fether-react/src/Send/TxForm/TxForm.js +++ b/packages/fether-react/src/Send/TxForm/TxForm.js @@ -24,6 +24,7 @@ import withBalance, { withEthBalance } from '../../utils/withBalance'; import withTokens from '../../utils/withTokens'; const DEFAULT_AMOUNT_MAX_CHARS = 9; +const MEDIUM_AMOUNT_MAX_CHARS = 14; const MAX_GAS_PRICE = 40; // In Gwei const MIN_GAS_PRICE = 3; // Safelow gas price from GasStation, in Gwei @@ -63,10 +64,18 @@ class Send extends Component { } }); - changeAmountFontSize = amount => - amount.toString().length > DEFAULT_AMOUNT_MAX_CHARS - ? '-resize-font-small' // Resize to fit an amount as small as one Wei - : '-resize-font-default'; + changeAmountFontSize = amount => { + const amountLen = amount.toString().length; + if (amountLen > MEDIUM_AMOUNT_MAX_CHARS) { + return '-resize-font-small'; // Resize to fit an amount as small as one Wei + } else if ( + MEDIUM_AMOUNT_MAX_CHARS >= amountLen && + amountLen > DEFAULT_AMOUNT_MAX_CHARS + ) { + return '-resize-font-medium'; + } + return '-resize-font-default'; + }; calculateMax = (gas, gasPrice) => { const { token, balance } = this.props; diff --git a/packages/fether-react/src/assets/sass/shared/_form.scss b/packages/fether-react/src/assets/sass/shared/_form.scss index d19f00444..fcce22fa7 100644 --- a/packages/fether-react/src/assets/sass/shared/_form.scss +++ b/packages/fether-react/src/assets/sass/shared/_form.scss @@ -137,6 +137,10 @@ input.form_field_amount[type='number'] { font-size: ms(6); } + &.-resize-font-medium { + font-size: ms(4); + } + &.-resize-font-small { font-size: ms(2); } From f8111493a9243eff28f86c91ccaabbd039fc015a Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Tue, 8 Jan 2019 00:03:52 +1100 Subject: [PATCH 7/7] review-fix: Revert duplicate handleSubmit method --- packages/fether-react/src/Send/TxForm/TxForm.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/fether-react/src/Send/TxForm/TxForm.js b/packages/fether-react/src/Send/TxForm/TxForm.js index e864ee188..d9db26edf 100644 --- a/packages/fether-react/src/Send/TxForm/TxForm.js +++ b/packages/fether-react/src/Send/TxForm/TxForm.js @@ -44,13 +44,6 @@ class Send extends Component { showDetails: false }; - handleSubmit = values => { - const { accountAddress, history, sendStore, token } = this.props; - - sendStore.setTx(values); - history.push(`/send/${token.address}/from/${accountAddress}/signer`); - }; - decorator = createDecorator({ field: /to|amount/, // when the value of these fields change... updates: {