From 7028435daa7c3c8b895053ca2fda78a40cfbe691 Mon Sep 17 00:00:00 2001 From: Sander van Grieken Date: Fri, 28 Oct 2022 10:43:34 +0200 Subject: [PATCH] qml: create wallet details drawer --- electrum/gui/qml/components/WalletDetails.qml | 162 ++++++++++++++++++ electrum/gui/qml/components/controls/Tag.qml | 40 ++++- electrum/gui/qml/components/main.qml | 142 ++++++++------- 3 files changed, 277 insertions(+), 67 deletions(-) create mode 100644 electrum/gui/qml/components/WalletDetails.qml diff --git a/electrum/gui/qml/components/WalletDetails.qml b/electrum/gui/qml/components/WalletDetails.qml new file mode 100644 index 000000000..f14eb2bd3 --- /dev/null +++ b/electrum/gui/qml/components/WalletDetails.qml @@ -0,0 +1,162 @@ +import QtQuick 2.6 +import QtQuick.Layouts 1.5 +import QtQuick.Controls 2.12 +import QtQuick.Controls.Material 2.0 + +import org.electrum 1.0 + +import "controls" + +Item { + id: root + clip: true + Layout.fillWidth: true + implicitHeight: 0 + + function open() { + state = 'opened' + } + function close() { + state = '' + } + function toggle() { + if (state == 'opened') + state = '' + else + state = 'opened' + } + + states: [ + State { + name: 'opened' + PropertyChanges { target: root; implicitHeight: detailsPane.height } + } + ] + + transitions: [ + Transition { + from: '' + to: 'opened' + NumberAnimation { target: root; properties: 'implicitHeight'; duration: 200 } + }, + Transition { + from: 'opened' + to: '' + NumberAnimation { target: root; properties: 'implicitHeight'; duration: 200 } + } + ] + + Pane { + id: detailsPane + width: parent.width + anchors.bottom: parent.bottom + padding: 0 + background: Rectangle { + color: Material.dialogColor + } + + ColumnLayout { + width: parent.width + + GridLayout { + id: detailsLayout + visible: Daemon.currentWallet + rowSpacing: constants.paddingSmall + Layout.preferredWidth: parent.width + Layout.margins: constants.paddingXLarge + + columns: 2 + + // Label { + // text: qsTr('Wallet') + // color: Material.accentColor + // font.pixelSize: constants.fontSizeLarge + // } + Image { + source: '../../icons/wallet.png' + Layout.preferredWidth: constants.iconSizeLarge + Layout.preferredHeight: constants.iconSizeLarge + } + Label { + Layout.fillWidth: true + text: Daemon.currentWallet.name; + font.bold: true; + font.pixelSize: constants.fontSizeXLarge + } + + RowLayout { + Layout.columnSpan: 2 + Tag { + text: Daemon.currentWallet.walletType + font.pixelSize: constants.fontSizeSmall + font.bold: true + iconSource: '../../../icons/wallet.png' + } + Tag { + text: Daemon.currentWallet.txinType + font.pixelSize: constants.fontSizeSmall + font.bold: true + } + Tag { + text: qsTr('HD') + visible: Daemon.currentWallet.isDeterministic + font.pixelSize: constants.fontSizeSmall + font.bold: true + } + Tag { + text: qsTr('Watch only') + visible: Daemon.currentWallet.isWatchOnly + font.pixelSize: constants.fontSizeSmall + font.bold: true + iconSource: '../../../icons/eye1.png' + } + Tag { + text: qsTr('Encrypted') + visible: Daemon.currentWallet.isEncrypted + font.pixelSize: constants.fontSizeSmall + font.bold: true + iconSource: '../../../icons/key.png' + } + Tag { + text: qsTr('HW') + visible: Daemon.currentWallet.isHardware + font.pixelSize: constants.fontSizeSmall + font.bold: true + iconSource: '../../../icons/seed.png' + } + Tag { + text: qsTr('Lightning') + visible: Daemon.currentWallet.isLightning + font.pixelSize: constants.fontSizeSmall + font.bold: true + iconSource: '../../../icons/lightning.png' + } + Tag { + text: qsTr('Seed') + visible: Daemon.currentWallet.hasSeed + font.pixelSize: constants.fontSizeSmall + font.bold: true + iconSource: '../../../icons/seed.png' + } + } + + } + + RowLayout { + Layout.fillWidth: true + FlatButton { + text: qsTr('More details') + Layout.fillWidth: true + Layout.preferredWidth: 1 + } + FlatButton { + text: qsTr('Switch wallet') + Layout.fillWidth: true + icon.source: '../../icons/file.png' + Layout.preferredWidth: 1 + } + } + } + } + +} diff --git a/electrum/gui/qml/components/controls/Tag.qml b/electrum/gui/qml/components/controls/Tag.qml index 510e059d0..84e408de6 100644 --- a/electrum/gui/qml/components/controls/Tag.qml +++ b/electrum/gui/qml/components/controls/Tag.qml @@ -4,9 +4,10 @@ import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.0 Rectangle { - radius: constants.paddingXSmall - width: layout.width - height: layout.height + id: root + radius: height/2 + implicitWidth: layout.implicitWidth + implicitHeight: layout.implicitHeight color: 'transparent' border.color: Material.accentColor @@ -14,8 +15,40 @@ Rectangle { property alias font: label.font property alias labelcolor: label.color + property string iconSource + RowLayout { id: layout + spacing: 0 + + Item { + // spacer + visible: iconSource + Layout.preferredWidth: constants.paddingSmall + Layout.preferredHeight: 1 + } + + Image { + visible: iconSource + Layout.preferredWidth: constants.iconSizeSmall + Layout.preferredHeight: constants.iconSizeSmall + source: iconSource + } + + Item { + // spacer + visible: iconSource + Layout.preferredWidth: constants.paddingXXSmall + Layout.preferredHeight: 1 + } + + Rectangle { + visible: iconSource + Layout.preferredHeight: root.height + Layout.preferredWidth: 1 + color: root.color + border.color: root.border.color + } Label { id: label @@ -24,6 +57,7 @@ Rectangle { Layout.topMargin: constants.paddingXXSmall Layout.bottomMargin: constants.paddingXXSmall font.pixelSize: constants.fontSizeXSmall + color: root.border.color } } } diff --git a/electrum/gui/qml/components/main.qml b/electrum/gui/qml/components/main.qml index 6a914bc1d..78b36a8fb 100644 --- a/electrum/gui/qml/components/main.qml +++ b/electrum/gui/qml/components/main.qml @@ -32,84 +32,98 @@ ApplicationWindow header: ToolBar { id: toolbar - RowLayout { - anchors.fill: parent + ColumnLayout { + spacing: 0 - ToolButton { - text: qsTr("‹") - enabled: stack.depth > 1 - onClicked: stack.pop() - } + RowLayout { + id: toolbarTopLayout + Layout.preferredWidth: app.width - Image { - Layout.alignment: Qt.AlignVCenter - Layout.preferredWidth: constants.iconSizeLarge - Layout.preferredHeight: constants.iconSizeLarge - source: "../../icons/electrum.png" - } + ToolButton { + text: qsTr("‹") + enabled: stack.depth > 1 + onClicked: stack.pop() + } - Label { - text: stack.currentItem.title - elide: Label.ElideRight - horizontalAlignment: Qt.AlignHCenter - verticalAlignment: Qt.AlignVCenter - Layout.fillWidth: true - font.pixelSize: constants.fontSizeMedium - font.bold: true - } + Image { + Layout.alignment: Qt.AlignVCenter + Layout.preferredWidth: constants.iconSizeLarge + Layout.preferredHeight: constants.iconSizeLarge + source: "../../icons/electrum.png" + } - Item { - visible: Network.isTestNet - width: column.width - height: column.height - - ColumnLayout { - id: column - spacing: 0 - Image { - Layout.alignment: Qt.AlignHCenter - Layout.preferredWidth: constants.iconSizeSmall - Layout.preferredHeight: constants.iconSizeSmall - source: "../../icons/info.png" + Label { + text: stack.currentItem.title + elide: Label.ElideRight + horizontalAlignment: Qt.AlignHCenter + verticalAlignment: Qt.AlignVCenter + Layout.fillWidth: true + font.pixelSize: constants.fontSizeMedium + font.bold: true + MouseArea { + anchors.fill: parent + onClicked: walletDetails.toggle() } + } - Label { - id: networkNameLabel - text: Network.networkName - color: Material.accentColor - font.pixelSize: constants.fontSizeXSmall + Item { + visible: Network.isTestNet + width: column.width + height: column.height + + ColumnLayout { + id: column + spacing: 0 + Image { + Layout.alignment: Qt.AlignHCenter + Layout.preferredWidth: constants.iconSizeSmall + Layout.preferredHeight: constants.iconSizeSmall + source: "../../icons/info.png" + } + + Label { + id: networkNameLabel + text: Network.networkName + color: Material.accentColor + font.pixelSize: constants.fontSizeXSmall + } } } - } - Image { - Layout.preferredWidth: constants.iconSizeSmall - Layout.preferredHeight: constants.iconSizeSmall - visible: Daemon.currentWallet && Daemon.currentWallet.isWatchOnly - source: '../../icons/eye1.png' - scale: 1.5 - } + Image { + Layout.preferredWidth: constants.iconSizeSmall + Layout.preferredHeight: constants.iconSizeSmall + visible: Daemon.currentWallet && Daemon.currentWallet.isWatchOnly + source: '../../icons/eye1.png' + scale: 1.5 + } - NetworkStatusIndicator { } + NetworkStatusIndicator { } - Rectangle { - color: 'transparent' - Layout.preferredWidth: constants.paddingSmall - height: 1 - visible: !menuButton.visible - } + Rectangle { + color: 'transparent' + Layout.preferredWidth: constants.paddingSmall + height: 1 + visible: !menuButton.visible + } - ToolButton { - id: menuButton - enabled: stack.currentItem && stack.currentItem.menu ? stack.currentItem.menu.count > 0 : false - text: enabled ? qsTr("≡") : '' - font.pixelSize: constants.fontSizeXLarge - onClicked: { - stack.currentItem.menu.open() - // position the menu to the right - stack.currentItem.menu.x = toolbar.width - stack.currentItem.menu.width + ToolButton { + id: menuButton + enabled: stack.currentItem && stack.currentItem.menu ? stack.currentItem.menu.count > 0 : false + text: enabled ? qsTr("≡") : '' + font.pixelSize: constants.fontSizeXLarge + onClicked: { + stack.currentItem.menu.open() + // position the menu to the right + stack.currentItem.menu.x = toolbar.width - stack.currentItem.menu.width + } } } + + WalletDetails { + id: walletDetails + Layout.preferredWidth: parent.width + } } }