History page v1

6 files changed, 476 insertions, 15 deletions

diff --git a/bitmonero.pro.user b/bitmonero.pro.user
index 82647009..726a609c 100644
--- 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-16T14:38:55. -->
+<!-- Written by QtCreator 3.1.2, 2014-07-16T18:04:16. -->
 <qtcreator>
  <data>
   <variable>ProjectExplorer.Project.ActiveTarget</variable>
diff --git a/components/HistoryTable.qml b/components/HistoryTable.qml
new file mode 100644
index 00000000..c280fa10
--- /dev/null
+++ b/components/HistoryTable.qml
@@ -0,0 +1,217 @@
+import QtQuick 2.0
+import moneroComponents 1.0
+
+ListView {
+    id: listView
+    clip: true
+    boundsBehavior: ListView.StopAtBounds
+
+    property var previousItem
+    delegate: Rectangle {
+        id: delegate
+        height: 90
+        width: listView.width
+        color: index % 2 ? "#F8F8F8" : "#FFFFFF"
+        function collapseDropdown() { dropdown.expanded = false }
+
+        Row {
+            id: row1
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.topMargin: 14
+
+            Rectangle {
+                id: dot
+                width: 14
+                height: width
+                radius: width / 2
+                color: out ? "#FF4F41" : "#36B05B"
+            }
+
+            Item { //separator
+                width: 12
+                height: 14
+            }
+
+            Text {
+                id: descriptionText
+                width: text.length ? (descriptionArea.containsMouse ? parent.width - x - 12 : 120) : 0
+                anchors.verticalCenter: dot.verticalCenter
+                font.family: "Arial"
+                font.bold: true
+                font.pixelSize: 19
+                color: "#444444"
+                elide: Text.ElideRight
+                text: description
+
+                MouseArea {
+                    id: descriptionArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                }
+            }
+
+            Item { //separator
+                width: descriptionText.width ? 12 : 0
+                height: 14
+                visible: !descriptionArea.containsMouse
+            }
+
+            Text {
+                id: addressText
+                anchors.verticalCenter: dot.verticalCenter
+                width: parent.width - x - 12
+                elide: Text.ElideRight
+                font.family: "Arial"
+                font.pixelSize: 14
+                color: "#545454"
+                text: address
+                visible: !descriptionArea.containsMouse
+            }
+        }
+
+        Row {
+            anchors.left: parent.left
+            anchors.top: row1.bottom
+            anchors.topMargin: 8
+            spacing: 12
+
+            Item { //separator
+                width: 14
+                height: 14
+            }
+
+            Column {
+                anchors.top: parent.top
+                width: 215
+
+                Text {
+                    anchors.left: parent.left
+                    font.family: "Arial"
+                    font.pixelSize: 12
+                    color: "#545454"
+                    text: qsTr("Date")
+                }
+
+                Row {
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    spacing: 33
+
+                    Text {
+                        font.family: "Arial"
+                        font.pixelSize: 18
+                        font.letterSpacing: -1
+                        color: "#000000"
+                        text: date
+                    }
+
+                    Text {
+                        font.family: "Arial"
+                        font.pixelSize: 18
+                        font.letterSpacing: -1
+                        color: "#000000"
+                        text: time
+                    }
+                }
+            }
+
+            Column {
+                anchors.top: parent.top
+                width: 148
+
+                Text {
+                    anchors.left: parent.left
+                    font.family: "Arial"
+                    font.pixelSize: 12
+                    color: "#545454"
+                    text: qsTr("Amount")
+                }
+
+                Text {
+                    font.family: "Arial"
+                    font.pixelSize: 18
+                    font.letterSpacing: -1
+                    color: "#000000"
+                    text: amount
+                }
+            }
+
+            Column {
+                anchors.top: parent.top
+                width: 148
+
+                Text {
+                    anchors.left: parent.left
+                    font.family: "Arial"
+                    font.pixelSize: 12
+                    color: "#545454"
+                    text: qsTr("Balance")
+                }
+
+                Row {
+                    spacing: 2
+                    Text {
+                        anchors.bottom: parent.bottom
+                        anchors.bottomMargin: 3
+                        font.family: "Arial"
+                        font.pixelSize: 16
+                        color: out ? "#FF4F41" : "#36B05B"
+                        text: out ? "↓" : "↑"
+                    }
+
+                    Text {
+                        anchors.bottom: parent.bottom
+                        font.family: "Arial"
+                        font.pixelSize: 18
+                        font.letterSpacing: -1
+                        color: out ? "#FF4F41" : "#36B05B"
+                        text: balance
+                    }
+                }
+            }
+        }
+
+        ListModel {
+            id: dropModel
+            ListElement { name: "<b>Copy address to clipboard</b>"; icon: "../images/dropdownCopy.png" }
+            ListElement { name: "<b>Add to address book</b>"; icon: "../images/dropdownAdd.png" }
+            ListElement { name: "<b>Send to same destination</b>"; icon: "../images/dropdownSend.png" }
+            ListElement { name: "<b>Find similar transactions</b>"; icon: "../images/dropdownSearch.png" }
+        }
+
+        Clipboard { id: clipboard }
+        TableDropdown {
+            id: dropdown
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 11
+            anchors.rightMargin: 5
+            dataModel: dropModel
+            z: 1
+            onExpandedChanged: {
+                if(listView.previousItem !== undefined && listView.previousItem !== delegate)
+                    listView.previousItem.collapseDropdown()
+                if(expanded) {
+                    listView.previousItem = delegate
+                    listView.currentIndex = index
+                    listView.currentItem.z = 2
+                }
+            }
+            onCollapsed: delegate.z = 0
+            onOptionClicked: {
+                if(option === 0)
+                    clipboard.setText(address)
+            }
+        }
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            height: 1
+            color: "#DBDBDB"
+        }
+    }
+}
diff --git a/components/StandardDropdown.qml b/components/StandardDropdown.qml
index 5a490c10..40926887 100644
--- a/components/StandardDropdown.qml
+++ b/components/StandardDropdown.qml
@@ -2,6 +2,7 @@ import QtQuick 2.0
 
 Item {
     id: dropdown
+    property alias dataModel: repeater.model
     property string shadowPressedColor
     property string shadowReleasedColor
     property string pressedColor
@@ -154,13 +155,6 @@ Item {
             NumberAnimation { duration: 100; easing.type: Easing.InQuad }
         }
 
-        ListModel {
-            id: testModel
-            ListElement { column1: "LOW"; column2: "( fee: 0.0002 )" }
-            ListElement { column1: "MEDIUM"; column2: "( fee: 0.0004 )" }
-            ListElement { column1: "HIGH"; column2: "( fee: 0.0008 )" }
-        }
-
         Column {
             id: column
             anchors.left: parent.left
@@ -170,7 +164,6 @@ Item {
 
             Repeater {
                 id: repeater
-                model: testModel
 
                 delegate: Rectangle {
                     anchors.left: parent.left
diff --git a/pages/History.qml b/pages/History.qml
index dd5a720f..682a437c 100644
--- a/pages/History.qml
+++ b/pages/History.qml
@@ -20,40 +20,283 @@ Rectangle {
     }
 
     Label {
-        id: paymentIdText
+        id: addressLabel
         anchors.left: parent.left
         anchors.top: filterHeaderText.bottom
         anchors.leftMargin: 17
         anchors.topMargin: 17
-        text: qsTr("Payment ID")
+        text: qsTr("Address")
         fontSize: 14
         tipText: qsTr("<b>Tip tekst test</b>")
     }
 
     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: paymentIdLabel
+        anchors.left: parent.left
+        anchors.top: addressLine.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 17
+        text: qsTr("Payment ID <font size='2'>(Optional)</font>")
+        fontSize: 14
+        tipText: qsTr("<b>Payment ID</b><br/><br/>A unique user name used in<br/>the address book. It is not a<br/>transfer of information sent<br/>during thevtransfer")
+    }
+
+    LineEdit {
         id: paymentIdLine
         anchors.left: parent.left
-        anchors.top: paymentIdText.bottom
+        anchors.right: parent.right
+        anchors.top: paymentIdLabel.bottom
         anchors.leftMargin: 17
+        anchors.rightMargin: 17
         anchors.topMargin: 5
-        width: 156
     }
 
     Label {
-        id: dateFromText
+        id: descriptionLabel
         anchors.left: parent.left
         anchors.top: paymentIdLine.bottom
         anchors.leftMargin: 17
         anchors.topMargin: 17
+        text: qsTr("Description <font size='2'>(Local database)</font>")
+        fontSize: 14
+        tipText: qsTr("<b>Tip tekst test</b><br/><br/>test line 2")
+    }
+
+    LineEdit {
+        id: descriptionLine
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: descriptionLabel.bottom
+        anchors.leftMargin: 17
+        anchors.rightMargin: 17
+        anchors.topMargin: 5
+    }
+
+    Label {
+        id: dateFromText
+        anchors.left: parent.left
+        anchors.top: descriptionLine.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 17
+        width: 156
         text: qsTr("Date from")
         fontSize: 14
         tipText: qsTr("<b>Tip tekst test</b>")
     }
 
     DatePicker {
+        id: fromDatePicker
         anchors.left: parent.left
         anchors.top: dateFromText.bottom
         anchors.leftMargin: 17
         anchors.topMargin: 5
+        z: 2
+    }
+
+    Label {
+        id: dateToText
+        anchors.left: dateFromText.right
+        anchors.top: descriptionLine.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 17
+        text: qsTr("To")
+        fontSize: 14
+        tipText: qsTr("<b>Tip tekst test</b>")
+    }
+
+    DatePicker {
+        id: toDatePicker
+        anchors.left: fromDatePicker.right
+        anchors.top: dateToText.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 5
+        z: 2
+    }
+
+    StandardButton {
+        id: filterButton
+        anchors.bottom: toDatePicker.bottom
+        anchors.left: toDatePicker.right
+        anchors.leftMargin: 17
+        width: 60
+        text: qsTr("FILTER")
+        shadowReleasedColor: "#4D0051"
+        shadowPressedColor: "#2D002F"
+        releasedColor: "#6B0072"
+        pressedColor: "#4D0051"
+    }
+
+    Text {
+        anchors.verticalCenter: filterButton.verticalCenter
+        anchors.left: filterButton.right
+        anchors.leftMargin: 17
+        font.family: "Arial"
+        font.pixelSize: 12
+        color: "#545454"
+        textFormat: Text.RichText
+        text: qsTr("<style type='text/css'>a {text-decoration: none; color: #6B0072; font-size: 14px;}</style>\
+                    looking for <a href='#'>Advance filtering?</a>")
+        font.underline: false
+        onLinkActivated: tableRect.height = tableRect.collapsedHeight
+    }
+
+    Label {
+        id: transactionTypeText
+        anchors.left: parent.left
+        anchors.top: fromDatePicker.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 17
+        width: 156
+        text: qsTr("Type of transation")
+        fontSize: 14
+        tipText: qsTr("<b>Tip tekst test</b>")
+    }
+
+    ListModel {
+        id: transactionsModel
+        ListElement { column1: "SENT"; column2: "" }
+        ListElement { column1: "RECIVE"; column2: "" }
+        ListElement { column1: "ON HOLD"; column2: "" }
+    }
+
+    StandardDropdown {
+        id: transactionTypeDropdown
+        anchors.left: parent.left
+        anchors.top: transactionTypeText.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 5
+        width: 156
+        shadowReleasedColor: "#4D0051"
+        shadowPressedColor: "#2D002F"
+        releasedColor: "#6B0072"
+        pressedColor: "#4D0051"
+        dataModel: transactionsModel
+        z: 1
+    }
+
+    Label {
+        id: amountFromText
+        anchors.left: transactionTypeText.right
+        anchors.top: fromDatePicker.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 17
+        width: 156
+        text: qsTr("Amount from")
+        fontSize: 14
+        tipText: qsTr("<b>Tip tekst test</b>")
+    }
+
+    LineEdit {
+        id: amountFromLine
+        anchors.left: transactionTypeDropdown.right
+        anchors.top: amountFromText.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 5
+        width: 156
+    }
+
+    Label {
+        id: amountToText
+        anchors.left: amountFromText.right
+        anchors.top: fromDatePicker.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 17
+        width: 156
+        text: qsTr("To")
+        fontSize: 14
+        tipText: qsTr("<b>Tip tekst test</b>")
+    }
+
+    LineEdit {
+        id: amountToLine
+        anchors.left: amountFromLine.right
+        anchors.top: amountToText.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 5
+        width: 156
+    }
+
+    Item {
+        id: expandItem
+        property bool expanded: false
+
+        anchors.right: parent.right
+        anchors.bottom: tableRect.top
+        width: 34
+        height: 34
+
+        Image {
+            anchors.centerIn: parent
+            source: "../images/expandTable.png"
+            rotation: parent.expanded ? 180 : 0
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                parent.expanded = !parent.expanded
+                tableRect.height = parent.expanded ? tableRect.expandedHeight : tableRect.middleHeight
+            }
+        }
+    }
+
+    Rectangle {
+        id: tableRect
+        property int expandedHeight: parent.height - filterHeaderText.y - filterHeaderText.height - 17
+        property int middleHeight: parent.height - fromDatePicker.y - fromDatePicker.height - 17
+        property int collapsedHeight: parent.height - transactionTypeDropdown.y - transactionTypeDropdown.height - 17
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        color: "#FFFFFF"
+        z: 1
+
+        height: middleHeight
+        onHeightChanged: {
+            if(height === middleHeight) z = 1
+            else if(height === collapsedHeight) z = 0
+            else z = 3
+        }
+
+        Behavior on height {
+            NumberAnimation { duration: 200; easing.type: Easing.InQuad }
+        }
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            height: 1
+            color: "#DBDBDB"
+        }
+
+        ListModel {
+            id: columnsModel
+            ListElement { columnName: "Address"; columnWidth: 148 }
+            ListElement { columnName: "Payment ID"; columnWidth: 148 }
+            ListElement { columnName: "Description"; columnWidth: 148 }
+        }
+
+        TableHeader {
+            id: header
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.topMargin: 17
+            anchors.leftMargin: 14
+            anchors.rightMargin: 14
+            dataModel: columnsModel
+            onSortRequest: console.log("column: " + column + " desc: " + desc)
+        }
     }
 }
diff --git a/pages/Transfer.qml b/pages/Transfer.qml
index a20cf897..4841b2ec 100644
--- a/pages/Transfer.qml
+++ b/pages/Transfer.qml
@@ -46,6 +46,13 @@ Rectangle {
         }
     }
 
+    ListModel {
+        id: priorityModel
+        ListElement { column1: "LOW"; column2: "( fee: 0.0002 )" }
+        ListElement { column1: "MEDIUM"; column2: "( fee: 0.0004 )" }
+        ListElement { column1: "HIGH"; column2: "( fee: 0.0008 )" }
+    }
+
     StandardDropdown {
         id: priorityDropdown
         anchors.top: transactionPriority.bottom
@@ -57,6 +64,7 @@ Rectangle {
         shadowPressedColor: "#B32D00"
         releasedColor: "#FF6C3C"
         pressedColor: "#FF4304"
+        dataModel: priorityModel
         z: 1
     }
 
@@ -91,7 +99,6 @@ Rectangle {
         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>")
diff --git a/qml.qrc b/qml.qrc
index cc2205cd..1d21c1f0 100644
--- a/qml.qrc
+++ b/qml.qrc
@@ -71,5 +71,6 @@
         <file>images/dropdownCopy.png</file>
         <file>images/expandTable.png</file>
         <file>images/dropdownDel.png</file>
+        <file>components/HistoryTable.qml</file>
     </qresource>
 </RCC>