From b0227c7e03f3b4f55591e61c5c9a8814ce1c6509 Mon Sep 17 00:00:00 2001
From: Sander van Grieken <sander@outrightsolutions.nl>
Date: Fri, 23 Feb 2024 10:28:11 +0100
Subject: [PATCH] qml: add HelpDialog and HelpButton for showing additional
 info

---
 .../qml/components/controls/HelpButton.qml    | 20 +++++++
 .../qml/components/controls/HelpDialog.qml    | 60 +++++++++++++++++++
 electrum/gui/qml/components/main.qml          |  8 +++
 3 files changed, 88 insertions(+)
 create mode 100644 electrum/gui/qml/components/controls/HelpButton.qml
 create mode 100644 electrum/gui/qml/components/controls/HelpDialog.qml

diff --git a/electrum/gui/qml/components/controls/HelpButton.qml b/electrum/gui/qml/components/controls/HelpButton.qml
new file mode 100644
index 000000000..cb7b4bba9
--- /dev/null
+++ b/electrum/gui/qml/components/controls/HelpButton.qml
@@ -0,0 +1,20 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Controls.Material
+
+ToolButton {
+    id: root
+    property string heading
+    property string helptext
+
+    icon.source: Qt.resolvedUrl('../../../icons/info.png')
+    icon.color: 'transparent'
+    onClicked: {
+        var dialog = app.helpDialog.createObject(app, {
+            heading: root.heading,
+            text: root.helptext
+        })
+        dialog.open()
+    }
+}
diff --git a/electrum/gui/qml/components/controls/HelpDialog.qml b/electrum/gui/qml/components/controls/HelpDialog.qml
new file mode 100644
index 000000000..d5aa4be10
--- /dev/null
+++ b/electrum/gui/qml/components/controls/HelpDialog.qml
@@ -0,0 +1,60 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Controls.Material
+
+ElDialog {
+    id: dialog
+
+    header: Item { }
+
+    property string text
+    property string heading
+
+    z: 1 // raise z so it also covers dialogs using overlay as parent
+
+    anchors.centerIn: parent
+
+    padding: 0
+
+    width: rootPane.width
+
+    Overlay.modal: Rectangle {
+        color: "#55000000"
+    }
+
+    Pane {
+        id: rootPane
+        width: rootLayout.width + leftPadding + rightPadding
+        padding: constants.paddingLarge
+
+        ColumnLayout {
+            id: rootLayout
+            width: dialog.parent.width * 2/3
+
+            RowLayout {
+                Image {
+                    source: Qt.resolvedUrl('../../../icons/info.png')
+                    Layout.preferredWidth: constants.iconSizeSmall
+                    Layout.preferredHeight: constants.iconSizeSmall
+                }
+                Label {
+                    text: dialog.heading
+                    font.underline: true
+                    font.italic: true
+                }
+            }
+            TextArea {
+                id: message
+                Layout.fillWidth: true
+                readOnly: true
+                text: dialog.text
+                wrapMode: TextInput.WordWrap
+                textFormat: TextEdit.RichText
+                background: Rectangle {
+                    color: 'transparent'
+                }
+            }
+        }
+    }
+}
diff --git a/electrum/gui/qml/components/main.qml b/electrum/gui/qml/components/main.qml
index 55711c57d..298c4010f 100644
--- a/electrum/gui/qml/components/main.qml
+++ b/electrum/gui/qml/components/main.qml
@@ -361,6 +361,14 @@ ApplicationWindow
         }
     }
 
+    property alias helpDialog: _helpDialog
+    Component {
+        id: _helpDialog
+        HelpDialog {
+            onClosed: destroy()
+        }
+    }
+
     property alias passwordDialog: _passwordDialog
     Component {
         id: _passwordDialog