Merge bitcoin-core#343: Ask before opening external links

726bfa2 qml: introduce external link warning popup (jarolrod) 90d6a7e qml: remove implicitWidth from Continue & OutlineButton (jarolrod) Pull request description: Introduces an external link confirm popup window that prompts the user to acknowledge that they really want to visit the external link. This is based off the [design file](https://www.figma.com/file/ek8w3n3upbluw5UL2lGhRx/Bitcoin-Core-App-Design?type=design&node-id=6265-24513&t=PyRCN7AM9KdhuP8x-4) This contains a menu bar with a title, but is missing the close button. It is also missing the "Don't ask again" button. These require some more conversation and can be addressed in a follow-up. This deviates from the design file in providing a mobile layout that positions the buttons in a column layout instead of a rowlayout. cc @GBKS @mouxdesign | Desktop Layout | Mobile Layout | | -------------- | ------------- | | <img width="752" alt="Screen Shot 2023-06-03 at 2 11 30 AM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/ac1a7c81-d0c0-4564-9efb-27d2410348a0"> | <img width="752" alt="Screen Shot 2023-06-03 at 2 12 43 AM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/3bc3fe9d-2208-4587-b871-2313b1984d57"> | [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/unsecure_win_gui.zip?branch=pull/343) [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/unsecure_mac_gui.zip?branch=pull/343) [![Apple Silicon macOS](https://img.shields.io/badge/OS-Apple%20Silicon%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos_arm64/unsecure_mac_arm64_gui.zip?branch=pull/343) [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/unsecure_android_apk.zip?branch=pull/343) [![ARM32 Android](https://img.shields.io/badge/OS-Android%2032bit-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android32/unsecure_android_32bit_apk.zip?branch=pull/343) ACKs for top commit: pablomartin4btc: re ACK 726bfa2 Tree-SHA512: 4424dbdf5d54f80af49258c270a9953d7465b0093bf01ef32b89df25d956f280521ea3ee8a69cdfe26ed5633eab68e0a068afd5c860d044947a61022d2a11f86
pablomartin4btc · Jan 14, 2024 · be965bf · be965bf
2 parents 58f8d44 + 726bfa2
commit be965bf
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 6 deletions.
diff --git a/src/Makefile.qt.include b/src/Makefile.qt.include
@@ -347,6 +347,7 @@ QML_RES_QML = \
   qml/components/ConnectionOptions.qml \
   qml/components/ConnectionSettings.qml \
   qml/components/DeveloperOptions.qml \
+  qml/components/ExternalPopup.qml \
   qml/components/PeersIndicator.qml \
   qml/components/NetworkTrafficGraph.qml \
   qml/components/NetworkIndicator.qml \

diff --git a/src/qml/bitcoin_qml.qrc b/src/qml/bitcoin_qml.qrc
@@ -9,6 +9,7 @@
         <file>components/ConnectionSettings.qml</file>
         <file>components/PeersIndicator.qml</file>
         <file>components/DeveloperOptions.qml</file>
+        <file>components/ExternalPopup.qml</file>
         <file>components/NetworkTrafficGraph.qml</file>
         <file>components/NetworkIndicator.qml</file>
         <file>components/ProxySettings.qml</file>

diff --git a/src/qml/components/AboutOptions.qml b/src/qml/components/AboutOptions.qml
@@ -18,7 +18,7 @@ ColumnLayout {
             description: "bitcoincore.org"
             link: "https://bitcoincore.org"
         }
-        onClicked: loadedItem.clicked()
+        onClicked: openPopup(loadedItem.link)
     }
     Separator { Layout.fillWidth: true }
     Setting {
@@ -30,7 +30,7 @@ ColumnLayout {
             description: "github.com/bitcoin/bitcoin"
             link: "https://github.com/bitcoin/bitcoin"
         }
-        onClicked: loadedItem.clicked()
+        onClicked: openPopup(loadedItem.link)
     }
     Separator { Layout.fillWidth: true }
     Setting {
@@ -42,7 +42,7 @@ ColumnLayout {
             description: "MIT"
             link: "https://opensource.org/licenses/MIT"
         }
-        onClicked: loadedItem.clicked()
+        onClicked: openPopup(loadedItem.link)
     }
     Separator { Layout.fillWidth: true }
     Setting {
@@ -57,7 +57,7 @@ ColumnLayout {
             iconWidth: 18
             iconHeight: 18
         }
-        onClicked: loadedItem.clicked()
+        onClicked: openPopup(loadedItem.link)
     }
     Separator { Layout.fillWidth: true }
     Setting {
@@ -72,4 +72,14 @@ ColumnLayout {
             aboutSwipe.incrementCurrentIndex()
         }
     }
