From 6d7db135e7f9c131370f91637d6cd197f4dc74c1 Mon Sep 17 00:00:00 2001 From: thotbot Date: Sat, 21 Dec 2019 13:37:15 +0000 Subject: [PATCH] Settings: rework wallet page --- components/SettingsListItem.qml | 110 ++++++++++++++++++++++-------- pages/settings/SettingsWallet.qml | 14 ++-- 2 files changed, 88 insertions(+), 36 deletions(-) diff --git a/components/SettingsListItem.qml b/components/SettingsListItem.qml index 8442e9c3..bbf42a88 100644 --- a/components/SettingsListItem.qml +++ b/components/SettingsListItem.qml @@ -1,41 +1,71 @@ import QtQuick 2.9 import QtQuick.Layouts 1.1 +import FontAwesome 1.0 import "../components" as MoneroComponents ColumnLayout { - property alias buttonText: button.text - property alias description: description.text - property alias title: title.text + id: settingsListItem + property alias iconText: iconLabel.text + property alias description: area.text + property alias title: header.text + property bool isLast: false signal clicked() - id: settingsListItem Layout.fillWidth: true spacing: 0 Rectangle { - // divider - Layout.preferredHeight: 1 + id: root Layout.fillWidth: true - Layout.bottomMargin: 8 - color: MoneroComponents.Style.dividerColor - opacity: MoneroComponents.Style.dividerOpacity - } + Layout.minimumHeight: 75 + Layout.preferredHeight: rect.height + 15 + color: "transparent" - RowLayout { - Layout.fillWidth: true - spacing: 0 + Rectangle { + id: divider + anchors.topMargin: 0 + anchors.left: parent.left + anchors.right: parent.right + height: 1 + color: MoneroComponents.Style.dividerColor + opacity: MoneroComponents.Style.dividerOpacity + } - ColumnLayout { - Layout.fillWidth: true - Layout.alignment: Qt.AlignVCenter - spacing: 0 + Rectangle { + id: rect + width: parent.width + height: header.height + area.contentHeight + color: "transparent"; + anchors.left: parent.left + anchors.bottomMargin: 4 + anchors.topMargin: 4 + anchors.verticalCenter: parent.verticalCenter + + Rectangle { + id: icon + color: "transparent" + height: 32 + width: 32 + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.verticalCenter: parent.verticalCenter + + MoneroComponents.Label { + id: iconLabel + fontSize: 32 + fontFamily: FontAwesome.fontFamilySolid + anchors.centerIn: parent + fontColor: MoneroComponents.Style.defaultFontColor + styleName: "Solid" + } + } MoneroComponents.TextPlain { - id: title - Layout.fillWidth: true - Layout.preferredHeight: 20 - Layout.topMargin: 8 + id: header + anchors.left: icon.right + anchors.leftMargin: 16 + anchors.top: parent.top color: MoneroComponents.Style.defaultFontColor opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8 font.bold: true @@ -43,23 +73,43 @@ ColumnLayout { font.pixelSize: 16 } - MoneroComponents.TextPlainArea { - id: description + Text { + id: area + anchors.top: header.bottom + anchors.topMargin: 4 + anchors.left: icon.right + anchors.leftMargin: 16 color: MoneroComponents.Style.dimmedFontColor - colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor - colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor - Layout.fillWidth: true + font.family: MoneroComponents.Style.fontRegular.name + font.pixelSize: 15 horizontalAlignment: TextInput.AlignLeft + wrapMode: Text.WordWrap; + leftPadding: 0 + topPadding: 0 + width: parent.width - (icon.width + icon.anchors.leftMargin + anchors.leftMargin) } } - MoneroComponents.StandardButton { - id: button - small: true + Rectangle { + id: bottomDivider + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.right: parent.right + height: 1 + color: MoneroComponents.Style.dividerColor + opacity: MoneroComponents.Style.dividerOpacity + visible: settingsListItem.isLast + } + + MouseArea { + cursorShape: Qt.PointingHandCursor + anchors.fill: parent + hoverEnabled: true + onEntered: root.color = MoneroComponents.Style.titleBarButtonHoverColor + onExited: root.color = "transparent" onClicked: { settingsListItem.clicked() } - width: 135 } } } diff --git a/pages/settings/SettingsWallet.qml b/pages/settings/SettingsWallet.qml index 877508d9..da9b5e60 100644 --- a/pages/settings/SettingsWallet.qml +++ b/pages/settings/SettingsWallet.qml @@ -30,6 +30,7 @@ import QtQuick 2.9 import QtQuick.Layouts 1.1 import QtQuick.Controls 2.0 import QtQuick.Dialogs 1.2 +import FontAwesome 1.0 import "../../js/Utils.js" as Utils import "../../components" as MoneroComponents @@ -47,10 +48,10 @@ Rectangle { anchors.right: parent.right anchors.margins: 20 anchors.topMargin: 0 - spacing: 8 + spacing: 0 MoneroComponents.SettingsListItem { - buttonText: qsTr("Close wallet") + translationManager.emptyString + iconText: FontAwesome.signOutAlt description: qsTr("Logs out of this wallet.") + translationManager.emptyString title: qsTr("Close this wallet") + translationManager.emptyString @@ -58,7 +59,7 @@ Rectangle { } MoneroComponents.SettingsListItem { - buttonText: qsTr("Create wallet") + translationManager.emptyString + iconText: FontAwesome.eye description: qsTr("Creates a new wallet that can only view and initiate transactions, but requires a spendable wallet to sign transactions before sending.") + translationManager.emptyString title: qsTr("Create a view-only wallet") + translationManager.emptyString visible: !appWindow.viewOnly @@ -80,7 +81,7 @@ Rectangle { } MoneroComponents.SettingsListItem { - buttonText: qsTr("Show seed") + translationManager.emptyString + iconText: FontAwesome.key description: qsTr("Store this information safely to recover your wallet in the future.") + translationManager.emptyString title: qsTr("Show seed & keys") + translationManager.emptyString @@ -90,7 +91,7 @@ Rectangle { } MoneroComponents.SettingsListItem { - buttonText: qsTr("Rescan") + translationManager.emptyString + iconText: FontAwesome.repeat description: qsTr("Use this feature if you think the shown balance is not accurate.") + translationManager.emptyString title: qsTr("Rescan wallet balance") + translationManager.emptyString visible: appWindow.walletMode >= 2 @@ -114,7 +115,8 @@ Rectangle { } MoneroComponents.SettingsListItem { - buttonText: qsTr("Change password") + translationManager.emptyString + iconText: FontAwesome.ellipsisH + isLast: true description: qsTr("Change the password of your wallet.") + translationManager.emptyString title: qsTr("Change wallet password") + translationManager.emptyString