Merge pull request #1561 from KomodoPlatform/dex_new_design

Implement new dex view design

atomic_defi_design/Dex/Components/CheckEye.qml

@@ -0,0 +1,55 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.12
+
+import Qaterial 1.0 as Qaterial
+
+import App 1.0
+import Dex.Themes 1.0 as Dex
+
+Item
+{
+    id: control
+
+    property alias  text: _label.text
+    property alias  iconSource: _icon.source
+    property var    target
+
+    width: parent.width
+    height: row.height
+
+    RowLayout
+    {
+        id: row
+        width: parent.width - 20
+        spacing: 10
+
+        Qaterial.ColorIcon
+        {
+            id: _icon
+            Layout.alignment: Qt.AlignVCenter
+            source: target.visible ? Qaterial.Icons.eyeOutline : Qaterial.Icons.eyeOffOutline
+            color: target.visible ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.buttonTextDisabledColor
+            iconSize: 17
+        }
+
+        DefaultText
+        {
+            id: _label
+            font.pixelSize: 15
+            text: ""
+            color: target.visible ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.buttonTextDisabledColor
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+        }
+    }
+
+    DefaultMouseArea
+    {
+        anchors.fill: parent
+        onClicked:
+        {
+            if (target.visible) target.visible = false
+            else target.visible = true
+        }
+    }
+}

atomic_defi_design/Dex/Components/DexComboBox.qml

@@ -48,8 +48,11 @@ ComboBox
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
             anchors.leftMargin: 13
+            width: parent.width - anchors.leftMargin
+
             font: DexTypo.subtitle2
             text_value: control.mainLineText
+            elide: Text.ElideRight
         }
     }
 
@@ -119,10 +122,12 @@ ComboBox
         width: control.width
         highlighted: control.highlightedIndex === index
 
-        contentItem: DexLabel
+        contentItem: DefaultText
         {
+            width: control.width
             font: DexTypo.subtitle2
             text_value: control.dropdownLineText(model)
+            elide: Text.ElideRight
         }
     }
 

atomic_defi_design/Dex/Components/DexPaginator.qml

@@ -17,6 +17,8 @@ RowLayout
     property var pageSize: Constants.API.app.orders_mdl.nb_pages
     property var currentValue: Constants.API.app.orders_mdl.current_page
 