+    ExternalPopup {
+        id: confirmPopup
+        anchors.centerIn: Overlay.overlay
+        width: parent.width
+    }
+
+    function openPopup(link) {
+        confirmPopup.link = link
+        confirmPopup.open()
+    }
 }
diff --git a/src/qml/components/ExternalPopup.qml b/src/qml/components/ExternalPopup.qml
@@ -0,0 +1,114 @@
+// Copyright (c) 2023 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Qt.labs.settings 1.0
+import org.bitcoincore.qt 1.0
+import "../controls"
+
+Popup {
+    id: externalConfirmPopup
+    property string link: ""
+    modal: true
+    padding: 0
+
+    background: Rectangle {
+        color: Theme.color.background
+        radius: 10
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: 0
+
+        NavigationBar {
+            Layout.preferredHeight: 55
+            middleDetail: Header {
+                Layout.fillWidth: true
+                header: qsTr("External Link")
+                headerBold: true
+                headerSize: 24
+            }
+        }
+
+        Separator {
+            Layout.fillWidth: true
+        }
+
+        ColumnLayout {
+            id: popupContent
+            Layout.fillWidth: true
+            Layout.rightMargin: 20
+            Layout.leftMargin: 20
+            Layout.topMargin: 20
+            Layout.bottomMargin: 20
+            spacing: 30
+            Header {
+                Layout.fillWidth: true
+                header: qsTr("Do you want to open the following website in your browser?")
+                headerBold: false
+                headerSize: 18
+                description: ("\"" + externalConfirmPopup.link + "\"")
+                descriptionMargin: 3
+            }
+            Loader {
+                id: layoutLoader
+                Layout.fillWidth: true
+                sourceComponent: AppMode.isDesktop ? desktopLayout : mobileLayout
+            }
+        }
+    }
+
+    Component {
+        id: desktopLayout
+        RowLayout {
+            Layout.fillWidth: true
+            spacing: 15
+            OutlineButton {
+                text: qsTr("Cancel")
+                Layout.fillWidth: true
+                Layout.minimumWidth: 150
+                onClicked: {
+                    externalConfirmPopup.close()
+                }
+            }
+            ContinueButton {
+                text: qsTr("Ok")
+                Layout.fillWidth: true
+                Layout.minimumWidth: 150
+                onClicked: {
+                    Qt.openUrlExternally(externalConfirmPopup.link)
+                    externalConfirmPopup.close()
+                }
+            }
+        }
+    }
+
+    Component {
+        id: mobileLayout
+        ColumnLayout {
+            Layout.fillWidth: true
+            spacing: 15
+            OutlineButton {
+                text: qsTr("Cancel")
+                Layout.fillWidth: true
+                Layout.minimumWidth: 150
+                onClicked: {
+                    externalConfirmPopup.close()
+                }
+            }
+            ContinueButton {
+                text: qsTr("Ok")
+                Layout.fillWidth: true
+                Layout.minimumWidth: 150
+                onClicked: {
+                    Qt.openUrlExternally(externalConfirmPopup.link)
+                    externalConfirmPopup.close()
+                }
+            }
+        }
+    }
+}
diff --git a/src/qml/controls/ContinueButton.qml b/src/qml/controls/ContinueButton.qml
@@ -17,7 +17,6 @@ Button {
     background: Rectangle {
         id: bg
         implicitHeight: 46
-        implicitWidth: 300
         color: Theme.color.orange
         radius: 5
 

diff --git a/src/qml/controls/OutlineButton.qml b/src/qml/controls/OutlineButton.qml
@@ -18,7 +18,6 @@ Button {
     background: Rectangle {
         id: bg
         implicitHeight: 46
-        implicitWidth: 340
         color: Theme.color.background
         radius: 5
         border {