Merge pull request #1491 from KomodoPlatform/fix_orderbook_row_alignment

Change orderbook text alignment
KomodoPlatform · Dec 14, 2021 · e3ec3cf · e3ec3cf
2 parents 90569a4 + 6477b63
commit e3ec3cf
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 112 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -4,3 +4,6 @@
 [submodule "ci_tools_atomic_dex/vcpkg-custom-ports"]
 	path = ci_tools_atomic_dex/vcpkg-custom-ports
 	url = https://github.com/KomodoPlatform/vcpkg-custom-ports
+[submodule "atomic_defi_design/imports/bignumberjs/bignumber.js"]
+	path = atomic_defi_design/imports/bignumberjs/bignumber.js
+	url = https://github.com/KomodoPlatform/bignumber.js.git
diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Header.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Header.qml
@@ -16,13 +16,14 @@ Item
         anchors.fill: parent
         DefaultText
         {
-            Layout.preferredWidth: (parent.width / 100) * 30
+            Layout.preferredWidth: (parent.width / 100) * 33
             text: is_ask ? qsTr("Price") + " (" + atomic_qt_utilities.retrieve_main_ticker(right_ticker) + ")" :
                            qsTr("Price") + " (" + atomic_qt_utilities.retrieve_main_ticker(right_ticker) + ")"
             font.family: DexTypo.fontFamily
             font.pixelSize: 12
             font.bold: true
             font.weight: Font.Black
+            horizontalAlignment: Text.AlignRight
         }
         DefaultText
         {
@@ -32,7 +33,7 @@ Item
             font.pixelSize: 12
             font.bold: true
             font.weight: Font.Black
-
+            horizontalAlignment: Text.AlignRight
         }
         DefaultText
         {
@@ -42,6 +43,7 @@ Item
             font.pixelSize: 12
             font.bold: true
             font.weight: Font.Black
+            horizontalAlignment: Text.AlignRight
         }
     }
 }
diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml
@@ -7,106 +7,15 @@ import Qaterial 1.0 as Qaterial
 import "../../../Components"
 import App 1.0
 import Dex.Themes 1.0 as Dex
