tabbed orderbook / bestorders

KomodoPlatform · Mar 28, 2024 · 4ae90fe · 4ae90fe
1 parent 66566ee
commit 4ae90fe
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 56 deletions.
diff --git a/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/Main.qml b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/Main.qml
@@ -10,17 +10,11 @@ import "../../../Components"
 import "../../Trade"
 import "../../ProView"
 
-Widget
+ColumnLayout
 {
-    width: 450
+    Layout.preferredWidth: 450
     property alias currentIndex: tabView.currentIndex
 
-    title: qsTr("Trading Information")
-
-    background: null
-    margins: 0
-
-
     Qaterial.LatoTabBar
     {
         id: tabView

diff --git a/atomic_defi_design/Dex/Exchange/Trade/Market.qml b/atomic_defi_design/Dex/Exchange/Trade/Market.qml
@@ -0,0 +1,89 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+import Qaterial 1.0 as Qaterial
+
+import Dex.Themes 1.0 as Dex
+import "../../Components"
+import "../../Constants"
+
+// OrderBook / Component import
+import "OrderBook/" as OrderBook
+
+// Best Order
+import "BestOrder/" as BestOrder
+
+
+ColumnLayout
+{
+    Layout.minimumWidth: 350
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+    Layout.alignment: Qt.AlignTop
+    property alias currentIndex: marketTabView.currentIndex
+
+    Qaterial.LatoTabBar
+    {
+        id: marketTabView
+        property int orderbook: 0
+        property int best_orders: 1
+
+        background: null
+        Layout.leftMargin: 6
+
+        Qaterial.LatoTabButton
+        {
+            text: qsTr("Orderbook")
+            font.pixelSize: 14
+            textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2
+            textSecondaryColor: Dex.CurrentTheme.foregroundColor2
+            indicatorColor: Dex.CurrentTheme.foregroundColor
+        }
+        Qaterial.LatoTabButton
+        {
+            text: qsTr("Best Orders")
+            font.pixelSize: 14
+            textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2
+            textSecondaryColor: Dex.CurrentTheme.foregroundColor2
+            indicatorColor: Dex.CurrentTheme.foregroundColor
+        }
+    }
+
+    Rectangle
+    {
+        Layout.fillHeight: true
+        color: Dex.CurrentTheme.floatingBackgroundColor
+        radius: 10
+        Layout.preferredWidth: 350
+
+        Qaterial.SwipeView
+        {
+            id: marketSwipeView
+            clip: true
+            interactive: false
+            currentIndex: marketTabView.currentIndex
+            anchors.fill: parent
+
+            onCurrentIndexChanged:
+            {
+                marketSwipeView.currentItem.update();
+            }
+
+            OrderBook.Vertical
+            {
+                id: orderBook
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+            }
+
+            // Best Orders
+            BestOrder.List
+            {
+                id: bestOrders
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml
@@ -42,8 +42,7 @@ RowLayout
 
     property alias tickerSelectors: selectors
     property alias trInfo: tradingInfo
-    property alias orderBook: orderBook
-    property alias bestOrders: bestOrders
+    property alias marketsOrderBook: marketsOrderBook
     property alias placeOrderForm: placeOrderForm
 
     function selectOrder(
@@ -112,20 +111,15 @@ RowLayout
     ColumnLayout
     {
         Layout.alignment: Qt.AlignTop
-
         Layout.minimumWidth: selectors.visible || tradingInfo.visible ? 450 : -1
         Layout.maximumWidth: (!orderBook.visible && !bestOrders.visible) || (!placeOrderForm.visible) ? -1 : 450
-        Layout.fillWidth: true
-
         Layout.fillHeight: true
-
         spacing: 10
 
         // Ticker selectors.
         TickerSelectors
         {
             id: selectors
-
             Layout.fillWidth: true
             Layout.preferredHeight: 70
         }
@@ -134,47 +128,20 @@ RowLayout
         TradingInfo.Main
         {
             id: tradingInfo
-
-            Layout.fillWidth: true
+            Layout.maximumWidth: 450
             Layout.fillHeight: true
-
-            resizable: false
         }
     }
 
-    WidgetContainer
+    // Best Orders & Order Book
+    Market
     {
-        property real _orderBookHeightRatio: 0.65
-        property real _bestOrdersHeightRatio: 0.35
-
-        Layout.minimumWidth: orderBook.visible || bestOrders.visible ? 350 : -1
+        id: marketsOrderBook
+        Layout.maximumWidth: 350
         Layout.fillWidth: true
         Layout.fillHeight: true
         Layout.alignment: Qt.AlignTop
         spacing: 4
-
-        onHeightChanged:
-        {
-            orderBook.height = getHeight(_orderBookHeightRatio);
-            bestOrders.height = getHeight(_bestOrdersHeightRatio);
-        }
-
-        OrderBook.Vertical
-        {
-            id: orderBook
-
-            width: parent.width
-            minHeight: 320
-        }
-
-        // Best Orders
-        BestOrder.List
-        {
-            id: bestOrders
-
-            width: parent.width
-            minHeight: 140
-        }
     }
 
     // Place order form.

diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml
@@ -172,8 +172,7 @@ Item
 
             proViewTickerSelectors: proView.tickerSelectors
             proViewTrInfo: proView.trInfo
-            proViewOrderBook: proView.orderBook
-            proViewBestOrders: proView.bestOrders
+            proViewMarketsOrderBook: proView.marketsOrderBook
             proViewPlaceOrderForm: proView.placeOrderForm
         }
 

diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml b/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml
@@ -21,8 +21,7 @@ Item
     // property var proViewChart
     property var proViewTickerSelectors
     property var proViewTrInfo
-    property var proViewOrderBook
-    property var proViewBestOrders
+    property var proViewMarketsOrderBook
     property var proViewPlaceOrderForm
 
     Item
@@ -131,11 +130,7 @@ Item
 
                     HorizontalLine { width: parent.width - 20; anchors.horizontalCenter: parent.horizontalCenter; opacity: .4 }
 
-                    CheckEye { text: qsTr("Order Book"); target: proViewOrderBook }
-
-                    HorizontalLine { width: parent.width - 20; anchors.horizontalCenter: parent.horizontalCenter; opacity: .4 }
-
-                    CheckEye { text: qsTr("Best Orders"); target: proViewBestOrders }
+                    CheckEye { text: qsTr("Markets"); target: proViewMarketsOrderBook }
 
                     HorizontalLine { width: parent.width - 20; anchors.horizontalCenter: parent.horizontalCenter; opacity: .4 }