LaconicNetwork/vega-frontend-monorepo
3
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 { AuctionTrigger } from '@vegaprotocol/types';
import { MarketTradingMode } from '@vegaprotocol/types';
import { Allotment, LayoutPriority } from 'allotment';
import 'allotment/dist/style.css';
const TradingViews = {
Candles: CandlesChartContainer,
@ -125,7 +127,7 @@ interface TradeGridProps {
export const TradeGrid = ({ market }: TradeGridProps) => {
const wrapperClasses = classNames(
'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',
'text-ui'
);
@ -133,53 +135,77 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
return (
<>
<div className={wrapperClasses}>
<TradeMarketHeader
market={market}
className="row-start-1 row-end-2 col-start-1 col-end-4"
/>
<TradeGridChild className="row-start-2 row-end-3 col-start-1 col-end-2">
<Tabs>
<Tab id="candles" name={t('Candles')}>
<TradingViews.Candles marketId={market.id} />
</Tab>
<Tab id="depth" name={t('Depth')}>
<TradingViews.Depth marketId={market.id} />
</Tab>
</Tabs>
</TradeGridChild>
<TradeGridChild className="row-start-2 row-end-3 col-start-2 col-end-3">
<Tabs>
<Tab id="ticket" name={t('Ticket')}>
<TradingViews.Ticket marketId={market.id} />
</Tab>
<Tab id="info" name={t('Info')}>
<TradingViews.Info marketId={market.id} />
</Tab>
</Tabs>
</TradeGridChild>
<TradeGridChild className="row-start-2 row-end-3 col-start-3 col-end-4">
<Tabs>
<Tab id="orderbook" name={t('Orderbook')}>
<TradingViews.Orderbook marketId={market.id} />
</Tab>
<Tab id="trades" name={t('Trades')}>
<TradingViews.Trades marketId={market.id} />
</Tab>
</Tabs>
</TradeGridChild>
<TradeGridChild className="col-span-3">
<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>
<TradeMarketHeader market={market} />
<Allotment vertical={true}>
<Allotment.Pane>
<Allotment proportionalLayout={false} minSize={200}>
<Allotment.Pane priority={LayoutPriority.High} minSize={200}>
<TradeGridChild className="h-full px-4">
<Tabs>
<Tab id="candles" name={t('Candles')}>
<TradingViews.Candles marketId={market.id} />
</Tab>
<Tab id="depth" name={t('Depth')}>
<TradingViews.Depth marketId={market.id} />
</Tab>
</Tabs>
</TradeGridChild>
</Allotment.Pane>
<Allotment.Pane
priority={LayoutPriority.Low}
preferredSize={375}
minSize={200}
>
<TradeGridChild className="h-full px-4">
<Tabs>
<Tab id="ticket" name={t('Ticket')}>
<TradingViews.Ticket marketId={market.id} />
</Tab>
<Tab id="info" name={t('Info')}>
<TradingViews.Info marketId={market.id} />
</Tab>
</Tabs>
</TradeGridChild>
</Allotment.Pane>
<Allotment.Pane
priority={LayoutPriority.Low}
preferredSize={460}
minSize={200}
>
<TradeGridChild className="h-full px-4">
<Tabs>
<Tab id="orderbook" name={t('Orderbook')}>
<TradingViews.Orderbook marketId={market.id} />
</Tab>
<Tab id="trades" name={t('Trades')}>
<TradingViews.Trades marketId={market.id} />
</Tab>
</Tabs>
</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>
</>
);

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

@ -7,3 +7,11 @@ body,
#__next {
@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",
"ag-grid-community": "^27.0.1",
"ag-grid-react": "^27.0.1",
"allotment": "^1.14.5",
"alpha-lyrae": "vegaprotocol/alpha-lyrae",
"apollo": "^2.33.9",
"autoprefixer": "^10.4.2",

12
yarn.lock
View File

@ -7448,6 +7448,18 @@ allotment@1.14.2:
lodash.isequal "^4.5.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:
version "0.0.0"
resolved "https://codeload.github.com/vegaprotocol/alpha-lyrae/tar.gz/952bbedd040080c51fb9fa15b52b0093be4d3c26"