mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-26 21:15:15 +00:00
Add responsive layout for Trading page
This commit is contained in:
parent
bd76da58b7
commit
74eaa6f49c
|
@ -19,6 +19,7 @@ export enum DashboardLayout {
|
|||
export enum LayoutGetters {
|
||||
getDashboardLayoutSm = 'getDashboardLayoutSm',
|
||||
getDashboardLayout = 'getDashboardLayout',
|
||||
getTradingLayoutSm = 'getTradingLayoutSm',
|
||||
getTradingLayout = 'getTradingLayout',
|
||||
getLayoutLocked = 'getLayoutLocked',
|
||||
}
|
||||
|
@ -45,6 +46,15 @@ const DEFAULT_TRADING_LAYOUT: GridItemData[] = [
|
|||
{ i: TradeLayout.tradeHistory, x: 3, y: 25, w: 9, h: 10 },
|
||||
];
|
||||
|
||||
// Currently only multiPane is visible
|
||||
const DEFAULT_TRADING_LAYOUT_SM: GridItemData[] = [
|
||||
{ i: TradeLayout.multiPane, x: 0, y: 0, w: 12, h: 10 },
|
||||
{ i: TradeLayout.chartView, x: 0, y: 10, w: 12, h: 0 },
|
||||
{ i: TradeLayout.tradeDetail, x: 0, y: 19, w: 12, h: 0 },
|
||||
{ i: TradeLayout.openTrades, x: 0, y: 8, w: 12, h: 0 },
|
||||
{ i: TradeLayout.tradeHistory, x: 0, y: 25, w: 12, h: 0 },
|
||||
];
|
||||
|
||||
const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [
|
||||
{ i: DashboardLayout.botComparison, x: 0, y: 0, w: 8, h: 6 } /* Bot Comparison */,
|
||||
{ i: DashboardLayout.dailyChart, x: 8, y: 0, w: 4, h: 6 },
|
||||
|
@ -110,6 +120,9 @@ export default {
|
|||
[LayoutGetters.getDashboardLayout](state) {
|
||||
return state.dashboardLayout;
|
||||
},
|
||||
[LayoutGetters.getTradingLayoutSm]() {
|
||||
return [...DEFAULT_TRADING_LAYOUT_SM];
|
||||
},
|
||||
[LayoutGetters.getTradingLayout](state) {
|
||||
return state.tradingLayout;
|
||||
},
|
||||
|
|
|
@ -5,11 +5,15 @@
|
|||
:layout="gridLayout"
|
||||
:vertical-compact="false"
|
||||
:margin="[5, 5]"
|
||||
:is-resizable="!getLayoutLocked"
|
||||
:is-draggable="!getLayoutLocked"
|
||||
:responsive-layouts="responsiveGridLayouts"
|
||||
:is-resizable="!isLayoutLocked"
|
||||
:is-draggable="!isLayoutLocked"
|
||||
:responsive="true"
|
||||
@layout-updated="layoutUpdatedEvent"
|
||||
@breakpoint-changed="breakpointChanged"
|
||||
>
|
||||
<GridItem
|
||||
v-if="gridLayoutMultiPane.h != 0"
|
||||
:i="gridLayoutMultiPane.i"
|
||||
:x="gridLayoutMultiPane.x"
|
||||
:y="gridLayoutMultiPane.y"
|
||||
|
@ -48,6 +52,7 @@
|
|||
</DraggableContainer>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
v-if="gridLayoutOpenTrades.h != 0"
|
||||
:i="gridLayoutOpenTrades.i"
|
||||
:x="gridLayoutOpenTrades.x"
|
||||
:y="gridLayoutOpenTrades.y"
|
||||
|
@ -66,6 +71,7 @@
|
|||
</DraggableContainer>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
v-if="gridLayoutTradeHistory.h != 0"
|
||||
:i="gridLayoutTradeHistory.i"
|
||||
:x="gridLayoutTradeHistory.x"
|
||||
:y="gridLayoutTradeHistory.y"
|
||||
|
@ -84,7 +90,7 @@
|
|||
</DraggableContainer>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
v-if="detailTradeId"
|
||||
v-if="detailTradeId && gridLayoutTradeDetail.h != 0"
|
||||
:i="gridLayoutTradeDetail.i"
|
||||
:x="gridLayoutTradeDetail.x"
|
||||
:y="gridLayoutTradeDetail.y"
|
||||
|
@ -98,6 +104,7 @@
|
|||
</DraggableContainer>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
v-if="gridLayoutTradeDetail.h != 0"
|
||||
:i="gridLayoutChartView.i"
|
||||
:x="gridLayoutChartView.x"
|
||||
:y="gridLayoutChartView.y"
|
||||
|
@ -182,12 +189,33 @@ export default class Trading extends Vue {
|
|||
|
||||
@layoutNs.Getter [LayoutGetters.getTradingLayout]!: GridItemData[];
|
||||
|
||||
@layoutNs.Getter [LayoutGetters.getTradingLayoutSm]!: GridItemData[];
|
||||
|
||||
@layoutNs.Action [LayoutActions.setTradingLayout];
|
||||
|
||||
@layoutNs.Getter [LayoutGetters.getLayoutLocked]: boolean;
|
||||
|
||||
currentBreakpoint = '';
|
||||
|
||||
localGridLayout: GridItemData[] = [];
|
||||
|
||||
get isLayoutLocked() {
|
||||
return this.getLayoutLocked || !this.isResizableLayout;
|
||||
}
|
||||
|
||||
get isResizableLayout() {
|
||||
return ['', 'md', 'lg', 'xl'].includes(this.currentBreakpoint);
|
||||
}
|
||||
|
||||
get gridLayout(): GridItemData[] {
|
||||
return this.getTradingLayout;
|
||||
if (this.isResizableLayout) {
|
||||
return this.getTradingLayout;
|
||||
}
|
||||
return this.localGridLayout;
|
||||
}
|
||||
|
||||
set gridLayout(newLayout) {
|
||||
// Dummy setter to make gridLayout happy. Updates happen through layoutUpdated.
|
||||
}
|
||||
|
||||
get gridLayoutMultiPane(): GridItemData {
|
||||
|
@ -210,8 +238,25 @@ export default class Trading extends Vue {
|
|||
return findGridLayout(this.gridLayout, TradeLayout.chartView);
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.localGridLayout = [...this.getTradingLayoutSm];
|
||||
}
|
||||
|
||||
layoutUpdatedEvent(newLayout) {
|
||||
this.setTradingLayout(newLayout);
|
||||
if (this.isResizableLayout) {
|
||||
this.setTradingLayout(newLayout);
|
||||
}
|
||||
}
|
||||
|
||||
get responsiveGridLayouts() {
|
||||
return {
|
||||
sm: this[LayoutGetters.getTradingLayoutSm],
|
||||
};
|
||||
}
|
||||
|
||||
breakpointChanged(newBreakpoint) {
|
||||
// console.log('breakpoint:', newBreakpoint);
|
||||
this.currentBreakpoint = newBreakpoint;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue
Block a user