From 26e271c4afc55dcbb29e88b7a6618dfa6d75fdae Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 17 Jan 2022 06:57:32 +0100 Subject: [PATCH 01/46] Revert "Revert "Update orderbook style in pro view"" This reverts commit fa4ef833a501a5eaff85e928e5713d686f744e4a. --- atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml index 8c9790f61e..98bc457d8a 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml @@ -23,8 +23,8 @@ FloatingBackground Header { - Layout.fillWidth: true - Layout.preferredHeight: 30 + font: DexTypo.subtitle3 + text: qsTr("Order Book") } List From 36d23929f9f5105923a7cca2f1bf1bc54e842702 Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 17 Jan 2022 06:58:23 +0100 Subject: [PATCH 02/46] Revert "Revert "Update orderbook style in pro view"" This reverts commit f912dc42e2cc2c2cd8c75138fd595f913d6a0cce. --- atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml index 98bc457d8a..6d9117ac89 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml @@ -19,7 +19,7 @@ FloatingBackground { anchors.fill: parent anchors.margins: 20 - spacing: 12 + spacing: 10 Header { From 02bd4d7415622078f5a090e2fb877e93fcf2e2b6 Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 17 Jan 2022 07:06:39 +0100 Subject: [PATCH 03/46] Revert "Revert "Update pro trading view style"" This reverts commit 19d90aea65bf0ad9446f894bf886f6ce66eeacd9. --- .../Dex/Components/DexComboBox.qml | 7 +- atomic_defi_design/Dex/Constants/DexTypo.qml | 10 + .../{Trade => ProView}/DexComboBoxLine.qml | 0 .../{Trade => ProView}/SweetDexComboBox.qml | 0 .../{Trade => ProView}/TickerSelector.qml | 11 +- .../Dex/Exchange/Trade/BestOrder/List.qml | 15 +- .../Exchange/Trade/BestOrder/ListDelegate.qml | 197 ++-- .../Dex/Exchange/Trade/OrderBook/Header.qml | 3 +- .../Exchange/Trade/OrderBook/ListDelegate.qml | 39 +- .../Dex/Exchange/Trade/OrderBook/Vertical.qml | 17 +- .../Dex/Exchange/Trade/ProView.qml | 912 +++++++----------- .../Dex/Exchange/Trade/Trade.qml | 2 + .../Dex/Exchange/Trade/TradeBox/OrderForm.qml | 232 +++-- .../Exchange/Trade/Trading/Items/FeeInfo.qml | 17 +- .../Trade/Trading/Items/TotalView.qml | 133 ++- .../Trade/Trading/TradeViewHeader.qml | 45 - atomic_defi_design/qml.qrc | 6 +- 17 files changed, 710 insertions(+), 936 deletions(-) rename atomic_defi_design/Dex/Exchange/{Trade => ProView}/DexComboBoxLine.qml (100%) rename atomic_defi_design/Dex/Exchange/{Trade => ProView}/SweetDexComboBox.qml (100%) rename atomic_defi_design/Dex/Exchange/{Trade => ProView}/TickerSelector.qml (86%) diff --git a/atomic_defi_design/Dex/Components/DexComboBox.qml b/atomic_defi_design/Dex/Components/DexComboBox.qml index fcc8879263..97749ffcf8 100644 --- a/atomic_defi_design/Dex/Components/DexComboBox.qml +++ b/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 } } diff --git a/atomic_defi_design/Dex/Constants/DexTypo.qml b/atomic_defi_design/Dex/Constants/DexTypo.qml index a5674b57bb..d07f6450d3 100644 --- a/atomic_defi_design/Dex/Constants/DexTypo.qml +++ b/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, @@ -103,4 +106,11 @@ QtObject { family: fontFamily, weight: Font.Normal }) + + property font subtitle3: Qt.font({ + pixelSize: 16 * fontDensity, + letterSpacing: 0.1, + family: fontFamily, + weight: 500 + }) } diff --git a/atomic_defi_design/Dex/Exchange/Trade/DexComboBoxLine.qml b/atomic_defi_design/Dex/Exchange/ProView/DexComboBoxLine.qml similarity index 100% rename from atomic_defi_design/Dex/Exchange/Trade/DexComboBoxLine.qml rename to atomic_defi_design/Dex/Exchange/ProView/DexComboBoxLine.qml diff --git a/atomic_defi_design/Dex/Exchange/Trade/SweetDexComboBox.qml b/atomic_defi_design/Dex/Exchange/ProView/SweetDexComboBox.qml similarity index 100% rename from atomic_defi_design/Dex/Exchange/Trade/SweetDexComboBox.qml rename to atomic_defi_design/Dex/Exchange/ProView/SweetDexComboBox.qml diff --git a/atomic_defi_design/Dex/Exchange/Trade/TickerSelector.qml b/atomic_defi_design/Dex/Exchange/ProView/TickerSelector.qml similarity index 86% rename from atomic_defi_design/Dex/Exchange/Trade/TickerSelector.qml rename to atomic_defi_design/Dex/Exchange/ProView/TickerSelector.qml index 797137caf8..4978fa75ee 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/TickerSelector.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/TickerSelector.qml @@ -34,19 +34,16 @@ SweetDexComboBox onCurrentValueChanged: { // User input - if(combo.index_changed) - { + if(combo.index_changed) { combo.index_changed = false // Set the ticker - if (currentValue !== undefined) + if(currentValue !== undefined) setPair(left_side, currentValue) } // List change - else - { + else { // Correct the index - if (currentText.indexOf(ticker) === -1) - { + if(currentText.indexOf(ticker) === -1) { const target_index = indexOfValue(ticker) if(currentIndex !== target_index) currentIndex = target_index diff --git a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml index db66934273..4dd84dc7c6 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml @@ -4,20 +4,25 @@ import QtQuick.Controls 2.15 import Qaterial 1.0 as Qaterial -import App 1.0 +import Dex.Themes 1.0 as Dex +import "../../../Constants" - -Item { +Rectangle +{ id: _control + color: Dex.CurrentTheme.floatingBackgroundColor + radius: 10 + Header {} - ListView { + ListView + { id: list anchors.topMargin: 40 anchors.fill: parent model: API.app.trading_pg.orderbook.best_orders.proxy_mdl clip: true reuseItems: true - delegate: ListDelegate {} + delegate: ListDelegate {} } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/ListDelegate.qml b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/ListDelegate.qml index 073030ba62..f44e080573 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/ListDelegate.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/ListDelegate.qml @@ -7,154 +7,165 @@ import Qaterial 1.0 as Qaterial import "../../../Components" import "../../../Constants" as Constants +import Dex.Themes 1.0 as Dex import App 1.0 as App -Item { +Item +{ id: _control + property bool coinEnable: Constants.API.app.portfolio_pg.global_cfg_mdl.get_coin_info(coin).is_enabled - property var isAsk: { - if(parseInt(cex_rates)>0){ + property var isAsk: + { + if (parseInt(cex_rates) > 0) + { false - }else if(parseInt(cex_rates)<0) { + } + else if(parseInt(cex_rates) < 0) + { true - }else { + } + else + { undefined } } + width: visible? list.width : 0 height: 36 - - AnimatedRectangle { + AnimatedRectangle + { visible: mouse_are.containsMouse width: parent.width height: parent.height - color: App.DexTheme.foregroundColor + color: Dex.CurrentTheme.foregroundColor opacity: 0.1 } - RowLayout { + RowLayout + { id: row width: parent.width - 30 height: parent.height anchors.horizontalCenter: parent.horizontalCenter spacing: 10 - Row { - Layout.alignment: Qt.AlignVCenter - Layout.preferredWidth: 130 - leftPadding: -10 - spacing: 5 - DefaultImage { - source: Constants.General.coinIcon(coin) - width: 20 - height: 20 - smooth: true - antialiasing: true - opacity: !_control.coinEnable? .1 : 1 - anchors.verticalCenter: parent.verticalCenter - } - DefaultText { - anchors.verticalCenter: parent.verticalCenter - leftPadding: 2 - text: send + " " + atomic_qt_utilities.retrieve_main_ticker(coin) - font.family: App.DexTypo.fontFamily - font.pixelSize: 12 - } + Image + { + Layout.preferredWidth: 20 + Layout.preferredHeight: 20 + Layout.alignment: Qt.AlignVCenter + source: Constants.General.coinIcon(coin) + smooth: true + antialiasing: true + opacity: !_control.coinEnable? .1 : 1 } - DefaultTooltip { - id: _tooltip - dim: true - modal: true - closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside - - width: 250 - contentItem: DexLabelUnlinked { - text_value: qsTr(" %1 is not enabled - Do you want to enable it to be able to select %2 best orders ?
Yes - No").arg(coin).arg(coin) - wrapMode: DefaultText.Wrap - width: 250 - onLinkActivated: { - if(link==="#no") { - _tooltip.close() - }else { - if (Constants.API.app.enable_coins([coin]) === true) { - _control.coinEnable = true - _tooltip.close() - } - else { - cannot_enable_coin_modal.open() - } - } - } - - ModalLoader { - property string coin_to_enable_ticker: coin - id: cannot_enable_coin_modal - sourceComponent: CannotEnableCoinModal { coin_to_enable_ticker: cannot_enable_coin_modal.coin_to_enable_ticker } - } - } - delay: 200 + DefaultText + { + Layout.preferredWidth: 100 + Layout.alignment: Qt.AlignVCenter + text: send + " " + atomic_qt_utilities.retrieve_main_ticker(coin) + font.family: App.DexTypo.fontFamily + font.pixelSize: 12 } - DexLabel { + DefaultText + { Layout.alignment: Qt.AlignVCenter - Layout.preferredWidth: 70 + Layout.preferredWidth: 60 text: price_fiat + Constants.API.app.settings_pg.current_fiat_sign font.family: App.DexTypo.fontFamily font.pixelSize: 12 - horizontalAlignment: Label.AlignRight - opacity: 1 - } - DexLabel { + + DefaultText + { Layout.alignment: Qt.AlignVCenter - text: cex_rates==="0"? "N/A" : parseFloat(cex_rates)>0? "+"+parseFloat(cex_rates).toFixed(2)+"%" : parseFloat(cex_rates).toFixed(2)+"%" + text: cex_rates === "0" ? "N/A" : + parseFloat(cex_rates) > 0 ? "+" + parseFloat(cex_rates).toFixed(2) + "%" : + parseFloat(cex_rates).toFixed(2) + "%" font.family: App.DexTypo.fontFamily font.pixelSize: 12 - Behavior on rightPadding { - NumberAnimation { + color: cex_rates === "0" ? Qt.darker(Dex.CurrentTheme.foregroundColor) : + parseFloat(cex_rates) < 0 ? Dex.CurrentTheme.okColor : + Dex.CurrentTheme.noColor + + Behavior on rightPadding + { + NumberAnimation + { duration: 150 } } + } + } - color:cex_rates==="0"? Qt.darker(App.DexTheme.foregroundColor) : parseFloat(cex_rates)<0? App.DexTheme.greenColor : App.DexTheme.redColor - horizontalAlignment: Label.AlignRight - opacity: 1 + DefaultTooltip + { + id: _tooltip + dim: true + modal: true + closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside + + width: 250 + contentItem: DexLabelUnlinked + { + text_value: qsTr(" %1 is not enabled - Do you want to enable it to be able to select %2 best orders ?
Yes - No").arg(coin).arg(coin) + wrapMode: DefaultText.Wrap + width: 250 + onLinkActivated: + { + if (link === "#no") + { + _tooltip.close(); + } + else + { + if (Constants.API.app.enable_coins([coin]) === true) + { + _control.coinEnable = true; + _tooltip.close(); + } + else { + cannot_enable_coin_modal.open(); + } + } + } + ModalLoader { + property string coin_to_enable_ticker: coin + id: cannot_enable_coin_modal + sourceComponent: CannotEnableCoinModal { coin_to_enable_ticker: cannot_enable_coin_modal.coin_to_enable_ticker } + } } + delay: 200 } - - DefaultMouseArea { + DefaultMouseArea + { id: mouse_are anchors.fill: parent hoverEnabled: true - onClicked: { - console.log(order_form.visible) - if(!Constants.API.app.portfolio_pg.global_cfg_mdl.get_coin_info(coin).is_enabled){ + onClicked: + { + if (!Constants.API.app.portfolio_pg.global_cfg_mdl.get_coin_info(coin).is_enabled) + { _tooltip.open() - }else { + } + else + { app.pairChanged(base_ticker, coin) Constants.API.app.trading_pg.orderbook.select_best_order(uuid) - if(order_form.visible === false) { - order_form.visible = true - } - if(order_form.hidden === true) { - order_form.hidden = false - if(order_form.contentVisible === false) { - order_form.contentVisible = true - } - } } - - //if(is_mine) return - //isAsk? selectOrder(true, coin, price, quantity, price_denom, price_numer, quantity_denom, quantity_numer, min_volume) : selectOrder(false, coin, price, quantity, price_denom, price_numer, quantity_denom, quantity_numer, min_volume) } } - HorizontalLine { + + HorizontalLine + { width: parent.width opacity: .4 } diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Header.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Header.qml index 9839e5f7cc..bb7f85c277 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Header.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Header.qml @@ -4,9 +4,8 @@ import QtQuick.Controls 2.15 import Qaterial 1.0 as Qaterial -import App 1.0 - import "../../../Components" +import "../../../Constants" Item { diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml index 73004d224f..25032edd91 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml @@ -5,9 +5,9 @@ import QtQuick.Controls 2.15 import Qaterial 1.0 as Qaterial import "../../../Components" -import App 1.0 -import Dex.Themes 1.0 as Dex import bignumberjs 1.0 +import "../../../Constants" +import Dex.Themes 1.0 as Dex Item { @@ -42,13 +42,13 @@ Item hoverEnabled: true onClicked: { - if(is_mine) return + if (is_mine) return - if(!enough_funds_to_pay_min_volume); - else + if (enough_funds_to_pay_min_volume ) { exchange_trade.orderSelected = true orderList.currentIndex = index + 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) @@ -177,34 +177,39 @@ Item } } - Qaterial.ColorIcon { + Qaterial.ColorIcon + { id: cancel_button_text property bool requested_cancel: false + visible: is_mine && !requested_cancel - source: Qaterial.Icons.close anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: 1 anchors.right: parent.right anchors.rightMargin: mouse_are.containsMouse || cancel_button.containsMouse? 12 : 6 - Behavior on iconSize { - NumberAnimation { - duration: 200 - } - } + source: Qaterial.Icons.close iconSize: mouse_are.containsMouse || cancel_button.containsMouse? 16 : 0 + color: cancel_button.containsMouse ? Qaterial.Colors.red : mouse_are.containsMouse? Dex.CurrentTheme.foregroundColor: Qaterial.Colors.red - color: cancel_button.containsMouse ? Qaterial.Colors.red : mouse_are.containsMouse? DexTheme.foregroundColor: Qaterial.Colors.red + Behavior on iconSize + { + NumberAnimation + { + duration: 200 + } + } - DefaultMouseArea { + DefaultMouseArea + { id: cancel_button anchors.fill: parent hoverEnabled: true - - onClicked: { - if(!is_mine) return + onClicked: + { + if (!is_mine) return cancel_button_text.requested_cancel = true cancelOrder(uuid) diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml index 6d9117ac89..0d7022259d 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml @@ -5,6 +5,7 @@ import QtQuick.Controls 2.15 import Qaterial 1.0 as Qaterial import "../../../Components" +import "../../../Constants" import App 1.0 import Dex.Themes 1.0 as Dex @@ -21,9 +22,11 @@ FloatingBackground anchors.margins: 20 spacing: 10 - Header + DefaultText { - font: DexTypo.subtitle3 + Layout.leftMargin: 10 + Layout.topMargin: 10 + font: DexTypo.subtitle1 text: qsTr("Order Book") } @@ -36,10 +39,16 @@ FloatingBackground } Item { - Layout.preferredHeight: 8 + Layout.preferredHeight: 4 Layout.fillWidth: true + Rectangle + { + width: parent.width + height: parent.height + anchors.horizontalCenter: parent.horizontalCenter + color: Dex.CurrentTheme.floatingBackgroundColor + } } - List { isAsk: false diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index 01205741b8..6fc33afe0e 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -11,6 +11,7 @@ import AtomicDEX.MarketMode 1.0 import AtomicDEX.TradingError 1.0 import "../../Components" +import "../../Constants" import "../../Wallet" import App 1.0 @@ -34,10 +35,12 @@ import Dex.Themes 1.0 as Dex import "../ProView" -ColumnLayout { +GridLayout +{ id: form - property alias dexConfig: dex_config_popup - function selectOrder(is_asks, 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) { + + function selectOrder(is_asks, 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) + { setMarketMode(!is_asks ? MarketMode.Sell : MarketMode.Buy) API.app.trading_pg.preffered_order = { @@ -57,18 +60,32 @@ ColumnLayout { "base_max_volume_numer": base_max_volume_numer, "uuid": uuid } - form_base.focusVolumeField() } - Connections { + + function prefWidth(item) { return (width / columns) * item.Layout.columnSpan; } + function prefHeight(item) { return (height / rows) * item.Layout.rowSpan; } + + anchors.topMargin: 20 + anchors.leftMargin: 10 + anchors.fill: parent + + rows: 12 + columns: 12 + + columnSpacing: 20 + + Connections + { target: exchange_trade - function onBuy_sell_rpc_busyChanged() { + function onBuy_sell_rpc_busyChanged() + { if (buy_sell_rpc_busy) return const response = General.clone(buy_sell_last_rpc_data) - - if (response.error_code) { + if (response.error_code) + { confirm_trade_modal.close() toast.show(qsTr("Failed to place the order"), @@ -76,7 +93,9 @@ ColumnLayout { response.error_message) return - } else if (response.result && response.result.uuid) { + } + else if (response.result && response.result.uuid) + { // Make sure there is information confirm_trade_modal.close() @@ -88,599 +107,380 @@ ColumnLayout { } } } - spacing: 10 - anchors.topMargin: 20 - anchors.leftMargin: 10 - anchors.fill: parent - Connections { + + Connections + { target: app - function onPairChanged(base, rel) { - dex_chart.visible = true - } + function onPairChanged(base, rel) { dex_chart.visible = true } } - DexBoxManager { - id: splitView + // Ticker selectors. + RowLayout + { + id: selectors + spacing: 20 + Layout.rowSpan: 1 + Layout.columnSpan: 5 + Layout.preferredWidth: prefWidth(this) + Layout.preferredHeight: prefHeight(this) Layout.fillWidth: true Layout.fillHeight: true - itemLists: [left_section, order_form] - spacing: 15 - handle: Item { - implicitWidth: 2 - implicitHeight: 4 - Rectangle { - implicitWidth: 2 - implicitHeight: 4 - anchors.centerIn: parent - opacity: 0 - color: 'transparent' - } + + TickerSelector + { + id: selector_left + Layout.alignment: Qt.AlignLeft + Layout.fillWidth: true + + left_side: true + ticker_list: API.app.trading_pg.market_pairs_mdl.left_selection_box + ticker: left_ticker } - DexTradeBox { - id: left_section - minimumWidth: 500 - defaultWidth: 520 - expandedHort: true - hideHeader: true - SplitView.fillHeight: true - color: 'transparent' - DexBoxManager { - anchors.fill: parent - anchors.margins: 0 - anchors.rightMargin: 0 - orientation: Qt.Vertical - handle: Item { - implicitWidth: 40 - implicitHeight: 6 - InnerBackground { - implicitWidth: 40 - implicitHeight: 6 - anchors.centerIn: parent - opacity: 0.4 - } - } - itemLists: [dex_chart, optionBox] - DexTradeBox { - id: dex_chart - title: qsTr("Chart") - expandedVert: dex_chart.visible? true : false - onVisibleChanged: { - if(visible) { - expandedVert = true - } - } - canBeFull: true - onFullScreenChanged: { - if(fullScreen){ - _best_order_box.visible = false - _orderbook_box.visible = false - optionBox.visible = false - order_form.visible = false - } else { - _best_order_box.visible = true - _orderbook_box.visible = true - optionBox.visible = true - order_form.visible = true - } - } - Item { - id: chart_view - anchors.fill: parent - anchors.topMargin: 40 - CandleStickChart { - id: candleChart - color: 'transparent' - anchors.fill: parent - } - - Component.onCompleted: - { - dashboard.webEngineView.parent = chart_view; - dashboard.webEngineView.anchors.fill = chart_view; - } - Component.onDestruction: - { - dashboard.webEngineView.visible = false; - dashboard.webEngineView.stop(); - } - } - } - DexTradeBox - { - canBeFull: true - hideHeader: true - maximumHeight: 80 - minimumHeight: 75 - color: 'transparent' - RowLayout - { - id: selectors - spacing: 20 - anchors.fill: parent - anchors.rightMargin: 10 - anchors.leftMargin: 10 - TickerSelector - { - id: selector_left - left_side: true - ticker_list: API.app.trading_pg.market_pairs_mdl.left_selection_box - ticker: left_ticker - Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter - Layout.fillWidth: true - } - - SwapIcon - { - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - Layout.preferredHeight: selector_left.height * 0.65 - - top_arrow_ticker: selector_left.ticker - bottom_arrow_ticker: selector_right.ticker - hovered: swap_button.containsMouse - - DefaultMouseArea - { - id: swap_button - anchors.fill: parent - hoverEnabled: true - onClicked: - { - if (!block_everything) - setPair(true, right_ticker) - } - } - } - - TickerSelector - { - id: selector_right - left_side: false - ticker_list: API.app.trading_pg.market_pairs_mdl.right_selection_box - ticker: right_ticker - Layout.alignment: Qt.AlignRight | Qt.AlignVCenter - Layout.fillWidth: true - } - } + SwapIcon + { + Layout.alignment: Qt.AlignHCenter + Layout.preferredHeight: selector_left.height * 0.65 + Layout.fillWidth: true - } + top_arrow_ticker: selector_left.ticker + bottom_arrow_ticker: selector_right.ticker + hovered: swap_button.containsMouse - - DexTradeBox + DefaultMouseArea + { + id: swap_button + anchors.fill: parent + hoverEnabled: true + onClicked: { - id: optionBox - expandedVert: dex_chart.visible? false : true - expandable: true - defaultHeight: tabView.currentIndex === 0 ? 200 : isUltraLarge? 400 : 270 - closable: true - title: qsTr("Trading Information") - - Connections - { - target: tabView - function onCurrentIndexChanged() { - if (tabView.currentIndex !== 0) { - optionBox.setHeight(isUltraLarge? 400 : 270) - } else { - optionBox.setHeight(200) - } - } - } - - Column - { - topPadding: 40 - width: parent.width - height: parent.height - clip: !parent.contentVisible - anchors.horizontalCenter: parent.horizontalCenter - Qaterial.LatoTabBar - { - property int taux_exchange: 0 - property int order_idx: 1 - property int history_idx: 2 - - z: 4 - id: tabView - width: parent.width - currentIndex: tabView.currentIndex - anchors.horizontalCenter: parent.horizontalCenter - Material.foreground: DexTheme.foregroundColor - background: null - y: 5 - leftPadding: 15 - - Qaterial.LatoTabButton - { - width: 150 - text: qsTr("Exchange Rates") - font.pixelSize: 14 - textColor: checked ? Dex.CurrentTheme.foregroundColor2 : Dex.CurrentTheme.foregroundColor - textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - indicatorColor: Dex.CurrentTheme.tabSelectedColor - opacity: checked ? 1 : .6 - } - Qaterial.LatoTabButton - { - width: 120 - text: qsTr("Orders") - font.pixelSize: 14 - textColor: checked ? Dex.CurrentTheme.foregroundColor2 : Dex.CurrentTheme.foregroundColor - textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - indicatorColor: Dex.CurrentTheme.tabSelectedColor - opacity: checked ? 1 : .6 - } - Qaterial.LatoTabButton - { - width: 120 - text: qsTr("History") - font.pixelSize: 14 - textColor: checked ? Dex.CurrentTheme.foregroundColor2 : Dex.CurrentTheme.foregroundColor - textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - indicatorColor: Dex.CurrentTheme.tabSelectedColor - opacity: checked ? 1 : .6 - } - } - Item - { - id: swipeContainer - anchors.horizontalCenter: parent.horizontalCenter - width: parent.width - height: optionBox.height - (tabView.height + 40) - SwipeView - { - id: swipeView - clip: true - interactive: false - currentIndex: tabView.currentIndex - anchors.fill: parent - onCurrentIndexChanged: - { - swipeView.currentItem.update(); - if (currentIndex === 2) history_component.list_model_proxy.is_history = true; - else history_component.list_model_proxy.is_history = false; - } - - Qaterial.ScrollView - { - clip: true - - PriceLine { width: swipeContainer.width; height: swipeContainer.height; id: price_line_obj; } - } - - OrdersView.OrdersPage { id: order_component; clip: true } - OrdersView.OrdersPage - { - id: history_component - is_history: true - clip: true - } - } - } - } + if (!block_everything) + setPair(true, right_ticker) } - Item { SplitView.maximumHeight: 1 } + } + } + + TickerSelector + { + id: selector_right + Layout.alignment: Qt.AlignRight + Layout.fillWidth: true + + left_side: false + ticker_list: API.app.trading_pg.market_pairs_mdl.right_selection_box + ticker: right_ticker + } + } + + DexTradeBox + { + visible: false + enabled: false + id: dex_chart + title: qsTr("Chart") + expandedVert: dex_chart.visible? true : false + onVisibleChanged: { + if(visible) { + expandedVert = true + } + } + canBeFull: true + onFullScreenChanged: { + if(fullScreen){ + _best_order_box.visible = false + _orderbook_box.visible = false + optionBox.visible = false + order_form.visible = false + } else { + _best_order_box.visible = true + _orderbook_box.visible = true + optionBox.visible = true + order_form.visible = true } } Item { - id: _book_and_best - property bool showing: (_best_order_box.visible || _orderbook_box.visible) - SplitView.minimumWidth: showing ? 390 : 0 - SplitView.maximumWidth: showing ? 430 : 0 - SplitView.preferredWidth: showing ? 390 : 0 - clip: true - DexBoxManager { + id: chart_view + anchors.fill: parent + anchors.topMargin: 40 + CandleStickChart { + id: candleChart + color: 'transparent' anchors.fill: parent - orientation: Qt.Vertical - handle: Item { - implicitWidth: 40 - implicitHeight: 6 - InnerBackground { - implicitWidth: 40 - implicitHeight: 6 - anchors.centerIn: parent - opacity: 0.4 - } + } + + Component.onCompleted: + { + dashboard.webEngineView.parent = chart_view; + dashboard.webEngineView.anchors.fill = chart_view; + } + Component.onDestruction: + { + dashboard.webEngineView.visible = false; + dashboard.webEngineView.stop(); + } + } + } + + OrderBook.Vertical + { + Layout.columnSpan: 4 + Layout.rowSpan: 5 + Layout.preferredWidth: prefWidth(this) + Layout.preferredHeight: prefHeight(this) + Layout.fillWidth: true + Layout.fillHeight: true + } + + // Place order form. + Rectangle + { + Layout.columnSpan: 3 + Layout.rowSpan: 6 + Layout.preferredWidth: prefWidth(this) + Layout.preferredHeight: prefHeight(this) + Layout.fillWidth: true + Layout.fillHeight: true + radius: 10 + color: Dex.CurrentTheme.floatingBackgroundColor + + ColumnLayout + { + anchors.fill: parent + spacing: 10 + + DefaultText + { + Layout.topMargin: 20 + Layout.leftMargin: 20 + text: qsTr("Place Order") + font: DexTypo.subtitle3 + } + + // Market mode selector + RowLayout + { + spacing: 10 + Layout.topMargin: 10 + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true + MarketModeSelector + { + Layout.alignment: Qt.AlignHCenter + marketMode: MarketMode.Buy + ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) } - itemLists: [_orderbook_box, _best_order_box] - DexTradeBox + MarketModeSelector { - id: _orderbook_box - SplitView.fillWidth: true - closable: true - title: qsTr("Order Book") - expandedVert: true - Behavior on SplitView.preferredWidth - { - NumberAnimation - { - duration: 100 - } - } - OrderBook.Vertical - { - clip: !parent.contentVisible - visible: parent.contentVisible - anchors.topMargin: 40 - anchors.fill: parent - } + Layout.alignment: Qt.AlignHCenter + ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) } - DexTradeBox { - id: _best_order_box - - defaultHeight: 250 - minimumHeight: 130 - closable: true - title: qsTr("Best Orders") - reloadable: true - onReload: API.app.trading_pg.orderbook.refresh_best_orders() - - Behavior on SplitView.preferredWidth - { - NumberAnimation - { - duration: 100 - } - } - - BestOrder.List - { - clip: !parent.contentVisible - id: best_order_list - visible: parent.contentVisible - y: 40 - width: parent.width - height: parent.height-40 - } + } + + // Order selected indicator + Rectangle + { + visible: API.app.trading_pg.preffered_order.price !== undefined + Layout.preferredWidth: parent.width - 20 + Layout.preferredHeight: 40 + Layout.alignment: Qt.AlignHCenter + radius: 8 + color: 'transparent' + border.color: Dex.CurrentTheme.noColor + + DefaultText + { + anchors.verticalCenter: parent.verticalCenter + leftPadding: 15 + color: Dex.CurrentTheme.noColor + text: qsTr("Order Selected") + } + + Qaterial.FlatButton + { + foregroundColor: Dex.CurrentTheme.noColor + icon.source: Qaterial.Icons.close + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + height: 40 + width: 40 + anchors.rightMargin: 15 + onClicked: API.app.trading_pg.reset_order() } } - } - DexTradeBox - { - id: order_form - closable: true - title: qsTr("Place Order") - defaultWidth: isBigScreen ? 300 : 280 - maximumWidth: isBigScreen ? 310 : 280 - minimumWidth: isBigScreen ? 290 : 280 - expandable: false - SplitView.fillHeight: true + OrderForm + { + id: form_base + Layout.fillWidth: true + Layout.fillHeight: true + Layout.leftMargin: 10 + Layout.rightMargin: 10 + Layout.alignment: Qt.AlignHCenter + } + + TotalView + { + Layout.fillWidth: true + Layout.fillHeight: true + Layout.leftMargin: 10 + Layout.rightMargin: 10 + Layout.alignment: Qt.AlignHCenter + } + + FeeInfo + { + id: bg + Layout.fillWidth: true + Layout.fillHeight: true + Layout.leftMargin: 10 + Layout.rightMargin: 10 + visible: false + } + + DexGradientAppButton + { + Layout.preferredHeight: 40 + Layout.preferredWidth: parent.width - 20 + Layout.alignment: Qt.AlignHCenter + radius: 18 + + text: qsTr("START SWAP") + font.weight: Font.Medium + enabled: form_base.can_submit_trade + onClicked: confirm_trade_modal.open() + } + ColumnLayout { - visible: parent.contentVisible - anchors.topMargin: 60 - anchors.fill: parent - Row + spacing: parent.spacing + visible: errors.text_value !== "" + Layout.fillWidth: true + Layout.preferredWidth: parent.width + + HorizontalLine { - width: parent.width - spacing: 10 Layout.alignment: Qt.AlignHCenter - MarketModeSelector - { - marketMode: MarketMode.Buy - ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) - } - MarketModeSelector - { - ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) - } + Layout.preferredWidth: parent.width } - Item + + // Show errors + DefaultText { + id: errors + Layout.alignment: Qt.AlignHCenter Layout.fillWidth: true - Layout.fillHeight: true - ColumnLayout - { - property int space: 10 - anchors.fill: parent - anchors.topMargin: 5 - spacing: 10 - Item - { - Layout.fillWidth: true - Layout.preferredHeight: 40 - visible: API.app.trading_pg.preffered_order.price !== undefined - Rectangle - { - width: parent.width - 20 - height: 40 - radius: 8 - color: 'transparent' - border.color: Dex.CurrentTheme.noColor - anchors.horizontalCenter: parent.horizontalCenter - y: 5 - - DefaultText - { - anchors.verticalCenter: parent.verticalCenter - leftPadding: 15 - color: Dex.CurrentTheme.noColor - text: qsTr("Order Selected") - } - - Qaterial.FlatButton - { - foregroundColor: Dex.CurrentTheme.noColor - icon.source: Qaterial.Icons.close - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - height: 40 - width: 40 - anchors.rightMargin: 15 - onClicked: API.app.trading_pg.reset_order() - } - } - } - - OrderForm - { - id: form_base - Layout.fillWidth: true - Layout.leftMargin: 10 - Layout.rightMargin: 10 - Layout.preferredHeight: 270 - Layout.alignment: Qt.AlignHCenter - } - - Item - { - Layout.preferredHeight: 90 - Layout.fillWidth: true - TotalView {} - } - - Item - { - Layout.fillHeight: true - Layout.fillWidth: true - Layout.leftMargin: 10 - Layout.rightMargin: 10 - Column - { - anchors.fill: parent - anchors.leftMargin: 5 - anchors.rightMargin: 5 - FeeInfo - { - id: bg - visible: false - } - spacing: 15 - - // Trade button - DexGradientAppButton - { - anchors.horizontalCenter: parent.horizontalCenter - width: 262 - height: 44 - radius: 18 - - text: qsTr("START SWAP") - font.weight: Font.Medium - enabled: form_base.can_submit_trade - onClicked: confirm_trade_modal.open() - } - - Column - { - spacing: parent.spacing - visible: errors.text_value !== "" - width: parent.width - bottomPadding: 10 - HorizontalLine - { - Layout.fillWidth: true - Layout.bottomMargin: layout_margin - } - - // Show errors - DefaultText - { - id: errors - anchors.horizontalCenter: parent.horizontalCenter - width: parent.width - horizontalAlignment: DefaultText.AlignHCenter - font.pixelSize: Style.textSizeSmall4 - color: DexTheme.redColor - - text_value: General.getTradingError( - last_trading_error, - curr_fee_info, - base_ticker, - rel_ticker, left_ticker, right_ticker) - } - } - } - } - Item {} - } + horizontalAlignment: Text.AlignHCenter + font.pixelSize: Style.textSizeSmall4 + color: Dex.CurrentTheme.noColor + text_value: General.getTradingError( + last_trading_error, + curr_fee_info, + base_ticker, + rel_ticker, left_ticker, right_ticker) } } } } - ModalLoader { - id: confirm_trade_modal - sourceComponent: ConfirmTradeModal {} - } - DexPopup + Column { - id: dex_config_popup - spacing: 8 - padding: 4 - arrowXDecalage: 75 - backgroundColor: Dex.CurrentTheme.floatingBackgroundColor - - Settings + Layout.topMargin: 20 + Layout.rowSpan: 5 + Layout.columnSpan: 5 + Layout.preferredWidth: prefWidth(this) + Layout.preferredHeight: prefHeight(this) + Layout.fillHeight: true + Layout.fillWidth: true + DefaultText { font: DexTypo.subtitle3; text: qsTr("Trading Information") } + Qaterial.LatoTabBar { - id: proview_settings - property bool chart_visibility: true - property bool option_visibility: true - property bool orderbook_visibility: true - property bool best_order_visibility: false - property bool form_visibility: true + id: tabView + property int taux_exchange: 0 + property int order_idx: 1 + property int history_idx: 2 + + width: parent.width + anchors.horizontalCenter: parent.horizontalCenter + Material.foreground: Dex.CurrentTheme.foregroundColor + background: null + topPadding: 15 + leftPadding: 5 + + Qaterial.LatoTabButton + { + width: 150 + text: qsTr("Exchange Rates") + font.pixelSize: 14 + textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + opacity: checked ? 1 : .6 + } + Qaterial.LatoTabButton + { + width: 120 + text: qsTr("Orders") + font.pixelSize: 14 + textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + opacity: checked ? 1 : .6 + } + Qaterial.LatoTabButton + { + width: 120 + text: qsTr("History") + font.pixelSize: 14 + textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + opacity: checked ? 1 : .6 + } } - - contentItem: Item + Rectangle { - implicitWidth: 320 - implicitHeight: 190 - Column + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + height: 436 + color: Dex.CurrentTheme.floatingBackgroundColor + radius: 10 + + Qaterial.SwipeView { + id: swipeView + clip: true + interactive: false + currentIndex: tabView.currentIndex anchors.fill: parent - rightPadding: 20 - padding: 10 - spacing: 8 - DefaultText - { - text: "Display Settings" - font: DexTypo.body2 - } - HorizontalLine { width: parent.width-20;anchors.horizontalCenter: parent.horizontalCenter;opacity: .4 } - DexCheckEye + onCurrentIndexChanged: { - text: "Trading Information" - targetProperty: "visible" - target: optionBox + swipeView.currentItem.update(); + if (currentIndex === 2) history_component.list_model_proxy.is_history = true; + else history_component.list_model_proxy.is_history = false; } - HorizontalLine { width: parent.width-20;anchors.horizontalCenter: parent.horizontalCenter;opacity: .4 } - DexCheckEye + + PriceLine { id: price_line_obj } + + OrdersView.OrdersPage { id: order_component; clip: true } + OrdersView.OrdersPage { - text: "Order Book" - targetProperty: "visible" - target: _orderbook_box + id: history_component + is_history: true + clip: true } - HorizontalLine { width: parent.width-20;anchors.horizontalCenter: parent.horizontalCenter;opacity: .4 } - DexCheckEye { - text: "Best Order" - targetProperty: "visible" - target: _best_order_box - } - HorizontalLine { width: parent.width-20;anchors.horizontalCenter: parent.horizontalCenter;opacity: .4 } - DexCheckEye { - id: place_visibility - text: "Place Order" - targetProperty: "visible" - target: order_form - } - } - Component.onCompleted: { - dex_chart.visible = proview_settings.chart_visibility - optionBox.visible = proview_settings.option_visibility - _orderbook_box.visible = proview_settings.orderbook_visibility - _best_order_box.visible = proview_settings.best_order_visibility - order_form.visible = proview_settings.form_visibility - } - Component.onDestruction: { - proview_settings.form_visibility = order_form.visible - proview_settings.chart_visibility = dex_chart.visible - proview_settings.option_visibility = optionBox.visible - proview_settings.orderbook_visibility = _orderbook_box.visible - proview_settings.best_order_visibility = _best_order_box.visible } } } + BestOrder.List + { + Layout.rowSpan: 5 + Layout.columnSpan: 4 + Layout.fillHeight: true + Layout.fillWidth: true + id: best_order_list + } + ModalLoader + { + id: confirm_trade_modal + sourceComponent: ConfirmTradeModal {} + } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml index 9c8c345c8d..a064a424d8 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml @@ -166,6 +166,8 @@ Item { id: _viewLoader anchors.fill: parent + anchors.leftMargin: 10 + anchors.rightMargin: 10 source: API.app.trading_pg.current_trading_mode == TradingMode.Pro ? "ProView.qml" : "SimpleView/Main.qml" } diff --git a/atomic_defi_design/Dex/Exchange/Trade/TradeBox/OrderForm.qml b/atomic_defi_design/Dex/Exchange/Trade/TradeBox/OrderForm.qml index e293049b11..7485b11812 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/TradeBox/OrderForm.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/TradeBox/OrderForm.qml @@ -9,10 +9,9 @@ import "../../../Components" import App 1.0 import Dex.Themes 1.0 as Dex -FloatingBackground +ColumnLayout { id: root - radius: 10 function focusVolumeField() { @@ -54,160 +53,147 @@ FloatingBackground function onBackend_volumeChanged() { input_volume.text = exchange_trade.backend_volume; } } - ColumnLayout + Item { - id: form_layout - width: parent.width + Layout.fillWidth: true + Layout.preferredHeight: input_price.height + price_usd_value.height + price_usd_value.anchors.topMargin - ColumnLayout + AmountField { - Layout.alignment: Qt.AlignTop - Layout.fillWidth: true - Layout.topMargin: 12 + id: input_price - Item - { - Layout.fillWidth: true - height: input_price.height + price_usd_value.height + price_usd_value.anchors.topMargin + left_text: qsTr("Price") + right_text: atomic_qt_utilities.retrieve_main_ticker(right_ticker) + enabled: !(API.app.trading_pg.preffered_order.price !== undefined) + text: backend_price + width: parent.width + height: 41 + radius: 18 - AmountField - { - id: input_price + onTextChanged: setPrice(text) + } - left_text: qsTr("Price") - right_text: atomic_qt_utilities.retrieve_main_ticker(right_ticker) - enabled: !(API.app.trading_pg.preffered_order.price !== undefined) - text: backend_price - width: 261 - height: 41 - radius: 18 + DefaultText + { + id: price_usd_value + anchors.right: input_price.right + anchors.top: input_price.bottom + anchors.topMargin: 7 - onTextChanged: setPrice(text) - } + text_value: General.getFiatText(non_null_price, right_ticker) + font.pixelSize: input_price.font.pixelSize + color: Dex.CurrentTheme.foregroundColor2 - DefaultText - { - id: price_usd_value - anchors.right: input_price.right - anchors.top: input_price.bottom - anchors.topMargin: 7 + CexInfoTrigger {} + } + } - text_value: General.getFiatText(non_null_price, right_ticker) - font.pixelSize: input_price.font.pixelSize - color: Dex.CurrentTheme.foregroundColor2 - CexInfoTrigger {} - } - } + Item + { + Layout.fillWidth: true + Layout.topMargin: 10 + Layout.preferredHeight: input_volume.height + inputVolumePrice.height + inputVolumePrice.anchors.topMargin + AmountField + { + id: input_volume + width: parent.width + height: 41 + radius: 18 + left_text: qsTr("Volume") + right_text: atomic_qt_utilities.retrieve_main_ticker(left_ticker) + placeholderText: sell_mode ? qsTr("Amount to sell") : qsTr("Amount to receive") + text: API.app.trading_pg.volume + onTextChanged: setVolume(text) + } - Item - { - Layout.fillWidth: true - Layout.topMargin: 10 - height: input_volume.height + inputVolumePrice.height + inputVolumePrice.anchors.topMargin + DefaultText + { + id: inputVolumePrice + anchors.right: input_volume.right + anchors.top: input_volume.bottom + anchors.topMargin: price_usd_value.anchors.topMargin - AmountField - { - id: input_volume - width: 261 - height: 41 - radius: 18 - left_text: qsTr("Volume") - right_text: atomic_qt_utilities.retrieve_main_ticker(left_ticker) - placeholderText: sell_mode ? qsTr("Amount to sell") : qsTr("Amount to receive") - text: API.app.trading_pg.volume - onTextChanged: setVolume(text) - } + text_value: General.getFiatText(non_null_volume, left_ticker) + font.pixelSize: input_volume.font.pixelSize + color: Dex.CurrentTheme.foregroundColor2 - DefaultText - { - id: inputVolumePrice - anchors.right: input_volume.right - anchors.top: input_volume.bottom - anchors.topMargin: price_usd_value.anchors.topMargin + CexInfoTrigger {} + } + } - text_value: General.getFiatText(non_null_volume, left_ticker) - font.pixelSize: input_volume.font.pixelSize - color: Dex.CurrentTheme.foregroundColor2 + DefaultText + { + Layout.alignment: Qt.AlignHCenter + Layout.topMargin: 6 + font.pixelSize: 13 + text: qsTr("Min volume: ") + API.app.trading_pg.min_trade_vol - CexInfoTrigger {} - } - } + DefaultText + { + anchors.left: parent.right + anchors.leftMargin: 8 + anchors.verticalCenter: parent.verticalCenter - DefaultText + text: General.cex_icon + color: Dex.CurrentTheme.foregroundColor3 + + DefaultMouseArea { - Layout.alignment: Qt.AlignHCenter - Layout.topMargin: 6 - font.pixelSize: 13 - text: qsTr("Min volume: ") + API.app.trading_pg.min_trade_vol + anchors.fill: parent + onClicked: _sliderHelpModal.open() + } - DefaultText + ModalLoader + { + id: _sliderHelpModal + sourceComponent: HelpModal { - anchors.left: parent.right - anchors.leftMargin: 8 - anchors.verticalCenter: parent.verticalCenter - - text: General.cex_icon - color: Dex.CurrentTheme.foregroundColor3 - - DefaultMouseArea - { - anchors.fill: parent - onClicked: _sliderHelpModal.open() - } - - ModalLoader - { - id: _sliderHelpModal - sourceComponent: HelpModal - { - title: qsTr("How to use the pro-view slider ?") - helpSentence: qsTr("This slider is used to setup the order requirements you need.\nLeft slider: Sets the minimum amount required to process a trade.\nRight slider: Sets the volume you want to trade.") - } - } + title: qsTr("How to use the pro-view slider ?") + helpSentence: qsTr("This slider is used to setup the order requirements you need.\nLeft slider: Sets the minimum amount required to process a trade.\nRight slider: Sets the volume you want to trade.") } } + } + } - DefaultRangeSlider - { - id: _volumeRange + DefaultRangeSlider + { + id: _volumeRange - function getRealValue() { return first.position * (first.to - first.from); } - function getRealValue2() { return second.position * (second.to - second.from); } + function getRealValue() { return first.position * (first.to - first.from); } + function getRealValue2() { return second.position * (second.to - second.from); } - enabled: input_volume.enabled && !(!sell_mode && General.isZero(non_null_price)) && to > 0 + enabled: input_volume.enabled && !(!sell_mode && General.isZero(non_null_price)) && to > 0 - Layout.alignment: Qt.AlignHCenter - Layout.preferredWidth: parent.width - 20 + Layout.alignment: Qt.AlignHCenter + Layout.preferredWidth: parent.width - 20 - from: API.app.trading_pg.orderbook.current_min_taker_vol - to: Math.max(0, parseFloat(max_volume)) + from: API.app.trading_pg.orderbook.current_min_taker_vol + to: Math.max(0, parseFloat(max_volume)) - first.value: parseFloat(API.app.trading_pg.min_trade_vol) + first.value: parseFloat(API.app.trading_pg.min_trade_vol) - firstDisabled: !_useCustomMinTradeAmountCheckbox.checked + firstDisabled: !_useCustomMinTradeAmountCheckbox.checked - second.value: parseFloat(non_null_volume) + second.value: parseFloat(non_null_volume) - first.onValueChanged: if (first.pressed) setMinimumAmount(General.formatDouble(first.value)) - second.onValueChanged: if (second.pressed) setVolume(General.formatDouble(second.value)) - } + first.onValueChanged: if (first.pressed) setMinimumAmount(General.formatDouble(first.value)) + second.onValueChanged: if (second.pressed) setVolume(General.formatDouble(second.value)) + } - DexCheckBox - { - id: _useCustomMinTradeAmountCheckbox + DexCheckBox + { + id: _useCustomMinTradeAmountCheckbox - Layout.topMargin: 15 - Layout.alignment: Qt.AlignHCenter + Layout.topMargin: 15 + Layout.alignment: Qt.AlignHCenter - boxWidth: 20.76 - boxHeight: 20.76 - text: qsTr("Use custom minimum trade amount") - textColor: Dex.CurrentTheme.foregroundColor3 - font.pixelSize: 13 - spacing: 3 - } - } + boxWidth: 20.76 + boxHeight: 20.76 + text: qsTr("Use custom minimum trade amount") + textColor: Dex.CurrentTheme.foregroundColor3 + font.pixelSize: 13 + spacing: 3 } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/FeeInfo.qml b/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/FeeInfo.qml index 4b80814b12..0f34b35cfb 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/FeeInfo.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/FeeInfo.qml @@ -15,16 +15,17 @@ import "../../../../Constants" import "../../../../Wallet" -Column { +Column +{ id: bg - width: parent.width - - Row { + Row + { width: bg.width height: tx_fee_text.implicitHeight+25 visible: false - ColumnLayout { + ColumnLayout + { id: fees visible: valid_fee_info && !General.isZero(non_null_volume) @@ -32,7 +33,8 @@ Column { Layout.rightMargin: Layout.leftMargin Layout.alignment: Qt.AlignLeft - DefaultText { + DefaultText + { id: tx_fee_text text_value: General.feeText(curr_fee_info, base_ticker, true, true) font.pixelSize: Style.textSizeSmall1 @@ -43,7 +45,8 @@ Column { } - DefaultText { + DefaultText + { //visible: !fees.visible visible: false text_value: !visible ? "" : diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/TotalView.qml b/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/TotalView.qml index df3539bd8d..d7a9fb9927 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/TotalView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/TotalView.qml @@ -10,85 +10,72 @@ import "../../../../Components" import "../../../../Constants" import Dex.Themes 1.0 as Dex -Item +ColumnLayout { - anchors.fill: parent - anchors.topMargin: 0 - Item + spacing: 5 + RowLayout { - width: parent.width - height: 140 - Column + Layout.fillWidth: true + Layout.preferredHeight: 30 + DefaultText { - width: parent.width-15 - anchors.horizontalCenter: parent.horizontalCenter - spacing: 5 - leftPadding: 10 - rightPadding: 10 - RowLayout - { - width: parent.width - height: 30 - DefaultText - { - color: Dex.CurrentTheme.foregroundColor3 - text: "Total " + API.app.settings_pg.current_fiat + " " + General.cex_icon - font.pixelSize: 14 - font.weight: Font.Normal - opacity: .6 - CexInfoTrigger {} - } - Item - { - height: 30 - Layout.fillWidth: true - DefaultText - { - anchors.verticalCenter: parent.verticalCenter - anchors.rightMargin: 20 - anchors.right: parent.right - font.weight: Font.DemiBold - font.pixelSize: 16 - font.family: 'lato' - text_value: General.getFiatText(total_amount, right_ticker).replace(General.cex_icon, "") - } - } - } - - HorizontalLine + color: Dex.CurrentTheme.foregroundColor3 + text: "Total " + API.app.settings_pg.current_fiat + " " + General.cex_icon + font.pixelSize: 14 + font.weight: Font.Normal + opacity: .6 + CexInfoTrigger {} + } + Item + { + Layout.preferredHeight: 30 + Layout.fillWidth: true + DefaultText { - color: Dex.CurrentTheme.lineSeparatorColor - width: parent.width - 20 - anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + anchors.rightMargin: 20 + anchors.right: parent.right + font.weight: Font.DemiBold + font.pixelSize: 16 + font.family: 'lato' + text_value: General.getFiatText(total_amount, right_ticker).replace(General.cex_icon, "") } - - RowLayout + } + } + + HorizontalLine + { + color: Dex.CurrentTheme.lineSeparatorColor + width: parent.width - 20 + Layout.alignment: Qt.AlignHCenter + } + + RowLayout + { + Layout.fillWidth: true + Layout.preferredHeight: 30 + + DexLabel + { + color: Dex.CurrentTheme.foregroundColor3 + text: "Total " + atomic_qt_utilities.retrieve_main_ticker(right_ticker) + font.pixelSize: 14 + opacity: .6 + font.weight: Font.Normal + } + Item + { + Layout.preferredHeight: 30 + Layout.fillWidth: true + DefaultText { - width: parent.width - height: 30 - DexLabel - { - color: Dex.CurrentTheme.foregroundColor3 - text: "Total " + atomic_qt_utilities.retrieve_main_ticker(right_ticker) - font.pixelSize: 14 - opacity: .6 - font.weight: Font.Normal - } - Item - { - height: 30 - Layout.fillWidth: true - DefaultText - { - anchors.verticalCenter: parent.verticalCenter - anchors.rightMargin: 20 - anchors.right: parent.right - font.weight: Font.DemiBold - font.pixelSize: 16 - font.family: 'lato' - text_value: General.formatCrypto("", total_amount, right_ticker).replace(right_ticker, "") - } - } + anchors.verticalCenter: parent.verticalCenter + anchors.rightMargin: 20 + anchors.right: parent.right + font.weight: Font.DemiBold + font.pixelSize: 16 + font.family: 'lato' + text_value: General.formatCrypto("", total_amount, right_ticker).replace(right_ticker, "") } } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml b/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml index a8806ae50b..f903e369ac 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml @@ -78,49 +78,4 @@ Item Layout.fillWidth: true } } - - // Options menu present in pro mode. - Rectangle - { - anchors.right: parent.right - y: -10 - width: 40 - height: 25 - visible: API.app.trading_pg.current_trading_mode == TradingMode.Pro - radius: height / 2 - color: cog_area.containsMouse || _viewLoader.item.dexConfig.visible ? - Dex.CurrentTheme.floatingBackgroundColor : Dex.CurrentTheme.accentColor - - Behavior on color { ColorAnimation { duration: 150 } } - - Qaterial.ColorIcon - { - source: Qaterial.Icons.cog - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter - iconSize: 15 - color: cog_area.containsMouse || _viewLoader.item.dexConfig.visible ? - Dex.CurrentTheme.foregroundColor2 : Dex.CurrentTheme.foregroundColor - } - - DexMouseArea - { - id: cog_area - hoverEnabled: true - anchors.fill: parent - onClicked: { - if (API.app.trading_pg.current_trading_mode == TradingMode.Pro) - { - if (_viewLoader.item.dexConfig.visible) - { - _viewLoader.item.dexConfig.close() - } - else - { - _viewLoader.item.dexConfig.openAt(mapToItem(Overlay.overlay, width / 2, height), Item.Top) - } - } - } - } - } } diff --git a/atomic_defi_design/qml.qrc b/atomic_defi_design/qml.qrc index f00cdd7623..43290a5bea 100644 --- a/atomic_defi_design/qml.qrc +++ b/atomic_defi_design/qml.qrc @@ -507,7 +507,7 @@ Dex/Exchange/Trade/ConfirmMultiOrderTradeModal.qml Dex/Exchange/Trade/ConfirmTradeModal.qml Dex/Exchange/Trade/DefaultSweetModal.qml - Dex/Exchange/Trade/DexComboBoxLine.qml + Dex/Exchange/ProView/DexComboBoxLine.qml Dex/Exchange/Trade/FeeIcon.qml Dex/Exchange/Trade/MultiOrder.qml Dex/Exchange/Trade/OrderBook/Header.qml @@ -533,8 +533,8 @@ Dex/Exchange/Trade/SimpleView/SubCoinSelector.qml Dex/Exchange/Trade/SimpleView/SubOrders.qml Dex/Exchange/Trade/SimpleView/SubHistory.qml - Dex/Exchange/Trade/SweetDexComboBox.qml - Dex/Exchange/Trade/TickerSelector.qml + Dex/Exchange/ProView/SweetDexComboBox.qml + Dex/Exchange/ProView/TickerSelector.qml Dex/Exchange/Trade/Trade.qml Dex/Exchange/Trade/TradeBox/BuyBox.qml Dex/Exchange/Trade/TradeBox/OrderForm.qml From bc9e62961647c55db97e07958485ba5d57919f24 Mon Sep 17 00:00:00 2001 From: syl Date: Wed, 19 Jan 2022 01:19:00 +0100 Subject: [PATCH 04/46] Update pro view Change "Trading Information" text style --- atomic_defi_design/Dex/Exchange/Trade/ProView.qml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index 6fc33afe0e..6e5b807b7b 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -391,7 +391,9 @@ GridLayout Layout.preferredHeight: prefHeight(this) Layout.fillHeight: true Layout.fillWidth: true - DefaultText { font: DexTypo.subtitle3; text: qsTr("Trading Information") } + + DefaultText { font: DexTypo.subtitle1; text: qsTr("Trading Information") } + Qaterial.LatoTabBar { id: tabView From f6436f84a980cb3ec42ddcdfad1b198536dd2823 Mon Sep 17 00:00:00 2001 From: syl Date: Wed, 19 Jan 2022 14:05:18 +0100 Subject: [PATCH 05/46] Update pro view Change tab indicator color in trading informations section --- atomic_defi_design/Dex/Exchange/Trade/ProView.qml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index 6e5b807b7b..62ff6e77e8 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -414,6 +414,7 @@ GridLayout text: qsTr("Exchange Rates") font.pixelSize: 14 textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + indicatorColor: Dex.CurrentTheme.foregroundColor textSecondaryColor: Dex.CurrentTheme.foregroundColor2 opacity: checked ? 1 : .6 } @@ -424,6 +425,7 @@ GridLayout font.pixelSize: 14 textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + indicatorColor: Dex.CurrentTheme.foregroundColor opacity: checked ? 1 : .6 } Qaterial.LatoTabButton @@ -433,6 +435,7 @@ GridLayout font.pixelSize: 14 textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + indicatorColor: Dex.CurrentTheme.foregroundColor opacity: checked ? 1 : .6 } } From 07a9e1b8da556a1d162ee4dbc2b3eda3b17eaa16 Mon Sep 17 00:00:00 2001 From: syl Date: Wed, 19 Jan 2022 16:29:55 +0100 Subject: [PATCH 06/46] Update pro view style Change padding in trading informations section --- atomic_defi_design/Dex/Exchange/Trade/ProView.qml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index 62ff6e77e8..d21e358015 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -392,6 +392,8 @@ GridLayout Layout.fillHeight: true Layout.fillWidth: true + spacing: 20 + DefaultText { font: DexTypo.subtitle1; text: qsTr("Trading Information") } Qaterial.LatoTabBar @@ -405,8 +407,6 @@ GridLayout anchors.horizontalCenter: parent.horizontalCenter Material.foreground: Dex.CurrentTheme.foregroundColor background: null - topPadding: 15 - leftPadding: 5 Qaterial.LatoTabButton { @@ -439,6 +439,7 @@ GridLayout opacity: checked ? 1 : .6 } } + Rectangle { anchors.horizontalCenter: parent.horizontalCenter From 034e5cd8099720cb5738f158f3120c1fe16ed706 Mon Sep 17 00:00:00 2001 From: syl Date: Thu, 20 Jan 2022 09:10:31 +0100 Subject: [PATCH 07/46] Update pro view Change orders/history style --- .../Dex/Exchange/Trade/Orders/OrdersPage.qml | 299 +++++++----------- 1 file changed, 115 insertions(+), 184 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrdersPage.qml b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrdersPage.qml index 198dfa9c52..a5aaa7d33f 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrdersPage.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrdersPage.qml @@ -82,229 +82,160 @@ Item { ColumnLayout { anchors.horizontalCenter: parent.horizontalCenter - anchors.fill: parent + anchors.margins: 28 anchors.bottomMargin: is_history ? 0 : 10 spacing: 15 - // Bottom part - Item + RowLayout { - id: orders_settings - - property bool displaySetting: false - - Layout.fillWidth: true - Layout.preferredHeight: displaySetting ? 150 : 30 - - Behavior on Layout.preferredHeight + spacing: 10 + DefaultButton { - NumberAnimation - { - duration: 150 - } + Layout.preferredWidth: 86 + Layout.preferredHeight: 29 + radius: 7 + label.font.pixelSize: 14 + text: qsTr("Filter") + iconSource: Qaterial.Icons.filter + onClicked: settings.visible = !settings.visible } - Rectangle + DefaultButton { - width: parent.width - height: orders_settings.displaySetting ? 50 : 10 - anchors.bottom: parent.bottom - anchors.bottomMargin: -15 - visible: false - color: Dex.CurrentTheme.foregroundColor - - Behavior on height + visible: root.is_history + Layout.preferredWidth: 86 + Layout.preferredHeight: 29 + radius: 7 + label.font.pixelSize: 14 + text: qsTr("Export CSV") + onClicked: { - NumberAnimation - { - duration: 150 - } + export_csv_dialog.folder = General.os_file_prefix + API.app.settings_pg.get_export_folder() + export_csv_dialog.open() } } - Row + DefaultText { - x: 5 - y: 0 - spacing: 5 - Qaterial.OutlineButton - { - icon.source: Qaterial.Icons.filter - text: qsTr("Filter") - anchors.verticalCenter: parent.verticalCenter - outlinedColor: Dex.CurrentTheme.foregroundColor - foregroundColor: Dex.CurrentTheme.foregroundColor - onClicked: orders_settings.displaySetting = !orders_settings.displaySetting - } - - DefaultText - { - color: Dex.CurrentTheme.foregroundColor2 - visible: !orders_settings.displaySetting - anchors.verticalCenter: parent.verticalCenter - text: qsTr("Filter") + ": %1 / %2
%3: %4 - %5" - .arg(combo_base.currentTicker) - .arg(combo_rel.currentTicker) - .arg(qsTr("Date")) - .arg(min_date.date.toLocaleDateString(Locale.ShortFormat, "yyyy-MM-dd")) - .arg(max_date.date.toLocaleDateString(Locale.ShortFormat, "yyyy-MM-dd")) - } - - Qaterial.OutlineButton - { - visible: root.is_history && orders_settings.displaySetting - foregroundColor: Dex.CurrentTheme.foregroundColor - outlinedColor: Dex.CurrentTheme.foregroundColor - anchors.verticalCenter: parent.verticalCenter - text: qsTr("Export CSV") - enabled: list_model.length > 0 - onClicked: - { - export_csv_dialog.folder = General.os_file_prefix + API.app.settings_pg.get_export_folder() - export_csv_dialog.open() - } - } + color: Dex.CurrentTheme.foregroundColor2 + visible: !settings.visible + text: qsTr("Filter") + ": %1 / %2
%3: %4 - %5".arg(combo_base.currentTicker).arg(combo_rel.currentTicker).arg(qsTr("Date")).arg(min_date.date.toLocaleDateString(Locale.ShortFormat, "yyyy-MM-dd")).arg(max_date.date.toLocaleDateString(Locale.ShortFormat, "yyyy-MM-dd")) } + } + + ColumnLayout + { + id: settings + visible: false + spacing: 8 - Row + RowLayout { - anchors.right: parent.right - y: 0 - rightPadding: 5 - Qaterial.OutlineButton + spacing: 10 + DefaultButton { - visible: root.is_history & orders_settings.displaySetting - Layout.leftMargin: 30 - text: qsTr("Apply Filter") - foregroundColor: enabled ? Dex.CurrentTheme.okColor : Dex.CurrentTheme.buttonColorDisabled - outlinedColor: enabled ? Dex.CurrentTheme.okColor : Dex.CurrentTheme.buttonColorDisabled + visible: root.is_history enabled: list_model_proxy.can_i_apply_filtering + Layout.preferredWidth: 86 + Layout.preferredHeight: 29 + radius: 7 + label.font.pixelSize: 14 + text: qsTr("Apply Filter") onClicked: list_model_proxy.apply_all_filtering() - anchors.verticalCenter: parent.verticalCenter } - Qaterial.OutlineButton + DefaultButton { - icon.source: Qaterial.Icons.close - text: "Cancel All" - visible: !is_history && API.app.orders_mdl.length > 0 - anchors.verticalCenter: parent.verticalCenter - outlinedColor: Dex.CurrentTheme.noColor - foregroundColor: Dex.CurrentTheme.noColor + visible: !root.is_history && API.app.orders_mdl.length > 0 + Layout.preferredWidth: 86 + Layout.preferredHeight: 29 + radius: 7 + label.font.pixelSize: 14 + text: qsTr("Cancel All") + iconSource: Qaterial.Icons.close onClicked: API.app.trading_pg.orders.cancel_order(list_model_proxy.get_filtered_ids()) } } - ColumnLayout + RowLayout { - visible: orders_settings.height > 75 - width: parent.width - 20 - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: parent.bottom - anchors.bottomMargin: -15 - spacing: 10 + Layout.alignment: Qt.AlignHCenter - RowLayout + DefaultSweetComboBox { - Layout.fillWidth: true - Layout.preferredHeight: 50 - Item - { - Layout.fillWidth: true - Layout.fillHeight: true - DefaultSweetComboBox - { - id: combo_base - - anchors.fill: parent - - model: API.app.portfolio_pg.global_cfg_mdl.all_proxy - onCurrentTickerChanged: applyFilter() - - valueRole: "ticker" - textRole: 'ticker' - - backgroundColor: Dex.CurrentTheme.backgroundColor - popupBackgroundColor: Dex.CurrentTheme.backgroundColor - } - } - + id: combo_base + Layout.preferredWidth: parent.width / 2 - swapCoinFilterIcon.width + model: API.app.portfolio_pg.global_cfg_mdl.all_proxy + valueRole: "ticker" + textRole: 'ticker' + backgroundColor: Dex.CurrentTheme.backgroundColor + popupBackgroundColor: Dex.CurrentTheme.backgroundColor + onCurrentTickerChanged: applyFilter() + } - Qaterial.ColorIcon + Qaterial.ColorIcon + { + id: swapCoinFilterIcon + source: Qaterial.Icons.swapHorizontal + color: Dex.CurrentTheme.foregroundColor + DefaultMouseArea { - source: Qaterial.Icons.swapHorizontal - color: Dex.CurrentTheme.foregroundColor - DefaultMouseArea + id: swap_button + anchors.fill: parent + hoverEnabled: true + onClicked: { - id: swap_button - anchors.fill: parent - hoverEnabled: true - onClicked: - { - const base_idx = combo_base.currentTicker - combo_base.currentTicker = combo_rel.currentTicker - combo_rel.currentTicker = base_idx - } - } - } - - Item - { - Layout.fillWidth: true - Layout.fillHeight: true - - DefaultSweetComboBox - { - id: combo_rel - - anchors.fill: parent - - model: API.app.portfolio_pg.global_cfg_mdl.all_proxy - onCurrentTickerChanged: applyFilter() - Layout.fillWidth: true - valueRole: "ticker" - textRole: 'ticker' - - backgroundColor: Dex.CurrentTheme.backgroundColor - popupBackgroundColor: Dex.CurrentTheme.backgroundColor + const base_idx = combo_base.currentTicker + combo_base.currentTicker = combo_rel.currentTicker + combo_rel.currentTicker = base_idx } } + } - + DefaultSweetComboBox + { + id: combo_rel + Layout.fillWidth: true + model: API.app.portfolio_pg.global_cfg_mdl.all_proxy + valueRole: "ticker" + textRole: 'ticker' + backgroundColor: Dex.CurrentTheme.backgroundColor + popupBackgroundColor: Dex.CurrentTheme.backgroundColor + onCurrentTickerChanged: applyFilter() } + } - RowLayout + RowLayout + { + Qaterial.TextFieldDatePicker { - Qaterial.TextFieldDatePicker - { - id: min_date - title: qsTr("From") - from: default_min_date - to: default_max_date - date: default_min_date - font.pixelSize: 13 - opacity: .8 - color: Dex.CurrentTheme.foregroundColor - backgroundColor: DexTheme.portfolioPieGradient ? '#FFFFFF' : 'transparent' - onAccepted: applyDateFilter() - Layout.fillWidth: true - } + id: min_date + title: qsTr("From") + from: default_min_date + to: default_max_date + date: default_min_date + font.pixelSize: 13 + opacity: .8 + color: Dex.CurrentTheme.foregroundColor + backgroundColor: DexTheme.portfolioPieGradient ? '#FFFFFF' : 'transparent' + onAccepted: applyDateFilter() + Layout.fillWidth: true + } - Qaterial.TextFieldDatePicker - { - id: max_date - enabled: min_date.enabled - title: qsTr("To") - from: min_date.date - to: default_max_date - date: default_max_date - font.pixelSize: 13 - opacity: .8 - color: Dex.CurrentTheme.foregroundColor - backgroundColor: DexTheme.portfolioPieGradient ? '#FFFFFF' : 'transparent' - onAccepted: applyDateFilter() - Layout.fillWidth: true - } + Qaterial.TextFieldDatePicker + { + id: max_date + enabled: min_date.enabled + title: qsTr("To") + from: min_date.date + to: default_max_date + date: default_max_date + font.pixelSize: 13 + opacity: .8 + color: Dex.CurrentTheme.foregroundColor + backgroundColor: DexTheme.portfolioPieGradient ? '#FFFFFF' : 'transparent' + onAccepted: applyDateFilter() + Layout.fillWidth: true } } } From 401e7b30a0737625c84cb12f39e99fe81b21cad6 Mon Sep 17 00:00:00 2001 From: syl Date: Thu, 20 Jan 2022 15:07:44 +0100 Subject: [PATCH 08/46] Update pro view Change order book style --- .../Dex/Exchange/Trade/OrderBook/Header.qml | 64 +++++++++---------- .../Dex/Exchange/Trade/OrderBook/Vertical.qml | 10 ++- 2 files changed, 38 insertions(+), 36 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Header.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Header.qml index bb7f85c277..451885a5a1 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Header.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Header.qml @@ -7,42 +7,36 @@ import Qaterial 1.0 as Qaterial import "../../../Components" import "../../../Constants" -Item +Row { - property bool is_ask: false - RowLayout + DefaultText { - anchors.fill: parent - DefaultText - { - 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 - { - Layout.preferredWidth: (parent.width / 100) * 30 - text: qsTr("Quantity") + " (" + atomic_qt_utilities.retrieve_main_ticker(left_ticker) + ")" - font.family: DexTypo.fontFamily - font.pixelSize: 12 - font.bold: true - font.weight: Font.Black - horizontalAlignment: Text.AlignRight - } - DefaultText - { - Layout.preferredWidth: (parent.width / 100) * 30 - text: qsTr("Total") + " (" + 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 - } + width: (parent.width / 100) * 34 + text: 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 + { + width: (parent.width / 100) * 32 + text: qsTr("Quantity") + " (" + atomic_qt_utilities.retrieve_main_ticker(left_ticker) + ")" + font.family: DexTypo.fontFamily + font.pixelSize: 12 + font.bold: true + font.weight: Font.Black + horizontalAlignment: Text.AlignRight + } + DefaultText + { + width: (parent.width / 100) * 32 + text: qsTr("Total") + " (" + 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 } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml index 0d7022259d..a5bcaec43c 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml @@ -20,7 +20,7 @@ FloatingBackground { anchors.fill: parent anchors.margins: 20 - spacing: 10 + spacing: 20 DefaultText { @@ -30,6 +30,12 @@ FloatingBackground text: qsTr("Order Book") } + Header + { + Layout.fillWidth: true + Layout.preferredHeight: 30 + } + List { isAsk: true @@ -37,6 +43,7 @@ FloatingBackground Layout.fillHeight: true Layout.fillWidth: true } + Item { Layout.preferredHeight: 4 @@ -49,6 +56,7 @@ FloatingBackground color: Dex.CurrentTheme.floatingBackgroundColor } } + List { isAsk: false From 720c65ea2f0809001520c14e33393a4447f7a0de Mon Sep 17 00:00:00 2001 From: syl Date: Thu, 27 Jan 2022 10:18:12 +0100 Subject: [PATCH 09/46] Update pro view Change best order list style --- .../Dex/Exchange/Trade/BestOrder/List.qml | 34 +++++++++++++------ 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml index 4dd84dc7c6..97abfd5f19 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml @@ -6,6 +6,7 @@ import Qaterial 1.0 as Qaterial import Dex.Themes 1.0 as Dex import "../../../Constants" +import "../../../Components" Rectangle { @@ -13,16 +14,29 @@ Rectangle color: Dex.CurrentTheme.floatingBackgroundColor radius: 10 - Header {} - - ListView + ColumnLayout { - id: list - anchors.topMargin: 40 - anchors.fill: parent - model: API.app.trading_pg.orderbook.best_orders.proxy_mdl - clip: true - reuseItems: true - delegate: ListDelegate {} + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.margins: 20 + spacing: 20 + + DefaultText + { + text: qsTr("Best Orders") + font: DexTypo.subtitle1 + } + + Header {} + + ListView + { + id: list + model: API.app.trading_pg.orderbook.best_orders.proxy_mdl + clip: true + reuseItems: true + delegate: ListDelegate {} + } } } From 4be2b3520c1d75e1a08fd96d61e5249be820c2d9 Mon Sep 17 00:00:00 2001 From: syl Date: Mon, 31 Jan 2022 12:39:20 +0100 Subject: [PATCH 10/46] Update pro view Change place order form subtitle --- atomic_defi_design/Dex/Exchange/Trade/ProView.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index d21e358015..1263eef0a0 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -253,7 +253,7 @@ GridLayout Layout.topMargin: 20 Layout.leftMargin: 20 text: qsTr("Place Order") - font: DexTypo.subtitle3 + font: DexTypo.subtitle1 } // Market mode selector From 9ae6cbd6f42730e45005391b5828ffdda9dc81c0 Mon Sep 17 00:00:00 2001 From: syl Date: Mon, 31 Jan 2022 20:01:26 +0100 Subject: [PATCH 11/46] Update pro view Change order book view title style --- atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml | 2 -- 1 file changed, 2 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml index a5bcaec43c..83e87d85fb 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml @@ -24,8 +24,6 @@ FloatingBackground DefaultText { - Layout.leftMargin: 10 - Layout.topMargin: 10 font: DexTypo.subtitle1 text: qsTr("Order Book") } From 55c8682afab60cebca19e71607290151337d9a8e Mon Sep 17 00:00:00 2001 From: Syl Date: Sun, 6 Feb 2022 23:43:48 +0100 Subject: [PATCH 12/46] Pro Trading View: Change orders/history style Edit separator maximum width between header and list --- atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml | 1 + 1 file changed, 1 insertion(+) diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml index 3c26cc341d..eff7eaa051 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml @@ -22,6 +22,7 @@ Item HorizontalLine { Layout.fillWidth: true + Layout.maximumWidth: 511 } DefaultListView From 77b79abf2b351208b2a998cc9dc111c7f46c3ff5 Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 7 Feb 2022 00:29:38 +0100 Subject: [PATCH 13/46] mm2: Change how my_orders_answer and order_swaps_data are parsed Remove trailing whitespaces between date and hour --- src/core/atomicdex/api/mm2/mm2.cpp | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/atomicdex/api/mm2/mm2.cpp b/src/core/atomicdex/api/mm2/mm2.cpp index b9beab57dc..ef66bb7281 100644 --- a/src/core/atomicdex/api/mm2/mm2.cpp +++ b/src/core/atomicdex/api/mm2/mm2.cpp @@ -285,7 +285,7 @@ namespace mm2::api .base_amount = action == "Sell" ? base_amount : rel_amount, .rel_amount = action == "Sell" ? rel_amount : base_amount, .order_type = is_maker ? "maker" : "taker", - .human_date = QString::fromStdString(atomic_dex::utils::to_human_date(time_key / 1000, "%F %T")), + .human_date = QString::fromStdString(atomic_dex::utils::to_human_date(time_key / 1000, "%F %T")), .unix_timestamp = static_cast(time_key), .order_id = QString::fromStdString(key), .order_status = "matching", @@ -428,7 +428,7 @@ namespace mm2::api { const nlohmann::json& j_evt = content.at("event"); auto timestamp = content.at("timestamp").get(); - std::string human_date = atomic_dex::utils::to_human_date(timestamp / 1000, "%F %H:%M:%S"); + std::string human_date = atomic_dex::utils::to_human_date(timestamp / 1000, "%F %H:%M:%S"); auto evt_type = j_evt.at("type").get(); auto rate_bundler = From 54d9a091a08e4cc6f40ed9b1f852d1bbfe90f327 Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 7 Feb 2022 11:54:19 +0100 Subject: [PATCH 14/46] QML Components: Update SwapIcon properties Allow custom colors --- atomic_defi_design/Dex/Components/SwapIcon.qml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/atomic_defi_design/Dex/Components/SwapIcon.qml b/atomic_defi_design/Dex/Components/SwapIcon.qml index d193b13f66..9fcfdfba11 100644 --- a/atomic_defi_design/Dex/Components/SwapIcon.qml +++ b/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 } } From 150324904c78aa99baaaeab8ec278f5e1198bd70 Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 7 Feb 2022 11:58:23 +0100 Subject: [PATCH 15/46] Pro Trading View: Update orders/history style --- .../Dex/Exchange/Trade/Orders/OrderLine.qml | 166 +++++++++--------- .../Dex/Exchange/Trade/Orders/OrderList.qml | 5 +- .../Dex/Exchange/Trade/Orders/OrderModal.qml | 72 ++++---- .../Dex/Exchange/Trade/Orders/OrdersPage.qml | 22 +-- 4 files changed, 129 insertions(+), 136 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderLine.qml b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderLine.qml index 80b7af29bc..2aa85208a7 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderLine.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderLine.qml @@ -10,15 +10,13 @@ import App 1.0 import "../../../Components" import Dex.Themes 1.0 as Dex -Rectangle +FloatingBackground { property var details property alias clickable: mouse_area.enabled readonly property bool is_placed_order: !details ? false : details.order_id !== '' - width: list.model.count > 6 ? list.width - 15 : list.width - 8 - height: 40 - color: mouse_area.containsMouse? DexTheme.hightlightColor : "transparent" + height: 30 DefaultMouseArea { @@ -35,48 +33,15 @@ Rectangle RowLayout { anchors.fill: parent - anchors.leftMargin: 10 - anchors.rightMargin: 10 - - DefaultText - { - id: status_text - Layout.preferredWidth: (parent.width / 100) * 4 - Layout.alignment: Qt.AlignVCenter - visible: clickable ? !details ? false : - (details.is_swap || !details.is_maker) : false - - font.pixelSize: getStatusFontSize(details.order_status) - color: !details ? Dex.CurrentTheme.foregroundColor : getStatusColor(details.order_status) - text_value: !details ? "" : visible ? getStatusStep(details.order_status) : '' - } - - Item - { - Layout.fillHeight: true - Layout.preferredWidth: (parent.width / 100) * 4 - Layout.alignment: Qt.AlignVCenter - visible: !status_text.visible ? clickable ? true : false : false - - Qaterial.ColorIcon - { - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - iconSize: 17 - color: Dex.CurrentTheme.foregroundColor - source: Qaterial.Icons.clipboardTextSearchOutline - } - } DefaultText { visible: clickable - font.pixelSize: base_amount.font.pixelSize + Layout.preferredWidth: (parent.width / 100) * 18 + font.pixelSize: 12 text_value: !details ? "" : details.date ?? "" - Layout.fillHeight: true - Layout.preferredWidth: (parent.width / 100) * 10 - verticalAlignment: Label.AlignVCenter - horizontalAlignment: Text.AlignHCenter + elide: Text.ElideRight + maximumLineCount: 1 } DefaultImage @@ -84,48 +49,93 @@ Rectangle id: base_icon source: General.coinIcon(!details ? atomic_app_primary_coin : details.base_coin ?? atomic_app_primary_coin) - Layout.preferredWidth: Style.textSize1 - Layout.preferredHeight: Style.textSize1 + Layout.preferredWidth: 15 + Layout.preferredHeight: width Layout.alignment: Qt.AlignVCenter - Layout.leftMargin: 2 + Layout.leftMargin: 5 } - DefaultText + Row { - id: base_amount - text_value: !details ? "" : General.formatCrypto("", details.base_amount, details.base_coin, details.base_amount_current_currency, API.app.settings_pg.current_currency) - font.pixelSize: 10 - Layout.fillHeight: true - Layout.preferredWidth: (parent.width / 100) * 33 - verticalAlignment: Label.AlignVCenter - privacy: is_placed_order + Layout.preferredWidth: (parent.width / 100) * 30 + spacing: 6 + DefaultText + { + font.weight: Font.Bold + font.pixelSize: 12 + text: !details ? "" : details.base_coin + privacy: is_placed_order + elide: Text.ElideRight + maximumLineCount: 1 + width: implicitWidth > (parent.width / 100) * 30 ? (parent.width / 100) * 30 : implicitWidth + } + DefaultText + { + font.pixelSize: 12 + text: !details ? "" : details.base_amount + privacy: is_placed_order + elide: Text.ElideRight + maximumLineCount: 1 + width: implicitWidth > (parent.width / 100) * 40 ? (parent.width / 100) * 40 : implicitWidth + } + DefaultText + { + font.pixelSize: 12 + text: !details ? "" : "(%1 %2)".arg(details.base_amount_current_currency).arg(API.app.settings_pg.current_fiat_sign) + privacy: is_placed_order + elide: Text.ElideRight + maximumLineCount: 1 + width: implicitWidth > (parent.width / 100) * 30 ? (parent.width / 100) * 30 : implicitWidth + } } Item { - Layout.fillHeight: true Layout.fillWidth: true SwapIcon { - visible: !status_text.visible anchors.fill: parent anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter + color: details.order_status === "failed" ? Dex.CurrentTheme.noColor : Dex.CurrentTheme.foregroundColor top_arrow_ticker: !details ? atomic_app_primary_coin : details.base_coin ?? "" bottom_arrow_ticker: !details ? atomic_app_primary_coin : details.rel_coin ?? "" } } - DefaultText + Row { - id: rel_amount - text_value: !details ? "" : General.formatCrypto("", details.rel_amount, details.rel_coin, details.rel_amount_current_currency, API.app.settings_pg.current_currency) - font.pixelSize: base_amount.font.pixelSize - Layout.fillHeight: true - Layout.preferredWidth: (parent.width / 100) * 33 - verticalAlignment: Label.AlignVCenter - horizontalAlignment: Label.AlignRight - privacy: is_placed_order + layoutDirection: Qt.RightToLeft + Layout.preferredWidth: (parent.width / 100) * 30 + spacing: 6 + DefaultText + { + font.pixelSize: 12 + text: !details ? "" : "(%1 %2)".arg(details.rel_amount_current_currency).arg(API.app.settings_pg.current_fiat_sign) + privacy: is_placed_order + elide: Text.ElideRight + maximumLineCount: 1 + width: implicitWidth > (parent.width / 100) * 30 ? (parent.width / 100) * 30 : implicitWidth + } + DefaultText + { + font.pixelSize: 12 + text: !details ? "" : details.rel_amount + privacy: is_placed_order + elide: Text.ElideRight + maximumLineCount: 1 + width: implicitWidth > (parent.width / 100) * 40 ? (parent.width / 100) * 40 : implicitWidth + } + DefaultText + { + font.weight: Font.Bold + font.pixelSize: 12 + text: !details ? "" : details.rel_coin + privacy: is_placed_order + elide: Text.ElideRight + maximumLineCount: 1 + width: implicitWidth > (parent.width / 100) * 30 ? (parent.width / 100) * 30 : implicitWidth + } } DefaultImage @@ -133,20 +143,18 @@ Rectangle id: rel_icon source: General.coinIcon(!details ? atomic_app_primary_coin : details.rel_coin ?? atomic_app_secondary_coin) - - width: base_icon.width - Layout.preferredWidth: Style.textSize1 - Layout.preferredHeight: Style.textSize1 + Layout.preferredWidth: 15 + Layout.preferredHeight: 15 Layout.alignment: Qt.AlignVCenter } DefaultText { - font.pixelSize: base_amount.font.pixelSize + font.pixelSize: 12 visible: !details || details.recoverable === undefined ? false : details.recoverable && details.order_status !== "refunding" - Layout.fillHeight: true - Layout.preferredWidth: (parent.width / 100) * 5 + Layout.preferredWidth: (parent.width / 100) * 2 + Layout.preferredHeight: width verticalAlignment: Label.AlignVCenter horizontalAlignment: Label.AlignHCenter text_value: Style.warningCharacter @@ -164,18 +172,14 @@ Rectangle } } - Qaterial.FlatButton + MouseArea { id: cancel_button_text - visible: (!is_history ? details.cancellable ?? false : false) === true ? (mouse_area.containsMouse || hovered) ? true : false : false + visible: !is_history - Layout.fillHeight: true - Layout.preferredWidth: (parent.width / 100) * 3 - Layout.alignment: Qt.AlignVCenter - - outlinedColor: Dex.CurrentTheme.noColor - hoverEnabled: true + Layout.preferredWidth: (parent.width / 100) * 2 + Layout.preferredHeight: width onClicked: if (details) cancelOrder(details.order_id) @@ -188,13 +192,11 @@ Rectangle } Qaterial.ColorIcon { - anchors.centerIn: parent - iconSize: 13 + anchors.fill: parent + iconSize: 14 color: Dex.CurrentTheme.noColor source: Qaterial.Icons.close - scale: parent.visible ? 1 : 0 } - } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml index eff7eaa051..13a2be6765 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml @@ -9,13 +9,15 @@ import "../../../" Item { + id: root + property string title property var items property bool is_history: false ColumnLayout { - width: parent.width - 10 + width: parent.width height: parent.height anchors.horizontalCenter: parent.horizontalCenter @@ -48,6 +50,7 @@ Item details: model opacity: anim_time + width: root.width } populate: Transition diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderModal.qml b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderModal.qml index f230dc57ff..fbbe570b81 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderModal.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderModal.qml @@ -2,38 +2,38 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 -import App 1.0 - import Qaterial 1.0 as Qaterial +import App 1.0 +import Dex.Themes 1.0 as Dex import "../../../Components" -BasicModal { +BasicModal +{ id: root property var details - onDetailsChanged: { - if (!details) root.close() - } - + onDetailsChanged: if (!details) root.close() onOpened: swap_progress.updateSimulatedTime() - onClosed: details = undefined - ModalContent { + ModalContent + { title: !details ? "" : details.is_swap ? qsTr("Swap Details") : qsTr("Order Details") titleAlignment: Qt.AlignHCenter // Complete image - DefaultImage { + DefaultImage + { visible: !details ? false : details.is_swap && details.order_status === "successful" Layout.alignment: Qt.AlignHCenter source: General.image_path + "exchange-trade-complete.png" } // Loading symbol - DefaultBusyIndicator { + DefaultBusyIndicator + { visible: !details ? false : details.is_swap && details.order_status !== "successful" running: (!details ? false : details.is_swap && @@ -43,20 +43,21 @@ BasicModal { } // Status Text - DefaultText { + DefaultText + { Layout.alignment: Qt.AlignHCenter Layout.topMargin: 5 font.pixelSize: Style.textSize1 font.bold: true visible: !details ? false : details.is_swap || !details.is_maker - color: !details ? "white" : - visible ? getStatusColor(details.order_status) : '' + color: Dex.CurrentTheme.foregroundColor text_value: !details ? "" : visible ? getStatusText(details.order_status) : '' } - OrderContent { + OrderContent + { Layout.topMargin: 25 Layout.preferredWidth: 500 Layout.alignment: Qt.AlignHCenter @@ -65,21 +66,17 @@ BasicModal { in_modal: true } - HorizontalLine { - Layout.fillWidth: true - Layout.bottomMargin: 20 - color: Style.colorWhite8 - } - // Maker/Taker - DefaultText { + DefaultText + { text_value: !details ? "" : details.is_maker ? qsTr("Maker Order") : qsTr("Taker Order") color: Style.colorThemeDarkLight Layout.alignment: Qt.AlignRight } // Refund state - TextFieldWithTitle { + TextFieldWithTitle + { Layout.topMargin: -20 title: qsTr("Refund State") @@ -91,14 +88,16 @@ BasicModal { } // Date - TextEditWithTitle { + TextEditWithTitle + { title: qsTr("Date") text: !details ? "" : details.date visible: text !== '' } // ID - TextEditWithTitle { + TextEditWithTitle + { title: qsTr("ID") text: !details ? "" : details.order_id visible: text !== '' @@ -107,7 +106,8 @@ BasicModal { } // Payment ID - TextEditWithTitle { + TextEditWithTitle + { title: !details ? "" : details.is_maker ? qsTr("Maker Payment Sent ID") : qsTr("Maker Payment Spent ID") text: !details ? "" : details.maker_payment_id visible: text !== '' @@ -115,7 +115,8 @@ BasicModal { } // Payment ID - TextEditWithTitle { + TextEditWithTitle + { title: !details ? "" : details.is_maker ? qsTr("Taker Payment Spent ID") : qsTr("Taker Payment Sent ID") text: !details ? "" : details.taker_payment_id visible: text !== '' @@ -123,14 +124,16 @@ BasicModal { } // Error ID - TextEditWithTitle { + TextEditWithTitle + { title: qsTr("Error ID") text: !details ? "" : details.order_error_state visible: text !== '' } // Error Details - TextFieldWithTitle { + TextFieldWithTitle + { title: qsTr("Error Log") field.text: !details ? "" : details.order_error_message field.readOnly: true @@ -139,15 +142,8 @@ BasicModal { visible: field.text !== '' } - HorizontalLine { - visible: swap_progress.visible - Layout.fillWidth: true - Layout.topMargin: 10 - Layout.bottomMargin: Layout.topMargin - color: Style.colorWhite8 - } - - SwapProgress { + SwapProgress + { id: swap_progress visible: General.exists(details) && details.order_status !== "matching" Layout.fillWidth: true diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrdersPage.qml b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrdersPage.qml index a5aaa7d33f..a37a7c9bdb 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrdersPage.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrdersPage.qml @@ -146,7 +146,8 @@ Item { } DefaultButton { - visible: !root.is_history && API.app.orders_mdl.length > 0 + visible: !root.is_history + enabled: API.app.orders_mdl.length > 0 Layout.preferredWidth: 86 Layout.preferredHeight: 29 radius: 7 @@ -240,22 +241,13 @@ Item { } } - RowLayout + OrderList { - Layout.fillWidth: true + id: order_list + items: list_model + is_history: root.is_history Layout.fillHeight: true - - spacing: parent.spacing - - OrderList - { - id: order_list - items: list_model - is_history: root.is_history - Layout.fillHeight: true - Layout.fillWidth: true - } - + Layout.fillWidth: true } } ModalLoader From e7320fdf6649bce13ae2c46e0dd342c1f8ffee7b Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 7 Feb 2022 12:22:24 +0100 Subject: [PATCH 16/46] Pro Trading View: Update header style and some margins --- .../Dex/Exchange/Trade/ProView.qml | 4 - .../Dex/Exchange/Trade/Trade.qml | 14 ++- .../Trade/Trading/TradeViewHeader.qml | 96 ++++++++----------- 3 files changed, 51 insertions(+), 63 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index 1263eef0a0..db7ad28f79 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -66,10 +66,6 @@ GridLayout function prefWidth(item) { return (width / columns) * item.Layout.columnSpan; } function prefHeight(item) { return (height / rows) * item.Layout.rowSpan; } - anchors.topMargin: 20 - anchors.leftMargin: 10 - anchors.fill: parent - rows: 12 columns: 12 diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml index a064a424d8..16d58a969a 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml @@ -162,14 +162,20 @@ Item readonly property bool buy_sell_rpc_busy: API.app.trading_pg.buy_sell_rpc_busy readonly property var buy_sell_last_rpc_data: API.app.trading_pg.buy_sell_last_rpc_data + TradeViewHeader + { + width: 138 + anchors.left: parent.left + anchors.leftMargin: 50 + anchors.top: parent.top + } + Loader { id: _viewLoader anchors.fill: parent - anchors.leftMargin: 10 - anchors.rightMargin: 10 + anchors.topMargin: 70 + anchors.leftMargin: 50 source: API.app.trading_pg.current_trading_mode == TradingMode.Pro ? "ProView.qml" : "SimpleView/Main.qml" } - - TradeViewHeader { } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml b/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml index f903e369ac..f28fe3c0a4 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml @@ -13,69 +13,55 @@ import "../../../Components" import App 1.0 import Dex.Themes 1.0 as Dex +// Simple/Pro toggle group Item { - width: parent.width - 5 - anchors.horizontalCenter: parent.horizontalCenter + // Simple/Pro select cursor + Rectangle + { + width: 86 + height: 34 + radius: 18 + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: API.app.trading_pg.current_trading_mode == TradingMode.Simple ? _simpleLabel.horizontalCenter : _proLabel.horizontalCenter + color: Dex.CurrentTheme.tabSelectedColor + } - ColumnLayout + DexLabel { - anchors.fill: parent - spacing: 50 + id: _simpleLabel + text: "Simple" + color: API.app.trading_pg.current_trading_mode == TradingMode.Simple ? Dex.CurrentTheme.foregroundColor2 : Dex.CurrentTheme.foregroundColor + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 16 + font.weight: Font.Bold - // Simple/Pro toggle group - Item + DexMouseArea { - Layout.leftMargin: 30 - Layout.preferredWidth: 120 - - // Simple/Pro select cursor - Rectangle - { - width: 84 - height: 32 - radius: 18 - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: API.app.trading_pg.current_trading_mode == TradingMode.Simple ? _simpleLabel.horizontalCenter : _proLabel.horizontalCenter - color: Dex.CurrentTheme.tabSelectedColor - } + id: simple_area + hoverEnabled: true + anchors.fill: parent + onClicked: API.app.trading_pg.current_trading_mode = TradingMode.Simple + } + } - DexLabel - { - id: _simpleLabel - text: "Simple" - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - font.bold: true - DexMouseArea - { - id: simple_area - hoverEnabled: true - anchors.fill: parent - onClicked: API.app.trading_pg.current_trading_mode = TradingMode.Simple - } - } + DexLabel + { + id: _proLabel + text: "Pro" + color: API.app.trading_pg.current_trading_mode == TradingMode.Pro ? Dex.CurrentTheme.foregroundColor2 : Dex.CurrentTheme.foregroundColor + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 16 + font.weight: Font.Bold - DexLabel - { - id: _proLabel - text: "Pro" - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - font.bold: true - DexMouseArea - { - id: pro_area - hoverEnabled: true - anchors.fill: parent - onClicked: API.app.trading_pg.current_trading_mode = TradingMode.Pro - } - } - } - Item + DexMouseArea { - Layout.fillHeight: true - Layout.fillWidth: true - } + id: pro_area + hoverEnabled: true + anchors.fill: parent + onClicked: API.app.trading_pg.current_trading_mode = TradingMode.Pro + } } } From 5b22473d2468433354e5a56a0496156b53633c96 Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 7 Feb 2022 12:30:27 +0100 Subject: [PATCH 17/46] QML Components: Allow access to DexPaginator combobox --- atomic_defi_design/Dex/Components/DexPaginator.qml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/atomic_defi_design/Dex/Components/DexPaginator.qml b/atomic_defi_design/Dex/Components/DexPaginator.qml index 35fc8bc653..fb5c63a8d0 100644 --- a/atomic_defi_design/Dex/Components/DexPaginator.qml +++ b/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,6 +72,8 @@ 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] From 20f0a910f56f847f6dff80be58b9cea2f4521458 Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 7 Feb 2022 12:31:09 +0100 Subject: [PATCH 18/46] QML Components: Change DexPaginator style --- atomic_defi_design/Dex/Components/DexPaginator.qml | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/atomic_defi_design/Dex/Components/DexPaginator.qml b/atomic_defi_design/Dex/Components/DexPaginator.qml index fb5c63a8d0..e92697432c 100644 --- a/atomic_defi_design/Dex/Components/DexPaginator.qml +++ b/atomic_defi_design/Dex/Components/DexPaginator.qml @@ -79,6 +79,8 @@ RowLayout 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 @@ -88,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 From b8d4ec36cfbf8da4ee0ad920b5fbf320e1137589 Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 7 Feb 2022 12:31:28 +0100 Subject: [PATCH 19/46] Pro Trading View: Update orders/history style --- atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml index 13a2be6765..3a9ef19e80 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml @@ -3,9 +3,9 @@ import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 import App 1.0 - import "../../../Components" import "../../../" +import Dex.Themes 1.0 as Dex Item { @@ -97,6 +97,8 @@ Item Layout.maximumHeight: 70 Layout.preferredWidth: parent.width Layout.bottomMargin: 10 + itemsPerPageComboBox.mainBackgroundColor: Dex.CurrentTheme.buttonColorEnabled + itemsPerPageComboBox.dropdownBackgroundColor: Dex.CurrentTheme.buttonColorEnabled } } From 3fc4e6a4a7dcf58a09208f8f35a1ad4ecb52e633 Mon Sep 17 00:00:00 2001 From: Syl Date: Tue, 15 Feb 2022 15:06:36 +0100 Subject: [PATCH 20/46] Pro Trading View: Fix qml error Undefined reference to order_form from orderbook --- .../Dex/Exchange/Trade/OrderBook/ListDelegate.qml | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml index 25032edd91..50ba7b0c5a 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml @@ -57,20 +57,6 @@ Item { 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) - { - order_form.visible = true - } - - if (order_form.hidden === true) - { - order_form.hidden = false - if (order_form.contentVisible === false) - { - order_form.contentVisible = true - } - } } } From 96d1900c8642094537d6958ed892c83b421d67e4 Mon Sep 17 00:00:00 2001 From: Syl Date: Tue, 15 Feb 2022 15:07:10 +0100 Subject: [PATCH 21/46] Pro Trading View: Remove default size from market mode but selector comp --- atomic_defi_design/Dex/Exchange/ProView/MarketModeSelector.qml | 2 -- 1 file changed, 2 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/ProView/MarketModeSelector.qml b/atomic_defi_design/Dex/Exchange/ProView/MarketModeSelector.qml index 48f7c7713e..51c400ae90 100644 --- a/atomic_defi_design/Dex/Exchange/ProView/MarketModeSelector.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/MarketModeSelector.qml @@ -10,8 +10,6 @@ Rectangle property int marketMode: Dex.MarketMode.Sell property string ticker: "" - width: 124 - height: 48 radius: 18 gradient: Gradient From dd256e55e72cbf58386d0ffb9397873c9b972a42 Mon Sep 17 00:00:00 2001 From: Syl Date: Tue, 15 Feb 2022 15:07:45 +0100 Subject: [PATCH 22/46] Pro Trading View: Update place order form style --- .../Dex/Exchange/Trade/ProView.qml | 78 +++++++++---------- .../Dex/Exchange/Trade/TradeBox/OrderForm.qml | 26 ++++--- .../Trade/Trading/Items/TotalView.qml | 53 ++++++------- 3 files changed, 80 insertions(+), 77 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index db7ad28f79..5006cc7429 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -232,42 +232,58 @@ GridLayout { Layout.columnSpan: 3 Layout.rowSpan: 6 - Layout.preferredWidth: prefWidth(this) + Layout.minimumWidth: 302 + Layout.maximumWidth: prefWidth(this) Layout.preferredHeight: prefHeight(this) Layout.fillWidth: true Layout.fillHeight: true radius: 10 color: Dex.CurrentTheme.floatingBackgroundColor + DefaultText + { + anchors.top: parent.top + anchors.topMargin: 20 + anchors.left: parent.left + anchors.leftMargin: 20 + text: qsTr("Place Order") + font: DexTypo.subtitle1 + } + ColumnLayout { anchors.fill: parent + anchors.topMargin: 40 + anchors.leftMargin: 20 + anchors.rightMargin: 20 + anchors.bottomMargin: 20 spacing: 10 - DefaultText - { - Layout.topMargin: 20 - Layout.leftMargin: 20 - text: qsTr("Place Order") - font: DexTypo.subtitle1 - } - // Market mode selector RowLayout { - spacing: 10 Layout.topMargin: 10 Layout.alignment: Qt.AlignHCenter - Layout.fillWidth: true + Layout.minimumHeight: 40 + Layout.maximumHeight: 48 + Layout.preferredWidth: parent.width + MarketModeSelector { - Layout.alignment: Qt.AlignHCenter + Layout.alignment: Qt.AlignLeft + Layout.preferredWidth: (parent.width / 100) * 46 + Layout.fillHeight: true marketMode: MarketMode.Buy ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) } + + Item { Layout.fillWidth: true } + MarketModeSelector { - Layout.alignment: Qt.AlignHCenter + Layout.alignment: Qt.AlignRight + Layout.preferredWidth: (parent.width / 100) * 46 + Layout.fillHeight: true ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) } } @@ -276,7 +292,7 @@ GridLayout Rectangle { visible: API.app.trading_pg.preffered_order.price !== undefined - Layout.preferredWidth: parent.width - 20 + Layout.preferredWidth: parent.width Layout.preferredHeight: 40 Layout.alignment: Qt.AlignHCenter radius: 8 @@ -293,13 +309,14 @@ GridLayout Qaterial.FlatButton { - foregroundColor: Dex.CurrentTheme.noColor - icon.source: Qaterial.Icons.close anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - height: 40 - width: 40 anchors.rightMargin: 15 + anchors.verticalCenter: parent.verticalCenter + foregroundColor: Dex.CurrentTheme.noColor + icon.source: Qaterial.Icons.close + backgroundImplicitWidth: 40 + backgroundImplicitHeight: 30 + onClicked: API.app.trading_pg.reset_order() } } @@ -307,32 +324,16 @@ GridLayout OrderForm { id: form_base - Layout.fillWidth: true - Layout.fillHeight: true - Layout.leftMargin: 10 - Layout.rightMargin: 10 + Layout.preferredWidth: parent.width Layout.alignment: Qt.AlignHCenter } TotalView { - Layout.fillWidth: true - Layout.fillHeight: true - Layout.leftMargin: 10 - Layout.rightMargin: 10 + Layout.preferredWidth: parent.width Layout.alignment: Qt.AlignHCenter } - FeeInfo - { - id: bg - Layout.fillWidth: true - Layout.fillHeight: true - Layout.leftMargin: 10 - Layout.rightMargin: 10 - visible: false - } - DexGradientAppButton { Layout.preferredHeight: 40 @@ -350,7 +351,6 @@ GridLayout { spacing: parent.spacing visible: errors.text_value !== "" - Layout.fillWidth: true Layout.preferredWidth: parent.width HorizontalLine @@ -364,7 +364,7 @@ GridLayout { id: errors Layout.alignment: Qt.AlignHCenter - Layout.fillWidth: true + Layout.preferredWidth: parent.width horizontalAlignment: Text.AlignHCenter font.pixelSize: Style.textSizeSmall4 color: Dex.CurrentTheme.noColor diff --git a/atomic_defi_design/Dex/Exchange/Trade/TradeBox/OrderForm.qml b/atomic_defi_design/Dex/Exchange/Trade/TradeBox/OrderForm.qml index 7485b11812..c7d2b36535 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/TradeBox/OrderForm.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/TradeBox/OrderForm.qml @@ -55,7 +55,7 @@ ColumnLayout Item { - Layout.fillWidth: true + Layout.preferredWidth: parent.width Layout.preferredHeight: input_price.height + price_usd_value.height + price_usd_value.anchors.topMargin AmountField @@ -91,7 +91,7 @@ ColumnLayout Item { - Layout.fillWidth: true + Layout.preferredWidth: parent.width Layout.topMargin: 10 Layout.preferredHeight: input_volume.height + inputVolumePrice.height + inputVolumePrice.anchors.topMargin @@ -123,18 +123,25 @@ ColumnLayout } } - DefaultText + Item { - Layout.alignment: Qt.AlignHCenter + Layout.preferredWidth: parent.width + Layout.preferredHeight: minVolLabel.height Layout.topMargin: 6 - font.pixelSize: 13 - text: qsTr("Min volume: ") + API.app.trading_pg.min_trade_vol DefaultText { - anchors.left: parent.right + id: minVolLabel + anchors.horizontalCenter: parent.horizontalCenter + font.pixelSize: 13 + text: qsTr("Min volume: ") + API.app.trading_pg.min_trade_vol + } + + DefaultText + { + anchors.left: minVolLabel.right anchors.leftMargin: 8 - anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenter: minVolLabel.verticalCenter text: General.cex_icon color: Dex.CurrentTheme.foregroundColor3 @@ -167,7 +174,7 @@ ColumnLayout enabled: input_volume.enabled && !(!sell_mode && General.isZero(non_null_price)) && to > 0 Layout.alignment: Qt.AlignHCenter - Layout.preferredWidth: parent.width - 20 + Layout.preferredWidth: parent.width from: API.app.trading_pg.orderbook.current_min_taker_vol to: Math.max(0, parseFloat(max_volume)) @@ -188,6 +195,7 @@ ColumnLayout Layout.topMargin: 15 Layout.alignment: Qt.AlignHCenter + Layout.preferredWidth: parent.width boxWidth: 20.76 boxHeight: 20.76 diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/TotalView.qml b/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/TotalView.qml index d7a9fb9927..268f259ceb 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/TotalView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/TotalView.qml @@ -13,12 +13,15 @@ import Dex.Themes 1.0 as Dex ColumnLayout { spacing: 5 + RowLayout { - Layout.fillWidth: true + Layout.preferredWidth: parent.width Layout.preferredHeight: 30 + DefaultText { + Layout.alignment: Qt.AlignLeft color: Dex.CurrentTheme.foregroundColor3 text: "Total " + API.app.settings_pg.current_fiat + " " + General.cex_icon font.pixelSize: 14 @@ -26,33 +29,30 @@ ColumnLayout opacity: .6 CexInfoTrigger {} } - Item + + Item { Layout.fillWidth: true } + + DefaultText { - Layout.preferredHeight: 30 - Layout.fillWidth: true - DefaultText - { - anchors.verticalCenter: parent.verticalCenter - anchors.rightMargin: 20 - anchors.right: parent.right - font.weight: Font.DemiBold - font.pixelSize: 16 - font.family: 'lato' - text_value: General.getFiatText(total_amount, right_ticker).replace(General.cex_icon, "") - } + Layout.alignment: Qt.AlignRight + font.weight: Font.DemiBold + font.pixelSize: 16 + font.family: 'lato' + text_value: General.getFiatText(total_amount, right_ticker).replace(General.cex_icon, "") } } HorizontalLine { color: Dex.CurrentTheme.lineSeparatorColor - width: parent.width - 20 + Layout.preferredWidth: parent.width + Layout.preferredHeight: 1 Layout.alignment: Qt.AlignHCenter } RowLayout { - Layout.fillWidth: true + Layout.preferredWidth: parent.width Layout.preferredHeight: 30 DexLabel @@ -63,20 +63,15 @@ ColumnLayout opacity: .6 font.weight: Font.Normal } - Item + + Item { Layout.fillWidth: true } + + DefaultText { - Layout.preferredHeight: 30 - Layout.fillWidth: true - DefaultText - { - anchors.verticalCenter: parent.verticalCenter - anchors.rightMargin: 20 - anchors.right: parent.right - font.weight: Font.DemiBold - font.pixelSize: 16 - font.family: 'lato' - text_value: General.formatCrypto("", total_amount, right_ticker).replace(right_ticker, "") - } + font.weight: Font.DemiBold + font.pixelSize: 16 + font.family: 'lato' + text_value: General.formatCrypto("", total_amount, right_ticker).replace(right_ticker, "") } } } From 42dccc3a20b6db0563ae9b0e6772db0d90a47a80 Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 21 Feb 2022 10:12:32 +0100 Subject: [PATCH 23/46] Trading: Reduce lag when switching simple and pro views --- .../Dex/Exchange/Trade/Trade.qml | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml index 16d58a969a..cd8e42f794 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml @@ -164,18 +164,31 @@ Item TradeViewHeader { + id: header width: 138 anchors.left: parent.left anchors.leftMargin: 50 anchors.top: parent.top } - Loader + ProView + { + anchors.left: parent.left + anchors.leftMargin: 20 + anchors.right: parent.right + anchors.rightMargin: 20 + anchors.top: header.bottom + anchors.topMargin: 30 + width: parent.width - anchors.leftMargin - anchors.rightMargin + height: parent.height - header.height - anchors.topMargin + visible: API.app.trading_pg.current_trading_mode == TradingMode.Pro + enabled: visible + } + + SimpleView.Main { - id: _viewLoader anchors.fill: parent - anchors.topMargin: 70 - anchors.leftMargin: 50 - source: API.app.trading_pg.current_trading_mode == TradingMode.Pro ? "ProView.qml" : "SimpleView/Main.qml" + visible: API.app.trading_pg.current_trading_mode == TradingMode.Simple + enabled: false } } From aed22c055a9193a76e81d288cb83daddec229e26 Mon Sep 17 00:00:00 2001 From: Syl Date: Tue, 22 Feb 2022 02:14:44 +0100 Subject: [PATCH 24/46] Trading View: Update style and add chart to pro view --- atomic_defi_design/Dex/Exchange/Exchange.qml | 19 +- .../Dex/Exchange/ProView/Chart.qml | 127 +++++++ .../Dex/Exchange/ProView/TickerSelectors.qml | 57 +++ .../Dex/Exchange/Trade/CandleStickChart.qml | 143 -------- .../Dex/Exchange/Trade/ProView.qml | 339 ++++++++---------- .../Dex/Exchange/Trade/Trade.qml | 49 +-- .../Trade/Trading/TradeViewHeader.qml | 18 +- atomic_defi_design/qml.qrc | 9 +- 8 files changed, 370 insertions(+), 391 deletions(-) create mode 100644 atomic_defi_design/Dex/Exchange/ProView/Chart.qml create mode 100644 atomic_defi_design/Dex/Exchange/ProView/TickerSelectors.qml delete mode 100644 atomic_defi_design/Dex/Exchange/Trade/CandleStickChart.qml diff --git a/atomic_defi_design/Dex/Exchange/Exchange.qml b/atomic_defi_design/Dex/Exchange/Exchange.qml index 34d40accf6..fb405c887f 100644 --- a/atomic_defi_design/Dex/Exchange/Exchange.qml +++ b/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 - } - } } diff --git a/atomic_defi_design/Dex/Exchange/ProView/Chart.qml b/atomic_defi_design/Dex/Exchange/ProView/Chart.qml new file mode 100644 index 0000000000..4c79689bbc --- /dev/null +++ b/atomic_defi_design/Dex/Exchange/ProView/Chart.qml @@ -0,0 +1,127 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Controls 2.15 + +import "../../Components" +import "../../Constants" +import Dex.Themes 1.0 as Dex + +Item +{ + id: root + + property bool pair_supported: false + readonly property bool is_fetching: dashboard.webEngineView.loadProgress < 100 + readonly property string theme: Dex.CurrentTheme.getColorMode() === Dex.CurrentTheme.ColorMode.Dark ? "dark" : "light" + property string chart_base + property string chart_rel + property string loaded_symbol + + function loadChart(base, rel, force=false) + { + const pair = atomic_qt_utilities.retrieve_main_ticker(base) + "/" + atomic_qt_utilities.retrieve_main_ticker(rel) + const pair_reversed = atomic_qt_utilities.retrieve_main_ticker(rel) + "/" + atomic_qt_utilities.retrieve_main_ticker(base) + + // Try checking if pair/reversed-pair exists + let symbol = General.supported_pairs[pair] + if (!symbol) symbol = General.supported_pairs[pair_reversed] + if (!symbol) + { + pair_supported = false + return + } + pair_supported = true + + if (!force && symbol === loaded_symbol) return + + loaded_symbol = symbol + chart_base = atomic_qt_utilities.retrieve_main_ticker(base) + chart_rel = atomic_qt_utilities.retrieve_main_ticker(rel) + + dashboard.webEngineView.loadHtml(` + + + +
+
+ + +
+ `) + } + + onIs_fetchingChanged: dashboard.webEngineView.visible = !is_fetching && pair_supported + onPair_supportedChanged: if (!pair_supported) dashboard.webEngineView.visible = false; + Component.onCompleted: + { + try { loadChart(left_ticker?? atomic_app_primary_coin, right_ticker?? atomic_app_secondary_coin) } catch (e) { console.error(e) } + + dashboard.webEngineView.parent = chartView; + dashboard.webEngineView.anchors.fill = chartView; + } + Component.onDestruction: + { + dashboard.webEngineView.visible = false; + dashboard.webEngineView.stop(); + } + + RowLayout + { + visible: pair_supported && !dashboard.webEngineView.visible + anchors.centerIn: parent + + DefaultBusyIndicator + { + Layout.alignment: Qt.AlignHCenter + Layout.leftMargin: -15 + Layout.rightMargin: Layout.leftMargin*0.75 + scale: 0.5 + } + + DefaultText + { + text_value: qsTr("Loading market data") + "..." + } + } + + DefaultText + { + visible: !pair_supported + text_value: qsTr("There is no chart data for this pair yet") + anchors.centerIn: parent + } + + Connections + { + target: app + function onPairChanged(base, rel) + { + root.loadChart(base, rel) + } + } + + Connections + { + target: Dex.CurrentTheme + function onThemeChanged() + { + loadChart(left_ticker?? atomic_app_primary_coin, right_ticker?? atomic_app_secondary_coin, true) + } + } +} diff --git a/atomic_defi_design/Dex/Exchange/ProView/TickerSelectors.qml b/atomic_defi_design/Dex/Exchange/ProView/TickerSelectors.qml new file mode 100644 index 0000000000..92a14ec0cf --- /dev/null +++ b/atomic_defi_design/Dex/Exchange/ProView/TickerSelectors.qml @@ -0,0 +1,57 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Controls 2.15 + +import "../../Components" +import "../../Constants" + +// Ticker selectors. +Row +{ + id: selectors + + TickerSelector + { + id: selectorLeft + + width: parent.width * 0.45 + height: parent.height + + left_side: true + ticker_list: API.app.trading_pg.market_pairs_mdl.left_selection_box + ticker: left_ticker + } + + SwapIcon + { + width: parent.width * 0.1 + anchors.verticalCenter: parent.verticalCenter + top_arrow_ticker: selectorLeft.ticker + bottom_arrow_ticker: selectorRight.ticker + hovered: swap_button.containsMouse + + DefaultMouseArea + { + id: swap_button + anchors.fill: parent + hoverEnabled: true + onClicked: + { + if (!block_everything) + setPair(true, right_ticker) + } + } + } + + TickerSelector + { + id: selectorRight + + width: parent.width * 0.45 + height: parent.height + + left_side: false + ticker_list: API.app.trading_pg.market_pairs_mdl.right_selection_box + ticker: right_ticker + } +} diff --git a/atomic_defi_design/Dex/Exchange/Trade/CandleStickChart.qml b/atomic_defi_design/Dex/Exchange/Trade/CandleStickChart.qml deleted file mode 100644 index 185906b2fa..0000000000 --- a/atomic_defi_design/Dex/Exchange/Trade/CandleStickChart.qml +++ /dev/null @@ -1,143 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 -import QtQuick.Controls 2.15 - -import QtCharts 2.3 -import QtWebEngine 1.8 - -import "../../Components" - -import App 1.0 -import Dex.Themes 1.0 as Dex - -// List - -DexBox { - id: graph_bg - anchors.left: parent.left - anchors.right: parent.right - anchors.top: parent.top - - - content: Item { - id: root - - width: graph_bg.width - height: graph_bg.height - - property bool pair_supported: false - readonly property bool is_fetching: dashboard.webEngineView.loadProgress < 100 - - onIs_fetchingChanged: dashboard.webEngineView.visible = !is_fetching && pair_supported - - RowLayout { - visible: pair_supported && !dashboard.webEngineView.visible - anchors.centerIn: parent - - DefaultBusyIndicator { - Layout.alignment: Qt.AlignHCenter - Layout.leftMargin: -15 - Layout.rightMargin: Layout.leftMargin*0.75 - scale: 0.5 - } - - DefaultText { - text_value: qsTr("Loading market data") + "..." - } - } - - DefaultText { - visible: !pair_supported - onVisibleChanged: if(visible) { - dex_chart.visible = false - } - text_value: qsTr("There is no chart data for this pair yet") - anchors.centerIn: parent - } - - Component.onCompleted: try{loadChart(left_ticker?? atomic_app_primary_coin, right_ticker?? atomic_app_secondary_coin)}catch(e){} - - Connections { - target: app - function onPairChanged(base, rel) { - root.loadChart(base, rel) - } - } - - readonly property string theme: Dex.CurrentTheme.getColorMode() === Dex.CurrentTheme.ColorMode.Dark ? "dark" : "light" - - Connections - { - target: Dex.CurrentTheme - function onThemeChanged() - { - loadChart(left_ticker?? atomic_app_primary_coin, right_ticker?? atomic_app_secondary_coin, true) - } - } - - property string chart_base - property string chart_rel - property string loaded_symbol - function loadChart(base, rel, force=false) { - const pair = atomic_qt_utilities.retrieve_main_ticker(base) + "/" + atomic_qt_utilities.retrieve_main_ticker(rel) - const pair_reversed = atomic_qt_utilities.retrieve_main_ticker(rel) + "/" + atomic_qt_utilities.retrieve_main_ticker(base) - - console.log("Will try to load TradingView chart", pair) - - // Normal pair - let symbol = General.supported_pairs[pair] - if(!symbol) { - console.log("Symbol not found for", pair) - symbol = General.supported_pairs[pair_reversed] - } - - // Reversed pair - if(!symbol) { - console.log("Symbol not found for", pair_reversed) - pair_supported = false - return - } - - pair_supported = true - - // Load HTML - if(!force && symbol === loaded_symbol) { - console.log("Chart is already loaded,", symbol) - return - } - - loaded_symbol = symbol - console.log("Loading TradingView chart", symbol, " theme: ", theme) - - chart_base = atomic_qt_utilities.retrieve_main_ticker(base) - chart_rel = atomic_qt_utilities.retrieve_main_ticker(rel) - - dashboard.webEngineView.loadHtml(` - - - -
-
- - -
- `); - } - } -} diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index 5006cc7429..e2cf173f32 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -66,10 +66,13 @@ GridLayout function prefWidth(item) { return (width / columns) * item.Layout.columnSpan; } function prefHeight(item) { return (height / rows) * item.Layout.rowSpan; } + flow: GridLayout.TopToBottom + rows: 12 columns: 12 columnSpacing: 20 + rowSpacing: 20 Connections { @@ -104,139 +107,187 @@ GridLayout } } - Connections + // Chart + ColumnLayout { - target: app - function onPairChanged(base, rel) { dex_chart.visible = true } + Layout.columnSpan: 6 + Layout.rowSpan: 5 + + Layout.fillWidth: true + + Layout.minimumHeight: 200 + Layout.maximumHeight: 400 + Layout.fillHeight: true + + spacing: 10 + + DefaultText { font: DexTypo.subtitle1; text: qsTr("Chart") } + + Chart + { + id: chartView + + Layout.fillWidth: true + Layout.fillHeight: true + + Component.onCompleted: + { + dashboard.webEngineView.parent = chartView; + dashboard.webEngineView.anchors.fill = chartView; + } + Component.onDestruction: + { + dashboard.webEngineView.visible = false; + dashboard.webEngineView.stop(); + } + } } // Ticker selectors. - RowLayout + TickerSelectors { id: selectors - spacing: 20 + + Layout.columnSpan: 6 Layout.rowSpan: 1 - Layout.columnSpan: 5 - Layout.preferredWidth: prefWidth(this) - Layout.preferredHeight: prefHeight(this) + Layout.fillWidth: true + + Layout.minimumHeight: 60 + Layout.maximumHeight: 70 Layout.fillHeight: true + } - TickerSelector + // Trading Informations + ColumnLayout + { + Layout.columnSpan: 6 + Layout.rowSpan: 6 + + Layout.fillWidth: true + + Layout.minimumHeight: 350 + Layout.fillHeight: true + + spacing: 14 + + DefaultText { font: DexTypo.subtitle1; text: qsTr("Trading Information") } + + Qaterial.LatoTabBar { - id: selector_left - Layout.alignment: Qt.AlignLeft - Layout.fillWidth: true + id: tabView + property int taux_exchange: 0 + property int order_idx: 1 + property int history_idx: 2 - left_side: true - ticker_list: API.app.trading_pg.market_pairs_mdl.left_selection_box - ticker: left_ticker + Material.foreground: Dex.CurrentTheme.foregroundColor + background: null + + Qaterial.LatoTabButton + { + width: 150 + text: qsTr("Exchange Rates") + font.pixelSize: 14 + textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + indicatorColor: Dex.CurrentTheme.foregroundColor + textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + opacity: checked ? 1 : .6 + } + Qaterial.LatoTabButton + { + width: 120 + text: qsTr("Orders") + font.pixelSize: 14 + textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + indicatorColor: Dex.CurrentTheme.foregroundColor + opacity: checked ? 1 : .6 + } + Qaterial.LatoTabButton + { + width: 120 + text: qsTr("History") + font.pixelSize: 14 + textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + indicatorColor: Dex.CurrentTheme.foregroundColor + opacity: checked ? 1 : .6 + } } - SwapIcon + Rectangle { - Layout.alignment: Qt.AlignHCenter - Layout.preferredHeight: selector_left.height * 0.65 Layout.fillWidth: true + Layout.fillHeight: true + color: Dex.CurrentTheme.floatingBackgroundColor + radius: 10 - top_arrow_ticker: selector_left.ticker - bottom_arrow_ticker: selector_right.ticker - hovered: swap_button.containsMouse - - DefaultMouseArea + Qaterial.SwipeView { - id: swap_button + id: swipeView + clip: true + interactive: false + currentIndex: tabView.currentIndex anchors.fill: parent - hoverEnabled: true - onClicked: + onCurrentIndexChanged: { - if (!block_everything) - setPair(true, right_ticker) + swipeView.currentItem.update(); + if (currentIndex === 2) history_component.list_model_proxy.is_history = true; + else history_component.list_model_proxy.is_history = false; } - } - } - TickerSelector - { - id: selector_right - Layout.alignment: Qt.AlignRight - Layout.fillWidth: true + PriceLine { id: price_line_obj } - left_side: false - ticker_list: API.app.trading_pg.market_pairs_mdl.right_selection_box - ticker: right_ticker + OrdersView.OrdersPage { id: order_component; clip: true } + OrdersView.OrdersPage + { + id: history_component + is_history: true + clip: true + } + } } } - DexTradeBox + OrderBook.Vertical { - visible: false - enabled: false - id: dex_chart - title: qsTr("Chart") - expandedVert: dex_chart.visible? true : false - onVisibleChanged: { - if(visible) { - expandedVert = true - } - } - canBeFull: true - onFullScreenChanged: { - if(fullScreen){ - _best_order_box.visible = false - _orderbook_box.visible = false - optionBox.visible = false - order_form.visible = false - } else { - _best_order_box.visible = true - _orderbook_box.visible = true - optionBox.visible = true - order_form.visible = true - } - } - Item { - id: chart_view - anchors.fill: parent - anchors.topMargin: 40 - CandleStickChart { - id: candleChart - color: 'transparent' - anchors.fill: parent - } + Layout.columnSpan: 4 + Layout.rowSpan: 6 - Component.onCompleted: - { - dashboard.webEngineView.parent = chart_view; - dashboard.webEngineView.anchors.fill = chart_view; - } - Component.onDestruction: - { - dashboard.webEngineView.visible = false; - dashboard.webEngineView.stop(); - } - } + Layout.minimumWidth: 340 + Layout.fillWidth: true + + Layout.minimumHeight: 365 + Layout.maximumHeight: 536 + Layout.fillHeight: true } - OrderBook.Vertical + // Best Orders + BestOrder.List { Layout.columnSpan: 4 - Layout.rowSpan: 5 - Layout.preferredWidth: prefWidth(this) - Layout.preferredHeight: prefHeight(this) + Layout.rowSpan: 4 + + Layout.minimumWidth: 340 Layout.fillWidth: true + + Layout.minimumHeight: 196 Layout.fillHeight: true } // Place order form. Rectangle { - Layout.columnSpan: 3 - Layout.rowSpan: 6 - Layout.minimumWidth: 302 - Layout.maximumWidth: prefWidth(this) - Layout.preferredHeight: prefHeight(this) + Layout.columnSpan: 2 + Layout.rowSpan: 12 + + Layout.minimumWidth: 280 + Layout.maximumWidth: 315 Layout.fillWidth: true - Layout.fillHeight: true + + Layout.minimumHeight: 589 + Layout.maximumHeight: 610 + radius: 10 color: Dex.CurrentTheme.floatingBackgroundColor @@ -378,108 +429,6 @@ GridLayout } } - Column - { - Layout.topMargin: 20 - Layout.rowSpan: 5 - Layout.columnSpan: 5 - Layout.preferredWidth: prefWidth(this) - Layout.preferredHeight: prefHeight(this) - Layout.fillHeight: true - Layout.fillWidth: true - - spacing: 20 - - DefaultText { font: DexTypo.subtitle1; text: qsTr("Trading Information") } - - Qaterial.LatoTabBar - { - id: tabView - property int taux_exchange: 0 - property int order_idx: 1 - property int history_idx: 2 - - width: parent.width - anchors.horizontalCenter: parent.horizontalCenter - Material.foreground: Dex.CurrentTheme.foregroundColor - background: null - - Qaterial.LatoTabButton - { - width: 150 - text: qsTr("Exchange Rates") - font.pixelSize: 14 - textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 - indicatorColor: Dex.CurrentTheme.foregroundColor - textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - opacity: checked ? 1 : .6 - } - Qaterial.LatoTabButton - { - width: 120 - text: qsTr("Orders") - font.pixelSize: 14 - textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 - textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - indicatorColor: Dex.CurrentTheme.foregroundColor - opacity: checked ? 1 : .6 - } - Qaterial.LatoTabButton - { - width: 120 - text: qsTr("History") - font.pixelSize: 14 - textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 - textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - indicatorColor: Dex.CurrentTheme.foregroundColor - opacity: checked ? 1 : .6 - } - } - - Rectangle - { - anchors.horizontalCenter: parent.horizontalCenter - width: parent.width - height: 436 - color: Dex.CurrentTheme.floatingBackgroundColor - radius: 10 - - Qaterial.SwipeView - { - id: swipeView - clip: true - interactive: false - currentIndex: tabView.currentIndex - anchors.fill: parent - onCurrentIndexChanged: - { - swipeView.currentItem.update(); - if (currentIndex === 2) history_component.list_model_proxy.is_history = true; - else history_component.list_model_proxy.is_history = false; - } - - PriceLine { id: price_line_obj } - - OrdersView.OrdersPage { id: order_component; clip: true } - OrdersView.OrdersPage - { - id: history_component - is_history: true - clip: true - } - } - } - } - - BestOrder.List - { - Layout.rowSpan: 5 - Layout.columnSpan: 4 - Layout.fillHeight: true - Layout.fillWidth: true - id: best_order_list - } - ModalLoader { id: confirm_trade_modal diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml index cd8e42f794..bbcc916c5f 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml @@ -162,33 +162,34 @@ Item readonly property bool buy_sell_rpc_busy: API.app.trading_pg.buy_sell_rpc_busy readonly property var buy_sell_last_rpc_data: API.app.trading_pg.buy_sell_last_rpc_data - TradeViewHeader + Column { - id: header - width: 138 - anchors.left: parent.left - anchors.leftMargin: 50 - anchors.top: parent.top - } - - ProView - { - anchors.left: parent.left + anchors.fill: parent + spacing: 20 anchors.leftMargin: 20 - anchors.right: parent.right anchors.rightMargin: 20 - anchors.top: header.bottom - anchors.topMargin: 30 - width: parent.width - anchors.leftMargin - anchors.rightMargin - height: parent.height - header.height - anchors.topMargin - visible: API.app.trading_pg.current_trading_mode == TradingMode.Pro - enabled: visible - } - SimpleView.Main - { - anchors.fill: parent - visible: API.app.trading_pg.current_trading_mode == TradingMode.Simple - enabled: false + TradeViewHeader + { + id: header + width: (parent.width / 100) * 10 + height: parent.height * 0.06 + } + + ProView + { + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + height: parent.height * 0.90 + visible: API.app.trading_pg.current_trading_mode == TradingMode.Pro + enabled: visible + } + + SimpleView.Main + { + anchors.horizontalCenter: parent.horizontalCenter + visible: API.app.trading_pg.current_trading_mode == TradingMode.Simple + enabled: visible + } } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml b/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml index f28fe3c0a4..1af8552e76 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml @@ -19,9 +19,10 @@ Item // Simple/Pro select cursor Rectangle { - width: 86 - height: 34 - radius: 18 + id: cursorRect + width: (parent.width / 100) * 48 + height: _simpleLabel.height + 14 + radius: 16 anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: API.app.trading_pg.current_trading_mode == TradingMode.Simple ? _simpleLabel.horizontalCenter : _proLabel.horizontalCenter color: Dex.CurrentTheme.tabSelectedColor @@ -31,10 +32,10 @@ Item { id: _simpleLabel text: "Simple" - color: API.app.trading_pg.current_trading_mode == TradingMode.Simple ? Dex.CurrentTheme.foregroundColor2 : Dex.CurrentTheme.foregroundColor + color: API.app.trading_pg.current_trading_mode == TradingMode.Simple ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 16 + font.pixelSize: 14 font.weight: Font.Bold DexMouseArea @@ -50,10 +51,11 @@ Item { id: _proLabel text: "Pro" - color: API.app.trading_pg.current_trading_mode == TradingMode.Pro ? Dex.CurrentTheme.foregroundColor2 : Dex.CurrentTheme.foregroundColor - anchors.right: parent.right + color: API.app.trading_pg.current_trading_mode == TradingMode.Pro ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + anchors.left: _simpleLabel.right + anchors.leftMargin: 10 + cursorRect.width / 2 anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 16 + font.pixelSize: 14 font.weight: Font.Bold DexMouseArea diff --git a/atomic_defi_design/qml.qrc b/atomic_defi_design/qml.qrc index 43290a5bea..7d90811870 100644 --- a/atomic_defi_design/qml.qrc +++ b/atomic_defi_design/qml.qrc @@ -499,15 +499,18 @@ Dex/Exchange/Exchange.qml Dex/Exchange/History/History.qml Dex/Exchange/Orders/Orders.qml + Dex/Exchange/ProView/Chart.qml + Dex/Exchange/ProView/DexComboBoxLine.qml Dex/Exchange/ProView/MarketModeSelector.qml + Dex/Exchange/ProView/SweetDexComboBox.qml + Dex/Exchange/ProView/TickerSelector.qml + Dex/Exchange/ProView/TickerSelectors.qml Dex/Exchange/Trade/BestOrder/Header.qml Dex/Exchange/Trade/BestOrder/List.qml Dex/Exchange/Trade/BestOrder/ListDelegate.qml - Dex/Exchange/Trade/CandleStickChart.qml Dex/Exchange/Trade/ConfirmMultiOrderTradeModal.qml Dex/Exchange/Trade/ConfirmTradeModal.qml Dex/Exchange/Trade/DefaultSweetModal.qml - Dex/Exchange/ProView/DexComboBoxLine.qml Dex/Exchange/Trade/FeeIcon.qml Dex/Exchange/Trade/MultiOrder.qml Dex/Exchange/Trade/OrderBook/Header.qml @@ -533,8 +536,6 @@ Dex/Exchange/Trade/SimpleView/SubCoinSelector.qml Dex/Exchange/Trade/SimpleView/SubOrders.qml Dex/Exchange/Trade/SimpleView/SubHistory.qml - Dex/Exchange/ProView/SweetDexComboBox.qml - Dex/Exchange/ProView/TickerSelector.qml Dex/Exchange/Trade/Trade.qml Dex/Exchange/Trade/TradeBox/BuyBox.qml Dex/Exchange/Trade/TradeBox/OrderForm.qml From bd32f447e0063e450622f5b8474234e858d9ff4a Mon Sep 17 00:00:00 2001 From: Syl Date: Tue, 22 Feb 2022 02:49:45 +0100 Subject: [PATCH 25/46] Pro Trading View: Arrange layout --- .../Dex/Exchange/Trade/ProView.qml | 43 +++++-------------- 1 file changed, 11 insertions(+), 32 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index e2cf173f32..9a14ac256d 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -111,12 +111,9 @@ GridLayout ColumnLayout { Layout.columnSpan: 6 - Layout.rowSpan: 5 + Layout.rowSpan: 4 Layout.fillWidth: true - - Layout.minimumHeight: 200 - Layout.maximumHeight: 400 Layout.fillHeight: true spacing: 10 @@ -129,17 +126,6 @@ GridLayout Layout.fillWidth: true Layout.fillHeight: true - - Component.onCompleted: - { - dashboard.webEngineView.parent = chartView; - dashboard.webEngineView.anchors.fill = chartView; - } - Component.onDestruction: - { - dashboard.webEngineView.visible = false; - dashboard.webEngineView.stop(); - } } } @@ -162,14 +148,12 @@ GridLayout ColumnLayout { Layout.columnSpan: 6 - Layout.rowSpan: 6 + Layout.rowSpan: 7 Layout.fillWidth: true - - Layout.minimumHeight: 350 Layout.fillHeight: true - spacing: 14 + spacing: 10 DefaultText { font: DexTypo.subtitle1; text: qsTr("Trading Information") } @@ -182,36 +166,31 @@ GridLayout Material.foreground: Dex.CurrentTheme.foregroundColor background: null + Layout.leftMargin: 6 Qaterial.LatoTabButton { - width: 150 text: qsTr("Exchange Rates") font.pixelSize: 14 textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 indicatorColor: Dex.CurrentTheme.foregroundColor textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - opacity: checked ? 1 : .6 } Qaterial.LatoTabButton { - width: 120 text: qsTr("Orders") font.pixelSize: 14 textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 textSecondaryColor: Dex.CurrentTheme.foregroundColor2 indicatorColor: Dex.CurrentTheme.foregroundColor - opacity: checked ? 1 : .6 } Qaterial.LatoTabButton { - width: 120 text: qsTr("History") font.pixelSize: 14 textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 textSecondaryColor: Dex.CurrentTheme.foregroundColor2 indicatorColor: Dex.CurrentTheme.foregroundColor - opacity: checked ? 1 : .6 } } @@ -252,12 +231,11 @@ GridLayout OrderBook.Vertical { Layout.columnSpan: 4 - Layout.rowSpan: 6 + Layout.rowSpan: 7 Layout.minimumWidth: 340 Layout.fillWidth: true - Layout.minimumHeight: 365 Layout.maximumHeight: 536 Layout.fillHeight: true } @@ -266,12 +244,11 @@ GridLayout BestOrder.List { Layout.columnSpan: 4 - Layout.rowSpan: 4 + Layout.rowSpan: 5 Layout.minimumWidth: 340 Layout.fillWidth: true - Layout.minimumHeight: 196 Layout.fillHeight: true } @@ -279,14 +256,14 @@ GridLayout Rectangle { Layout.columnSpan: 2 - Layout.rowSpan: 12 + Layout.rowSpan: 8 Layout.minimumWidth: 280 Layout.maximumWidth: 315 Layout.fillWidth: true Layout.minimumHeight: 589 - Layout.maximumHeight: 610 + Layout.fillHeight: true radius: 10 color: Dex.CurrentTheme.floatingBackgroundColor @@ -317,7 +294,8 @@ GridLayout Layout.alignment: Qt.AlignHCenter Layout.minimumHeight: 40 Layout.maximumHeight: 48 - Layout.preferredWidth: parent.width + Layout.fillWidth: true + Layout.fillHeight: true MarketModeSelector { @@ -424,6 +402,7 @@ GridLayout curr_fee_info, base_ticker, rel_ticker, left_ticker, right_ticker) + elide: Text.ElideRight } } } From 95365edb0769cce897336f63a9e14fd4fb6a7da5 Mon Sep 17 00:00:00 2001 From: Syl Date: Tue, 22 Feb 2022 03:02:25 +0100 Subject: [PATCH 26/46] Pro Trading View: Fix orders/history line cut by the scrollbar --- atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml index 3a9ef19e80..9141e43299 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml @@ -50,7 +50,7 @@ Item details: model opacity: anim_time - width: root.width + width: root.width * 0.985 } populate: Transition From 8433d901e398070637d1528b2f0a8549b116d57a Mon Sep 17 00:00:00 2001 From: Syl Date: Wed, 9 Mar 2022 11:16:26 +0100 Subject: [PATCH 27/46] Fix qml error --- .../Dex/Exchange/Trade/OrderBook/ListDelegate.qml | 4 ---- 1 file changed, 4 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml index 061a40f611..1732dca2b4 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml @@ -206,10 +206,6 @@ Item { if (!is_mine) return - onClicked: - { - if(!is_mine) return - cancel_button_text.requested_cancel = true cancelOrder(uuid) } From cee80c8120af5bb8e9dd313fdc70eff724661ee7 Mon Sep 17 00:00:00 2001 From: Syl Date: Wed, 9 Mar 2022 11:31:30 +0100 Subject: [PATCH 28/46] Remove useless QML variable --- .../Dex/Exchange/Trade/OrderBook/Vertical.qml | 1 - atomic_defi_design/Dex/Exchange/Trade/Trade.qml | 12 ------------ 2 files changed, 13 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml index 83e87d85fb..0a22614f2d 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml @@ -11,7 +11,6 @@ import Dex.Themes 1.0 as Dex FloatingBackground { - visible: isUltraLarge Layout.fillWidth: true Layout.fillHeight: true radius: 10 diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml index bbcc916c5f..623ac9a130 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml @@ -22,7 +22,6 @@ Item readonly property string total_amount: API.app.trading_pg.total_amount property bool orderSelected: false - property bool isUltraLarge: true // width > 1400 property bool isBigScreen: width > 1400 Component.onCompleted: @@ -41,17 +40,6 @@ Item Component.onDestruction: API.app.trading_pg.on_gui_leave_dex() - onIsUltraLargeChanged: - { - if (isUltraLarge) { - API.app.trading_pg.orderbook.asks.proxy_mdl.qml_sort( - 0, Qt.DescendingOrder) - } else { - API.app.trading_pg.orderbook.asks.proxy_mdl.qml_sort( - 0, Qt.AscendingOrder) - } - } - readonly property bool block_everything: swap_cooldown.running || fetching_multi_ticker_fees_busy From 3c5c0f96a8bd311bc4f70533858d58d85c3427ea Mon Sep 17 00:00:00 2001 From: Syl Date: Fri, 11 Mar 2022 12:46:23 +0100 Subject: [PATCH 29/46] Pro Trading View: Rework best orders code --- atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml | 7 ++++++- .../Dex/Exchange/Trade/BestOrder/ListDelegate.qml | 1 - 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml index 97abfd5f19..b36b90e746 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml @@ -33,10 +33,15 @@ Rectangle ListView { id: list + Layout.fillHeight: true + Layout.fillWidth: true model: API.app.trading_pg.orderbook.best_orders.proxy_mdl clip: true reuseItems: true - delegate: ListDelegate {} + delegate: ListDelegate + { + width: list.width + } } } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/ListDelegate.qml b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/ListDelegate.qml index f44e080573..f26a98ecd6 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/ListDelegate.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/ListDelegate.qml @@ -32,7 +32,6 @@ Item } } - width: visible? list.width : 0 height: 36 AnimatedRectangle From 018d24a23035211c1f7b880941fb567f87ca3d37 Mon Sep 17 00:00:00 2001 From: Syl Date: Fri, 11 Mar 2022 12:46:45 +0100 Subject: [PATCH 30/46] Pro Trading View: Update layout --- .../Dex/Exchange/Trade/ProView.qml | 235 +++++++++--------- .../Dex/Exchange/Trade/Trade.qml | 1 - 2 files changed, 114 insertions(+), 122 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index 9a14ac256d..9d8d648a2a 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -35,10 +35,12 @@ import Dex.Themes 1.0 as Dex import "../ProView" -GridLayout +RowLayout { id: form + spacing: 16 + function selectOrder(is_asks, 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) { setMarketMode(!is_asks ? MarketMode.Sell : MarketMode.Buy) @@ -63,17 +65,6 @@ GridLayout form_base.focusVolumeField() } - function prefWidth(item) { return (width / columns) * item.Layout.columnSpan; } - function prefHeight(item) { return (height / rows) * item.Layout.rowSpan; } - - flow: GridLayout.TopToBottom - - rows: 12 - columns: 12 - - columnSpacing: 20 - rowSpacing: 20 - Connections { target: exchange_trade @@ -107,162 +98,164 @@ GridLayout } } - // Chart ColumnLayout { - Layout.columnSpan: 6 - Layout.rowSpan: 4 - + Layout.minimumWidth: 480 + Layout.maximumWidth: 735 Layout.fillWidth: true - Layout.fillHeight: true - spacing: 10 + Layout.fillHeight: true - DefaultText { font: DexTypo.subtitle1; text: qsTr("Chart") } + spacing: 20 - Chart + // Chart + ColumnLayout { - id: chartView - Layout.fillWidth: true - Layout.fillHeight: true - } - } - - // Ticker selectors. - TickerSelectors - { - id: selectors - - Layout.columnSpan: 6 - Layout.rowSpan: 1 - - Layout.fillWidth: true - Layout.minimumHeight: 60 - Layout.maximumHeight: 70 - Layout.fillHeight: true - } + Layout.minimumHeight: 190 + Layout.maximumHeight: 360 + Layout.fillHeight: true - // Trading Informations - ColumnLayout - { - Layout.columnSpan: 6 - Layout.rowSpan: 7 + spacing: 10 - Layout.fillWidth: true - Layout.fillHeight: true + DefaultText { font: DexTypo.subtitle1; text: qsTr("Chart") } - spacing: 10 + Chart + { + id: chartView - DefaultText { font: DexTypo.subtitle1; text: qsTr("Trading Information") } + Layout.fillWidth: true + Layout.fillHeight: true + } + } - Qaterial.LatoTabBar + // Ticker selectors. + TickerSelectors { - id: tabView - property int taux_exchange: 0 - property int order_idx: 1 - property int history_idx: 2 - - Material.foreground: Dex.CurrentTheme.foregroundColor - background: null - Layout.leftMargin: 6 + id: selectors - Qaterial.LatoTabButton - { - text: qsTr("Exchange Rates") - font.pixelSize: 14 - textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 - indicatorColor: Dex.CurrentTheme.foregroundColor - textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - } - Qaterial.LatoTabButton - { - text: qsTr("Orders") - font.pixelSize: 14 - textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 - textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - indicatorColor: Dex.CurrentTheme.foregroundColor - } - Qaterial.LatoTabButton - { - text: qsTr("History") - font.pixelSize: 14 - textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 - textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - indicatorColor: Dex.CurrentTheme.foregroundColor - } + Layout.fillWidth: true + Layout.preferredHeight: 70 } - Rectangle + // Trading Informations + ColumnLayout { Layout.fillWidth: true + + Layout.minimumHeight: 380 + Layout.maximumHeight: 500 Layout.fillHeight: true - color: Dex.CurrentTheme.floatingBackgroundColor - radius: 10 - Qaterial.SwipeView + spacing: 10 + + DefaultText { font: DexTypo.subtitle1; text: qsTr("Trading Information") } + + Qaterial.LatoTabBar { - id: swipeView - clip: true - interactive: false - currentIndex: tabView.currentIndex - anchors.fill: parent - onCurrentIndexChanged: + id: tabView + property int taux_exchange: 0 + property int order_idx: 1 + property int history_idx: 2 + + Material.foreground: Dex.CurrentTheme.foregroundColor + background: null + Layout.leftMargin: 6 + + Qaterial.LatoTabButton + { + text: qsTr("Exchange Rates") + font.pixelSize: 14 + textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + indicatorColor: Dex.CurrentTheme.foregroundColor + textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + } + Qaterial.LatoTabButton + { + text: qsTr("Orders") + font.pixelSize: 14 + textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + indicatorColor: Dex.CurrentTheme.foregroundColor + } + Qaterial.LatoTabButton { - swipeView.currentItem.update(); - if (currentIndex === 2) history_component.list_model_proxy.is_history = true; - else history_component.list_model_proxy.is_history = false; + text: qsTr("History") + font.pixelSize: 14 + textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + indicatorColor: Dex.CurrentTheme.foregroundColor } + } - PriceLine { id: price_line_obj } + Rectangle + { + Layout.fillWidth: true + Layout.fillHeight: true + color: Dex.CurrentTheme.floatingBackgroundColor + radius: 10 - OrdersView.OrdersPage { id: order_component; clip: true } - OrdersView.OrdersPage + Qaterial.SwipeView { - id: history_component - is_history: true + id: swipeView clip: true + interactive: false + currentIndex: tabView.currentIndex + anchors.fill: parent + onCurrentIndexChanged: + { + swipeView.currentItem.update(); + if (currentIndex === 2) history_component.list_model_proxy.is_history = true; + else history_component.list_model_proxy.is_history = false; + } + + PriceLine { id: price_line_obj } + + OrdersView.OrdersPage { id: order_component; clip: true } + OrdersView.OrdersPage + { + id: history_component + is_history: true + clip: true + } } } } } - OrderBook.Vertical + ColumnLayout { - Layout.columnSpan: 4 - Layout.rowSpan: 7 - - Layout.minimumWidth: 340 + Layout.minimumWidth: 353 Layout.fillWidth: true - Layout.maximumHeight: 536 - Layout.fillHeight: true - } + OrderBook.Vertical + { + Layout.fillWidth: true - // Best Orders - BestOrder.List - { - Layout.columnSpan: 4 - Layout.rowSpan: 5 + Layout.minimumHeight: 365 + Layout.maximumHeight: 536 + Layout.fillHeight: true + } - Layout.minimumWidth: 340 - Layout.fillWidth: true + // Best Orders + BestOrder.List + { + Layout.fillWidth: true - Layout.fillHeight: true + Layout.minimumHeight: 196 + Layout.fillHeight: true + } } // Place order form. Rectangle { - Layout.columnSpan: 2 - Layout.rowSpan: 8 - - Layout.minimumWidth: 280 - Layout.maximumWidth: 315 + Layout.minimumWidth: 302 + Layout.maximumWidth: 350 Layout.fillWidth: true - Layout.minimumHeight: 589 + Layout.minimumHeight: 571 Layout.fillHeight: true radius: 10 diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml index 623ac9a130..0a26c9ee8e 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml @@ -166,7 +166,6 @@ Item ProView { - anchors.horizontalCenter: parent.horizontalCenter width: parent.width height: parent.height * 0.90 visible: API.app.trading_pg.current_trading_mode == TradingMode.Pro From 9668372a9fcdd0857c74b5d9dcb0a0dab48f13a4 Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 14 Mar 2022 13:33:47 +0100 Subject: [PATCH 31/46] Remove unused qml files --- .../Dex/Exchange/History/History.qml | 15 --------------- atomic_defi_design/Dex/Exchange/Orders/Orders.qml | 15 --------------- atomic_defi_design/qml.qrc | 2 -- 3 files changed, 32 deletions(-) delete mode 100644 atomic_defi_design/Dex/Exchange/History/History.qml delete mode 100644 atomic_defi_design/Dex/Exchange/Orders/Orders.qml diff --git a/atomic_defi_design/Dex/Exchange/History/History.qml b/atomic_defi_design/Dex/Exchange/History/History.qml deleted file mode 100644 index 8b8cca162c..0000000000 --- a/atomic_defi_design/Dex/Exchange/History/History.qml +++ /dev/null @@ -1,15 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 -import QtQuick.Controls 2.15 - -import "../../Components" -import "../../Constants" -import ".." - -OrdersPage { - page_index: idx_exchange_history - - title: qsTr("Recent Swaps") - //empty_text: qsTr("You don't have recent orders.") - is_history: true -} diff --git a/atomic_defi_design/Dex/Exchange/Orders/Orders.qml b/atomic_defi_design/Dex/Exchange/Orders/Orders.qml deleted file mode 100644 index abee954e1b..0000000000 --- a/atomic_defi_design/Dex/Exchange/Orders/Orders.qml +++ /dev/null @@ -1,15 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 -import QtQuick.Controls 2.15 - -import "../../Components" -import "../../Constants" -import ".." - -OrdersPage { - page_index: idx_exchange_orders - - title: qsTr("Orders") - //empty_text: qsTr("You don't have any orders.") - is_history: false -} diff --git a/atomic_defi_design/qml.qrc b/atomic_defi_design/qml.qrc index 3c47cc5968..ac80eddbd7 100644 --- a/atomic_defi_design/qml.qrc +++ b/atomic_defi_design/qml.qrc @@ -518,8 +518,6 @@ Dex/Dashboard/UpdateInvalidChecksum.qml Dex/Dashboard/NotificationsModal.qml Dex/Exchange/Exchange.qml - Dex/Exchange/History/History.qml - Dex/Exchange/Orders/Orders.qml Dex/Exchange/ProView/Chart.qml Dex/Exchange/ProView/DexComboBoxLine.qml Dex/Exchange/ProView/MarketModeSelector.qml From 17970eae0aec3bd522c7d2bbec4bb008393ad155 Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 14 Mar 2022 14:23:23 +0100 Subject: [PATCH 32/46] Pro Trading View: Move orderbook warning sign from line to tooltip --- .../Exchange/Trade/OrderBook/ListDelegate.qml | 60 +++++++++---------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml index 1732dca2b4..15c370e0f5 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/ListDelegate.qml @@ -16,25 +16,39 @@ Item DefaultTooltip { - visible: warningNoticeMouseArea.containsMouse && !enough_funds_to_pay_min_volume + visible: mouse_area.containsMouse && !enough_funds_to_pay_min_volume width: 300 - contentItem: DefaultText + contentItem: RowLayout { - text_value: + width: 290 + + Qaterial.ColorIcon { - let relMaxTakerVol = parseFloat(API.app.trading_pg.orderbook.rel_max_taker_vol.decimal); - let baseMaxTakerVol = parseFloat(API.app.trading_pg.orderbook.base_max_taker_vol.decimal); - - qsTr("This order requires a minimum amount of %1 %2
You don't have enough funds.
%3") - .arg(parseFloat(min_volume).toFixed(8)) - .arg(isAsk ? - API.app.trading_pg.market_pairs_mdl.right_selected_coin : - API.app.trading_pg.market_pairs_mdl.left_selected_coin) - .arg(relMaxTakerVol > 0 || baseMaxTakerVol > 0 ? - "Your max balance after fees is: %1".arg(isAsk ? - relMaxTakerVol.toFixed(8) : baseMaxTakerVol.toFixed(8)) : "") + Layout.fillHeight: true + Layout.alignment: Qt.AlignVCenter + source: Qaterial.Icons.alert + color: Qaterial.Colors.amber + } + + DefaultText + { + Layout.fillWidth: true + text_value: + { + let relMaxTakerVol = parseFloat(API.app.trading_pg.orderbook.rel_max_taker_vol.decimal); + let baseMaxTakerVol = parseFloat(API.app.trading_pg.orderbook.base_max_taker_vol.decimal); + + qsTr("This order requires a minimum amount of %1 %2
You don't have enough funds.
%3") + .arg(parseFloat(min_volume).toFixed(8)) + .arg(isAsk ? + API.app.trading_pg.market_pairs_mdl.right_selected_coin : + API.app.trading_pg.market_pairs_mdl.left_selected_coin) + .arg(relMaxTakerVol > 0 || baseMaxTakerVol > 0 ? + "Your max balance after fees is: %1".arg(isAsk ? + relMaxTakerVol.toFixed(8) : baseMaxTakerVol.toFixed(8)) : "") + } + wrapMode: Text.WordWrap } - width: 300 } delay: 200 } @@ -115,22 +129,6 @@ Item anchors.horizontalCenter: parent.horizontalCenter onWidthChanged: progress.width = ((depth * 100) * (width + 40)) / 100 - Qaterial.ColorIcon - { - visible: mouse_area.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 { From 8000807dcd39065442edeca44e26869890938715 Mon Sep 17 00:00:00 2001 From: Syl Date: Wed, 16 Mar 2022 15:26:57 +0100 Subject: [PATCH 33/46] Pro Trading View: Fix: Best orders was not showing any row --- atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml | 1 + 1 file changed, 1 insertion(+) diff --git a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml index b36b90e746..2895492a6a 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml @@ -19,6 +19,7 @@ Rectangle anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right + anchors.bottom: parent.bottom anchors.margins: 20 spacing: 20 From 6dfbdac045289dc6a4a97a00502adf3a04bddde2 Mon Sep 17 00:00:00 2001 From: Syl Date: Wed, 16 Mar 2022 15:27:12 +0100 Subject: [PATCH 34/46] Pro Trading View: Update best orders style --- .../Dex/Exchange/Trade/BestOrder/Header.qml | 68 +++++++--------- .../Dex/Exchange/Trade/BestOrder/List.qml | 21 +++-- .../Exchange/Trade/BestOrder/ListDelegate.qml | 77 +++++++++---------- 3 files changed, 80 insertions(+), 86 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/Header.qml b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/Header.qml index e3d4890f47..f89244c79c 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/Header.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/Header.qml @@ -8,50 +8,34 @@ import App 1.0 import "../../../Components" -Item { - property bool is_horizontal: false - height: 40 - width: parent.width - z: 2 +Row +{ + spacing: 0 - RowLayout + DefaultText { - width: parent.width - 30 - height: parent.height - anchors.horizontalCenter: parent.horizontalCenter - DefaultText - { - Layout.alignment: Qt.AlignVCenter - Layout.preferredWidth: 130 - text: sell_mode? qsTr("You get") : qsTr("You send") - font.family: Style.font_family - font.pixelSize: 12 - font.bold: true - font.weight: Font.Black - } - DefaultText - { - Layout.alignment: Qt.AlignVCenter - Layout.preferredWidth: 70 - - text: qsTr("Fiat Price") - font.family: Style.font_family - font.pixelSize: 12 - font.bold: true - font.weight: Font.Black - horizontalAlignment: Label.AlignRight - - } - DefaultText - { - Layout.alignment: Qt.AlignVCenter - text: qsTr("CEX rate") - horizontalAlignment: Label.AlignRight - font.family: Style.font_family - font.pixelSize: 12 - font.bold: true - font.weight: Font.Black - } + width: parent.width * youGetColumnWidth + text: sell_mode ? qsTr("You get") : qsTr("You send") + font.family: Style.font_family + font.pixelSize: 12 + font.weight: Font.Black } + DefaultText + { + width: parent.width * fiatPriceColumnWidth + text: qsTr("Fiat Price") + font.family: Style.font_family + font.pixelSize: 12 + font.weight: Font.Black + } + DefaultText + { + width: parent.width * cexRateColumnWidth + Layout.alignment: Qt.AlignVCenter + text: qsTr("CEX rate") + font.family: Style.font_family + font.pixelSize: 12 + font.weight: Font.Black + } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml index 2895492a6a..2655afc5b2 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml @@ -11,6 +11,11 @@ import "../../../Components" Rectangle { id: _control + + property real youGetColumnWidth: 0.5 + property real fiatPriceColumnWidth: 0.22 + property real cexRateColumnWidth: 0.22 + color: Dex.CurrentTheme.floatingBackgroundColor radius: 10 @@ -21,7 +26,7 @@ Rectangle anchors.right: parent.right anchors.bottom: parent.bottom anchors.margins: 20 - spacing: 20 + spacing: 10 DefaultText { @@ -29,19 +34,25 @@ Rectangle font: DexTypo.subtitle1 } - Header {} + Header + { + Layout.topMargin: 10 + Layout.fillWidth: true + } - ListView + DefaultListView { id: list - Layout.fillHeight: true Layout.fillWidth: true + Layout.fillHeight: true model: API.app.trading_pg.orderbook.best_orders.proxy_mdl + spacing: 6 clip: true - reuseItems: true + delegate: ListDelegate { width: list.width + height: 36 } } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/ListDelegate.qml b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/ListDelegate.qml index f26a98ecd6..c183cd9df1 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/ListDelegate.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/ListDelegate.qml @@ -2,11 +2,10 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 - import Qaterial 1.0 as Qaterial import "../../../Components" -import "../../../Constants" as Constants +import "../../../Constants" import Dex.Themes 1.0 as Dex import App 1.0 as App @@ -15,7 +14,7 @@ Item { id: _control - property bool coinEnable: Constants.API.app.portfolio_pg.global_cfg_mdl.get_coin_info(coin).is_enabled + property bool coinEnable: API.app.portfolio_pg.global_cfg_mdl.get_coin_info(coin).is_enabled property var isAsk: { if (parseInt(cex_rates) > 0) @@ -32,8 +31,6 @@ Item } } - height: 36 - AnimatedRectangle { visible: mouse_are.containsMouse @@ -43,45 +40,54 @@ Item opacity: 0.1 } - RowLayout + Row { id: row - width: parent.width - 30 + width: parent.width height: parent.height - anchors.horizontalCenter: parent.horizontalCenter - spacing: 10 + spacing: 0 - Image - { - Layout.preferredWidth: 20 - Layout.preferredHeight: 20 - Layout.alignment: Qt.AlignVCenter - source: Constants.General.coinIcon(coin) - smooth: true - antialiasing: true - opacity: !_control.coinEnable? .1 : 1 - } - DefaultText + Row { - Layout.preferredWidth: 100 - Layout.alignment: Qt.AlignVCenter - text: send + " " + atomic_qt_utilities.retrieve_main_ticker(coin) - font.family: App.DexTypo.fontFamily - font.pixelSize: 12 + width: parent.width * youGetColumnWidth + height: parent.height + spacing: 8 + + DefaultImage + { + anchors.verticalCenter: parent.verticalCenter + width: 20 + height: 20 + Layout.alignment: Qt.AlignVCenter + source: General.coinIcon(coin) + smooth: true + antialiasing: true + opacity: !_control.coinEnable? .1 : 1 + } + + DefaultText + { + anchors.verticalCenter: parent.verticalCenter + width: parent.width * 0.8 + text: send + " " + atomic_qt_utilities.retrieve_main_ticker(coin) + font.family: App.DexTypo.fontFamily + font.pixelSize: 12 + } } DefaultText { - Layout.alignment: Qt.AlignVCenter - Layout.preferredWidth: 60 - text: price_fiat + Constants.API.app.settings_pg.current_fiat_sign + anchors.verticalCenter: parent.verticalCenter + width: parent.width * fiatPriceColumnWidth + text: price_fiat + API.app.settings_pg.current_fiat_sign font.family: App.DexTypo.fontFamily font.pixelSize: 12 } DefaultText { - Layout.alignment: Qt.AlignVCenter + anchors.verticalCenter: parent.verticalCenter + width: parent.width * cexRateColumnWidth text: cex_rates === "0" ? "N/A" : parseFloat(cex_rates) > 0 ? "+" + parseFloat(cex_rates).toFixed(2) + "%" : @@ -124,7 +130,7 @@ Item } else { - if (Constants.API.app.enable_coins([coin]) === true) + if (API.app.enable_coins([coin]) === true) { _control.coinEnable = true; _tooltip.close(); @@ -151,22 +157,15 @@ Item hoverEnabled: true onClicked: { - if (!Constants.API.app.portfolio_pg.global_cfg_mdl.get_coin_info(coin).is_enabled) + if (!API.app.portfolio_pg.global_cfg_mdl.get_coin_info(coin).is_enabled) { _tooltip.open() } else { app.pairChanged(base_ticker, coin) - Constants.API.app.trading_pg.orderbook.select_best_order(uuid) + API.app.trading_pg.orderbook.select_best_order(uuid) } } } - - HorizontalLine - { - width: parent.width - opacity: .4 - } - } From f6a5307a19b307769a2e35169e6162f030147438 Mon Sep 17 00:00:00 2001 From: Syl Date: Wed, 16 Mar 2022 15:55:02 +0100 Subject: [PATCH 35/46] Refactor qml folder --- .../Exchange/ProView/PlaceOrderForm/Main.qml | 155 ++++++++++++++++++ .../MarketModeSelector.qml | 2 +- .../PlaceOrderForm}/OrderForm.qml | 0 .../PlaceOrderForm}/TotalView.qml | 4 +- .../Dex/Exchange/Trade/ProView.qml | 146 +---------------- .../Dex/Exchange/Trade/TradeBox/BuyBox.qml | 60 ------- .../Dex/Exchange/Trade/TradeBox/SellBox.qml | 76 --------- atomic_defi_design/qml.qrc | 9 +- 8 files changed, 164 insertions(+), 288 deletions(-) create mode 100644 atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/Main.qml rename atomic_defi_design/Dex/Exchange/ProView/{ => PlaceOrderForm}/MarketModeSelector.qml (98%) rename atomic_defi_design/Dex/Exchange/{Trade/TradeBox => ProView/PlaceOrderForm}/OrderForm.qml (100%) rename atomic_defi_design/Dex/Exchange/{Trade/Trading/Items => ProView/PlaceOrderForm}/TotalView.qml (96%) delete mode 100644 atomic_defi_design/Dex/Exchange/Trade/TradeBox/BuyBox.qml delete mode 100644 atomic_defi_design/Dex/Exchange/Trade/TradeBox/SellBox.qml diff --git a/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/Main.qml b/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/Main.qml new file mode 100644 index 0000000000..0d9e478a07 --- /dev/null +++ b/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/Main.qml @@ -0,0 +1,155 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import Qaterial 1.0 as Qaterial + +import "../../../Components" +import "../../../Constants" +import Dex.Themes 1.0 as Dex +import AtomicDEX.MarketMode 1.0 + +Rectangle +{ + radius: 10 + color: Dex.CurrentTheme.floatingBackgroundColor + + DefaultText + { + anchors.top: parent.top + anchors.topMargin: 20 + anchors.left: parent.left + anchors.leftMargin: 20 + text: qsTr("Place Order") + font: DexTypo.subtitle1 + } + + ColumnLayout + { + anchors.fill: parent + anchors.topMargin: 40 + anchors.leftMargin: 20 + anchors.rightMargin: 20 + anchors.bottomMargin: 20 + spacing: 10 + + // Market mode selector + RowLayout + { + Layout.topMargin: 10 + Layout.alignment: Qt.AlignHCenter + Layout.minimumHeight: 40 + Layout.maximumHeight: 48 + Layout.fillWidth: true + Layout.fillHeight: true + + MarketModeSelector + { + Layout.alignment: Qt.AlignLeft + Layout.preferredWidth: (parent.width / 100) * 46 + Layout.fillHeight: true + marketMode: MarketMode.Buy + ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) + } + + Item { Layout.fillWidth: true } + + MarketModeSelector + { + Layout.alignment: Qt.AlignRight + Layout.preferredWidth: (parent.width / 100) * 46 + Layout.fillHeight: true + ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) + } + } + + // Order selected indicator + Rectangle + { + visible: API.app.trading_pg.preffered_order.price !== undefined + Layout.preferredWidth: parent.width + Layout.preferredHeight: 40 + Layout.alignment: Qt.AlignHCenter + radius: 8 + color: 'transparent' + border.color: Dex.CurrentTheme.noColor + + DefaultText + { + anchors.verticalCenter: parent.verticalCenter + leftPadding: 15 + color: Dex.CurrentTheme.noColor + text: qsTr("Order Selected") + } + + Qaterial.FlatButton + { + anchors.right: parent.right + anchors.rightMargin: 15 + anchors.verticalCenter: parent.verticalCenter + foregroundColor: Dex.CurrentTheme.noColor + icon.source: Qaterial.Icons.close + backgroundImplicitWidth: 40 + backgroundImplicitHeight: 30 + + onClicked: API.app.trading_pg.reset_order() + } + } + + OrderForm + { + id: form_base + Layout.preferredWidth: parent.width + Layout.alignment: Qt.AlignHCenter + } + + TotalView + { + Layout.preferredWidth: parent.width + Layout.alignment: Qt.AlignHCenter + } + + DexGradientAppButton + { + Layout.preferredHeight: 40 + Layout.preferredWidth: parent.width - 20 + Layout.alignment: Qt.AlignHCenter + radius: 18 + + text: qsTr("START SWAP") + font.weight: Font.Medium + enabled: form_base.can_submit_trade + onClicked: confirm_trade_modal.open() + } + + ColumnLayout + { + spacing: parent.spacing + visible: errors.text_value !== "" + Layout.preferredWidth: parent.width + + HorizontalLine + { + Layout.alignment: Qt.AlignHCenter + Layout.preferredWidth: parent.width + } + + // Show errors + DefaultText + { + id: errors + Layout.alignment: Qt.AlignHCenter + Layout.preferredWidth: parent.width + horizontalAlignment: Text.AlignHCenter + font.pixelSize: Style.textSizeSmall4 + color: Dex.CurrentTheme.noColor + text_value: General.getTradingError( + last_trading_error, + curr_fee_info, + base_ticker, + rel_ticker, left_ticker, right_ticker) + elide: Text.ElideRight + } + } + } +} diff --git a/atomic_defi_design/Dex/Exchange/ProView/MarketModeSelector.qml b/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/MarketModeSelector.qml similarity index 98% rename from atomic_defi_design/Dex/Exchange/ProView/MarketModeSelector.qml rename to atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/MarketModeSelector.qml index 51c400ae90..bae4940e62 100644 --- a/atomic_defi_design/Dex/Exchange/ProView/MarketModeSelector.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/MarketModeSelector.qml @@ -3,7 +3,7 @@ import QtQuick 2.12 import App 1.0 import Dex.Themes 1.0 as Dex import AtomicDEX.MarketMode 1.0 as Dex -import "../../Components" +import "../../../Components" Rectangle { diff --git a/atomic_defi_design/Dex/Exchange/Trade/TradeBox/OrderForm.qml b/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/OrderForm.qml similarity index 100% rename from atomic_defi_design/Dex/Exchange/Trade/TradeBox/OrderForm.qml rename to atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/OrderForm.qml diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/TotalView.qml b/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/TotalView.qml similarity index 96% rename from atomic_defi_design/Dex/Exchange/Trade/Trading/Items/TotalView.qml rename to atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/TotalView.qml index 268f259ceb..396eff9ab2 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trading/Items/TotalView.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/TotalView.qml @@ -6,8 +6,8 @@ import QtQuick.Controls.Material 2.15 import Qaterial 1.0 as Qaterial import Qt.labs.settings 1.0 -import "../../../../Components" -import "../../../../Constants" +import "../../../Components" +import "../../../Constants" import Dex.Themes 1.0 as Dex ColumnLayout diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index 9d8d648a2a..303dc7066e 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -17,7 +17,6 @@ import "../../Wallet" import App 1.0 // Trade Form / Component import -import "TradeBox/" import "Trading/" import "Trading/Items/" @@ -34,6 +33,7 @@ import "../../Screens" import Dex.Themes 1.0 as Dex import "../ProView" +import "../ProView/PlaceOrderForm" as PlaceOrderForm RowLayout { @@ -249,7 +249,7 @@ RowLayout } // Place order form. - Rectangle + PlaceOrderForm.Main { Layout.minimumWidth: 302 Layout.maximumWidth: 350 @@ -257,148 +257,6 @@ RowLayout Layout.minimumHeight: 571 Layout.fillHeight: true - - radius: 10 - color: Dex.CurrentTheme.floatingBackgroundColor - - DefaultText - { - anchors.top: parent.top - anchors.topMargin: 20 - anchors.left: parent.left - anchors.leftMargin: 20 - text: qsTr("Place Order") - font: DexTypo.subtitle1 - } - - ColumnLayout - { - anchors.fill: parent - anchors.topMargin: 40 - anchors.leftMargin: 20 - anchors.rightMargin: 20 - anchors.bottomMargin: 20 - spacing: 10 - - // Market mode selector - RowLayout - { - Layout.topMargin: 10 - Layout.alignment: Qt.AlignHCenter - Layout.minimumHeight: 40 - Layout.maximumHeight: 48 - Layout.fillWidth: true - Layout.fillHeight: true - - MarketModeSelector - { - Layout.alignment: Qt.AlignLeft - Layout.preferredWidth: (parent.width / 100) * 46 - Layout.fillHeight: true - marketMode: MarketMode.Buy - ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) - } - - Item { Layout.fillWidth: true } - - MarketModeSelector - { - Layout.alignment: Qt.AlignRight - Layout.preferredWidth: (parent.width / 100) * 46 - Layout.fillHeight: true - ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) - } - } - - // Order selected indicator - Rectangle - { - visible: API.app.trading_pg.preffered_order.price !== undefined - Layout.preferredWidth: parent.width - Layout.preferredHeight: 40 - Layout.alignment: Qt.AlignHCenter - radius: 8 - color: 'transparent' - border.color: Dex.CurrentTheme.noColor - - DefaultText - { - anchors.verticalCenter: parent.verticalCenter - leftPadding: 15 - color: Dex.CurrentTheme.noColor - text: qsTr("Order Selected") - } - - Qaterial.FlatButton - { - anchors.right: parent.right - anchors.rightMargin: 15 - anchors.verticalCenter: parent.verticalCenter - foregroundColor: Dex.CurrentTheme.noColor - icon.source: Qaterial.Icons.close - backgroundImplicitWidth: 40 - backgroundImplicitHeight: 30 - - onClicked: API.app.trading_pg.reset_order() - } - } - - OrderForm - { - id: form_base - Layout.preferredWidth: parent.width - Layout.alignment: Qt.AlignHCenter - } - - TotalView - { - Layout.preferredWidth: parent.width - Layout.alignment: Qt.AlignHCenter - } - - DexGradientAppButton - { - Layout.preferredHeight: 40 - Layout.preferredWidth: parent.width - 20 - Layout.alignment: Qt.AlignHCenter - radius: 18 - - text: qsTr("START SWAP") - font.weight: Font.Medium - enabled: form_base.can_submit_trade - onClicked: confirm_trade_modal.open() - } - - ColumnLayout - { - spacing: parent.spacing - visible: errors.text_value !== "" - Layout.preferredWidth: parent.width - - HorizontalLine - { - Layout.alignment: Qt.AlignHCenter - Layout.preferredWidth: parent.width - } - - // Show errors - DefaultText - { - id: errors - Layout.alignment: Qt.AlignHCenter - Layout.preferredWidth: parent.width - horizontalAlignment: Text.AlignHCenter - font.pixelSize: Style.textSizeSmall4 - color: Dex.CurrentTheme.noColor - text_value: General.getTradingError( - last_trading_error, - curr_fee_info, - base_ticker, - rel_ticker, left_ticker, right_ticker) - elide: Text.ElideRight - } - } - } } ModalLoader diff --git a/atomic_defi_design/Dex/Exchange/Trade/TradeBox/BuyBox.qml b/atomic_defi_design/Dex/Exchange/Trade/TradeBox/BuyBox.qml deleted file mode 100644 index d0049c04d9..0000000000 --- a/atomic_defi_design/Dex/Exchange/Trade/TradeBox/BuyBox.qml +++ /dev/null @@ -1,60 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 -import QtQuick.Controls 2.15 - -import Qt.labs.settings 1.0 -import AtomicDEX.MarketMode 1.0 - -import "../../../Components" -import "../../../Wallet" - -import App 1.0 - -FloatingBackground { - property alias can_submit_trade: form_base.can_submit_trade - property alias formBase: form_base - Layout.preferredHeight: !sell_mode ? 350 : 45 - Behavior on Layout.preferredHeight { - NumberAnimation { - duration: 200 - } - } - Layout.fillWidth: true - radius: sell_mode ? 3 : 4 - border.color: Style.colorGreen - color: Style.colorTheme9 - opacity: mouse_area2.containsMouse ? 1 : !sell_mode ? 1 : .2 - Rectangle { - width: parent.width - height: 45 - color: Style.colorGreen - radius: 2 - DefaultText { - anchors.centerIn: parent - text: qsTr("Buy") + " " + atomic_qt_utilities.retrieve_main_ticker(left_ticker) - color: Style.colorTheme9 - font.pixelSize: Style.textSize2 - } - } - - OrderForm { - id: form_base - y: 45 - width: parent.width - 25 - height: parent.height - 45 - clip: true - visible: !sell_mode - border.color: 'transparent' - color: 'transparent' - anchors.horizontalCenter: parent.horizontalCenter - - } - - DefaultMouseArea { - anchors.fill: parent - id: mouse_area2 - visible: sell_mode - hoverEnabled: true - onClicked: setMarketMode(MarketMode.Buy) - } -} \ No newline at end of file diff --git a/atomic_defi_design/Dex/Exchange/Trade/TradeBox/SellBox.qml b/atomic_defi_design/Dex/Exchange/Trade/TradeBox/SellBox.qml deleted file mode 100644 index 665bc6c070..0000000000 --- a/atomic_defi_design/Dex/Exchange/Trade/TradeBox/SellBox.qml +++ /dev/null @@ -1,76 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 -import QtQuick.Controls 2.15 - -import Qaterial 1.0 as Qaterial -import Qt.labs.settings 1.0 -import AtomicDEX.MarketMode 1.0 - -import "../../../Components" -import "../../../Wallet" - -import App 1.0 - -Item { - property alias can_submit_trade: form_base.can_submit_trade - property alias formBase: form_base - Layout.preferredHeight: sell_mode ? 350 : 45 - Behavior on Layout.preferredHeight { - NumberAnimation { - duration: 200 - } - } - //color: Style.colorTheme - Layout.fillWidth: true - //radius: sell_mode? 4 : 3 - //border.color: Style.colorRed - //color: Style.colorTheme6 - opacity: mouse_area.containsMouse ? 1 : sell_mode ? 1 : .35 - - Rectangle { - visible: false - width: parent.width - height: 45 - color: Style.colorRed - radius: 6 - Rectangle { - anchors.bottom: parent.bottom - width: parent.width - height: parent.radius - color: Style.colorTheme6 - } - - DefaultText { - anchors.centerIn: parent - anchors.verticalCenterOffset: -2 - text: qsTr("Sell") + " " + atomic_qt_utilities.retrieve_main_ticker(left_ticker) - color: Qaterial.Colors.gray200 - font.pixelSize: Style.textSize1 - } - } - OrderForm { - id: form_base - y: 45 - width: parent.width - 25 - height: parent.height - 45 - //clip: true - visible: sell_mode - border.color: 'transparent' - color: 'transparent' - anchors.horizontalCenter: parent.horizontalCenter - - } - - - - - - - DefaultMouseArea { - anchors.fill: parent - id: mouse_area - visible: !sell_mode - hoverEnabled: true - onClicked: setMarketMode(MarketMode.Sell) - } -} \ No newline at end of file diff --git a/atomic_defi_design/qml.qrc b/atomic_defi_design/qml.qrc index 04d2fae226..bc8dede9fc 100644 --- a/atomic_defi_design/qml.qrc +++ b/atomic_defi_design/qml.qrc @@ -523,7 +523,10 @@ Dex/Exchange/Exchange.qml Dex/Exchange/ProView/Chart.qml Dex/Exchange/ProView/DexComboBoxLine.qml - Dex/Exchange/ProView/MarketModeSelector.qml + Dex/Exchange/ProView/PlaceOrderForm/Main.qml + Dex/Exchange/ProView/PlaceOrderForm/MarketModeSelector.qml + Dex/Exchange/ProView/PlaceOrderForm/OrderForm.qml + Dex/Exchange/ProView/PlaceOrderForm/TotalView.qml Dex/Exchange/ProView/SweetDexComboBox.qml Dex/Exchange/ProView/TickerSelector.qml Dex/Exchange/ProView/TickerSelectors.qml @@ -559,11 +562,7 @@ Dex/Exchange/Trade/SimpleView/SubOrders.qml Dex/Exchange/Trade/SimpleView/SubHistory.qml Dex/Exchange/Trade/Trade.qml - Dex/Exchange/Trade/TradeBox/BuyBox.qml - Dex/Exchange/Trade/TradeBox/OrderForm.qml - Dex/Exchange/Trade/TradeBox/SellBox.qml Dex/Exchange/Trade/Trading/Items/FeeInfo.qml - Dex/Exchange/Trade/Trading/Items/TotalView.qml Dex/Exchange/Trade/Trading/TradeViewHeader.qml Dex/Fiat/FiatRamp.qml Dex/Graphics/Color.js From e75661d683faa26be1d85c9fcfde3df2f3fa9d5e Mon Sep 17 00:00:00 2001 From: Syl Date: Thu, 17 Mar 2022 13:04:30 +0100 Subject: [PATCH 36/46] QML Components: Create Widget component --- atomic_defi_design/Dex/Components/Widget.qml | 123 +++++++++++++++++++ atomic_defi_design/qml.qrc | 1 + 2 files changed, 124 insertions(+) create mode 100644 atomic_defi_design/Dex/Components/Widget.qml diff --git a/atomic_defi_design/Dex/Components/Widget.qml b/atomic_defi_design/Dex/Components/Widget.qml new file mode 100644 index 0000000000..9e7c7db82e --- /dev/null +++ b/atomic_defi_design/Dex/Components/Widget.qml @@ -0,0 +1,123 @@ +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 hideable: 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 + + // 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 + } + } + Qaterial.Icon + { + visible: root.hideable + width: 20 + height: 20 + color: hideButMouseArea.containsMouse ? Dex.CurrentTheme.foregroundColor2 : Dex.CurrentTheme.foregroundColor + icon: Qaterial.Icons.eye + + DefaultMouseArea + { + id: hideButMouseArea + anchors.fill: parent + hoverEnabled: true + onClicked: root.visible = !root.visible + } + } + } + } + + // Background Component + Component + { + id: defaultBackground + + Rectangle + { + radius: 10 + color: Dex.CurrentTheme.floatingBackgroundColor + } + } +} diff --git a/atomic_defi_design/qml.qrc b/atomic_defi_design/qml.qrc index bc8dede9fc..6c7b11a7b7 100644 --- a/atomic_defi_design/qml.qrc +++ b/atomic_defi_design/qml.qrc @@ -510,6 +510,7 @@ Dex/Components/VerticalLine.qml Dex/Components/VerticalLineBasic.qml Dex/Components/WalletNameField.qml + Dex/Components/Widget.qml Dex/Constants Dex/Constants/API.qml Dex/Constants/DexTheme.qml From 32a496dcba5b4e8b19164259769eb117553f11cf Mon Sep 17 00:00:00 2001 From: Syl Date: Fri, 18 Mar 2022 11:50:57 +0100 Subject: [PATCH 37/46] Remove duplicate bignumber.js submodule --- atomic_defi_design/bignumberjs/bignumber.js | 1 - 1 file changed, 1 deletion(-) delete mode 160000 atomic_defi_design/bignumberjs/bignumber.js diff --git a/atomic_defi_design/bignumberjs/bignumber.js b/atomic_defi_design/bignumberjs/bignumber.js deleted file mode 160000 index 690d9964fe..0000000000 --- a/atomic_defi_design/bignumberjs/bignumber.js +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 690d9964fedeb9762e84ae233206292a23ea730a From e01828563dc5c1a479e545c4ee3ffb99050b4811 Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 21 Mar 2022 12:55:04 +0100 Subject: [PATCH 38/46] Pro Trading View: Each panel (except ticker selector) is now a widget --- atomic_defi_design/Dex/Components/Widget.qml | 19 +- .../Dex/Exchange/ProView/Chart.qml | 75 ++++-- .../Exchange/ProView/PlaceOrderForm/Main.qml | 218 ++++++++---------- .../Dex/Exchange/ProView/TradingInfo/Main.qml | 84 +++++++ .../TradingInfo}/OrderLine.qml | 0 .../TradingInfo}/OrderList.qml | 0 .../TradingInfo}/OrderModal.qml | 2 - .../TradingInfo}/OrdersPage.qml | 0 .../TradingInfo}/PriceLine.qml | 4 +- .../TradingInfo}/SwapProgress.qml | 0 .../Dex/Exchange/Trade/BestOrder/List.qml | 56 ++--- .../Dex/Exchange/Trade/OrderBook/Vertical.qml | 73 +++--- .../Dex/Exchange/Trade/ProView.qml | 125 +++------- .../Dex/Exchange/Trade/SimpleView/Main.qml | 2 +- atomic_defi_design/qml.qrc | 13 +- 15 files changed, 330 insertions(+), 341 deletions(-) create mode 100644 atomic_defi_design/Dex/Exchange/ProView/TradingInfo/Main.qml rename atomic_defi_design/Dex/Exchange/{Trade/Orders => ProView/TradingInfo}/OrderLine.qml (100%) rename atomic_defi_design/Dex/Exchange/{Trade/Orders => ProView/TradingInfo}/OrderList.qml (100%) rename atomic_defi_design/Dex/Exchange/{Trade/Orders => ProView/TradingInfo}/OrderModal.qml (99%) rename atomic_defi_design/Dex/Exchange/{Trade/Orders => ProView/TradingInfo}/OrdersPage.qml (100%) rename atomic_defi_design/Dex/Exchange/{Trade => ProView/TradingInfo}/PriceLine.qml (98%) rename atomic_defi_design/Dex/Exchange/{Trade/Orders => ProView/TradingInfo}/SwapProgress.qml (100%) diff --git a/atomic_defi_design/Dex/Components/Widget.qml b/atomic_defi_design/Dex/Components/Widget.qml index 9e7c7db82e..034855730c 100644 --- a/atomic_defi_design/Dex/Components/Widget.qml +++ b/atomic_defi_design/Dex/Components/Widget.qml @@ -14,7 +14,6 @@ Item property string title: "Widget" property bool collapsable: true - property bool hideable: true property bool collapsedAtConstruction: false property alias header: headerLoader.sourceComponent @@ -28,6 +27,8 @@ Item property bool _collapsed: collapsable && collapsedAtConstruction + function isCollapsed() { return _collapsed } + // Background Loader { @@ -90,22 +91,6 @@ Item onClicked: root._collapsed = !root._collapsed } } - Qaterial.Icon - { - visible: root.hideable - width: 20 - height: 20 - color: hideButMouseArea.containsMouse ? Dex.CurrentTheme.foregroundColor2 : Dex.CurrentTheme.foregroundColor - icon: Qaterial.Icons.eye - - DefaultMouseArea - { - id: hideButMouseArea - anchors.fill: parent - hoverEnabled: true - onClicked: root.visible = !root.visible - } - } } } diff --git a/atomic_defi_design/Dex/Exchange/ProView/Chart.qml b/atomic_defi_design/Dex/Exchange/ProView/Chart.qml index 4c79689bbc..a59455c327 100644 --- a/atomic_defi_design/Dex/Exchange/ProView/Chart.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/Chart.qml @@ -1,23 +1,27 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 +import QtWebEngine 1.8 import "../../Components" import "../../Constants" import Dex.Themes 1.0 as Dex -Item +Widget { id: root + title: qsTr("Chart") + background: null + margins: 0 + property bool pair_supported: false - readonly property bool is_fetching: dashboard.webEngineView.loadProgress < 100 readonly property string theme: Dex.CurrentTheme.getColorMode() === Dex.CurrentTheme.ColorMode.Dark ? "dark" : "light" property string chart_base property string chart_rel property string loaded_symbol - function loadChart(base, rel, force=false) + function loadChart(base, rel, force = false) { const pair = atomic_qt_utilities.retrieve_main_ticker(base) + "/" + atomic_qt_utilities.retrieve_main_ticker(rel) const pair_reversed = atomic_qt_utilities.retrieve_main_ticker(rel) + "/" + atomic_qt_utilities.retrieve_main_ticker(base) @@ -66,25 +70,23 @@ Item `) } - onIs_fetchingChanged: dashboard.webEngineView.visible = !is_fetching && pair_supported - onPair_supportedChanged: if (!pair_supported) dashboard.webEngineView.visible = false; + onPair_supportedChanged: if (!pair_supported) webEngineViewPlaceHolder.visible = false Component.onCompleted: { - try { loadChart(left_ticker?? atomic_app_primary_coin, right_ticker?? atomic_app_secondary_coin) } catch (e) { console.error(e) } - - dashboard.webEngineView.parent = chartView; - dashboard.webEngineView.anchors.fill = chartView; - } - Component.onDestruction: - { - dashboard.webEngineView.visible = false; - dashboard.webEngineView.stop(); + try + { + loadChart(left_ticker?? atomic_app_primary_coin, + right_ticker?? atomic_app_secondary_coin) + } + catch (e) { console.error(e) } } RowLayout { - visible: pair_supported && !dashboard.webEngineView.visible - anchors.centerIn: parent + visible: pair_supported && !webEngineViewPlaceHolder.visible + Layout.fillWidth: true + Layout.fillHeight: true + Layout.alignment: Qt.AlignCenter DefaultBusyIndicator { @@ -104,7 +106,42 @@ Item { visible: !pair_supported text_value: qsTr("There is no chart data for this pair yet") - anchors.centerIn: parent + Layout.topMargin: 30 + Layout.alignment: Qt.AlignCenter + } + + Item + { + id: webEngineViewPlaceHolder + Layout.fillWidth: true + Layout.fillHeight: true + visible: false + + Component.onCompleted: + { + dashboard.webEngineView.parent = webEngineViewPlaceHolder + dashboard.webEngineView.anchors.fill = webEngineViewPlaceHolder + } + Component.onDestruction: + { + dashboard.webEngineView.visible = false + dashboard.webEngineView.stop() + } + onVisibleChanged: dashboard.webEngineView.visible = visible + + Connections + { + target: dashboard.webEngineView + + function onLoadingChanged(webEngineLoadReq) + { + if (webEngineLoadReq.status === WebEngineView.LoadSucceededStatus) + { + webEngineViewPlaceHolder.visible = true + } + else webEngineViewPlaceHolder.visible = false + } + } } Connections @@ -121,7 +158,9 @@ Item target: Dex.CurrentTheme function onThemeChanged() { - loadChart(left_ticker?? atomic_app_primary_coin, right_ticker?? atomic_app_secondary_coin, true) + loadChart(left_ticker?? atomic_app_primary_coin, + right_ticker?? atomic_app_secondary_coin, + true) } } } diff --git a/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/Main.qml b/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/Main.qml index 0d9e478a07..cc0c2f73bf 100644 --- a/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/Main.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/Main.qml @@ -9,147 +9,129 @@ import "../../../Constants" import Dex.Themes 1.0 as Dex import AtomicDEX.MarketMode 1.0 -Rectangle +Widget { - radius: 10 - color: Dex.CurrentTheme.floatingBackgroundColor + title: qsTr("Place Order") - DefaultText - { - anchors.top: parent.top - anchors.topMargin: 20 - anchors.left: parent.left - anchors.leftMargin: 20 - text: qsTr("Place Order") - font: DexTypo.subtitle1 - } + margins: 20 + collapsable: false - ColumnLayout + // Market mode selector + RowLayout { - anchors.fill: parent - anchors.topMargin: 40 - anchors.leftMargin: 20 - anchors.rightMargin: 20 - anchors.bottomMargin: 20 - spacing: 10 - - // Market mode selector - RowLayout + Layout.topMargin: 10 + Layout.alignment: Qt.AlignHCenter + Layout.minimumHeight: 40 + Layout.maximumHeight: 48 + Layout.fillWidth: true + Layout.fillHeight: true + + MarketModeSelector { - Layout.topMargin: 10 - Layout.alignment: Qt.AlignHCenter - Layout.minimumHeight: 40 - Layout.maximumHeight: 48 - Layout.fillWidth: true + Layout.alignment: Qt.AlignLeft + Layout.preferredWidth: (parent.width / 100) * 46 Layout.fillHeight: true - - MarketModeSelector - { - Layout.alignment: Qt.AlignLeft - Layout.preferredWidth: (parent.width / 100) * 46 - Layout.fillHeight: true - marketMode: MarketMode.Buy - ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) - } - - Item { Layout.fillWidth: true } - - MarketModeSelector - { - Layout.alignment: Qt.AlignRight - Layout.preferredWidth: (parent.width / 100) * 46 - Layout.fillHeight: true - ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) - } + marketMode: MarketMode.Buy + ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) } - // Order selected indicator - Rectangle + Item { Layout.fillWidth: true } + + MarketModeSelector { - visible: API.app.trading_pg.preffered_order.price !== undefined - Layout.preferredWidth: parent.width - Layout.preferredHeight: 40 - Layout.alignment: Qt.AlignHCenter - radius: 8 - color: 'transparent' - border.color: Dex.CurrentTheme.noColor - - DefaultText - { - anchors.verticalCenter: parent.verticalCenter - leftPadding: 15 - color: Dex.CurrentTheme.noColor - text: qsTr("Order Selected") - } - - Qaterial.FlatButton - { - anchors.right: parent.right - anchors.rightMargin: 15 - anchors.verticalCenter: parent.verticalCenter - foregroundColor: Dex.CurrentTheme.noColor - icon.source: Qaterial.Icons.close - backgroundImplicitWidth: 40 - backgroundImplicitHeight: 30 - - onClicked: API.app.trading_pg.reset_order() - } + Layout.alignment: Qt.AlignRight + Layout.preferredWidth: (parent.width / 100) * 46 + Layout.fillHeight: true + ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker) } + } - OrderForm + // Order selected indicator + Rectangle + { + visible: API.app.trading_pg.preffered_order.price !== undefined + Layout.preferredWidth: parent.width + Layout.preferredHeight: 40 + Layout.alignment: Qt.AlignHCenter + radius: 8 + color: 'transparent' + border.color: Dex.CurrentTheme.noColor + + DefaultText { - id: form_base - Layout.preferredWidth: parent.width - Layout.alignment: Qt.AlignHCenter + anchors.verticalCenter: parent.verticalCenter + leftPadding: 15 + color: Dex.CurrentTheme.noColor + text: qsTr("Order Selected") } - TotalView + Qaterial.FlatButton { - Layout.preferredWidth: parent.width - Layout.alignment: Qt.AlignHCenter + anchors.right: parent.right + anchors.rightMargin: 15 + anchors.verticalCenter: parent.verticalCenter + foregroundColor: Dex.CurrentTheme.noColor + icon.source: Qaterial.Icons.close + backgroundImplicitWidth: 40 + backgroundImplicitHeight: 30 + + onClicked: API.app.trading_pg.reset_order() } + } - DexGradientAppButton + OrderForm + { + id: form_base + Layout.preferredWidth: parent.width + Layout.alignment: Qt.AlignHCenter + } + + TotalView + { + Layout.preferredWidth: parent.width + Layout.alignment: Qt.AlignHCenter + } + + DexGradientAppButton + { + Layout.preferredHeight: 40 + Layout.preferredWidth: parent.width - 20 + Layout.alignment: Qt.AlignHCenter + radius: 18 + + text: qsTr("START SWAP") + font.weight: Font.Medium + enabled: form_base.can_submit_trade + onClicked: confirm_trade_modal.open() + } + + ColumnLayout + { + spacing: parent.spacing + visible: errors.text_value !== "" + Layout.preferredWidth: parent.width + + HorizontalLine { - Layout.preferredHeight: 40 - Layout.preferredWidth: parent.width - 20 Layout.alignment: Qt.AlignHCenter - radius: 18 - - text: qsTr("START SWAP") - font.weight: Font.Medium - enabled: form_base.can_submit_trade - onClicked: confirm_trade_modal.open() + Layout.preferredWidth: parent.width } - ColumnLayout + // Show errors + DefaultText { - spacing: parent.spacing - visible: errors.text_value !== "" + id: errors + Layout.alignment: Qt.AlignHCenter Layout.preferredWidth: parent.width - - HorizontalLine - { - Layout.alignment: Qt.AlignHCenter - Layout.preferredWidth: parent.width - } - - // Show errors - DefaultText - { - id: errors - Layout.alignment: Qt.AlignHCenter - Layout.preferredWidth: parent.width - horizontalAlignment: Text.AlignHCenter - font.pixelSize: Style.textSizeSmall4 - color: Dex.CurrentTheme.noColor - text_value: General.getTradingError( - last_trading_error, - curr_fee_info, - base_ticker, - rel_ticker, left_ticker, right_ticker) - elide: Text.ElideRight - } + horizontalAlignment: Text.AlignHCenter + font.pixelSize: Style.textSizeSmall4 + color: Dex.CurrentTheme.noColor + text_value: General.getTradingError( + last_trading_error, + curr_fee_info, + base_ticker, + rel_ticker, left_ticker, right_ticker) + elide: Text.ElideRight } } } diff --git a/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/Main.qml b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/Main.qml new file mode 100644 index 0000000000..c9e5fc0566 --- /dev/null +++ b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/Main.qml @@ -0,0 +1,84 @@ +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 "../../../Constants" +import "../../../Components" + +Widget +{ + title: qsTr("Trading Information") + + background: null + margins: 0 + + Qaterial.LatoTabBar + { + id: tabView + property int taux_exchange: 0 + property int order_idx: 1 + property int history_idx: 2 + + background: null + Layout.leftMargin: 6 + + Qaterial.LatoTabButton + { + text: qsTr("Exchange Rates") + font.pixelSize: 14 + textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + indicatorColor: Dex.CurrentTheme.foregroundColor + textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + } + Qaterial.LatoTabButton + { + text: qsTr("Orders") + font.pixelSize: 14 + textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + indicatorColor: Dex.CurrentTheme.foregroundColor + } + Qaterial.LatoTabButton + { + text: qsTr("History") + font.pixelSize: 14 + textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + textSecondaryColor: Dex.CurrentTheme.foregroundColor2 + indicatorColor: Dex.CurrentTheme.foregroundColor + } + } + + Rectangle + { + Layout.fillWidth: true + Layout.fillHeight: true + color: Dex.CurrentTheme.floatingBackgroundColor + radius: 10 + + Qaterial.SwipeView + { + id: swipeView + clip: true + interactive: false + currentIndex: tabView.currentIndex + anchors.fill: parent + onCurrentIndexChanged: + { + swipeView.currentItem.update(); + } + + PriceLine { } + + OrdersPage { clip: true } + + OrdersPage + { + is_history: true + clip: true + } + } + } +} diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderLine.qml b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderLine.qml similarity index 100% rename from atomic_defi_design/Dex/Exchange/Trade/Orders/OrderLine.qml rename to atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderLine.qml diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderList.qml similarity index 100% rename from atomic_defi_design/Dex/Exchange/Trade/Orders/OrderList.qml rename to atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderList.qml diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderModal.qml b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderModal.qml similarity index 99% rename from atomic_defi_design/Dex/Exchange/Trade/Orders/OrderModal.qml rename to atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderModal.qml index 65ab6be0ec..fba4ec8c6e 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrderModal.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderModal.qml @@ -4,11 +4,9 @@ import QtQuick.Controls 2.15 import Qaterial 1.0 as Qaterial -import App 1.0 import Dex.Themes 1.0 as Dex import "../../../Components" import "../../../Constants" -import Dex.Themes 1.0 as Dex import App 1.0 MultipageModal diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/OrdersPage.qml b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrdersPage.qml similarity index 100% rename from atomic_defi_design/Dex/Exchange/Trade/Orders/OrdersPage.qml rename to atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrdersPage.qml diff --git a/atomic_defi_design/Dex/Exchange/Trade/PriceLine.qml b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/PriceLine.qml similarity index 98% rename from atomic_defi_design/Dex/Exchange/Trade/PriceLine.qml rename to atomic_defi_design/Dex/Exchange/ProView/TradingInfo/PriceLine.qml index ee566c2381..3f434a8fe1 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/PriceLine.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/PriceLine.qml @@ -2,8 +2,8 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 -import "../../Components" -import "../../Constants" +import "../../../Components" +import "../../../Constants" import Dex.Themes 1.0 as Dex ColumnLayout diff --git a/atomic_defi_design/Dex/Exchange/Trade/Orders/SwapProgress.qml b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/SwapProgress.qml similarity index 100% rename from atomic_defi_design/Dex/Exchange/Trade/Orders/SwapProgress.qml rename to atomic_defi_design/Dex/Exchange/ProView/TradingInfo/SwapProgress.qml diff --git a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml index 2655afc5b2..3e96f34b28 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/BestOrder/List.qml @@ -8,7 +8,7 @@ import Dex.Themes 1.0 as Dex import "../../../Constants" import "../../../Components" -Rectangle +Widget { id: _control @@ -16,44 +16,30 @@ Rectangle property real fiatPriceColumnWidth: 0.22 property real cexRateColumnWidth: 0.22 - color: Dex.CurrentTheme.floatingBackgroundColor - radius: 10 + title: qsTr("Best Orders") - ColumnLayout - { - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom - anchors.margins: 20 - spacing: 10 - - DefaultText - { - text: qsTr("Best Orders") - font: DexTypo.subtitle1 - } + margins: 20 + spacing: 20 - Header - { - Layout.topMargin: 10 - Layout.fillWidth: true - } + Header + { + Layout.topMargin: 10 + Layout.fillWidth: true + } - DefaultListView + ListView + { + id: list + Layout.fillWidth: true + Layout.fillHeight: true + model: API.app.trading_pg.orderbook.best_orders.proxy_mdl + spacing: 6 + clip: true + + delegate: ListDelegate { - id: list - Layout.fillWidth: true - Layout.fillHeight: true - model: API.app.trading_pg.orderbook.best_orders.proxy_mdl - spacing: 6 - clip: true - - delegate: ListDelegate - { - width: list.width - height: 36 - } + width: list.width + height: 36 } } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml index 0a22614f2d..7b2a9b6d80 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/OrderBook/Vertical.qml @@ -9,56 +9,43 @@ import "../../../Constants" import App 1.0 import Dex.Themes 1.0 as Dex -FloatingBackground +Widget { - Layout.fillWidth: true - Layout.fillHeight: true - radius: 10 + title: qsTr("Order Book") + margins: 20 + spacing: 20 - ColumnLayout + Header { - anchors.fill: parent - anchors.margins: 20 - spacing: 20 - - DefaultText - { - font: DexTypo.subtitle1 - text: qsTr("Order Book") - } - - Header - { - Layout.fillWidth: true - Layout.preferredHeight: 30 - } + Layout.fillWidth: true + Layout.preferredHeight: 30 + } - List - { - isAsk: true - isVertical: true - Layout.fillHeight: true - Layout.fillWidth: true - } + List + { + isAsk: true + isVertical: true + Layout.fillHeight: true + Layout.fillWidth: true + } - Item + Item + { + Layout.preferredHeight: 4 + Layout.fillWidth: true + Rectangle { - Layout.preferredHeight: 4 - Layout.fillWidth: true - Rectangle - { - width: parent.width - height: parent.height - anchors.horizontalCenter: parent.horizontalCenter - color: Dex.CurrentTheme.floatingBackgroundColor - } + width: parent.width + height: parent.height + anchors.horizontalCenter: parent.horizontalCenter + color: Dex.CurrentTheme.floatingBackgroundColor } + } - List - { - isAsk: false - Layout.fillHeight: true - Layout.fillWidth: true - } + List + { + isAsk: false + 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 index 303dc7066e..7733afd165 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -34,6 +34,7 @@ import Dex.Themes 1.0 as Dex import "../ProView" import "../ProView/PlaceOrderForm" as PlaceOrderForm +import "../ProView/TradingInfo" as TradingInfo RowLayout { @@ -100,6 +101,8 @@ RowLayout ColumnLayout { + Layout.alignment: Qt.AlignTop + Layout.minimumWidth: 480 Layout.maximumWidth: 735 Layout.fillWidth: true @@ -109,25 +112,15 @@ RowLayout spacing: 20 // Chart - ColumnLayout + Chart { - Layout.fillWidth: true - - Layout.minimumHeight: 190 - Layout.maximumHeight: 360 - Layout.fillHeight: true - - spacing: 10 - - DefaultText { font: DexTypo.subtitle1; text: qsTr("Chart") } + id: chart - Chart - { - id: chartView + Layout.fillWidth: true - Layout.fillWidth: true - Layout.fillHeight: true - } + Layout.minimumHeight: isCollapsed() ? 60 : 190 + Layout.maximumHeight: tradingInfo.isCollapsed() ? -1 : 360 + Layout.fillHeight: !isCollapsed() } // Ticker selectors. @@ -140,87 +133,15 @@ RowLayout } // Trading Informations - ColumnLayout + TradingInfo.Main { - Layout.fillWidth: true - - Layout.minimumHeight: 380 - Layout.maximumHeight: 500 - Layout.fillHeight: true + id: tradingInfo - spacing: 10 - - DefaultText { font: DexTypo.subtitle1; text: qsTr("Trading Information") } - - Qaterial.LatoTabBar - { - id: tabView - property int taux_exchange: 0 - property int order_idx: 1 - property int history_idx: 2 - - Material.foreground: Dex.CurrentTheme.foregroundColor - background: null - Layout.leftMargin: 6 - - Qaterial.LatoTabButton - { - text: qsTr("Exchange Rates") - font.pixelSize: 14 - textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 - indicatorColor: Dex.CurrentTheme.foregroundColor - textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - } - Qaterial.LatoTabButton - { - text: qsTr("Orders") - font.pixelSize: 14 - textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 - textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - indicatorColor: Dex.CurrentTheme.foregroundColor - } - Qaterial.LatoTabButton - { - text: qsTr("History") - font.pixelSize: 14 - textColor: checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 - textSecondaryColor: Dex.CurrentTheme.foregroundColor2 - indicatorColor: Dex.CurrentTheme.foregroundColor - } - } + Layout.fillWidth: true - Rectangle - { - Layout.fillWidth: true - Layout.fillHeight: true - color: Dex.CurrentTheme.floatingBackgroundColor - radius: 10 - - Qaterial.SwipeView - { - id: swipeView - clip: true - interactive: false - currentIndex: tabView.currentIndex - anchors.fill: parent - onCurrentIndexChanged: - { - swipeView.currentItem.update(); - if (currentIndex === 2) history_component.list_model_proxy.is_history = true; - else history_component.list_model_proxy.is_history = false; - } - - PriceLine { id: price_line_obj } - - OrdersView.OrdersPage { id: order_component; clip: true } - OrdersView.OrdersPage - { - id: history_component - is_history: true - clip: true - } - } - } + Layout.minimumHeight: isCollapsed() ? 60 : 380 + Layout.maximumHeight: chart.isCollapsed() ? -1 : 500 + Layout.fillHeight: !isCollapsed() } } @@ -228,23 +149,29 @@ RowLayout { Layout.minimumWidth: 353 Layout.fillWidth: true + Layout.fillHeight: true + Layout.alignment: Qt.AlignTop OrderBook.Vertical { + id: orderBook + Layout.fillWidth: true - Layout.minimumHeight: 365 - Layout.maximumHeight: 536 - Layout.fillHeight: true + Layout.minimumHeight: isCollapsed() ? 70 : 365 + Layout.maximumHeight: bestOrders.visible && !bestOrders.isCollapsed() ? 536 : -1 + Layout.fillHeight: !isCollapsed() } // Best Orders BestOrder.List { + id: bestOrders + Layout.fillWidth: true - Layout.minimumHeight: 196 - Layout.fillHeight: true + Layout.minimumHeight: isCollapsed() ? 70 : 196 + Layout.fillHeight: !isCollapsed() } } diff --git a/atomic_defi_design/Dex/Exchange/Trade/SimpleView/Main.qml b/atomic_defi_design/Dex/Exchange/Trade/SimpleView/Main.qml index 4880ce3c64..ee73c2f269 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/SimpleView/Main.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/SimpleView/Main.qml @@ -9,7 +9,7 @@ import Qaterial 1.0 as Qaterial //! Project Imports import "../../../Components" import "../../../Constants" as Constants -import "../Orders" as Orders +import "../../ProView/TradingInfo" as Orders import "Main.js" as Main import App 1.0 import Dex.Themes 1.0 as Dex diff --git a/atomic_defi_design/qml.qrc b/atomic_defi_design/qml.qrc index 6c7b11a7b7..8fdcd465e7 100644 --- a/atomic_defi_design/qml.qrc +++ b/atomic_defi_design/qml.qrc @@ -531,6 +531,13 @@ Dex/Exchange/ProView/SweetDexComboBox.qml Dex/Exchange/ProView/TickerSelector.qml Dex/Exchange/ProView/TickerSelectors.qml + Dex/Exchange/ProView/TradingInfo/Main.qml + Dex/Exchange/ProView/TradingInfo/OrderLine.qml + Dex/Exchange/ProView/TradingInfo/OrderList.qml + Dex/Exchange/ProView/TradingInfo/OrderModal.qml + Dex/Exchange/ProView/TradingInfo/OrdersPage.qml + Dex/Exchange/ProView/TradingInfo/PriceLine.qml + Dex/Exchange/ProView/TradingInfo/SwapProgress.qml Dex/Exchange/Trade/BestOrder/Header.qml Dex/Exchange/Trade/BestOrder/List.qml Dex/Exchange/Trade/BestOrder/ListDelegate.qml @@ -545,12 +552,6 @@ Dex/Exchange/Trade/OrderBook/ListDelegate.qml Dex/Exchange/Trade/OrderBook/Vertical.qml Dex/Exchange/Trade/Orders/OrderContent.qml - Dex/Exchange/Trade/Orders/OrderLine.qml - Dex/Exchange/Trade/Orders/OrderList.qml - Dex/Exchange/Trade/Orders/OrderModal.qml - Dex/Exchange/Trade/Orders/OrdersPage.qml - Dex/Exchange/Trade/Orders/SwapProgress.qml - Dex/Exchange/Trade/PriceLine.qml Dex/Exchange/Trade/PriceLineSimplified.qml Dex/Exchange/Trade/ProView.qml Dex/Exchange/Trade/SimpleView/List.qml From 12f4c915068a580ead2f003cf82f3779174a258e Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 21 Mar 2022 15:51:21 +0100 Subject: [PATCH 39/46] Pro Trading View: Add options menu to hide items --- .../Dex/Components/CheckEye.qml | 55 ++++++ .../Dex/Components/DexCheckEye.qml | 54 ------ .../Dex/Exchange/Trade/ProView.qml | 8 + .../Dex/Exchange/Trade/Trade.qml | 9 +- .../Trade/Trading/TradeViewHeader.qml | 156 +++++++++++++----- atomic_defi_design/qml.qrc | 2 +- 6 files changed, 186 insertions(+), 98 deletions(-) create mode 100644 atomic_defi_design/Dex/Components/CheckEye.qml delete mode 100644 atomic_defi_design/Dex/Components/DexCheckEye.qml diff --git a/atomic_defi_design/Dex/Components/CheckEye.qml b/atomic_defi_design/Dex/Components/CheckEye.qml new file mode 100644 index 0000000000..e3bb0bca61 --- /dev/null +++ b/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 + } + } +} diff --git a/atomic_defi_design/Dex/Components/DexCheckEye.qml b/atomic_defi_design/Dex/Components/DexCheckEye.qml deleted file mode 100644 index bf9439911c..0000000000 --- a/atomic_defi_design/Dex/Components/DexCheckEye.qml +++ /dev/null @@ -1,54 +0,0 @@ -import QtQuick 2.15 -import Qaterial 1.0 as Qaterial -import QtQuick.Layouts 1.12 - -import App 1.0 -import Dex.Themes 1.0 as Dex - -Item -{ - id: control - - property bool checked: eval("target." + control.targetProperty) - property alias text: _label.text - property alias iconSource: _icon.source - property string targetProperty: "" - 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: control.checked ? Qaterial.Icons.eyeOutline : Qaterial.Icons.eyeOffOutline - color: control.checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.buttonTextDisabledColor - iconSize: 17 - DexMouseArea - { - anchors.fill: parent - onClicked: - { - if (control.checked) eval("target." + control.targetProperty + " = false") - else eval("target." + control.targetProperty + " = true") - } - } - } - DefaultText - { - id: _label - font.pixelSize: 15 - text: "" - color: control.checked ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.buttonTextDisabledColor - opacity: .5 - Layout.fillWidth: true - Layout.alignment: Qt.AlignVCenter - } - } -} diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index 7733afd165..051213736b 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -40,6 +40,12 @@ RowLayout { id: form + property alias chart: chart + property alias trInfo: tradingInfo + property alias orderBook: orderBook + property alias bestOrders: bestOrders + property alias placeOrderForm: placeOrderForm + spacing: 16 function selectOrder(is_asks, 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) @@ -178,6 +184,8 @@ RowLayout // Place order form. PlaceOrderForm.Main { + id: placeOrderForm + Layout.minimumWidth: 302 Layout.maximumWidth: 350 Layout.fillWidth: true diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml index 0a26c9ee8e..f041301acf 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml @@ -160,12 +160,19 @@ Item TradeViewHeader { id: header - width: (parent.width / 100) * 10 + width: parent.width height: parent.height * 0.06 + + proViewChart: proView.chart + proViewTrInfo: proView.trInfo + proViewOrderBook: proView.orderBook + proViewBestOrders: proView.bestOrders + proViewPlaceOrderForm: proView.placeOrderForm } ProView { + id: proView width: parent.width height: parent.height * 0.90 visible: API.app.trading_pg.current_trading_mode == TradingMode.Pro diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml b/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml index 1af8552e76..ad621d99b0 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml @@ -3,67 +3,139 @@ import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 import QtQuick.Controls.Material 2.15 -import Qaterial 1.0 as Qaterial import Qt.labs.settings 1.0 +import Qaterial 1.0 as Qaterial + import AtomicDEX.MarketMode 1.0 import AtomicDEX.TradingError 1.0 import AtomicDEX.TradingMode 1.0 -import "../../../Components" import App 1.0 import Dex.Themes 1.0 as Dex +import "../../../Components" +import "../../../Constants" // Simple/Pro toggle group Item { - // Simple/Pro select cursor - Rectangle - { - id: cursorRect - width: (parent.width / 100) * 48 - height: _simpleLabel.height + 14 - radius: 16 - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: API.app.trading_pg.current_trading_mode == TradingMode.Simple ? _simpleLabel.horizontalCenter : _proLabel.horizontalCenter - color: Dex.CurrentTheme.tabSelectedColor - } + property var proViewChart + property var proViewTrInfo + property var proViewOrderBook + property var proViewBestOrders + property var proViewPlaceOrderForm - DexLabel + Item { - id: _simpleLabel - text: "Simple" - color: API.app.trading_pg.current_trading_mode == TradingMode.Simple ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 14 - font.weight: Font.Bold - - DexMouseArea + width: parent.width * 0.10 + height: parent.height + + // Simple/Pro select cursor + Rectangle + { + id: cursorRect + width: (parent.width / 100) * 48 + height: _simpleLabel.height + 14 + radius: 16 + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: API.app.trading_pg.current_trading_mode == TradingMode.Simple ? _simpleLabel.horizontalCenter : _proLabel.horizontalCenter + color: Dex.CurrentTheme.tabSelectedColor + } + + DexLabel { - id: simple_area - hoverEnabled: true - anchors.fill: parent - onClicked: API.app.trading_pg.current_trading_mode = TradingMode.Simple + id: _simpleLabel + text: "Simple" + color: API.app.trading_pg.current_trading_mode == TradingMode.Simple ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 14 + font.weight: Font.Bold + + DexMouseArea + { + id: simple_area + hoverEnabled: true + anchors.fill: parent + onClicked: API.app.trading_pg.current_trading_mode = TradingMode.Simple + } + } + + DexLabel + { + id: _proLabel + text: "Pro" + color: API.app.trading_pg.current_trading_mode == TradingMode.Pro ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 + anchors.left: _simpleLabel.right + anchors.leftMargin: 10 + cursorRect.width / 2 + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 14 + font.weight: Font.Bold + + DexMouseArea + { + id: pro_area + hoverEnabled: true + anchors.fill: parent + onClicked: API.app.trading_pg.current_trading_mode = TradingMode.Pro + } } } - DexLabel + Qaterial.OutlineButton { - id: _proLabel - text: "Pro" - color: API.app.trading_pg.current_trading_mode == TradingMode.Pro ? Dex.CurrentTheme.foregroundColor : Dex.CurrentTheme.foregroundColor2 - anchors.left: _simpleLabel.right - anchors.leftMargin: 10 + cursorRect.width / 2 - anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 14 - font.weight: Font.Bold - - DexMouseArea + visible: API.app.trading_pg.current_trading_mode == TradingMode.Pro + + anchors.right: parent.right + + outlined: false + highlighted: false + + foregroundColor: Dex.CurrentTheme.foregroundColor + icon.source: Qaterial.Icons.cog + text: qsTr("Pro View Settings") + font: DexTypo.subtitle1 + + onClicked: + { + proViewCfgMenu.openAt(mapToItem(Overlay.overlay, width / 2, height), Item.Top) + } + + DexPopup { - id: pro_area - hoverEnabled: true - anchors.fill: parent - onClicked: API.app.trading_pg.current_trading_mode = TradingMode.Pro + id: proViewCfgMenu + + backgroundColor: Dex.CurrentTheme.floatingBackgroundColor + + contentItem: Item + { + implicitWidth: 200 + implicitHeight: 180 + + Column + { + anchors.fill: parent + padding: 10 + spacing: 8 + + DefaultText { text: qsTr("Display Settings"); font: DexTypo.body2 } + + HorizontalLine { width: parent.width - 20; anchors.horizontalCenter: parent.horizontalCenter; opacity: .4 } + + CheckEye { text: qsTr("Trading Information"); target: proViewTrInfo } + + 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 } + + HorizontalLine { width: parent.width - 20; anchors.horizontalCenter: parent.horizontalCenter; opacity: .4 } + + CheckEye { text: qsTr("Place Order"); target: proViewPlaceOrderForm } + } + } } } } diff --git a/atomic_defi_design/qml.qrc b/atomic_defi_design/qml.qrc index 8fdcd465e7..7945321577 100644 --- a/atomic_defi_design/qml.qrc +++ b/atomic_defi_design/qml.qrc @@ -370,6 +370,7 @@ Dex/Components/CannotEnableCoinModal.qml Dex/Components/CexInfoModal.qml Dex/Components/CexInfoTrigger.qml + Dex/Components/CheckEye.qml Dex/Components/Circle.qml Dex/Components/ClickableText.qml Dex/Components/ClipRRect.qml @@ -419,7 +420,6 @@ Dex/Components/DexBoxManager.qml Dex/Components/DexButton.qml Dex/Components/DexCheckBox.qml - Dex/Components/DexCheckEye.qml Dex/Components/DexColorOverlay.qml Dex/Components/DexCopyableLabel.qml Dex/Components/DexComboBox.qml From 076541e96bcf2c02ac84843a311e708530bf4f3b Mon Sep 17 00:00:00 2001 From: Syl Date: Mon, 21 Mar 2022 15:56:25 +0100 Subject: [PATCH 40/46] Pro Trading View: Update layout --- atomic_defi_design/Dex/Exchange/Trade/ProView.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index 051213736b..cbb8fafa21 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -110,7 +110,7 @@ RowLayout Layout.alignment: Qt.AlignTop Layout.minimumWidth: 480 - Layout.maximumWidth: 735 + Layout.maximumWidth: (!orderBook.visible && !bestOrders.visible) || (!placeOrderForm.visible) ? -1 : 735 Layout.fillWidth: true Layout.fillHeight: true From 83782f1b104387d14c22e9d5a906f555338d6a11 Mon Sep 17 00:00:00 2001 From: syl Date: Fri, 25 Mar 2022 10:35:22 +0100 Subject: [PATCH 41/46] Pro Trading View: Update orders/history tab style Change order/history row style --- .../ProView/TradingInfo/OrderLine.qml | 197 ++++++++---------- .../ProView/TradingInfo/OrdersPage.qml | 1 + 2 files changed, 93 insertions(+), 105 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderLine.qml b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderLine.qml index 2aa85208a7..38538796db 100644 --- a/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderLine.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderLine.qml @@ -16,7 +16,10 @@ FloatingBackground property alias clickable: mouse_area.enabled readonly property bool is_placed_order: !details ? false : details.order_id !== '' - height: 30 + height: 50 + + color: mouse_area.containsMouse ? Dex.CurrentTheme.accentColor : Dex.CurrentTheme.floatingBackgroundColor + radius: 0 DefaultMouseArea { @@ -30,172 +33,155 @@ FloatingBackground } } - RowLayout + ColumnLayout { anchors.fill: parent + anchors.verticalCenter: parent.verticalCenter + anchors.margins: 4 + spacing: 0 - DefaultText + Item { - visible: clickable - Layout.preferredWidth: (parent.width / 100) * 18 - font.pixelSize: 12 - text_value: !details ? "" : details.date ?? "" - elide: Text.ElideRight - maximumLineCount: 1 - } + Layout.fillWidth: true + Layout.preferredHeight: childrenRect.height - DefaultImage - { - id: base_icon - source: General.coinIcon(!details ? atomic_app_primary_coin : - details.base_coin ?? atomic_app_primary_coin) - Layout.preferredWidth: 15 - Layout.preferredHeight: width - Layout.alignment: Qt.AlignVCenter - Layout.leftMargin: 5 - } + clip: true - Row - { - Layout.preferredWidth: (parent.width / 100) * 30 - spacing: 6 DefaultText { - font.weight: Font.Bold + id: baseAmountLabel + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 12 - text: !details ? "" : details.base_coin + text: !details ? "" : details.base_amount privacy: is_placed_order elide: Text.ElideRight maximumLineCount: 1 - width: implicitWidth > (parent.width / 100) * 30 ? (parent.width / 100) * 30 : implicitWidth } + DefaultText { + anchors.left: baseAmountLabel.right + anchors.leftMargin: 3 + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 12 - text: !details ? "" : details.base_amount + text: !details ? "" : "(%1 %2)".arg(details.base_amount_current_currency).arg(API.app.settings_pg.current_fiat_sign) + privacy: is_placed_order + elide: Text.ElideRight + maximumLineCount: 1 + } + + Qaterial.ColorIcon + { + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + + source: Qaterial.Icons.swapHorizontal + color: Dex.CurrentTheme.foregroundColor + iconSize: 18 + } + + DefaultText + { + anchors.right: relAmountInCurrCurrency.left + anchors.rightMargin: 3 + anchors.verticalCenter: parent.verticalCenter + + font.pixelSize: 12 + text: !details ? "" : details.rel_amount privacy: is_placed_order elide: Text.ElideRight maximumLineCount: 1 - width: implicitWidth > (parent.width / 100) * 40 ? (parent.width / 100) * 40 : implicitWidth } + DefaultText { + id: relAmountInCurrCurrency + + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 12 - text: !details ? "" : "(%1 %2)".arg(details.base_amount_current_currency).arg(API.app.settings_pg.current_fiat_sign) + text: !details ? "" : "(%1 %2)".arg(details.rel_amount_current_currency).arg(API.app.settings_pg.current_fiat_sign) privacy: is_placed_order elide: Text.ElideRight maximumLineCount: 1 - width: implicitWidth > (parent.width / 100) * 30 ? (parent.width / 100) * 30 : implicitWidth } } Item { Layout.fillWidth: true - SwapIcon + Layout.preferredHeight: childrenRect.height + + DefaultImage { - anchors.fill: parent + id: baseIcon + + anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter - color: details.order_status === "failed" ? Dex.CurrentTheme.noColor : Dex.CurrentTheme.foregroundColor - top_arrow_ticker: !details ? atomic_app_primary_coin : details.base_coin ?? "" - bottom_arrow_ticker: !details ? atomic_app_primary_coin : details.rel_coin ?? "" + + width: 15 + height: 15 + + source: General.coinIcon(!details ? atomic_app_primary_coin : details.base_coin ?? atomic_app_primary_coin) } - } - Row - { - layoutDirection: Qt.RightToLeft - Layout.preferredWidth: (parent.width / 100) * 30 - spacing: 6 DefaultText { + anchors.left: baseIcon.right + anchors.leftMargin: 2 + anchors.verticalCenter: parent.verticalCenter + + font.weight: Font.Bold font.pixelSize: 12 - text: !details ? "" : "(%1 %2)".arg(details.rel_amount_current_currency).arg(API.app.settings_pg.current_fiat_sign) + text: !details ? "" : details.base_coin privacy: is_placed_order elide: Text.ElideRight maximumLineCount: 1 - width: implicitWidth > (parent.width / 100) * 30 ? (parent.width / 100) * 30 : implicitWidth } + DefaultText { - font.pixelSize: 12 - text: !details ? "" : details.rel_amount - privacy: is_placed_order + visible: clickable + + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + + font.pixelSize: 11 + text_value: !details ? "" : details.date ?? "" elide: Text.ElideRight maximumLineCount: 1 - width: implicitWidth > (parent.width / 100) * 40 ? (parent.width / 100) * 40 : implicitWidth + color: Dex.CurrentTheme.foregroundColor2 } + DefaultText { + anchors.right: relCoin.left + anchors.rightMargin: 2 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Bold font.pixelSize: 12 text: !details ? "" : details.rel_coin privacy: is_placed_order elide: Text.ElideRight maximumLineCount: 1 - width: implicitWidth > (parent.width / 100) * 30 ? (parent.width / 100) * 30 : implicitWidth } - } - DefaultImage - { - id: rel_icon - source: General.coinIcon(!details ? atomic_app_primary_coin : - details.rel_coin ?? atomic_app_secondary_coin) - Layout.preferredWidth: 15 - Layout.preferredHeight: 15 - Layout.alignment: Qt.AlignVCenter - } - - DefaultText - { - font.pixelSize: 12 - visible: !details || details.recoverable === undefined ? false : - details.recoverable && details.order_status !== "refunding" - Layout.preferredWidth: (parent.width / 100) * 2 - Layout.preferredHeight: width - verticalAlignment: Label.AlignVCenter - horizontalAlignment: Label.AlignHCenter - text_value: Style.warningCharacter - color: Style.colorYellow - - DefaultTooltip + DefaultImage { - contentItem: DefaultText - { - text_value: qsTr("Funds are recoverable") - font.pixelSize: Style.textSizeSmall4 - } - - visible: (parent.visible && mouse_area.containsMouse) ?? false - } - } - - MouseArea - { - id: cancel_button_text - - visible: !is_history + id: relCoin - Layout.preferredWidth: (parent.width / 100) * 2 - Layout.preferredHeight: width + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter - onClicked: if (details) cancelOrder(details.order_id) + width: 15 + height: 15 - Behavior on scale - { - NumberAnimation - { - duration: 200 - } - } - Qaterial.ColorIcon - { - anchors.fill: parent - iconSize: 14 - color: Dex.CurrentTheme.noColor - source: Qaterial.Icons.close + source: General.coinIcon(!details ? atomic_app_primary_coin : details.rel_coin ?? atomic_app_secondary_coin) } } } @@ -204,6 +190,7 @@ FloatingBackground HorizontalLine { width: parent.width + height: 2 anchors.bottom: parent.bottom } } diff --git a/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrdersPage.qml b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrdersPage.qml index a37a7c9bdb..56b4db8e2d 100644 --- a/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrdersPage.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrdersPage.qml @@ -250,6 +250,7 @@ Item { Layout.fillWidth: true } } + ModalLoader { id: order_modal From 4eaa03708aa6b0da49af1b33a8b8154df8538ade Mon Sep 17 00:00:00 2001 From: syl Date: Fri, 25 Mar 2022 10:40:05 +0100 Subject: [PATCH 42/46] Pro Tradig View: Add a setting to hide chart and ticker selectors --- atomic_defi_design/Dex/Exchange/Trade/ProView.qml | 1 + atomic_defi_design/Dex/Exchange/Trade/Trade.qml | 1 + .../Dex/Exchange/Trade/Trading/TradeViewHeader.qml | 11 ++++++++++- 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index cbb8fafa21..f54f69082a 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -41,6 +41,7 @@ RowLayout id: form property alias chart: chart + property alias tickerSelectors: selectors property alias trInfo: tradingInfo property alias orderBook: orderBook property alias bestOrders: bestOrders diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml index f041301acf..b3724ac4dd 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trade.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trade.qml @@ -164,6 +164,7 @@ Item height: parent.height * 0.06 proViewChart: proView.chart + proViewTickerSelectors: proView.tickerSelectors proViewTrInfo: proView.trInfo proViewOrderBook: proView.orderBook proViewBestOrders: proView.bestOrders diff --git a/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml b/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml index ad621d99b0..a6672d67e0 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/Trading/TradeViewHeader.qml @@ -19,6 +19,7 @@ import "../../../Constants" Item { property var proViewChart + property var proViewTickerSelectors property var proViewTrInfo property var proViewOrderBook property var proViewBestOrders @@ -109,7 +110,7 @@ Item contentItem: Item { implicitWidth: 200 - implicitHeight: 180 + implicitHeight: 240 Column { @@ -121,6 +122,14 @@ Item HorizontalLine { width: parent.width - 20; anchors.horizontalCenter: parent.horizontalCenter; opacity: .4 } + CheckEye { text: qsTr("Chart"); target: proViewChart } + + HorizontalLine { width: parent.width - 20; anchors.horizontalCenter: parent.horizontalCenter; opacity: .4 } + + CheckEye { text: qsTr("Ticker Selectors"); target: proViewTickerSelectors } + + HorizontalLine { width: parent.width - 20; anchors.horizontalCenter: parent.horizontalCenter; opacity: .4 } + CheckEye { text: qsTr("Trading Information"); target: proViewTrInfo } HorizontalLine { width: parent.width - 20; anchors.horizontalCenter: parent.horizontalCenter; opacity: .4 } From fa4758959c10372c36ae0289bf866dc5f02c3eb0 Mon Sep 17 00:00:00 2001 From: syl Date: Fri, 25 Mar 2022 10:50:01 +0100 Subject: [PATCH 43/46] Pro Trading View: Update layout --- atomic_defi_design/Dex/Exchange/Trade/ProView.qml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index f54f69082a..9b07de5866 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -110,7 +110,7 @@ RowLayout { Layout.alignment: Qt.AlignTop - Layout.minimumWidth: 480 + Layout.minimumWidth: chart.visible || selectors.visible || tradingInfo.visible ? 480 : -1 Layout.maximumWidth: (!orderBook.visible && !bestOrders.visible) || (!placeOrderForm.visible) ? -1 : 735 Layout.fillWidth: true @@ -154,7 +154,7 @@ RowLayout ColumnLayout { - Layout.minimumWidth: 353 + Layout.minimumWidth: orderBook.visible || bestOrders.visible ? 353 : -1 Layout.fillWidth: true Layout.fillHeight: true Layout.alignment: Qt.AlignTop @@ -187,7 +187,7 @@ RowLayout { id: placeOrderForm - Layout.minimumWidth: 302 + Layout.minimumWidth: visible ? 302 : -1 Layout.maximumWidth: 350 Layout.fillWidth: true From 54a94df12412f4b2c4584250c94d0946f5b46e7b Mon Sep 17 00:00:00 2001 From: syl Date: Fri, 25 Mar 2022 10:56:17 +0100 Subject: [PATCH 44/46] Pro Trading View Fix: Obscure ellipses in light theme Ticker selector content text color was wrong --- atomic_defi_design/Dex/Exchange/ProView/DexComboBoxLine.qml | 1 - 1 file changed, 1 deletion(-) diff --git a/atomic_defi_design/Dex/Exchange/ProView/DexComboBoxLine.qml b/atomic_defi_design/Dex/Exchange/ProView/DexComboBoxLine.qml index 707ac50c63..737062c07b 100644 --- a/atomic_defi_design/Dex/Exchange/ProView/DexComboBoxLine.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/DexComboBoxLine.qml @@ -43,7 +43,6 @@ RowLayout text_value: !details ? "" : `${details.ticker}   ${details.name}` - color: Style.colorText font.pixelSize: Style.textSizeSmall3 elide: Text.ElideRight wrapMode: Text.NoWrap From 910482422729a52042067dd08e1f7baedc5136e8 Mon Sep 17 00:00:00 2001 From: syl Date: Fri, 25 Mar 2022 11:04:39 +0100 Subject: [PATCH 45/46] Pro Trading View: Update colors Change orders/history tab paginator combobox color --- .../Dex/Exchange/ProView/TradingInfo/OrderList.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderList.qml b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderList.qml index 9141e43299..c4803f4e85 100644 --- a/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderList.qml +++ b/atomic_defi_design/Dex/Exchange/ProView/TradingInfo/OrderList.qml @@ -97,8 +97,8 @@ Item Layout.maximumHeight: 70 Layout.preferredWidth: parent.width Layout.bottomMargin: 10 - itemsPerPageComboBox.mainBackgroundColor: Dex.CurrentTheme.buttonColorEnabled - itemsPerPageComboBox.dropdownBackgroundColor: Dex.CurrentTheme.buttonColorEnabled + itemsPerPageComboBox.mainBackgroundColor: Dex.CurrentTheme.comboBoxBackgroundColor + itemsPerPageComboBox.dropdownBackgroundColor: Dex.CurrentTheme.comboBoxBackgroundColor } } From 71b238ab35d015bb8b984d02484d8562fd3c11cf Mon Sep 17 00:00:00 2001 From: syl Date: Fri, 25 Mar 2022 11:18:06 +0100 Subject: [PATCH 46/46] Pro Trading View Fix: QML Warning + show place order form in case it's hidden --- atomic_defi_design/Dex/Exchange/Trade/ProView.qml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml index 9b07de5866..95fb4b98e5 100644 --- a/atomic_defi_design/Dex/Exchange/Trade/ProView.qml +++ b/atomic_defi_design/Dex/Exchange/Trade/ProView.qml @@ -70,7 +70,9 @@ RowLayout "base_max_volume_numer": base_max_volume_numer, "uuid": uuid } - form_base.focusVolumeField() + + // Shows place order form in case it has been hidden in the settings. + placeOrderForm.visible = true } Connections