StandardDialog: make scrollable + close button

1 files changed, 75 insertions, 39 deletions

diff --git a/components/StandardDialog.qml b/components/StandardDialog.qml
index f1209721..15069a33 100644
--- a/components/StandardDialog.qml
+++ b/components/StandardDialog.qml
@@ -47,6 +47,7 @@ Rectangle {
     property alias textArea: dialogContent
     property alias okText: okButton.text
     property alias cancelText: cancelButton.text
+    property alias closeVisible: closeButton.visible
 
     property var icon
 
@@ -89,55 +90,63 @@ Rectangle {
     }
 
     // TODO: implement without hardcoding sizes
-    width: isMobile ? screenWidth : 520
-    height: isMobile ? screenHeight : 380
+    width: isMobile ? screenWidth : 520 * scaleRatio
+    height: isMobile ? screenHeight : 380 * scaleRatio
 
     ColumnLayout {
         id: mainLayout
-        spacing: 10
-        anchors { fill: parent; margins: 15 }
+        spacing: 10 * scaleRatio
+        anchors.fill: parent
+        anchors.margins: (isMobile? 17 : 20) * scaleRatio
 
         RowLayout {
             id: column
-            //anchors {fill: parent; margins: 16 }
             Layout.topMargin: 14 * scaleRatio
-            Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: true
 
             MoneroComponents.Label {
                 id: dialogTitle
-                horizontalAlignment: Text.AlignHCenter
                 fontSize: 18 * scaleRatio
                 fontFamily: "Arial"
                 color: MoneroComponents.Style.defaultFontColor
             }
-
         }
 
-        RowLayout {
-            TextArea {
-                id : dialogContent
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-                renderType: Text.QtRendering
-                font.family: MoneroComponents.Style.fontLight.name
-                textFormat: TextEdit.AutoText
-                readOnly: true
-                font.pixelSize: 14 * scaleRatio
-                selectByMouse: false
-                wrapMode: TextEdit.Wrap
-                color: MoneroComponents.Style.defaultFontColor
+        Item {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            Layout.preferredHeight: 240 * scaleRatio
 
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: {
-                        appWindow.showStatusMessage(qsTr("Double tap to copy"),3)
-                    }
-                    onDoubleClicked: {
-                        parent.selectAll()
-                        parent.copy()
-                        parent.deselect()
-                        console.log("copied to clipboard");
-                        appWindow.showStatusMessage(qsTr("Content copied to clipboard"),3)
+            Flickable {
+                id: flickable
+                anchors.fill: parent
+                ScrollBar.vertical: ScrollBar { }
+
+                TextArea.flickable: TextArea {
+                    id: dialogContent
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    renderType: Text.QtRendering
+                    font.family: MoneroComponents.Style.fontLight.name
+                    textFormat: TextEdit.AutoText
+                    readOnly: true
+                    font.pixelSize: 14 * scaleRatio
+                    selectByMouse: false
+                    wrapMode: TextEdit.Wrap
+                    color: MoneroComponents.Style.defaultFontColor
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            appWindow.showStatusMessage(qsTr("Double tap to copy"),3)
+                        }
+                        onDoubleClicked: {
+                            parent.selectAll()
+                            parent.copy()
+                            parent.deselect()
+                            console.log("copied to clipboard");
+                            appWindow.showStatusMessage(qsTr("Content copied to clipboard"),3)
+                        }
                     }
                 }
             }
@@ -146,7 +155,7 @@ Rectangle {
         // Ok/Cancel buttons
         RowLayout {
             id: buttons
-            spacing: 60
+            spacing: 60 * scaleRatio
             Layout.alignment: Qt.AlignHCenter
 
             MoneroComponents.StandardButton {
@@ -160,20 +169,47 @@ Rectangle {
 
             MoneroComponents.StandardButton {
                 id: okButton
-                text: qsTr("OK")
+                text: qsTr("OK") + translationManager.emptyString
                 KeyNavigation.tab: cancelButton
                 onClicked: {
                     root.close()
                     root.accepted()
-
                 }
             }
         }
     }
 
+    // close icon
+    Rectangle {
+        id: closeButton
+        anchors.top: parent.top
+        anchors.right: parent.right
+        width: 48 * scaleRatio
+        height: 48 * scaleRatio
+        color: "transparent"
+
+        Image {
+            anchors.centerIn: parent
+            width: 16 * scaleRatio
+            height: 16 * scaleRatio
+            source: "../images/close.png"
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                root.close()
+                root.rejected()
+            }
+            cursorShape: Qt.PointingHandCursor
+            onEntered: closeButton.color = "#262626";
+            onExited: closeButton.color = "transparent";
+        }
+    }
+
     // window borders
     Rectangle{
-        width: 1
+        width: 1 * scaleRatio
         color: MoneroComponents.Style.grey
         anchors.left: parent.left
         anchors.top: parent.top
@@ -181,7 +217,7 @@ Rectangle {
     }
 
     Rectangle{
-        width: 1
+        width: 1 * scaleRatio
         color: MoneroComponents.Style.grey
         anchors.right: parent.right
         anchors.top: parent.top
@@ -189,7 +225,7 @@ Rectangle {
     }
 
     Rectangle{
-        height: 1
+        height: 1 * scaleRatio
         color: MoneroComponents.Style.grey
         anchors.left: parent.left
         anchors.top: parent.top
@@ -197,7 +233,7 @@ Rectangle {
     }
 
     Rectangle{
-        height: 1
+        height: 1 * scaleRatio
         color: MoneroComponents.Style.grey
         anchors.left: parent.left
         anchors.bottom: parent.bottom