From 74dbe8bfcbd241d9e13e1048f1a20b757a9e5bbb Mon Sep 17 00:00:00 2001 From: selsta Date: Tue, 16 Apr 2019 11:09:46 +0200 Subject: [PATCH] Account/Receive: update design --- MiddlePanel.qml | 6 ++-- js/TxUtils.js | 1 + pages/Account.qml | 60 ++++++++++++++++++++++++--------------- pages/Receive.qml | 71 ++++++++++++++++++++++++----------------------- 4 files changed, 78 insertions(+), 60 deletions(-) diff --git a/MiddlePanel.qml b/MiddlePanel.qml index 932c95f6..db49aa29 100644 --- a/MiddlePanel.qml +++ b/MiddlePanel.qml @@ -167,9 +167,9 @@ Rectangle { PropertyChanges { target: root; currentView: keysView } PropertyChanges { target: mainFlickable; contentHeight: keysView.keysHeight } }, State { - name: "Account" - PropertyChanges { target: root; currentView: accountView } - PropertyChanges { target: mainFlickable; contentHeight: minHeight } + name: "Account" + PropertyChanges { target: root; currentView: accountView } + PropertyChanges { target: mainFlickable; contentHeight: accountView.accountHeight + 100 } } ] diff --git a/js/TxUtils.js b/js/TxUtils.js index fcd00ca3..de4197d9 100644 --- a/js/TxUtils.js +++ b/js/TxUtils.js @@ -20,6 +20,7 @@ function addressTruncate(address, range){ function addressTruncatePretty(address, blocks){ if(typeof(address) === "undefined") return; if(typeof(blocks) === "undefined") blocks = 2; + blocks = blocks <= 1 ? 1 : blocks >= 23 ? 23 : blocks; var ret = ""; return address.substring(0, 4 * blocks).match(/.{1,4}/g).join(' ') + " .. " + address.substring(address.length - 4 * blocks).match(/.{1,4}/g).join(' '); } diff --git a/pages/Account.qml b/pages/Account.qml index 851d8f20..4709aede 100644 --- a/pages/Account.qml +++ b/pages/Account.qml @@ -80,6 +80,7 @@ Rectangle { MoneroComponents.LabelSubheader { Layout.fillWidth: true + fontSize: 24 textFormat: Text.RichText text: qsTr("Balance All") + translationManager.emptyString } @@ -91,14 +92,15 @@ Rectangle { text: qsTr("Total balance: ") + translationManager.emptyString Layout.fillWidth: true color: MoneroComponents.Style.defaultFontColor - font.pixelSize: 14 + font.pixelSize: 16 font.family: MoneroComponents.Style.fontRegular.name + themeTransition: false } MoneroComponents.TextPlain { id: balanceAll - font.family: MoneroComponents.Style.fontRegular.name - font.pixelSize: 14 + font.family: MoneroComponents.Style.fontMonoRegular.name; + font.pixelSize: 16 color: MoneroComponents.Style.dimmedFontColor themeTransition: false @@ -124,15 +126,15 @@ Rectangle { text: qsTr("Total unlocked balance: ") + translationManager.emptyString Layout.fillWidth: true color: MoneroComponents.Style.defaultFontColor - font.pixelSize: 14 + font.pixelSize: 16 font.family: MoneroComponents.Style.fontRegular.name themeTransition: false } MoneroComponents.TextPlain { id: unlockedBalanceAll - font.family: MoneroComponents.Style.fontRegular.name - font.pixelSize: 14 + font.family: MoneroComponents.Style.fontMonoRegular.name; + font.pixelSize: 16 color: MoneroComponents.Style.dimmedFontColor themeTransition: false @@ -158,6 +160,7 @@ Rectangle { MoneroComponents.LabelSubheader { Layout.fillWidth: true + fontSize: 24 textFormat: Text.RichText text: qsTr("Accounts") + translationManager.emptyString } @@ -177,6 +180,7 @@ Rectangle { anchors.fill: parent clip: true boundsBehavior: ListView.StopAtBounds + interactive: false delegate: Rectangle { id: tableItem2 @@ -212,8 +216,7 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 6 - fontSize: 14 - fontBold: true + fontSize: 16 text: "#" + index themeTransition: false } @@ -224,8 +227,7 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter anchors.left: idLabel.right anchors.leftMargin: 6 - fontSize: 14 - fontBold: true + fontSize: 16 text: label elide: Text.ElideRight textWidth: addressLabel.x - nameLabel.x - 1 @@ -236,25 +238,37 @@ Rectangle { id: addressLabel color: MoneroComponents.Style.defaultFontColor anchors.verticalCenter: parent.verticalCenter - anchors.left: balanceLabel.left - anchors.leftMargin: (mainLayout.width < 510 ? -70 : -125) - fontSize: 14 - fontBold: true - text: TxUtils.addressTruncate(address, mainLayout.width < 510 ? 3 : 6) + anchors.left: mainLayout.width >= 590 ? balanceTextLabel.left : balanceNumberLabel.left + anchors.leftMargin: -addressLabel.width - 30 + fontSize: 16 + fontFamily: MoneroComponents.Style.fontMonoRegular.name; + text: TxUtils.addressTruncatePretty(address, mainLayout.width < 740 ? 1 : (mainLayout.width < 900 ? 2 : 3)) themeTransition: false } MoneroComponents.Label { - id: balanceLabel + id: balanceTextLabel + visible: mainLayout.width >= 590 + color: MoneroComponents.Style.defaultFontColor + anchors.verticalCenter: parent.verticalCenter + anchors.left: balanceNumberLabel.left + anchors.leftMargin: -balanceTextLabel.width - 5 + fontSize: 16 + text: qsTr("Balance: ") + translationManager.emptyString + themeTransition: false + } + + MoneroComponents.Label { + id: balanceNumberLabel color: MoneroComponents.Style.defaultFontColor anchors.verticalCenter: parent.verticalCenter anchors.left: parent.right - anchors.leftMargin: (mainLayout.width < 510 ? -120 : -180) - fontSize: 14 - fontBold: true - text: qsTr("Balance: ") + balance - elide: mainLayout.width < 510 ? Text.ElideRight : Text.ElideNone - textWidth: 120 + anchors.leftMargin: -balanceNumberLabel.width + fontSize: 16 + fontFamily: MoneroComponents.Style.fontMonoRegular.name; + text: balance + elide: Text.ElideRight + textWidth: mainLayout.width < 660 ? 70 : 135 themeTransition: false } @@ -339,7 +353,7 @@ Rectangle { border: false checkedIcon: "qrc:///images/plus-in-circle-medium-white.png" uncheckedIcon: "qrc:///images/plus-in-circle-medium-white.png" - fontSize: 14 + fontSize: 16 iconOnTheLeft: true Layout.fillWidth: true Layout.topMargin: 10 diff --git a/pages/Receive.qml b/pages/Receive.qml index d24ac7c2..630690ae 100644 --- a/pages/Receive.qml +++ b/pages/Receive.qml @@ -84,6 +84,7 @@ Rectangle { MoneroComponents.LabelSubheader { Layout.fillWidth: true + fontSize: 24 textFormat: Text.RichText text: qsTr("Addresses") + translationManager.emptyString } @@ -103,6 +104,8 @@ Rectangle { anchors.fill: parent clip: true boundsBehavior: ListView.StopAtBounds + interactive: false + delegate: Rectangle { id: tableItem2 height: subaddressListRow.subaddressListItemHeight @@ -137,8 +140,7 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 6 - fontSize: 14 - fontBold: true + fontSize: 16 text: "#" + index themeTransition: false } @@ -149,8 +151,7 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter anchors.left: idLabel.right anchors.leftMargin: 6 - fontSize: 14 - fontBold: true + fontSize: 16 text: label elide: Text.ElideRight textWidth: addressLabel.x - nameLabel.x - 1 @@ -162,10 +163,10 @@ Rectangle { color: MoneroComponents.Style.defaultFontColor anchors.verticalCenter: parent.verticalCenter anchors.left: parent.right - anchors.leftMargin: (mainLayout.width < 510 ? -130 : -190) - fontSize: 14 - fontBold: true - text: TxUtils.addressTruncate(address, mainLayout.width < 510 ? 6 : 10) + anchors.leftMargin: -addressLabel.width - 5 + fontSize: 16 + fontFamily: MoneroComponents.Style.fontMonoRegular.name; + text: TxUtils.addressTruncatePretty(address, mainLayout.width < 520 ? 1 : (mainLayout.width < 650 ? 2 : 3)) themeTransition: false } @@ -179,38 +180,40 @@ Rectangle { } } - MoneroComponents.IconButton { - id: renameButton - image: "qrc:///images/edit.svg" - color: MoneroComponents.Style.defaultFontColor - opacity: 0.5 + RowLayout { anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right - anchors.rightMargin: 30 - anchors.topMargin: 1 - width: 23 + anchors.rightMargin: 6 height: 21 - visible: index !== 0 + spacing: 10 - onClicked: { - renameSubaddressLabel(index); + MoneroComponents.IconButton { + id: renameButton + image: "qrc:///images/edit.svg" + color: MoneroComponents.Style.defaultFontColor + opacity: 0.5 + Layout.preferredWidth: 23 + Layout.preferredHeight: 21 + visible: index !== 0 + + onClicked: { + renameSubaddressLabel(index); + } } - } - MoneroComponents.IconButton { - id: copyButton - image: "qrc:///images/copy.svg" - color: MoneroComponents.Style.defaultFontColor - opacity: 0.5 - anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.right - width: 16 - height: 21 + MoneroComponents.IconButton { + id: copyButton + image: "qrc:///images/copy.svg" + color: MoneroComponents.Style.defaultFontColor + opacity: 0.5 + Layout.preferredWidth: 16 + Layout.preferredHeight: 21 - onClicked: { - console.log("Address copied to clipboard"); - clipboard.setText(address); - appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3); + onClicked: { + console.log("Address copied to clipboard"); + clipboard.setText(address); + appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3); + } } } } @@ -242,7 +245,7 @@ Rectangle { border: false checkedIcon: "qrc:///images/plus-in-circle-medium-white.png" uncheckedIcon: "qrc:///images/plus-in-circle-medium-white.png" - fontSize: 14 + fontSize: 16 iconOnTheLeft: true Layout.fillWidth: true Layout.topMargin: 10