Transfer: redesign advanced options

1 files changed, 106 insertions, 0 deletions

diff --git a/components/AdvancedOptionsItem.qml b/components/AdvancedOptionsItem.qml
new file mode 100644
index 00000000..1efd55ce
--- /dev/null
+++ b/components/AdvancedOptionsItem.qml
@@ -0,0 +1,106 @@
+import QtQuick 2.9
+import QtQuick.Layouts 1.1
+import FontAwesome 1.0
+
+import "../components" as MoneroComponents
+
+RowLayout {
+    id: advancedOptionsItem
+    
+    property alias title: title.text
+    property alias button1: button1
+    property alias button2: button2
+    property alias button3: button3
+    property alias helpTextLarge: helpTextLarge
+    property alias helpTextSmall: helpTextSmall
+      
+    RowLayout {
+        id: titlecolumn
+        Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+        Layout.preferredWidth: 195
+        Layout.maximumWidth: 195
+        Layout.leftMargin: 10
+
+        MoneroComponents.Label {
+            id: title
+            fontSize: 14
+        }
+
+        MoneroComponents.Label {
+            id: iconLabel
+            fontSize: 12
+            text: FontAwesome.questionCircle
+            fontFamily: FontAwesome.fontFamily
+            opacity: 0.3
+            MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: helpText.visible = !helpText.visible
+                onEntered: parent.opacity = 0.4
+                onExited: parent.opacity = 0.3
+            }  
+        }
+        
+        Rectangle {
+            id: separator
+            Layout.fillWidth: true
+            height: 10
+            color: "transparent"
+        }
+    }
+
+    ColumnLayout {
+        Layout.fillWidth: false
+        Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+        spacing: 4
+                
+        RowLayout {
+            Layout.fillWidth: false
+            spacing: 12
+            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+            
+            StandardButton {
+                id: button1
+                small: true
+                visible: button1.text
+            }
+    
+            StandardButton {
+                id: button2
+                small: true
+                visible: button2.text
+            }
+            
+            StandardButton {
+                id: button3
+                small: true
+                visible: button3.text
+            }
+        }
+        
+        ColumnLayout {
+            id: helpText
+            visible: false     
+            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+            
+            MoneroComponents.TextPlain {
+                id: helpTextLarge
+                visible: helpTextLarge.text
+                font.family: MoneroComponents.Style.fontRegular.name
+                font.pixelSize: 13
+                color: MoneroComponents.Style.defaultFontColor
+            }
+            
+            MoneroComponents.TextPlain {
+                id: helpTextSmall
+                visible: helpTextSmall.text
+                Layout.leftMargin: 5
+                textFormat: Text.RichText
+                font.family: MoneroComponents.Style.fontRegular.name
+                font.pixelSize: 12
+                color: MoneroComponents.Style.defaultFontColor
+            }
+        }
+    }
+}