Skip to content
This repository has been archived by the owner on May 24, 2022. It is now read-only.

feat: Fixes #308. Change amount font size on Send page to fit in input field #321

Merged
merged 9 commits into from
Jan 7, 2019
Merged

feat: Fixes #308. Change amount font size on Send page to fit in input field #321

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
114af48
feat: Fixes #308. Change amount font size on Send page to fit in inpu…
ltfschoen Dec 24, 2018
9933a49
Merge branch 'master' into luke-308-change-amount-font-size
ltfschoen Jan 4, 2019
10e23f9
review-fix: Change CSS class depending on length of amount
ltfschoen Jan 5, 2019
2fc8315
refactor: Only pass the amount to the function
ltfschoen Jan 5, 2019
3b2e716
refactor: Use Modular Scale (ms) values instead of rem
ltfschoen Jan 5, 2019
b951c1c
feat: Add animation to changing font size
ltfschoen Jan 5, 2019
9b14067
feat: Add medium account length to soften the transition
ltfschoen Jan 5, 2019
cadbae7
merge latest from master and fix merge conflict
ltfschoen Jan 7, 2019
f811149
review-fix: Revert duplicate handleSubmit method
ltfschoen Jan 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion packages/fether-react/src/Send/TxForm/TxForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ import withAccount from '../../utils/withAccount.js';
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

Expand All @@ -39,6 +41,7 @@ class Send extends Component {
state = {
maxSelected: false
};

handleSubmit = values => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert. handleSubmit is already somewhere else in the class

const { accountAddress, history, sendStore, token } = this.props;

Expand All @@ -61,6 +64,19 @@ class Send extends Component {
}
});

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;
const gasBn = gas ? new BigNumber(gas) : new BigNumber(21000);
Expand Down Expand Up @@ -133,7 +149,11 @@ class Send extends Component {
<fieldset className='form_fields'>
<Field
autoFocus
className='form_field_amount'
className={`form_field_amount ${
!values.amount
? '-resize-font-default'
: this.changeAmountFontSize(values.amount)
}`}
formNoValidate
label='Amount'
name='amount'
Expand Down
15 changes: 14 additions & 1 deletion packages/fether-react/src/assets/sass/shared/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,12 +125,25 @@
}

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;
-webkit-transition: font-size 0.5s;
transition: font-size 0.5s;

&.-resize-font-default {
font-size: ms(6);
}

&.-resize-font-medium {
font-size: ms(4);
}

&.-resize-font-small {
font-size: ms(2);
}

&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
Expand Down