+import bignumberjs 1.0
 
 Item
 {
     property bool isAsk
 
-    AnimatedRectangle
-    {
-        visible: mouse_are.containsMouse
-        width: parent.width
-        height: parent.height
-        color: Dex.CurrentTheme.foregroundColor
-        opacity: 0.1
-    }
-
-    Rectangle
-    {
-        anchors.verticalCenter: parent.verticalCenter
-        width: 6
-        height: 6
-        radius: width / 2
-        visible: is_mine
-        color: isAsk ? Dex.CurrentTheme.noColor : Dex.CurrentTheme.okColor
-    }
-
-    // Progress bar
-    Rectangle
-    {
-        anchors.bottom: parent.bottom
-        height: 2
-        radius: 3
-        color: Dex.CurrentTheme.backgroundColor
-        width: parent.width
-
-        Rectangle
-        {
-            anchors.top: parent.top
-            height: 2
-            radius: 3
-            color: isAsk ? Dex.CurrentTheme.noColor : Dex.CurrentTheme.okColor
-            width: 0
-            Component.onCompleted: width = ((depth * 100) * (parent.parent.width + 40)) / 100
-            opacity: 0.8
-            Behavior on width { NumberAnimation { duration: 1000 } }
-        }
-    }
-
-    RowLayout
-    {
-        id: row
-        anchors.fill: parent
-        anchors.horizontalCenter: parent.horizontalCenter
-        onWidthChanged: progress.width = ((depth * 100) * (width + 40)) / 100
-
-        Qaterial.ColorIcon
-        {
-            visible: mouse_are.containsMouse && !enough_funds_to_pay_min_volume
-            source: Qaterial.Icons.alert
-            Layout.alignment: Qt.AlignVCenter
-            iconSize: 12
-            color: Qaterial.Colors.amber
-        }
-
-        // Price
-        DefaultText
-        {
-            Layout.preferredWidth: (parent.width / 100) * 30
-            text: parseFloat(General.formatDouble(price, General.amountPrecision, true)).toFixed(8)
-            font.family: DexTypo.fontFamily
-            font.pixelSize: 12
-            color: isAsk ? Dex.CurrentTheme.noColor : Dex.CurrentTheme.okColor
-            elide: Text.ElideRight
-        }
-
-        // Quantity
-        DefaultText
-        {
-            Layout.preferredWidth: (parent.width / 100) * 30
-            text: parseFloat(quantity).toFixed(6)
-            font.family: DexTypo.fontFamily
-            font.pixelSize: 12
-            elide: Text.ElideRight
-        }
-
-        // Total
-        DefaultText
-        {
-            Layout.preferredWidth: (parent.width / 100) * 30
-            rightPadding: (is_mine) && (mouse_are.containsMouse || cancel_button.containsMouse) ? 30 : 0
-            font.family: DexTypo.fontFamily
-            font.pixelSize: 12
-            text: parseFloat(total).toFixed(8)
-            elide: Text.ElideRight
-
-            Behavior on rightPadding { NumberAnimation { duration: 150 } }
-        }
-    }
-
     DefaultTooltip
     {
-        visible: mouse_are.containsMouse && !enough_funds_to_pay_min_volume
+        visible: warningNoticeMouseArea.containsMouse && !enough_funds_to_pay_min_volume
         width: 300
         contentItem: DefaultText
         {
@@ -126,35 +35,146 @@ Item
     }
 
 
-    DefaultMouseArea {
+    DefaultMouseArea
+    {
         id: mouse_are
         anchors.fill: parent
         hoverEnabled: true
-        onClicked: {
+        onClicked:
+        {
             if(is_mine) return
 
-            if(!enough_funds_to_pay_min_volume ){
-
-            }
-            else {
+            if(!enough_funds_to_pay_min_volume);
+            else
+            {
                 exchange_trade.orderSelected = true
                 orderList.currentIndex = index
-                if(isAsk) {
+                if (isAsk)
+                {
                     selectOrder(true, coin, price, quantity, price_denom, price_numer, quantity_denom, quantity_numer, min_volume, base_min_volume, base_max_volume, rel_min_volume, rel_max_volume, base_max_volume_denom, base_max_volume_numer, uuid)
-                }else {
+                }
+                else
+                {
                     selectOrder(false, coin, price, quantity, price_denom, price_numer, quantity_denom, quantity_numer, min_volume, base_min_volume, base_max_volume, rel_min_volume, rel_max_volume, base_max_volume_denom, base_max_volume_numer, uuid)
                 }
-                if(order_form.visible === false) {
+
+                if (order_form.visible === false)
+                {
                     order_form.visible = true
                 }
-                if(order_form.hidden === true) {
+
+                if (order_form.hidden === true)
+                {
                     order_form.hidden = false
-                    if(order_form.contentVisible === false) {
+                    if (order_form.contentVisible === false)
+                    {
                         order_form.contentVisible = true
                     }
                 }
             }
         }
+
+        AnimatedRectangle
+        {
+            visible: mouse_are.containsMouse
+            width: parent.width
+            height: parent.height
+            color: Dex.CurrentTheme.foregroundColor
+            opacity: 0.1
+        }
+
+        Rectangle
+        {
+            anchors.verticalCenter: parent.verticalCenter
+            width: 6
+            height: 6
+            radius: width / 2
+            visible: is_mine
+            color: isAsk ? Dex.CurrentTheme.noColor : Dex.CurrentTheme.okColor
+        }
+
+        // Progress bar
+        Rectangle
+        {
+            anchors.bottom: parent.bottom
+            height: 2
+            radius: 3
+            color: Dex.CurrentTheme.backgroundColor
+            width: parent.width
+
+            Rectangle
+            {
+                anchors.top: parent.top
+                height: 2
+                radius: 3
+                color: isAsk ? Dex.CurrentTheme.noColor : Dex.CurrentTheme.okColor
+                width: 0
+                Component.onCompleted: width = ((depth * 100) * (parent.parent.width + 40)) / 100
+                opacity: 0.8
+                Behavior on width { NumberAnimation { duration: 1000 } }
+            }
+        }
+
+        RowLayout
+        {
+            id: row
+            anchors.fill: parent
+            anchors.horizontalCenter: parent.horizontalCenter
+            onWidthChanged: progress.width = ((depth * 100) * (width + 40)) / 100
+
+            Qaterial.ColorIcon
+            {
+                visible: mouse_are.containsMouse && !enough_funds_to_pay_min_volume
+                source: Qaterial.Icons.alert
+                Layout.alignment: Qt.AlignVCenter
+                iconSize: 12
+                color: Qaterial.Colors.amber
+
+                DefaultMouseArea
+                {
+                    id: warningNoticeMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                }
+            }
+
+            // Price
+            DefaultText
+            {
+                Layout.preferredWidth: (parent.width / 100) * 33
+                text: { new BigNumber(price).toFixed(8) }
+                font.family: DexTypo.fontFamily
+                font.pixelSize: 12
+                color: isAsk ? Dex.CurrentTheme.noColor : Dex.CurrentTheme.okColor
+                elide: Text.ElideRight
+                horizontalAlignment: Text.AlignRight
+            }
+
+            // Quantity
+            DefaultText
+            {
+                Layout.preferredWidth: (parent.width / 100) * 30
+                text: { new BigNumber(quantity).toFixed(6) }
+                font.family: DexTypo.fontFamily
+                font.pixelSize: 12
+                elide: Text.ElideRight
+                horizontalAlignment: Text.AlignRight
+            }
+
+            // Total
+            DefaultText
+            {
+                Layout.preferredWidth: (parent.width / 100) * 30
+                rightPadding: (is_mine) && (mouse_are.containsMouse || cancel_button.containsMouse) ? 30 : 0
+                font.family: DexTypo.fontFamily
+                font.pixelSize: 12
+                text: { new BigNumber(total).toFixed(6) }
+                elide: Text.ElideRight
+                horizontalAlignment: Text.AlignRight
+
+                Behavior on rightPadding { NumberAnimation { duration: 150 } }
+            }
+        }
     }
 
     Qaterial.ColorIcon {
@@ -195,7 +215,7 @@ Item
     AnimatedRectangle
     {
         visible: !enough_funds_to_pay_min_volume && mouse_are.containsMouse
-        color: DexTheme.dexBoxBackgroundColor
+        color: Dex.CurrentTheme.backgroundColor
         anchors.fill: parent
         opacity: .3
     }

diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml
@@ -119,8 +119,8 @@ ColumnLayout {
 
         DexTradeBox {
             id: left_section
-            minimumWidth: 550
-            defaultWidth: 560
+            minimumWidth: 500
+            defaultWidth: 520
             expandedHort: true
             hideHeader: true
             SplitView.fillHeight: true
@@ -359,9 +359,9 @@ ColumnLayout {
         Item {
             id: _book_and_best
             property bool showing: (_best_order_box.visible || _orderbook_box.visible)
-            SplitView.minimumWidth: showing? 320 : 0
-            SplitView.maximumWidth: showing? 330 : 0
-            SplitView.preferredWidth: showing? 280 : 0
+            SplitView.minimumWidth: showing ? 390 : 0
+            SplitView.maximumWidth: showing ? 430 : 0
+            SplitView.preferredWidth: showing ? 390 : 0
             clip: true
             DexBoxManager {
                 anchors.fill: parent

diff --git a/atomic_defi_design/imports/bignumberjs/bignumber.js b/atomic_defi_design/imports/bignumberjs/bignumber.js
diff --git a/atomic_defi_design/imports/bignumberjs/qmldir b/atomic_defi_design/imports/bignumberjs/qmldir
@@ -0,0 +1,3 @@
+module bignumberjs
+
+bignumberjs 1.0 bignumber.js/bignumber.js
diff --git a/atomic_defi_design/qml.qrc b/atomic_defi_design/qml.qrc
@@ -605,5 +605,7 @@
         <file>Dex/main.qml</file>
         <file>qtquickcontrols2.conf</file>
         <file>Dex/Components/PopupManager.qml</file>
+        <file>imports/bignumberjs/qmldir</file>
+        <file>imports/bignumberjs/bignumber.js/bignumber.js</file>
     </qresource>
 </RCC>