Browse Source

qml: many UI updates and additions

patch-4
Sander van Grieken 4 years ago
parent
commit
ba7bcbfcbc
  1. 31
      electrum/gui/qml/components/BalanceSummary.qml
  2. 226
      electrum/gui/qml/components/History.qml
  3. 4
      electrum/gui/qml/components/NetworkStats.qml
  4. 3
      electrum/gui/qml/components/Scan.qml
  5. 43
      electrum/gui/qml/components/Send.qml
  6. 106
      electrum/gui/qml/components/Wallets.qml
  7. 92
      electrum/gui/qml/components/landing.qml
  8. 82
      electrum/gui/qml/components/main.qml

31
electrum/gui/qml/components/BalanceSummary.qml

@ -0,0 +1,31 @@
import QtQuick 2.6
import QtQuick.Layouts 1.0
import QtQuick.Controls 2.0
Item {
height: layout.height
GridLayout {
id: layout
columns: 3
Label {
Layout.columnSpan: 3
font.pointSize: 14
text: 'Balance: ' + Daemon.currentWallet.confirmedBalance //'5.6201 mBTC'
}
Label {
font.pointSize: 8
text: 'Confirmed: ' + Daemon.currentWallet.confirmedBalance
}
Label {
font.pointSize: 8
text: 'Unconfirmed: ' + Daemon.currentWallet.unconfirmedBalance
}
Label {
font.pointSize: 8
text: 'Lightning: ?'
}
}
}

226
electrum/gui/qml/components/History.qml

