lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-11 02:33:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add responsive layout for Trading page

Browse Source
This commit is contained in:
Matthias 2021-12-26 16:27:30 +01:00
parent bd76da58b7
commit 74eaa6f49c
2 changed files with 63 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/store/modules/layout.ts
View File

@ -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;
},

55
src/views/Trading.vue
View File

@ -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>