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

feat(#776): Resizable panes in trading app

Browse Source 
* feat: resizable panes in trading app

* chore: use tailwind theme for colors
This commit is contained in:
John Walley 2022-07-19 09:12:02 +01:00 committed by GitHub
parent ade209f896
commit 819c21d35c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 95 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
apps/trading/pages/markets/trade-grid.tsx
View File

@ -29,6 +29,8 @@ import {
import type { CandleClose } from '@vegaprotocol/types'; import type { CandleClose } from '@vegaprotocol/types';
import { AuctionTrigger } from '@vegaprotocol/types'; import { AuctionTrigger } from '@vegaprotocol/types';
import { MarketTradingMode } from '@vegaprotocol/types'; import { MarketTradingMode } from '@vegaprotocol/types';
import { Allotment, LayoutPriority } from 'allotment';
import 'allotment/dist/style.css';
const TradingViews = { const TradingViews = {
Candles: CandlesChartContainer, Candles: CandlesChartContainer,
@ -125,7 +127,7 @@ interface TradeGridProps {
export const TradeGrid = ({ market }: TradeGridProps) => { export const TradeGrid = ({ market }: TradeGridProps) => {
const wrapperClasses = classNames( const wrapperClasses = classNames(
'h-full max-h-full', 'h-full max-h-full',
'grid gap-x-8 gap-y-4 grid-cols-[1fr_325px_425px] grid-rows-[min-content_1fr_200px]', 'flex flex-col',
'bg-black-10 dark:bg-black-70', 'bg-black-10 dark:bg-black-70',
'text-ui' 'text-ui'
); );
@ -133,53 +135,77 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
return ( return (
<> <>
<div className={wrapperClasses}> <div className={wrapperClasses}>
<TradeMarketHeader <TradeMarketHeader market={market} />
market={market} <Allotment vertical={true}>
className="row-start-1 row-end-2 col-start-1 col-end-4" <Allotment.Pane>
/> <Allotment proportionalLayout={false} minSize={200}>
<TradeGridChild className="row-start-2 row-end-3 col-start-1 col-end-2"> <Allotment.Pane priority={LayoutPriority.High} minSize={200}>
<Tabs> <TradeGridChild className="h-full px-4">
<Tab id="candles" name={t('Candles')}> <Tabs>
<TradingViews.Candles marketId={market.id} /> <Tab id="candles" name={t('Candles')}>
</Tab> <TradingViews.Candles marketId={market.id} />
<Tab id="depth" name={t('Depth')}> </Tab>
<TradingViews.Depth marketId={market.id} /> <Tab id="depth" name={t('Depth')}>
</Tab> <TradingViews.Depth marketId={market.id} />
</Tabs> </Tab>
</TradeGridChild> </Tabs>
<TradeGridChild className="row-start-2 row-end-3 col-start-2 col-end-3"> </TradeGridChild>
<Tabs> </Allotment.Pane>
<Tab id="ticket" name={t('Ticket')}> <Allotment.Pane
<TradingViews.Ticket marketId={market.id} /> priority={LayoutPriority.Low}
</Tab> preferredSize={375}
<Tab id="info" name={t('Info')}> minSize={200}
<TradingViews.Info marketId={market.id} /> >
</Tab> <TradeGridChild className="h-full px-4">
</Tabs> <Tabs>
</TradeGridChild> <Tab id="ticket" name={t('Ticket')}>
<TradeGridChild className="row-start-2 row-end-3 col-start-3 col-end-4"> <TradingViews.Ticket marketId={market.id} />
<Tabs> </Tab>
<Tab id="orderbook" name={t('Orderbook')}> <Tab id="info" name={t('Info')}>
<TradingViews.Orderbook marketId={market.id} /> <TradingViews.Info marketId={market.id} />
</Tab> </Tab>
<Tab id="trades" name={t('Trades')}> </Tabs>
<TradingViews.Trades marketId={market.id} /> </TradeGridChild>
</Tab> </Allotment.Pane>
</Tabs> <Allotment.Pane
</TradeGridChild> priority={LayoutPriority.Low}
<TradeGridChild className="col-span-3"> preferredSize={460}
<Tabs> minSize={200}
<Tab id="positions" name={t('Positions')}> >
<TradingViews.Positions /> <TradeGridChild className="h-full px-4">
</Tab> <Tabs>
<Tab id="orders" name={t('Orders')}> <Tab id="orderbook" name={t('Orderbook')}>
<TradingViews.Orders /> <TradingViews.Orderbook marketId={market.id} />
</Tab> </Tab>
<Tab id="accounts" name={t('Collateral')}> <Tab id="trades" name={t('Trades')}>
<TradingViews.Collateral /> <TradingViews.Trades marketId={market.id} />
</Tab> </Tab>
</Tabs> </Tabs>
</TradeGridChild> </TradeGridChild>
</Allotment.Pane>
</Allotment>
</Allotment.Pane>
<Allotment.Pane
snap={true}
priority={LayoutPriority.Low}
preferredSize={200}
minSize={200}
>
<TradeGridChild className="h-full">
<Tabs>
<Tab id="positions" name={t('Positions')}>
<TradingViews.Positions />
</Tab>
<Tab id="orders" name={t('Orders')}>
<TradingViews.Orders />
</Tab>
<Tab id="accounts" name={t('Collateral')}>
<TradingViews.Collateral />
</Tab>
</Tabs>
</TradeGridChild>
</Allotment.Pane>
</Allotment>
</div> </div>
</> </>
); );

8
apps/trading/pages/styles.css
View File

@ -7,3 +7,11 @@ body,
#__next { #__next {
@apply h-full; @apply h-full;
} }
html > body {
--focus-border: theme('colors.vega.pink');
}
html.dark > body {
--focus-border: theme('colors.vega.yellow');
}

1
package.json
View File

@ -37,6 +37,7 @@
"@web3-react/walletconnect": "^8.0.23-beta.0", "@web3-react/walletconnect": "^8.0.23-beta.0",
"ag-grid-community": "^27.0.1", "ag-grid-community": "^27.0.1",
"ag-grid-react": "^27.0.1", "ag-grid-react": "^27.0.1",
"allotment": "^1.14.5",
"alpha-lyrae": "vegaprotocol/alpha-lyrae", "alpha-lyrae": "vegaprotocol/alpha-lyrae",
"apollo": "^2.33.9", "apollo": "^2.33.9",
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",

12
yarn.lock
View File

@ -7448,6 +7448,18 @@ allotment@1.14.2:
lodash.isequal "^4.5.0" lodash.isequal "^4.5.0"
use-resize-observer "^9.0.0" use-resize-observer "^9.0.0"
allotment@^1.14.5:
version "1.14.5"
resolved "https://registry.yarnpkg.com/allotment/-/allotment-1.14.5.tgz#c952f5a7d43ac17649f27cb699e543d85cb6169a"
integrity sha512-o/OsKW8HQPDkUoGpzRIULzAy1R3UmbkUw8oBGyJo91YtB7QhiRtUOU5kEUsJX/M8lpnHtJFFo3DWTgH6HXB5TA==
dependencies:
classnames "^2.3.0"
eventemitter3 "^4.0.0"
lodash.clamp "^4.0.0"
lodash.debounce "^4.0.0"
lodash.isequal "^4.5.0"
use-resize-observer "^9.0.0"
alpha-lyrae@vegaprotocol/alpha-lyrae: alpha-lyrae@vegaprotocol/alpha-lyrae:
version "0.0.0" version "0.0.0"
resolved "https://codeload.github.com/vegaprotocol/alpha-lyrae/tar.gz/952bbedd040080c51fb9fa15b52b0093be4d3c26" resolved "https://codeload.github.com/vegaprotocol/alpha-lyrae/tar.gz/952bbedd040080c51fb9fa15b52b0093be4d3c26"