+    property alias itemsPerPageComboBox: itemsPerPageComboBox
+
     function refreshBtn()
     {
         currentValue = Constants.API.app.orders_mdl.current_page
@@ -70,11 +72,15 @@ RowLayout
 
     DefaultComboBox
     {
+        id: itemsPerPageComboBox
+
         readonly property int item_count: Constants.API.app.orders_mdl.limit_nb_elements
         readonly property
         var options: [5, 10, 25, 50, 100, 200]
 
         Layout.preferredWidth: (root.width / 100) * 14
+        Layout.maximumWidth: 62
+        Layout.preferredHeight: 35
         Layout.alignment: Qt.AlignLeft
 
         model: options
@@ -84,10 +90,12 @@ RowLayout
 
     DefaultText
     {
-        Layout.preferredWidth: (root.width / 100) * 10
+        Layout.preferredWidth: (root.width / 100) * 16
+        Layout.leftMargin: 20
         Layout.alignment: Qt.AlignLeft
-        font.pixelSize: 11
-        text_value: qsTr("items per page")
+        font.pixelSize: 12
+        text: qsTr("items per page")
+        color: Dex.CurrentTheme.foregroundColor2
     }
 
     Item

atomic_defi_design/Dex/Components/SwapIcon.qml

@@ -11,6 +11,7 @@ Item
     property string top_arrow_ticker
     property string bottom_arrow_ticker
     property bool   hovered: false
+    property color  color: Dex.CurrentTheme.foregroundColor
 
     implicitWidth: 20
     implicitHeight: 50
@@ -19,6 +20,6 @@ Item
     {
         anchors.centerIn: parent
         source: Qaterial.Icons.swapHorizontal
-        color: Dex.CurrentTheme.foregroundColor
+        color: root.color
     }
 }

atomic_defi_design/Dex/Components/Widget.qml

@@ -0,0 +1,108 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.12
+
+import Qaterial 1.0 as Qaterial
+
+import Dex.Themes 1.0 as Dex
+import "../Constants"
+
+Item
+{
+    id: root
+
+    property string         title:                      "Widget"
+
+    property bool           collapsable:                true
+    property bool           collapsedAtConstruction:    false
+
+    property alias          header:                     headerLoader.sourceComponent
+    property alias          background:                 backgroundLoader.sourceComponent
+
+    property int            margins:                    10
+    property int            spacing:                    10
+    property int            contentSpacing:             10
+
+    default property alias  contentData:                content.data
+
+    property bool           _collapsed:                 collapsable && collapsedAtConstruction
+
+    function isCollapsed() { return _collapsed }
+
+    // Background
+    Loader
+    {
+        id: backgroundLoader
+        anchors.fill: parent
+        sourceComponent: defaultBackground
+    }
+
+    Column
+    {
+        anchors.fill: parent
+        anchors.margins: root.margins
+
+        spacing: root.spacing
+
+        // Header
+        Loader
+        {
+            id: headerLoader
+            sourceComponent: defaultHeader
+            width: parent.width
+        }
+
+        // Content
+        ColumnLayout
+        {
+            id: content
+
+            visible: !root._collapsed
+
+            width: parent.width
+            height: parent.height - y
+
+            spacing: root.contentSpacing
+        }
+    }
+
+    // Header Component
+    Component
+    {
+        id: defaultHeader
+
+        RowLayout
+        {
+            DefaultText { text: root.title; font: DexTypo.subtitle1 }
+            Item { Layout.fillWidth: true }
+            Qaterial.Icon
+            {
+                visible: root.collapsable
+                width: 20
+                height: 20
+                color: collapseButMouseArea.containsMouse ? Dex.CurrentTheme.foregroundColor2 : Dex.CurrentTheme.foregroundColor
+                icon: root._collapsed ? Qaterial.Icons.chevronUp : Qaterial.Icons.chevronDown
+
+                DefaultMouseArea
+                {
+                    id: collapseButMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    onClicked: root._collapsed = !root._collapsed
+                }
+            }
+        }
+    }
+
+    // Background Component
+    Component
+    {
+        id: defaultBackground
+
+        Rectangle
+        {
+            radius: 10
+            color: Dex.CurrentTheme.floatingBackgroundColor
+        }
+    }
+}

atomic_defi_design/Dex/Constants/DexTypo.qml

@@ -8,7 +8,9 @@ import App 1.0 as App
 
 QtObject {
     id: _font
+
     property real fontDensity: 1.0
+
     property real languageDensity: {
         switch (App.API.app.settings_pg.lang) {
             case "en":
@@ -24,6 +26,7 @@ QtObject {
         }
     }
     property string fontFamily: "Ubuntu"
+
     property font head1: Qt.font({
         pixelSize: 96 * fontDensity,
         letterSpacing: -1.5,
@@ -109,6 +112,12 @@ QtObject {
         family: fontFamily,
         weight: Font.Normal
     })
+    property font subtitle3: Qt.font({
+        pixelSize: 16 * fontDensity,
+        letterSpacing: 0.1,
+        family: fontFamily,
+        weight: 500
+    })
     property font monoSpace: Qt.font({
         pixelSize: 14 * fontDensity,
         letterSpacing: 0,

atomic_defi_design/Dex/Exchange/Exchange.qml

@@ -28,24 +28,9 @@ Item
 
     Component.onDestruction: API.app.trading_pg.on_gui_leave_dex()
 
-    ColumnLayout
+    Trade
     {
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.verticalCenter: parent.verticalCenter
-
+        id: trade
         anchors.fill: parent
-        anchors.topMargin: 20
-
-        spacing: layout_margin
-
-        Trade
-        {
-            id: trade
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            Layout.bottomMargin: layout_margin
-            Layout.rightMargin: Layout.bottomMargin
-        }
-
     }
 }