https://trello.com/c/X0neSDZ0/34-changes-to-history-tab-columns-drop-down-etc-as-discussed

https://trello.com/c/uksby2dk/43-create-history-page

bitmonero.pro.user

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE QtCreatorProject>
-<!-- Written by QtCreator 3.1.2, 2014-07-16T18:04:16. -->
+<!-- Written by QtCreator 3.1.2, 2014-07-16T19:37:13. -->
 <qtcreator>
  <data>
   <variable>ProjectExplorer.Project.ActiveTarget</variable>

components/DatePicker.qml

@@ -110,6 +110,12 @@ Item {
                             return day < 10 ? "0" + day : day
                         }
                     }
+                    onFocusChanged: {
+                        if(focus === false) {
+                            if(text.length === 0 || text === "0" || text === "00") text = "01"
+                            else if(text.length === 1) text = "0" + text
+                        }
+                    }
                 }
 
                 Text {
@@ -135,6 +141,12 @@ Item {
                             return month < 10 ? "0" + month : month
                         }
                     }
+                    onFocusChanged: {
+                        if(focus === false) {
+                            if(text.length === 0 || text === "0" || text === "00") text = "01"
+                            else if(text.length === 1) text = "0" + text
+                        }
+                    }
                 }
 
                 Text {
@@ -152,8 +164,16 @@ Item {
                     color: "#525252"
                     maximumLength: 4
                     horizontalAlignment: TextInput.AlignHCenter
-                    validator: IntValidator{bottom: 2000; top: 2100;}
+                    validator: IntValidator{bottom: 1000; top: 9999;}
                     text: if(datePicker.showCurrentDate) datePicker.currentDate.getFullYear()
+                    onFocusChanged: {
+                        if(focus === false) {
+                            var d = new Date()
+                            var y = d.getFullYear()
+                            if(text.length != 4 || text[0] === "0")
+                                text = y
+                        }
+                    }
                 }
 
             }

components/HistoryTable.qml

@@ -9,7 +9,7 @@ ListView {
     property var previousItem
     delegate: Rectangle {
         id: delegate
-        height: 90
+        height: 114
         width: listView.width
         color: index % 2 ? "#F8F8F8" : "#FFFFFF"
         function collapseDropdown() { dropdown.expanded = false }
@@ -71,10 +71,40 @@ ListView {
             }
         }
 
-        Row {
+        Text {
+            id: paymentLabel
             anchors.left: parent.left
             anchors.top: row1.bottom
-            anchors.topMargin: 8
+            anchors.topMargin: 4
+            anchors.leftMargin: 28
+
+            width: 118
+            font.family: "Arial"
+            font.pixelSize: 12
+            font.letterSpacing: -1
+            color: "#535353"
+            text: qsTr("Payment ID:")
+        }
+
+        Text {
+            anchors.bottom: paymentLabel.bottom
+            anchors.left: paymentLabel.right
+            anchors.right: parent.right
+            anchors.leftMargin: 12
+            anchors.rightMargin: 12
+
+            elide: Text.ElideRight
+            font.family: "Arial"
+            font.pixelSize: 13
+            font.letterSpacing: -1
+            color: "#545454"
+            text: paymentId
+        }
+
+        Row {
+            anchors.left: parent.left
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 11
             spacing: 12
 
             Item { //separator

pages/History.qml

@@ -282,8 +282,9 @@ Rectangle {
 
         ListModel {
             id: columnsModel
-            ListElement { columnName: "Address"; columnWidth: 148 }
+            ListElement { columnName: "Address"; columnWidth: 127 }
-            ListElement { columnName: "Payment ID"; columnWidth: 148 }
+            ListElement { columnName: "Date"; columnWidth: 100 }
+            ListElement { columnName: "Amount"; columnWidth: 148 }
             ListElement { columnName: "Description"; columnWidth: 148 }
         }
 
@@ -296,7 +297,41 @@ Rectangle {
             anchors.leftMargin: 14
             anchors.rightMargin: 14
             dataModel: columnsModel
+            offset: 20
             onSortRequest: console.log("column: " + column + " desc: " + desc)
         }
+
+        ListModel {
+            id: testModel
+            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 <font size='2'>AM</font>"; amount: "19301.<font size='2'>870709159241</font>"; balance: "0.<font size='2'>000709159241</font>"; description: "Client from Australia"; out: false }
+            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 <font size='2'>AM</font>"; amount: "19301.<font size='2'>870709159241</font>"; balance: "0.<font size='2'>000709159241</font>"; description: ""; out: true }
+            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 <font size='2'>AM</font>"; amount: "19301.<font size='2'>870709159241</font>"; balance: "0.<font size='2'>000709159241</font>"; description: ""; out: true }
+            ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 <font size='2'>AM</font>"; amount: "19301.<font size='2'>870709159241</font>"; balance: "0.<font size='2'>000709159241</font>"; description: ""; out: false }
+            ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 <font size='2'>AM</font>"; amount: "19301.<font size='2'>870709159241</font>"; balance: "0.<font size='2'>000709159241</font>"; description: "Client from Australia"; out: false }
+            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 <font size='2'>AM</font>"; amount: "19301.<font size='2'>870709159241</font>"; balance: "0.<font size='2'>000709159241</font>"; description: ""; out: false }
+            ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 <font size='2'>AM</font>"; amount: "19301.<font size='2'>870709159241</font>"; balance: "0.<font size='2'>000709159241</font>"; description: ""; out: false }
+            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 <font size='2'>AM</font>"; amount: "19301.<font size='2'>870709159241</font>"; balance: "0.<font size='2'>000709159241</font>"; description: ""; out: false }
+            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 <font size='2'>AM</font>"; amount: "19301.<font size='2'>870709159241</font>"; balance: "0.<font size='2'>000709159241</font>"; description: "Client from Australia"; out: false }
+            ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 <font size='2'>AM</font>"; amount: "19301.<font size='2'>870709159241</font>"; balance: "0.<font size='2'>000709159241</font>"; description: ""; out: false }
+        }
+
+        Scroll {
+            id: flickableScroll
+            anchors.rightMargin: -14
+            flickable: table
+            yPos: table.y
+        }
+
+        HistoryTable {
+            id: table
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: header.bottom
+            anchors.bottom: parent.bottom
+            anchors.leftMargin: 14
+            anchors.rightMargin: 14
+            onContentYChanged: flickableScroll.flickableContentYChanged()
+            model: testModel
+        }
     }
 }