neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Balance unit alignment (#3406)

Browse Source 
* Balance unit alignment

* Small formatting updates
This commit is contained in:
Jaco Greeff 2020-08-12 16:14:24 +02:00 committed by GitHub
parent 907fc91b10
commit b47bbab428
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/react-components/src/InputBalance.tsx
View File

@ -105,9 +105,20 @@ export default React.memo(styled(InputBalance)`
.ui.action.input.ui--Input > .buttons {
align-items: stretch;
.ui.disabled.button.compact.floating.selection.dropdown.ui--SiDropdown {
border-style: solid;
opacity: 1 !important;
.ui--SiDropdown.ui.button.compact.floating.selection.dropdown {
&.disabled {
border-style: solid;
opacity: 1 !important;
}
> div.text:first-child {
font-size: 0.9em;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0.5rem;
width: 3rem;
}
}
}
`);

11
packages/react-query/src/FormatBalance.tsx
View File

@ -28,16 +28,17 @@ const K_LENGTH = 3 + 1;
function format (value: Compact<any> | BN | string, currency: string | null, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
const [prefix, postfix] = formatBalance(value, { forceUnit: '-', withSi: false }).split('.');
const isShort = _isShort || (withSi && prefix.length >= K_LENGTH);
const unitPost = currency ? <span className='ui--FormatBalance-unit'> {currency}</span> : '';
if (prefix.length > M_LENGTH) {
const [major, rest] = formatBalance(value, { withUnit: !!currency }).split('.');
const [major, rest] = formatBalance(value, { withUnit: false }).split('.');
const minor = rest.substr(0, 3);
const unit = rest.substr(3);
return <>{major}.<span className='ui--FormatBalance-postfix'>{minor}</span>{unit}{labelPost || ''}</>;
return <>{major}.<span className='ui--FormatBalance-postfix'>{minor}</span>{unit}{unitPost}{labelPost || ''}</>;
}
return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && (<><span className='ui--FormatBalance-postfix'>{`000${postfix || ''}`.slice(-3)}</span></>)}{`${currency ? ` ${currency}` : ''}${labelPost || ''}`}</>;
return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && (<><span className='ui--FormatBalance-postfix'>{`000${postfix || ''}`.slice(-3)}</span></>)}{unitPost}{labelPost || ''}</>;
}
function FormatBalance ({ children, className = '', isShort, label, labelPost, value, withCurrency = true, withSi }: Props): React.ReactElement<Props> {
@ -74,6 +75,10 @@ export default React.memo(styled(FormatBalance)`
vertical-align: baseline;
}
.ui--FormatBalance-unit {
font-size: 0.9em;
}
.ui--FormatBalance-value {
text-align: right;