transfer v2 + checkbox

10 years ago · 5085aa3a64
parent f4279a9800
commit 5085aa3a64
9 changed files with 286 additions and 6 deletions
--- a/bitmonero.pro.user
+++ b/bitmonero.pro.user
@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE QtCreatorProject>
-<!-- Written by QtCreator 3.1.2, 2014-07-10T20:07:14. -->
+<!-- Written by QtCreator 3.1.2, 2014-07-11T00:19:38. -->
 <qtcreator>
 <data>
  <variable>ProjectExplorer.Project.ActiveTarget</variable>
@ -54,8 +54,8 @@
 <data>
  <variable>ProjectExplorer.Project.Target.0</variable>
  <valuemap type="QVariantMap">
-   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop Qt 5.3.0 MinGW 32bit</value>
-   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop Qt 5.3.0 MinGW 32bit</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop Qt 5.3 MinGW 32bit</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop Qt 5.3 MinGW 32bit</value>
   <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">qt.53.win32_mingw482_kit</value>
   <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">0</value>
   <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value>
--- a/components/CheckBox.qml
+++ b/components/CheckBox.qml
@ -0,0 +1,54 @@
+import QtQuick 2.0
+
+Item {
+    id: checkBox
+    property alias text: label.text
+    property bool checked: false
+    signal clicked()
+    height: 25
+    width: label.x + label.width
+    clip: true
+
+    Rectangle {
+        anchors.left: parent.left
+        height: parent.height - 1
+        width: 25
+        radius: 4
+        y: 0
+        color: "#DBDBDB"
+    }
+
+    Rectangle {
+        anchors.left: parent.left
+        height: parent.height - 1
+        width: 25
+        radius: 4
+        y: 1
+        color: "#FFFFFF"
+
+        Image {
+            anchors.centerIn: parent
+            source: checkBox.checked ? "../images/checkedIcon.png" :
+                                       "../images/uncheckedIcon.png"
+        }
+    }
+
+    Text {
+        id: label
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 25 + 12
+        font.family: "Arial"
+        font.pixelSize: 14
+        font.letterSpacing: -1
+        color: "#525252"
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            checkBox.checked = !checkBox.checked
+            checkBox.clicked()
+        }
+    }
+}
--- a/components/Label.qml
+++ b/components/Label.qml
@ -4,8 +4,10 @@ Item {
    id: item
    property alias text: label.text
    property alias color: label.color
+    property alias textFormat: label.textFormat
    property string tipText: ""
    property int fontSize: 12
+    signal linkActivated()
    width: icon.x + icon.width
    height: icon.height

@ -17,6 +19,7 @@ Item {
        font.family: "Arial"
        font.pixelSize: parent.fontSize
        color: "#555555"
+        onLinkActivated: item.linkActivated()
    }

    Image {
--- a/components/PrivacyLevel.qml
+++ b/components/PrivacyLevel.qml
@ -0,0 +1,123 @@
+import QtQuick 2.0
+
+Item {
+    id: item
+    property int fillLevel: 0
+    height: 70
+    clip: true
+
+    Rectangle {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        height: 24
+        radius: 4
+        color: "#DBDBDB"
+    }
+
+    Rectangle {
+        id: bar
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.topMargin: 1
+        height: 24
+        radius: 4
+        color: "#FFFFFF"
+
+        Rectangle {
+            id: fillRect
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.margins: 4
+            radius: 2
+            color: {
+                if(item.fillLevel < 3) return "#FF6C3C"
+                if(item.fillLevel < repeater.count - 1) return "#FFE00A"
+                return "#36B25C"
+            }
+            width: row.x
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            function positionBar() {
+                var xDiff = 999999
+                var index = -1
+                for(var i = 0; i < repeater.count; ++i) {
+                    var tmp = Math.abs(repeater.modelItems[i].x + row.x - mouseX)
+                    if(tmp < xDiff) {
+                        xDiff = tmp
+                        index = i
+                    }
+                }
+
+                if(index !== -1) {
+                    fillRect.width = Qt.binding(function(){ return repeater.modelItems[index].x + row.x; })
+                    item.fillLevel = index
+                }
+            }
+
+            onClicked: positionBar()
+            onMouseXChanged: positionBar()
+        }
+    }
+
+    Row {
+        id: row
+        anchors.right: bar.right
+        anchors.rightMargin: 8
+        anchors.top: bar.bottom
+        anchors.topMargin: -1
+        spacing: ((bar.width - 8) / 2) / 10
+
+        Repeater {
+            id: repeater
+            model: 14
+            property var modelItems: new Array()
+
+            delegate: Item {
+                id: delegate
+                width: 1
+                height: 48
+                property bool mainTick: index === 0 || index === 3 || index === repeater.count - 1
+
+                Component.onCompleted: repeater.modelItems[index] = delegate
+
+                Image {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.top: parent.top
+                    visible: parent.mainTick
+                    source: "../images/privacyTick.png"
+
+                    Text {
+                        anchors.right: parent.right
+                        anchors.rightMargin: 12
+                        anchors.bottom: parent.bottom
+                        anchors.bottomMargin: 2
+                        font.family: "Arial"
+                        font.bold: true
+                        font.pixelSize: 12
+                        color: "#4A4949"
+                        text: {
+                            if(index === 0) return qsTr("LOW")
+                            if(index === 3) return qsTr("MEDIUM")
+                            if(index === repeater.count - 1) return qsTr("HIGH")
+                            return ""
+                        }
+                    }
+                }
+
+                Rectangle {
+                    anchors.top: parent.top
+                    anchors.topMargin: 14
+                    width: 1
+                    color: "#DBDBDB"
+                    height: index === 8 ? 16 : 8
+                    visible: !parent.mainTick
+                }
+            }
+        }
+    }
+}
--- a/images/checkedIcon.png
+++ b/images/checkedIcon.png
--- a/images/privacyTick.png
+++ b/images/privacyTick.png
--- a/images/uncheckedIcon.png
+++ b/images/uncheckedIcon.png
--- a/pages/Transfer.qml
+++ b/pages/Transfer.qml
@ -10,20 +10,24 @@ Rectangle {
        anchors.top: parent.top
        anchors.margins: 17
        text: qsTr("Amount")
+        fontSize: 14
    }

    Label {
        id: transactionPriority
        anchors.top: parent.top
        anchors.topMargin: 17
+        fontSize: 14
        x: (parent.width - 17) / 2 + 17
        text: qsTr("Transaction prority")
    }

    Row {
        anchors.top: amountLabel.bottom
-        anchors.topMargin: 17
-        width: (parent.width - 17) / 2
+        anchors.topMargin: 5
+        anchors.left: parent.left
+        anchors.leftMargin: 7
+        width: (parent.width - 17) / 2 + 10
        Item {
            width: 37
            height: 37
@ -41,10 +45,11 @@ Rectangle {
    }

    StandardDropdown {
+        id: priorityDropdown
        anchors.top: transactionPriority.bottom
        anchors.right: parent.right
        anchors.rightMargin: 17
-        anchors.topMargin: 17
+        anchors.topMargin: 5
        anchors.left: transactionPriority.left
        shadowReleasedColor: "#FF4304"
        shadowPressedColor: "#B32D00"
@ -52,4 +57,94 @@ Rectangle {
        pressedColor: "#FF4304"
        z: 1
    }
+
+    Label {
+        id: privacyLabel
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: priorityDropdown.bottom
+        anchors.leftMargin: 17
+        anchors.rightMargin: 17
+        anchors.topMargin: 30
+        fontSize: 14
+        text: qsTr("Privacy Level")
+    }
+
+    PrivacyLevel {
+        id: privacyLevelItem
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: privacyLabel.bottom
+        anchors.leftMargin: 17
+        anchors.rightMargin: 17
+        anchors.topMargin: 5
+    }
+
+    Label {
+        id: addressLabel
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: privacyLevelItem.bottom
+        anchors.leftMargin: 17
+        anchors.rightMargin: 17
+        anchors.topMargin: 30
+        fontSize: 14
+
+        textFormat: Text.RichText
+        text: qsTr("<style type='text/css'>a {text-decoration: none; color: #FF6C3C; font-size: 14px;}</style>\
+                    Address <font size='2'>  ( Type in  or select from </font> <a href='#'>Address</a><font size='2'> book )</font>")
+
+        onLinkActivated: console.log("link activated")
+    }
+
+    LineEdit {
+        id: addressLine
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: addressLabel.bottom
+        anchors.leftMargin: 17
+        anchors.rightMargin: 17
+        anchors.topMargin: 5
+    }
+
+    Label {
+        id: paymentLabel
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: addressLine.bottom
+        anchors.leftMargin: 17
+        anchors.rightMargin: 17
+        anchors.topMargin: 17
+        fontSize: 14
+        text: qsTr("Payment ID <font size='2'>( Optional )</font>")
+    }
+
+    Row {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: paymentLabel.bottom
+        anchors.leftMargin: 17
+        anchors.rightMargin: 17
+        anchors.topMargin: 5
+        spacing: 17
+
+        LineEdit {
+            width: 156
+        }
+
+        StandardButton {
+            id: sendButton
+            width: 60
+            text: qsTr("SEND")
+            shadowReleasedColor: "#FF4304"
+            shadowPressedColor: "#B32D00"
+            releasedColor: "#FF6C3C"
+            pressedColor: "#FF4304"
+        }
+
+        CheckBox {
+            text: qsTr("Add to Address book")
+            anchors.bottom: sendButton.bottom
+        }
+    }
 }
--- a/qml.qrc
+++ b/qml.qrc
@ -60,5 +60,10 @@
        <file>images/moneroIcon.png</file>
        <file>components/StandardDropdown.qml</file>
        <file>images/whiteDropIndicator.png</file>
+        <file>components/PrivacyLevel.qml</file>
+        <file>images/privacyTick.png</file>
+        <file>components/CheckBox.qml</file>
+        <file>images/checkedIcon.png</file>
+        <file>images/uncheckedIcon.png</file>
    </qresource>
 </RCC>