LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore: handle overlapping text in price cell (#1988)

Browse Source 
* feat: filter assets to withdraw - add logic for filtering out zero balanced accounts

* chore: handle overlapping text in price cell - add title with value

* chore: handle overlapping text in price cell - add title with value

Co-authored-by: maciek <maciek@vegaprotocol.io>
This commit is contained in:
macqbat 2022-11-09 13:47:01 +01:00 committed by GitHub
parent 6bf5b42a79
commit 8d2c3ba4ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
libs/market-depth/src/lib/orderbook.tsx
View File

@ -595,7 +595,9 @@ export const Orderbook = ({
<div>{t('Bid vol')}</div> <div>{t('Bid vol')}</div>
<div>{t('Ask vol')}</div> <div>{t('Ask vol')}</div>
<div>{t('Price')}</div> <div>{t('Price')}</div>
<div className="pr-[2px]">{t('Cumulative vol')}</div> <div className="pr-[2px] whitespace-nowrap overflow-hidden text-ellipsis">
{t('Cumulative vol')}
</div>
</div> </div>
<div <div
className={`h-full overflow-auto relative ${styles['scroll']} pt-[26px] pb-[17px]`} className={`h-full overflow-auto relative ${styles['scroll']} pt-[26px] pb-[17px]`}
@ -637,7 +639,7 @@ export const Orderbook = ({
ref={footerElement} ref={footerElement}
> >
<div className="col-span-2"> <div className="col-span-2">
<label className="flex items-center"> <label className="flex items-center whitespace-nowrap overflow-hidden text-ellipsis">
<input <input
className="mr-1" className="mr-1"
type="checkbox" type="checkbox"
@ -661,7 +663,7 @@ export const Orderbook = ({
))} ))}
</select> </select>
</div> </div>
<div className="col-start-4"> <div className="col-start-4 whitespace-nowrap overflow-hidden text-ellipsis">
<button <button
type="button" type="button"
onClick={scrollToMidPrice} onClick={scrollToMidPrice}

11
libs/react-helpers/src/lib/grid/price-cell.spec.tsx
View File

@ -2,20 +2,21 @@ import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect'; import '@testing-library/jest-dom/extend-expect';
import * as React from 'react'; import * as React from 'react';
import { PriceFlashCell } from './price-flash-cell'; import { PriceCell } from './price-cell';
describe('<PriceFlashCell />', () => { describe('<PriceCell />', () => {
it('Displays formatted value', () => { it('Displays formatted value', () => {
render(<PriceFlashCell value={100} valueFormatted="100.00" />); render(<PriceCell value={100} valueFormatted="100.00" />);
expect(screen.getByTestId('price')).toHaveTextContent('100.00'); expect(screen.getByTestId('price')).toHaveTextContent('100.00');
expect(screen.getByTestId('price')).toHaveAttribute('title', '100.00');
}); });
it('Displays 0', () => { it('Displays 0', () => {
render(<PriceFlashCell value={0} valueFormatted="0.00" />); render(<PriceCell value={0} valueFormatted="0.00" />);
expect(screen.getByTestId('price')).toHaveTextContent('0.00'); expect(screen.getByTestId('price')).toHaveTextContent('0.00');
}); });
it('Displays - if value is not a number', () => { it('Displays - if value is not a number', () => {
render(<PriceFlashCell value={null} valueFormatted="" />); render(<PriceCell value={null} valueFormatted="" />);
expect(screen.getByTestId('price')).toHaveTextContent('-'); expect(screen.getByTestId('price')).toHaveTextContent('-');
}); });
}); });

3
libs/react-helpers/src/lib/grid/price-cell.tsx
View File

@ -20,8 +20,9 @@ export const PriceCell = React.memo(
: [`${value}`]; : [`${value}`];
return ( return (
<span <span
className="font-mono relative text-black dark:text-white" className="font-mono relative text-black dark:text-white whitespace-nowrap overflow-hidden text-ellipsis text-right rtl-dir"
data-testid={testId || 'price'} data-testid={testId || 'price'}
title={valueFormatted}
> >
{valueSplit[0]} {valueSplit[0]}
{valueSplit[1] ? decimalSeparator : null} {valueSplit[1] ? decimalSeparator : null}

3
libs/tailwindcss-config/src/vega-custom-classes.js
View File

@ -40,6 +40,9 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
'.color-scheme-dark': { '.color-scheme-dark': {
colorScheme: 'dark', colorScheme: 'dark',
}, },
'.rtl-dir': {
direction: 'rtl',
},
}); });
}); });