@ -2,132 +2,146 @@ import QtQuick 2.6
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
import QtQuick.Controls 2.0 import QtQuick.Controls 2.0
Item { import Electrum 1.0
id: rootItem
property string title: 'History' Pane {
id: rootItem
visible: Daemon.currentWallet !== undefined
clip: true
Column { ListView {
id: listview
width: parent.width width: parent.width
height: parent.height
ListView { model: Daemon.currentWallet.historyModel
width: parent.width
height: 200
model: Daemon.currentWallet.historyModel header: Item {
delegate: Item { id: header
id: delegate width: ListView.view.width
width: ListView.view.width height: balance.height
height: txinfo.height
MouseArea { BalanceSummary {
anchors.fill: delegate id: balance
onClicked: extinfo.visible = !extinfo.visible width: parent.width
} }
GridLayout { }
id: txinfo
columns: 4
x: 6
width: delegate.width - 12
Item {
id: indicator
Layout.fillHeight: true
Layout.rowSpan: 2
Rectangle {
width: 3
color: model.incoming ? 'green' : 'red'
y: 2
height: parent.height - 4
}
}
Image { delegate: Item {
readonly property variant tx_icons : [ id: delegate
"../../../gui/icons/unconfirmed.png", width: ListView.view.width
"../../../gui/icons/clock1.png", height: txinfo.height
"../../../gui/icons/clock2.png",
"../../../gui/icons/clock3.png", MouseArea {
"../../../gui/icons/clock4.png", anchors.fill: delegate
"../../../gui/icons/clock5.png", onClicked: extinfo.visible = !extinfo.visible
"../../../gui/icons/confirmed.png" }
]
GridLayout {
sourceSize.width: 32 id: txinfo
sourceSize.height: 32 columns: 4
Layout.alignment: Qt.AlignVCenter
source: tx_icons[Math.min(6,model.confirmations)] x: 6
width: delegate.width - 12
Item {
id: indicator
Layout.fillHeight: true
Layout.rowSpan: 2
Rectangle {
width: 3
color: model.incoming ? 'green' : 'red'
y: 2
height: parent.height - 4
} }
}
Column { Image {
Layout.fillWidth: true readonly property variant tx_icons : [
"../../../gui/icons/unconfirmed.png",
"../../../gui/icons/clock1.png",
"../../../gui/icons/clock2.png",
"../../../gui/icons/clock3.png",
"../../../gui/icons/clock4.png",
"../../../gui/icons/clock5.png",
"../../../gui/icons/confirmed.png"
]
sourceSize.width: 48
sourceSize.height: 48
Layout.alignment: Qt.AlignVCenter
source: tx_icons[Math.min(6,model.confirmations)]
}
Label { Column {
text: model.label !== '' ? model.label : '<no label>' Layout.fillWidth: true
color: model.label !== '' ? 'black' : 'gray'
font.bold: model.label !== '' ? true : false Label {
} font.pointSize: 12
Label { text: model.label !== '' ? model.label : '<no label>'
font.pointSize: 7 color: model.label !== '' ? 'black' : 'gray'
text: model.date font.bold: model.label !== '' ? true : false
} }
Label {
font.pointSize: 7
text: model.date
} }
}
Column { Column {
id: valuefee id: valuefee
Label { Label {
text: model.bc_value font.pointSize: 12
font.bold: true text: model.bc_value
} font.bold: true
Label { }
font.pointSize: 6 Label {
text: 'fee: ' + (model.fee !== undefined ? model.fee : '0') font.pointSize: 6
} text: 'fee: ' + (model.fee !== undefined ? model.fee : '0')
} }
}
GridLayout { GridLayout {
id: extinfo id: extinfo
visible: false visible: false
columns: 2 columns: 2
Layout.columnSpan: 3 Layout.columnSpan: 3
Label { text: 'txid' } Label { text: 'txid' }
Label { Label {
font.pointSize: 6 font.pointSize: 6
text: model.txid text: model.txid
elide: Text.ElideMiddle elide: Text.ElideMiddle
Layout.fillWidth: true Layout.fillWidth: true
} }
Label { text: 'height' } Label { text: 'height' }
Label { Label {
font.pointSize: 7 font.pointSize: 7
text: model.height text: model.height
} }
Label { text: 'confirmations' } Label { text: 'confirmations' }
Label { Label {
font.pointSize: 7 font.pointSize: 7
text: model.confirmations text: model.confirmations
} }
Label { text: 'address' } Label { text: 'address' }
Label { Label {
font.pointSize: 7 font.pointSize: 7
elide: Text.ElideMiddle elide: Text.ElideMiddle
Layout.fillWidth: true Layout.fillWidth: true
text: { text: {
for (var i=0; i < Object.keys(model.outputs).length; i++) { for (var i=0; i < Object.keys(model.outputs).length; i++) {
if (model.outputs[i].value === model.bc_value) { if (model.outputs[i].value === model.bc_value) {
return model.outputs[i].address return model.outputs[i].address
}
} }
} }
} }
} }
} }
} // delegate
} }
} // delegate
} }

4
electrum/gui/qml/components/NetworkStats.qml

@ -3,12 +3,14 @@ import QtQuick.Layouts 1.0
import QtQuick.Controls 2.0 import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0 import QtQuick.Controls.Material 2.0
Item { Pane {
property string title: qsTr('Network') property string title: qsTr('Network')
GridLayout { GridLayout {
columns: 2 columns: 2
Label { text: qsTr("Network: "); color: Material.primaryHighlightedTextColor; font.bold: true }
Label { text: Network.networkName }
Label { text: qsTr("Server: "); color: Material.primaryHighlightedTextColor; font.bold: true } Label { text: qsTr("Server: "); color: Material.primaryHighlightedTextColor; font.bold: true }
Label { text: Network.server } Label { text: Network.server }
Label { text: qsTr("Local Height: "); color: Material.primaryHighlightedTextColor; font.bold: true } Label { text: qsTr("Local Height: "); color: Material.primaryHighlightedTextColor; font.bold: true }

3
electrum/gui/qml/components/Scan.qml

@ -4,11 +4,10 @@ import QtQuick.Controls 2.0
Item { Item {
property bool toolbar: false property bool toolbar: false
property string title: 'scan'
QRScan { QRScan {
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: button.top anchors.bottom: parent.bottom
width: parent.width width: parent.width
} }

43
electrum/gui/qml/components/Send.qml

@ -2,20 +2,16 @@ import QtQuick 2.6
import QtQuick.Controls 2.0 import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
Item { Pane {
id: rootItem id: rootItem
property string title: 'Send'
GridLayout { GridLayout {
width: rootItem.width - 12 width: parent.width
anchors.horizontalCenter: parent.horizontalCenter
columns: 4 columns: 4
Label { BalanceSummary {
Layout.columnSpan: 4 Layout.columnSpan: 4
Layout.alignment: Qt.AlignHCenter //Layout.alignment: Qt.AlignHCenter
text: "Current Balance: 0 mBTC"
} }
Label { Label {
@ -47,20 +43,31 @@ Item {
placeholderText: 'sat/vB' placeholderText: 'sat/vB'
} }
Column { Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.columnSpan: 4 Layout.columnSpan: 4
Button { Row {
spacing: 10
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
text: 'Pay' Button {
onClicked: { // anchors.horizontalCenter: parent.horizontalCenter
var i_amount = parseInt(amount.text) text: 'Pay'
if (isNaN(i_amount)) enabled: address.text != '' && amount.text != '' && fee.text != '' // TODO proper validation
return onClicked: {
var result = Daemon.currentWallet.send_onchain(address.text, i_amount, undefined, false) var i_amount = parseInt(amount.text)
if (result) if (isNaN(i_amount))
app.stack.pop() return
var result = Daemon.currentWallet.send_onchain(address.text, i_amount, undefined, false)
if (result)
app.stack.pop()
}
}
Button {
text: 'Scan QR Code'
Layout.alignment: Qt.AlignHCenter
onClicked: app.stack.push(Qt.resolvedUrl('Scan.qml'))
} }
} }
} }

106
electrum/gui/qml/components/Wallets.qml

@ -2,42 +2,104 @@ import QtQuick 2.6
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
import QtQuick.Controls 2.0 import QtQuick.Controls 2.0
Item { Pane {
property string title: 'Wallets' id: rootItem
anchors.fill: parent property string title: 'Wallets'
ListView { ColumnLayout {
id: layout
width: parent.width width: parent.width
height: parent.height height: parent.height
model: Daemon.availableWallets
delegate: Item { Item {
width: ListView.view.width width: parent.width
height: 50 height: detailsLayout.height
GridLayout {
id: detailsLayout
width: parent.width
columns: 4
Label { text: 'Wallet'; Layout.columnSpan: 2 }
Label { text: Daemon.walletName; Layout.columnSpan: 2 }
Label { text: 'txinType' }
Label { text: Daemon.currentWallet.txinType }
Label { text: 'is deterministic' }
Label { text: Daemon.currentWallet.isDeterministic }
Label { text: 'is watch only' }
Label { text: Daemon.currentWallet.isWatchOnly }
RowLayout { Label { text: 'is Encrypted' }
x: 20 Label { text: Daemon.currentWallet.isEncrypted }
spacing: 20
Image { Label { text: 'is Hardware' }
source: "../../../gui/kivy/theming/light/wallet.png" Label { text: Daemon.currentWallet.isHardware }
Label { text: 'derivation path (BIP32)'; visible: Daemon.currentWallet.isDeterministic }
Label { text: Daemon.currentWallet.derivationPath; visible: Daemon.currentWallet.isDeterministic }
} }
}
// }
Item {
width: parent.width
// height: detailsFrame.height
Layout.fillHeight: true
Frame {
id: detailsFrame
width: parent.width
height: parent.height
ListView {
id: listview
width: parent.width
// Layout.fillHeight: true
height: parent.height
clip:true
model: Daemon.availableWallets
Label { // header: sadly seems to be buggy
font.pointSize: model.active ? 14 : 13
font.bold: model.active delegate: AbstractButton {
text: model.name width: ListView.view.width
Layout.fillWidth: true height: 50
onClicked: console.log('delegate clicked')
RowLayout {
x: 20
spacing: 20
Image {
source: "../../../gui/kivy/theming/light/wallet.png"
}
Label {
font.pointSize: 12
text: model.name
Layout.fillWidth: true
}
Button {
text: 'Load'
onClicked: {
Daemon.load_wallet(model.path, null)
}
}
} }
} }
}}}
MouseArea { Button {
anchors.fill: parent Layout.alignment: Qt.AlignHCenter
onClicked: openMenu() text: 'Create Wallet'
onClicked: {
var dialog = app.newWalletWizard.createObject(rootItem)
dialog.open()
} }
} }
} }
} }

92
electrum/gui/qml/components/landing.qml

@ -1,59 +1,87 @@
import QtQuick 2.6 import QtQuick 2.6
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Layouts 1.0
import QtQml 2.6 import QtQml 2.6
Item { Item {
id: rootItem id: rootItem
property string title: 'Network' property string title: Daemon.walletName
property QtObject menu: Menu { property QtObject menu: Menu {
MenuItem { text: 'Wallets'; onTriggered: stack.push(Qt.resolvedUrl('Wallets.qml')) } MenuItem { text: 'Wallets'; onTriggered: stack.push(Qt.resolvedUrl('Wallets.qml')) }
MenuItem { text: 'Network'; onTriggered: stack.push(Qt.resolvedUrl('NetworkStats.qml')) } MenuItem { text: 'Network'; onTriggered: stack.push(Qt.resolvedUrl('NetworkStats.qml')) }
} }
Column { ColumnLayout {
width: parent.width anchors.fill: parent
Button { TabBar {
text: 'Scan QR Code' id: tabbar
onClicked: app.stack.push(Qt.resolvedUrl('Scan.qml')) Layout.fillWidth: true
currentIndex: swipeview.currentIndex
TabButton {
text: qsTr('Receive')
}
TabButton {
text: qsTr('History')
}
TabButton {
enabled: !Daemon.currentWallet.isWatchOnly
text: qsTr('Send')
}
} }
Button { SwipeView {
text: 'Send' id: swipeview
onClicked: app.stack.push(Qt.resolvedUrl('Send.qml'))
}
Button { Layout.fillHeight: true
text: 'Show TX History' Layout.fillWidth: true
onClicked: app.stack.push(Qt.resolvedUrl('History.qml')) currentIndex: tabbar.currentIndex
}
Item {
ColumnLayout {
width: parent.width
y: 20
spacing: 20
Button {
onClicked: stack.push(Qt.resolvedUrl('Wallets.qml'))
text: 'Wallets'
Layout.alignment: Qt.AlignHCenter
}
Button { Button {
text: 'Create Wallet' text: 'Create Wallet'
onClicked: { Layout.alignment: Qt.AlignHCenter
var dialog = newWalletWizard.createObject(rootItem) onClicked: {
dialog.open() var dialog = app.newWalletWizard.createObject(rootItem)
dialog.open()
}
}
}
} }
}
} Item {
History {
id: history
anchors.fill: parent
}
}
Component {
id: newWalletWizard Item {
NewWalletWizard { enabled: !Daemon.currentWallet.isWatchOnly
parent: Overlay.overlay Send {
x: 12 anchors.fill: parent
y: 12 }
width: parent.width - 24
height: parent.height - 24
Overlay.modal: Rectangle {
color: "#aa000000"
} }
} }
} }
} }

82
electrum/gui/qml/components/main.qml

@ -1,5 +1,5 @@
import QtQuick 2.6 import QtQuick 2.6
import QtQuick.Controls 2.0 import QtQuick.Controls 2.3
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
import QtQuick.Controls.Material 2.0 import QtQuick.Controls.Material 2.0
@ -25,15 +25,50 @@ ApplicationWindow
anchors.fill: parent anchors.fill: parent
ToolButton { ToolButton {
text: qsTr("‹") text: qsTr("‹")
enabled: stack.currentItem.StackView.index > 0 enabled: stack.depth > 1
onClicked: stack.pop() onClicked: stack.pop()
} }
Item {
width: column.width
height: column.height
MouseArea {
anchors.fill: parent
onClicked: {
var dialog = app.messageDialog.createObject(app, {'message':
'Electrum is currently on ' + Network.networkName + ''
})
dialog.open()
}
}
Column {
id: column
visible: Network.isTestNet
Image {
anchors.horizontalCenter: parent.horizontalCenter
width: 16
height: 16
source: "../../icons/info.png"
}
Label {
id: networkNameLabel
text: Network.networkName
color: Material.accentColor //'orange'
font.pointSize: 5
}
}
}
Label { Label {
text: stack.currentItem.title text: stack.currentItem.title
elide: Label.ElideRight elide: Label.ElideRight
horizontalAlignment: Qt.AlignHCenter horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter verticalAlignment: Qt.AlignVCenter
Layout.fillWidth: true Layout.fillWidth: true
font.pointSize: 10
font.bold: true
} }
ToolButton { ToolButton {
text: qsTr("⋮") text: qsTr("⋮")
@ -55,7 +90,7 @@ ApplicationWindow
Timer { Timer {
id: splashTimer id: splashTimer
interval: 1000 interval: 10
onTriggered: { onTriggered: {
splash.opacity = 0 splash.opacity = 0
} }
@ -73,8 +108,49 @@ ApplicationWindow
} }
} }
property alias newWalletWizard: _newWalletWizard
Component {
id: _newWalletWizard
NewWalletWizard {
parent: Overlay.overlay
x: 12
y: 12
width: parent.width - 24
height: parent.height - 24
Overlay.modal: Rectangle {
color: "#aa000000"
}
}
}
property alias messageDialog: _messageDialog
Component {
id: _messageDialog
Dialog {
parent: Overlay.overlay
modal: true
x: (parent.width - width) / 2
y: (parent.height - height) / 2
title: "Message"
property alias message: messageLabel.text
Label {
id: messageLabel
text: "Lorem ipsum dolor sit amet..."
}
}
}
Component.onCompleted: { Component.onCompleted: {
Daemon.load_wallet() Daemon.load_wallet()
splashTimer.start() splashTimer.start()
} }
onClosing: {
// destroy most GUI components so that we don't dump so many null reference warnings on exit
app.header.visible = false
mainStackView.clear()
}
} }

Loading…
Cancel
Save