StandardDialog: make scrollable + close button

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,33 +90,40 @@ 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
+        Item {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            Layout.preferredHeight: 240 * scaleRatio
+
+            Flickable {
+                id: flickable
+                anchors.fill: parent
+                ScrollBar.vertical: ScrollBar { }
+
+                TextArea.flickable: TextArea {
+                    id: dialogContent
                     Layout.fillWidth: true
                     Layout.fillHeight: true
                     renderType: Text.QtRendering
@@ -142,11 +150,12 @@ 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