diff --git a/ui/app/AppLayouts/Wallet/LeftTab.qml b/ui/app/AppLayouts/Wallet/LeftTab.qml index 7d36a142c2..06fb0258d6 100644 --- a/ui/app/AppLayouts/Wallet/LeftTab.qml +++ b/ui/app/AppLayouts/Wallet/LeftTab.qml @@ -6,277 +6,87 @@ import Qt.labs.platform 1.1 import "../../../imports" import "../../../shared" -ColumnLayout { - readonly property int w: 340 - property alias currentTab: walletScreenButtons.currentIndex - +Column { id: walletInfoContainer - width: w + width: 340 spacing: 0 - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: parent.top - anchors.topMargin: 0 - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - RowLayout { - id: walletHeader - height: 375 - Layout.fillWidth: true - width: walletInfoContainer.w + Text { + id: title + x: 143 + y: 16 + text: qsTr("Wallet") + anchors.top: parent.top + anchors.topMargin: Theme.padding + anchors.horizontalCenter: parent.horizontalCenter + font.weight: Font.Bold + font.pixelSize: 17 + } - Rectangle { - id: walletHeaderContent - color: Theme.blue - height: 375 - Layout.fillWidth: true + Item { + id: walletValueTextContainer + anchors.left: parent.left + anchors.leftMargin: Theme.padding + anchors.top: title.bottom + anchors.topMargin: Theme.padding - Item { - id: walletValueTextContainer - x: 140 - width: 175 - height: 40 - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 110 + TextEdit { + id: walletAmountValue + color: "black" + text: qsTr("408.30 USD") + selectByMouse: true + cursorVisible: true + readOnly: true + anchors.left: tild.right + anchors.leftMargin: 1 + font.weight: Font.Medium + font.pixelSize: 30 + } - Text { - id: tild - color: Theme.lightBlueText - text: qsTr("~") - font.weight: Font.Medium - font.pixelSize: 30 - } - - TextEdit { - id: walletAmountValue - color: "#ffffff" - text: qsTr("408.30") - selectByMouse: true - cursorVisible: true - readOnly: true - anchors.left: tild.right - anchors.leftMargin: 1 - font.weight: Font.Medium - font.pixelSize: 30 - } - - Text { - id: currencyText - color: Theme.lightBlueText - text: qsTr("USD") - anchors.left: walletAmountValue.right - anchors.leftMargin: 5 - font.weight: Font.Medium - font.pixelSize: 30 - } - } - - TabBar { - readonly property int btnHeight: 56 - - id: walletScreenButtons - width: walletInfoContainer.w - height: btnHeight*3 - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - currentIndex: 0 - spacing: 0 - background: Rectangle { - color: "#00000000" - } - - TabButton { - id: sendTabButton - width: walletInfoContainer.w - height: walletScreenButtons.btnHeight - text: "" - anchors.top: parent.top - anchors.topMargin: 0 - background: Rectangle { - color: parent.checked ? Theme.darkBlue : Theme.transparent - } - Text { - id: element - color: "#ffffff" - text: qsTr("Send") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Bold - font.pixelSize: 14 - } - - - RoundedIcon { - anchors.left: parent.left - anchors.leftMargin: 18 - imgPath: "../../img/diagonalArrow.svg" - anchors.verticalCenter: parent.verticalCenter - size: 36 - bg: "#19ffffff" - } - } - - TabButton { - id: depositTabButton - width: walletInfoContainer.w - height: walletScreenButtons.btnHeight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.topMargin: 0 - anchors.top: sendTabButton.bottom - background: Rectangle { - color: parent.checked ? Theme.darkBlue : Theme.transparent - } - - Text { - id: element2 - color: "#ffffff" - text: qsTr("Deposit") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Bold - font.pixelSize: 14 - } - - - RoundedIcon { - anchors.left: parent.left - anchors.leftMargin: 18 - imgPath: "../../img/diagonalArrowDown.svg" - anchors.verticalCenter: parent.verticalCenter - size: 36 - bg: "#19ffffff" - } - } - - TabButton { - id: txHistoryTabButton - width: walletInfoContainer.w - height: walletScreenButtons.btnHeight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.topMargin: 0 - anchors.top: depositTabButton.bottom - background: Rectangle { - color: parent.checked ? Theme.darkBlue : Theme.transparent - } - Text { - id: element3 - color: "#ffffff" - text: qsTr("Transaction History") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Bold - font.pixelSize: 14 - } - - - RoundedIcon { - anchors.left: parent.left - anchors.leftMargin: 18 - imgPath: "../../img/list.svg" - anchors.verticalCenter: parent.verticalCenter - size: 36 - bg: "#19ffffff" - } - } - } + Text { + id: totalValue + color: Theme.darkGrey + text: "Total value" + anchors.left: walletAmountValue.left + anchors.leftMargin: 0 + anchors.top: walletAmountValue.bottom + anchors.topMargin: 0 + font.weight: Font.Medium + font.pixelSize: 13 } } - RowLayout { - id: assetInfoContainer - Layout.fillHeight: true - Layout.fillWidth: true + // TODO change this with a reused Component + Rectangle { + id: addWalletBtn + width: 36 + height: 36 + color: Theme.blue + radius: 50 + anchors.right: parent.right + anchors.rightMargin: Theme.padding + anchors.top: walletValueTextContainer.bottom + anchors.topMargin: 0 - Rectangle { - id: walletSendBg + Text { + id: addChatLbl color: "#ffffff" - Layout.fillHeight: true - Layout.fillWidth: true - - Text { - id: assetsTitle - color: Theme.darkGrey - text: qsTr("Assets") - anchors.left: parent.left - anchors.leftMargin: Theme.padding - anchors.top: parent.top - anchors.topMargin: Theme.smallPadding - font.pixelSize: 14 - } - - Component { - id: assetViewDelegate - - Item { - id: element6 - height: 56 - anchors.right: parent.right - anchors.rightMargin: 0 - anchors.left: parent.left - anchors.leftMargin: 0 - - Image { - id: assetInfoContainer - width: 36 - height: 36 - source: image - anchors.left: parent.left - anchors.leftMargin: Theme.padding - anchors.verticalCenter: parent.verticalCenter - } - - Text { - id: assetValue - text: value - anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 14 - font.strikeout: false - anchors.left: parent.left - anchors.leftMargin: 72 - } - Text { - id: assetSymbol - text: symbol - anchors.verticalCenter: parent.verticalCenter - color: Theme.darkGrey - font.pixelSize: 14 - anchors.right: assetFiatValue.left - anchors.rightMargin: 10 - } - Text { - id: assetFiatValue - color: Theme.darkGrey - text: fiatValue - anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 14 - anchors.right: parent.right - anchors.rightMargin: Theme.padding - } - } - } - - ListView { - id: listView - anchors.topMargin: 36 - anchors.fill: parent - model: assetsModel.assets - delegate: assetViewDelegate - } + text: qsTr("+") + anchors.verticalCenterOffset: -1 + anchors.horizontalCenterOffset: 1 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + lineHeight: 1 + fontSizeMode: Text.FixedSize + font.bold: true + font.pixelSize: 28 } } } /*##^## Designer { - D{i:0;formeditorZoom:0.8999999761581421;height:770;width:340} + D{i:0;formeditorColor:"#ffffff";formeditorZoom:0.75;height:770;width:340}D{i:2;anchors_x:82} } ##^##*/ + diff --git a/ui/app/AppLayouts/Wallet/WalletLayout.qml b/ui/app/AppLayouts/Wallet/WalletLayout.qml index 598e3fbc8d..0456f22534 100644 --- a/ui/app/AppLayouts/Wallet/WalletLayout.qml +++ b/ui/app/AppLayouts/Wallet/WalletLayout.qml @@ -7,11 +7,10 @@ import "../../../imports" import "../../../shared" import "." -Item { +SplitView { id: walletView x: 0 y: 0 - property alias walletContainerCurrentIndex: walletContainer.currentIndex Layout.fillHeight: true Layout.fillWidth: true // Those anchors show a warning too, but whithout them, there is a gap on the right @@ -24,7 +23,7 @@ Item { id: leftTab } - StackLayout { + Item { id: walletContainer anchors.top: parent.top anchors.topMargin: 0 @@ -34,12 +33,9 @@ Item { anchors.rightMargin: 0 anchors.left: leftTab.right anchors.leftMargin: 0 - currentIndex: leftTab.currentTab Item { - id: sendContainer - width: 200 - height: 200 + id: walletInfoContainer Layout.fillHeight: true Layout.fillWidth: true @@ -104,44 +100,91 @@ Item { console.log(result); } } - } - Item { - id: depositContainer - width: 200 - height: 200 - Layout.fillWidth: true - Layout.fillHeight: true + RowLayout { + id: assetInfoContainer + Layout.fillHeight: true + Layout.fillWidth: true - Text { - id: element4 - text: qsTr("Deposit") - font.weight: Font.Bold - anchors.topMargin: 24 - anchors.leftMargin: 24 - font.pixelSize: 20 - anchors.left: parent.left - anchors.top: parent.top + Rectangle { + id: walletSendBg + color: "#ffffff" + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: assetsTitle + color: Theme.darkGrey + text: qsTr("Assets") + anchors.left: parent.left + anchors.leftMargin: Theme.padding + anchors.top: parent.top + anchors.topMargin: Theme.smallPadding + font.pixelSize: 14 + } + + Component { + id: assetViewDelegate + + Item { + id: element6 + height: 56 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + + Image { + id: assetInfoContainer + width: 36 + height: 36 + source: image + anchors.left: parent.left + anchors.leftMargin: Theme.padding + anchors.verticalCenter: parent.verticalCenter + } + + Text { + id: assetValue + text: value + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 14 + font.strikeout: false + anchors.left: parent.left + anchors.leftMargin: 72 + } + Text { + id: assetSymbol + text: symbol + anchors.verticalCenter: parent.verticalCenter + color: Theme.darkGrey + font.pixelSize: 14 + anchors.right: assetFiatValue.left + anchors.rightMargin: 10 + } + Text { + id: assetFiatValue + color: Theme.darkGrey + text: fiatValue + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 14 + anchors.right: parent.right + anchors.rightMargin: Theme.padding + } + } + } + + ListView { + id: listView + anchors.topMargin: 36 + anchors.fill: parent + model: assetsModel.assets + delegate: assetViewDelegate + } + } } } - Item { - id: txHistoryContainer - width: 200 - height: 200 - Layout.fillWidth: true - Layout.fillHeight: true - Text { - id: element5 - text: qsTr("Transaction History") - font.weight: Font.Bold - anchors.topMargin: 24 - anchors.leftMargin: 24 - font.pixelSize: 20 - anchors.left: parent.left - anchors.top: parent.top - } - } } } /*##^##