qml: remove ugly notification popup, add wallet name to notifications

electrum/gui/qml/components/Constants.qml

@@ -27,11 +27,14 @@ Item {
 
     readonly property int fingerWidth: 64 // TODO: determine finger width from screen dimensions and resolution
 
-    property color colorCredit: "#ff80ff80"
-    property color colorDebit: "#ffff8080"
     property color mutedForeground: 'gray' //Qt.lighter(Material.background, 2)
     property color darkerBackground: Qt.darker(Material.background, 1.20)
     property color lighterBackground: Qt.lighter(Material.background, 1.10)
+    property color notificationBackground: Qt.lighter(Material.background, 1.5)
+
+    property color colorCredit: "#ff80ff80"
+    property color colorDebit: "#ffff8080"
+
     property color colorMine: "yellow"
     property color colorError: '#ffff8080'
     property color colorLightningLocal: "blue"
@@ -41,7 +44,6 @@ Item {
     property color colorPiechartOnchain: Qt.darker(Material.accentColor, 1.50)
     property color colorPiechartFrozen: 'gray'
     property color colorPiechartLightning: 'orange' //Qt.darker(Material.accentColor, 1.20)
-
     property color colorPiechartParticipant: 'gray'
     property color colorPiechartSignature: 'yellow'
 

electrum/gui/qml/components/NotificationPopup.qml

@@ -2,60 +2,114 @@ import QtQuick 2.6
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.3
 import QtQuick.Controls.Material 2.0
+import QtQuick.Controls.Material.impl 2.12
 
-Rectangle {
+Item {
     id: root
 
-    property alias text: textItem.text
+    property string message
+    property string wallet_name
+    property bool _hide: true
 
-    property bool hide: true
+    clip:true
 
-    color: Qt.lighter(Material.background, 1.5)
-    radius: constants.paddingXLarge
-
-    width: root.parent.width * 2/3
-    height: layout.height
-    x: (root.parent.width - width) / 2
-    y: -height
+    layer.enabled: height > 0
+    layer.effect: ElevationEffect {
+        elevation: constants.paddingXLarge
+        fullWidth: true
+    }
 
     states: [
         State {
-            name: 'expanded'; when: !hide
-            PropertyChanges { target: root; y: 100 }
+            name: 'expanded'; when: !_hide
+            PropertyChanges { target: root; height: layout.implicitHeight }
         }
     ]
 
     transitions: [
         Transition {
             from: ''; to: 'expanded'; reversible: true
-            NumberAnimation { properties: 'y'; duration: 300; easing.type: Easing.InOutQuad }
+            NumberAnimation { target: root; properties: 'height'; duration: 300; easing.type: Easing.OutQuad }
         }
     ]
 
-    function show(message) {
-        root.text = message
-        root.hide = false
+    function show(wallet_name, message) {
+        root.wallet_name = wallet_name
+        root.message = message
+        root._hide = false
         closetimer.start()
     }
 
-    RowLayout {
-        id: layout
-        width: parent.width
-        Text {
-            id: textItem
-            Layout.alignment: Qt.AlignHCenter
-            Layout.fillWidth: true
-            font.pixelSize: constants.fontSizeLarge
-            color: Material.foreground
-            wrapMode: Text.Wrap
+    Rectangle {
+        id: rect
+        width: root.width
+        height: layout.height
+        color: constants.colorAlpha(Material.dialogColor, 0.8)
+        anchors.bottom: root.bottom
+
+        ColumnLayout {
+            id: layout
+            width: parent.width
+            spacing: 0
+
+            RowLayout {
+                Layout.margins: constants.paddingLarge
+                spacing: constants.paddingSizeSmall
+
+                Image {
+                    source: '../../icons/info.png'
+                    Layout.preferredWidth: constants.iconSizeLarge
+                    Layout.preferredHeight: constants.iconSizeLarge
+                }
+
+                Label {
+                    id: messageLabel
+                    Layout.fillWidth: true
+                    font.pixelSize: constants.fontSizeLarge
+                    color: Material.foreground
+                    wrapMode: Text.Wrap
+                    text: root.message
+                }
+            }
+            Rectangle {
+                Layout.preferredHeight: 2
+                Layout.fillWidth: true
+                color: Material.accentColor
+            }
         }
+
+        RowLayout {
+            visible: root.wallet_name && root.wallet_name != Daemon.currentWallet.name
+            anchors.right: rect.right
+            anchors.bottom: rect.bottom
+
+            RowLayout {
+                Layout.margins: constants.paddingSmall
+                Image {
+                    source: '../../icons/wallet.png'
+                    Layout.preferredWidth: constants.iconSizeXSmall
+                    Layout.preferredHeight: constants.iconSizeXSmall
+                }
+
+                Label {
+                    font.pixelSize: constants.fontSizeSmall
+                    color: Material.accentColor
+                    text: root.wallet_name
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        // capture all clicks
+        anchors.fill: parent
     }
 
     Timer {
         id: closetimer
         interval: 5000
         repeat: false
-        onTriggered: hide = true
+        onTriggered: _hide = true
     }
 
 }

electrum/gui/qml/components/main.qml

@@ -262,6 +262,7 @@ ApplicationWindow
 
     NotificationPopup {
         id: notificationPopup
+        width: parent.width
     }
 
     Component {
@@ -360,8 +361,8 @@ ApplicationWindow
 
     Connections {
         target: AppController
-        function onUserNotify(message) {
-            notificationPopup.show(message)
+        function onUserNotify(wallet_name, message) {
+            notificationPopup.show(wallet_name, message)
         }
         function onShowException() {
             var dialog = crashDialog.createObject(app, {
@@ -378,10 +379,10 @@ ApplicationWindow
         }
         // TODO: add to notification queue instead of barging through
         function onPaymentSucceeded(key) {
-            notificationPopup.show(qsTr('Payment Succeeded'))
+            notificationPopup.show(Daemon.currentWallet.name, qsTr('Payment Succeeded'))
         }
         function onPaymentFailed(key, reason) {
-            notificationPopup.show(qsTr('Payment Failed') + ': ' + reason)
+            notificationPopup.show(Daemon.currentWallet.name, qsTr('Payment Failed') + ': ' + reason)
         }
     }
 

electrum/gui/qml/qeapp.py

@@ -49,7 +49,7 @@ notification = None
 
 class QEAppController(BaseCrashReporter, QObject):
     _dummy = pyqtSignal()
-    userNotify = pyqtSignal(str)
+    userNotify = pyqtSignal(str, str)
     uriReceived = pyqtSignal(str)
     showException = pyqtSignal()
     sendingBugreport = pyqtSignal()
@@ -94,7 +94,7 @@ class QEAppController(BaseCrashReporter, QObject):
 
     def on_wallet_usernotify(self, wallet, message):
         self.logger.debug(message)
-        self.user_notification_queue.put(message)
+        self.user_notification_queue.put((wallet,message))
         if not self.notification_timer.isActive():
             self.logger.debug('starting app notification timer')
             self.notification_timer.start()
@@ -111,7 +111,8 @@ class QEAppController(BaseCrashReporter, QObject):
         self.user_notification_last_time = now
         self.logger.info("Notifying GUI about new user notifications")
         try:
-            self.userNotify.emit(self.user_notification_queue.get_nowait())
+            wallet, message = self.user_notification_queue.get_nowait()
+            self.userNotify.emit(str(wallet), message)
         except queue.Empty:
             pass