qml: balance piechart in walletdetails, fix menus to top header height

electrum/gui/qml/components/Channels.qml

@@ -9,10 +9,14 @@ import "controls"
 
 Pane {
     id: root
-    property string title: qsTr("Lightning Channels")
 
     property QtObject menu: Menu {
         id: menu
+        parent: Overlay.overlay
+        dim: true
+        Overlay.modeless: Rectangle {
+            color: "#44000000"
+        }
         MenuItem {
             icon.color: 'transparent'
             action: Action {
@@ -46,6 +50,20 @@ Pane {
             Layout.preferredWidth: parent.width
             columns: 2
 
+            Label {
+                Layout.columnSpan: 2
+                text: qsTr('Lightning Channels')
+                font.pixelSize: constants.fontSizeLarge
+                color: Material.accentColor
+            }
+
+            Rectangle {
+                Layout.columnSpan: 2
+                Layout.fillWidth: true
+                height: 1
+                color: Material.accentColor
+            }
+
             Label {
                 Layout.columnSpan: 2
                 text: qsTr('You have %1 open channels').arg(Daemon.currentWallet.channelModel.numOpenChannels)

electrum/gui/qml/components/History.qml

@@ -26,19 +26,6 @@ Pane {
 
         model: visualModel
 
-        header: Item {
-            width: parent.width
-            height: headerLayout.height
-            ColumnLayout {
-                id: headerLayout
-                anchors.centerIn: parent
-                Item { height: constants.paddingXLarge; width: 1 }
-                BalanceSummary {}
-                Item { height: constants.paddingXLarge; width: 1 }
-            }
-        }
-        headerPositioning: ListView.InlineHeader
-
         readonly property variant sectionLabels: {
             'today': qsTr('Today'),
             'yesterday': qsTr('Yesterday'),

electrum/gui/qml/components/LightningPaymentDetails.qml

@@ -12,7 +12,7 @@ Pane {
     width: parent.width
     height: parent.height
 
-    property string title: qsTr("Lightning payment details")
+    // property string title: qsTr("Lightning payment details")
 
     property string key
 
@@ -31,6 +31,20 @@ Pane {
             width: parent.width
             columns: 2
 
+            Label {
+                Layout.columnSpan: 2
+                text: qsTr('Lightning payment details')
+                font.pixelSize: constants.fontSizeLarge
+                color: Material.accentColor
+            }
+
+            Rectangle {
+                Layout.columnSpan: 2
+                Layout.fillWidth: true
+                height: 1
+                color: Material.accentColor
+            }
+
             Label {
                 text: qsTr('Status')
                 color: Material.accentColor

electrum/gui/qml/components/NetworkStats.qml

@@ -13,6 +13,11 @@ Pane {
 
     property QtObject menu: Menu {
         id: menu
+        parent: Overlay.overlay
+        dim: true
+        Overlay.modeless: Rectangle {
+            color: "#44000000"
+        }
         MenuItem {
             icon.color: 'transparent'
             action: Action {

electrum/gui/qml/components/TxDetails.qml

@@ -12,7 +12,7 @@ Pane {
     width: parent.width
     height: parent.height
 
-    property string title: qsTr("Transaction details")
+    // property string title: qsTr("Transaction details")
 
     property string txid
     property string rawtx
@@ -27,6 +27,11 @@ Pane {
 
     property QtObject menu: Menu {
         id: menu
+        parent: Overlay.overlay
+        dim: true
+        Overlay.modeless: Rectangle {
+            color: "#44000000"
+        }
         MenuItem {
             icon.color: 'transparent'
             action: Action {
@@ -85,6 +90,20 @@ Pane {
             width: parent.width
             columns: 2
 
+            Label {
+                Layout.columnSpan: 2
+                text: qsTr('Transaction Details')
+                font.pixelSize: constants.fontSizeLarge
+                color: Material.accentColor
+            }
+
+            Rectangle {
+                Layout.columnSpan: 2
+                Layout.fillWidth: true
+                height: 1
+                color: Material.accentColor
+            }
+
             RowLayout {
                 Layout.fillWidth: true
                 Layout.columnSpan: 2

electrum/gui/qml/components/WalletDetails.qml

@@ -10,7 +10,6 @@ import "controls"
 Item {
     id: root
     clip: true
-    Layout.fillWidth: true
     implicitHeight: 0
 
     function open() {
@@ -56,36 +55,21 @@ Item {
         }
 
         ColumnLayout {
+            id: rootLayout
             width: parent.width
+            spacing: constants.paddingXLarge
 
             GridLayout {
-                id: detailsLayout
                 visible: Daemon.currentWallet
                 rowSpacing: constants.paddingSmall
                 Layout.preferredWidth: parent.width
-                Layout.margins: constants.paddingXLarge
+                Layout.topMargin: 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
+                    Layout.alignment: Qt.AlignHCenter
                     Tag {
                         text: Daemon.currentWallet.walletType
                         font.pixelSize: constants.fontSizeSmall
@@ -140,7 +124,71 @@ Item {
                     }
                 }
 
-           }
+            }
+
+            TextHighlightPane {
+                Layout.alignment: Qt.AlignHCenter
+                GridLayout {
+                    columns: 3
+
+                    Label {
+                        font.pixelSize: constants.fontSizeXLarge
+                        text: qsTr('Balance:')
+                        color: Material.accentColor
+                    }
+
+                    Label {
+                        font.pixelSize: constants.fontSizeXLarge
+                        font.family: FixedFont
+                        text: Config.formatSats(Daemon.currentWallet.totalBalance)
+                    }
+                    Label {
+                        font.pixelSize: constants.fontSizeXLarge
+                        color: Material.accentColor
+                        text: Config.baseUnit
+                    }
+
+                    Item {
+                        visible: Daemon.fx.enabled
+                        Layout.preferredHeight: 1
+                        Layout.preferredWidth: 1
+                    }
+                    Label {
+                        Layout.alignment: Qt.AlignRight
+                        visible: Daemon.fx.enabled
+                        font.pixelSize: constants.fontSizeLarge
+                        color: constants.mutedForeground
+                        text: Daemon.fx.fiatValue(Daemon.currentWallet.totalBalance, false)
+                    }
+                    Label {
+                        visible: Daemon.fx.enabled
+                        font.pixelSize: constants.fontSizeLarge
+                        color: constants.mutedForeground
+                        text: Daemon.fx.fiatCurrency
+                    }
+                }
+            }
+
+            Piechart {
+                id: piechart
+                visible: Daemon.currentWallet.totalBalance.satsInt > 0
+                Layout.preferredWidth: parent.width
+                // Layout.preferredHeight: 200
+                implicitHeight: 200
+                innerOffset: 6
+                function updateSlices() {
+                    console.log('update piechart, w='+width+',h='+height)
+                    var totalB = Daemon.currentWallet.totalBalance.satsInt
+                    var onchainB = Daemon.currentWallet.confirmedBalance.satsInt
+                    var frozenB = Daemon.currentWallet.frozenBalance.satsInt
+                    var lnB = Daemon.currentWallet.lightningBalance.satsInt
+                    piechart.slices = [
+                        { v: (onchainB-frozenB)/totalB, color: constants.colorPiechartOnchain, text: 'On-chain' },
+                        { v: frozenB/totalB, color: constants.colorPiechartFrozen, text: 'On-chain (frozen)' },
+                        { v: lnB/totalB, color: constants.colorPiechartLightning, text: 'Lightning' }
+                    ]
+                }
+            }
 
             RowLayout {
                 Layout.fillWidth: true
@@ -159,4 +207,11 @@ Item {
         }
     }
 
+    Connections {
+        target: Daemon.currentWallet
+        function onBalanceChanged() {
+            piechart.updateSlices()
+        }
+    }
+
 }

electrum/gui/qml/components/WalletMainView.qml

@@ -39,6 +39,12 @@ Item {
     }
 
     property QtObject menu: Menu {
+        parent: Overlay.overlay
+        dim: true
+        Overlay.modeless: Rectangle {
+            color: "#44000000"
+        }
+
         id: menu
         MenuItem {
             icon.color: 'transparent'

electrum/gui/qml/components/Wallets.qml

@@ -47,6 +47,11 @@ Pane {
 
     property QtObject menu: Menu {
         id: menu
+        parent: Overlay.overlay
+        dim: true
+        Overlay.modeless: Rectangle {
+            color: "#44000000"
+        }
         MenuItem {
             icon.color: 'transparent'
             action: Action {

electrum/gui/qml/components/controls/Piechart.qml

@@ -8,6 +8,8 @@ Canvas {
     property int innerOffset: 10
     property bool showLegend: true
 
+    onSlicesChanged: piechart.requestPaint()
+
     onPaint: {
         var startR = -Math.PI/2
 

electrum/gui/qml/components/main.qml

@@ -116,6 +116,7 @@ ApplicationWindow
                         stack.currentItem.menu.open()
                         // position the menu to the right
                         stack.currentItem.menu.x = toolbar.width - stack.currentItem.menu.width
+                        stack.currentItem.menu.y = toolbarTopLayout.height
                     }
                 }
             }