New history page, including the mobile version.

MiddlePanel.qml

@@ -49,6 +49,7 @@ Rectangle {
     property string unlockedBalanceLabelText: qsTr("Unlocked Balance") + translationManager.emptyString
     property string unlockedBalanceText
     property int minHeight: (appWindow.height > 800) ? appWindow.height : 800 * scaleRatio
+    property alias contentHeight: mainFlickable.contentHeight
 //    property int headerHeight: header.height
 
     property Transfer transferView: Transfer { }
@@ -111,7 +112,7 @@ Rectangle {
                 name: "History"
                 PropertyChanges { target: root; currentView: historyView }
                 PropertyChanges { target: historyView; model: appWindow.currentWallet ? appWindow.currentWallet.historyModel : null }
-                PropertyChanges { target: mainFlickable; contentHeight: minHeight }
+                PropertyChanges { target: mainFlickable; contentHeight: historyView.tableHeight + 220 * scaleRatio }
             }, State {
                 name: "Transfer"
                 PropertyChanges { target: root; currentView: transferView }

components/DatePicker.qml

@@ -29,18 +29,23 @@
 import QtQuick 2.2
 import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
+import "../components"
+import "." 1.0
+
 
 Item {
     id: datePicker
     property bool expanded: false
     property date currentDate
     property bool showCurrentDate: true
-    property color backgroundColor : "#FFFFFF"
+    property color backgroundColor : "#404040"
-    property color errorColor : "#FFDDDD"
+    property color errorColor : "red"
     property bool error: false
+    property alias inputLabel: inputLabel
 
-    height: 37
+    signal dateChanged();
-    width: 156
+
+    height: 50
 
     onExpandedChanged: if(expanded) appWindow.currentItem = datePicker
 
@@ -57,28 +62,48 @@ Item {
         return true
     }
 
+    Rectangle {
+        id: inputLabelRect
+        color: "transparent"
+        height: 22
+        width: parent.width
+
+        Text {
+            id: inputLabel
+            anchors.top: parent.top
+            anchors.left: parent.left
+            font.family: Style.fontRegular.name
+            font.pixelSize: 16
+            font.bold: false
+            textFormat: Text.RichText
+            color: Style.defaultFontColor
+
+            MouseArea {
+                anchors.fill: parent
+                acceptedButtons: Qt.NoButton
+                cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+            }
+        }
+    }
+
     Item {
         id: head
-        anchors.fill: parent
+        anchors.top: inputLabelRect.bottom
-        Rectangle {
+        anchors.topMargin: 6 * scaleRatio
-            anchors.left: parent.left
+        anchors.left: parent.left
-            anchors.right: parent.right
+        anchors.right: parent.right
-            height: parent.height
+        height: 28
-            //radius: 4
-            y: 0
-            color: "#DBDBDB"
-
-        }
 
         Rectangle {
+            anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
             height: parent.height - 1
             anchors.leftMargin: datePicker.expanded ? 1 : 0
             anchors.rightMargin: datePicker.expanded ? 1 : 0
-            //radius: 4
+            radius: 4
             y: 1
-            color: datePicker.error ? datePicker.errorColor : datePicker.backgroundColor
+            color: datePicker.backgroundColor
         }
 
         Item {
@@ -89,24 +114,18 @@ Item {
             anchors.margins: 4
             width: height
 
-            StandardButton {
-                id: button
-                anchors.fill: parent
-                icon: "../images/datePicker.png"
-                visible: !datePicker.expanded
-                onClicked: datePicker.expanded = true
-            }
-
             Image {
+                id: button
                 anchors.centerIn: parent
-                source: "../images/datePicker.png"
+                source: "../images/whiteDropIndicator.png"
-                visible: datePicker.expanded
+                rotation: datePicker.expanded ? 180 : 0
             }
 
             MouseArea {
                 anchors.fill: parent
-                enabled: datePicker.expanded
+                onClicked: datePicker.expanded = !datePicker.expanded
-                onClicked: datePicker.expanded = false
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
             }
         }
 
@@ -117,7 +136,7 @@ Item {
             anchors.rightMargin: 4
             height: 16
             width: 1
-            color: "#DBDBDB"
+            color: "#808080"
             visible: datePicker.expanded
         }
 
@@ -146,9 +165,9 @@ Item {
                 id: dayInput
                 readOnly: true
                 width: 22
-                font.family: "Arial"
+                font.family: Style.fontRegular.name
-                font.pixelSize: 18
+                font.pixelSize: 14
-                // color: "#525252"
+                color: datePicker.error ? errorColor : Style.defaultFontColor
                 maximumLength: 2
                 horizontalAlignment: TextInput.AlignHCenter
                 validator: IntValidator{bottom: 01; top: 31;}
@@ -169,19 +188,19 @@ Item {
             }
 
             Text {
-                font.family: "Arial"
+                font.family: Style.fontRegular.name
-                font.pixelSize: 18
+                font.pixelSize: 14
-                // color: "#525252"
+                color: datePicker.error ? errorColor : Style.defaultFontColor
-                text: "."
+                text: "-"
             }
 
             TextInput {
                 id: monthInput
                 readOnly: true
                 width: 22
-                font.family: "Arial"
+                font.family: Style.fontRegular.name
-                font.pixelSize: 18
+                font.pixelSize: 14
-                // color: "#525252"
+                color: datePicker.error ? errorColor : Style.defaultFontColor
                 maximumLength: 2
                 horizontalAlignment: TextInput.AlignHCenter
                 validator: IntValidator{bottom: 01; top: 12;}
@@ -201,18 +220,18 @@ Item {
             }
 
             Text {
-                font.family: "Arial"
+                font.family: Style.fontRegular.name
-                font.pixelSize: 18
+                font.pixelSize: 14
-                // color: "#525252"
+                color: datePicker.error ? errorColor : Style.defaultFontColor
-                text: "."
+                text: "-"
             }
 
             TextInput {
                 id: yearInput
                 width: 44
-                font.family: "Arial"
+                font.family: Style.fontRegular.name
-                font.pixelSize: 18
+                font.pixelSize: 14
-                /// color: "#525252"
+                color: datePicker.error ? errorColor : Style.defaultFontColor
                 maximumLength: 4
                 horizontalAlignment: TextInput.AlignHCenter
                 validator: IntValidator{bottom: 1000; top: 9999;}
@@ -268,6 +287,7 @@ Item {
                 gridVisible: false
                 background: Rectangle { color: "transparent" }
                 dayDelegate: Item {
+                    z: 8
                     implicitHeight: implicitWidth
                     implicitWidth: calendar.width / 7
 
@@ -304,6 +324,8 @@ Item {
                                     calendar.showNextMonth()
                                 else calendar.showPreviousMonth()
                             }
+
+                            dateChanged();
                         }
                     }
                 }

components/HistoryTable.qml

@@ -30,6 +30,7 @@ import QtQuick 2.0
 import moneroComponents.Clipboard 1.0
 import moneroComponents.AddressBookModel 1.0
 import "../components" as MoneroComponents
+import "." 1.0
 
 ListView {
     id: listView
@@ -65,11 +66,10 @@ ListView {
         return addressBookModel.data(idx, AddressBookModel.AddressBookDescriptionRole)
     }
 
-
     footer: Rectangle {
-        height: 127
+        height: 127 * scaleRatio
         width: listView.width
-        color: "#FFFFFF"
+        color: "transparent"
 
         Text {
             anchors.centerIn: parent
@@ -80,396 +80,370 @@ ListView {
         }
     }
 
+    function get_color(i){
+        if (i === 0){
+            return "green";
+        } else {
+            return "red";
+        }
+    }
+
     delegate: Rectangle {
         id: delegate
-        height: 144
+        property bool collapsed: index ? false : true
+        height: collapsed ? 180 * scaleRatio : 70 * scaleRatio
         width: listView.width
-        color: index % 2 ? "#F8F8F8" : "#FFFFFF"
+        color: "#CC000000"
-        z: listView.count - index
-        function collapseDropdown() { dropdown.expanded = false }
 
-        StandardButton {
+        function collapse(){
-            id: detailsButton
+            delegate.height = 180 * scaleRatio;
-            anchors.right:parent.right
-            anchors.rightMargin: 15
-            anchors.top: parent.top
-            anchors.topMargin: parent.height/2 - this.height/2
-            width: 80
-            fontSize: 14
-            text: qsTr("Details")
-            onClicked: {
-                var tx_key = currentWallet.getTxKey(hash)
-                var tx_note = currentWallet.getUserNote(hash)
-                var rings = currentWallet.getRings(hash)
-                if (rings)
-                    rings = rings.replace(/\|/g, '\n')
-                informationPopup.title = "Transaction details";
-                informationPopup.content = buildTxDetailsString(hash,paymentId,tx_key,tx_note,destinations, rings);
-                informationPopup.onCloseCallback = null
-                informationPopup.open();
-            }
         }
 
-
+        // borders
-
+        Rectangle{
-        Row {
-            id: row1
-            anchors.left: parent.left
             anchors.right: parent.right
             anchors.top: parent.top
-            anchors.topMargin: 14
+            anchors.bottom: parent.bottom
-            // -- direction indicator
+            width: 1
-            Rectangle {
+            color: "#404040"
-                id: dot
-                width: 14
-                height: width
-                radius: width / 2
-                color: isOut ? "#FF4F41" : "#36B05B"
-            }
-
-            Item { //separator
-                width: 12
-                height: 14
-            }
-
-            // -- description aka recepient name from address book (TODO)
-            /*
-            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
-            }
-            */
-            // -- address (in case outgoing transaction) - N/A in case of incoming
-            MoneroComponents.TextBlock {
-                id: addressText
-                anchors.verticalCenter: dot.verticalCenter
-                width: parent.width - x - 12
-                //elide: Text.ElideRight
-                font.family: "Arial"
-                font.pixelSize: 14
-                color: "#545454"
-                text: hash
-                // visible: !descriptionArea.containsMouse
-            }
         }
 
-        Row {
+        Rectangle{
-            // - Payment ID
-            id: row2
             anchors.left: parent.left
-            anchors.right: parent.right
             anchors.top: parent.top
-            anchors.topMargin: 40
+            anchors.bottom: parent.bottom
-            anchors.leftMargin: 26
+            width: collapsed ? 2 : 1
-
+            color: collapsed ? "#BBBBBB" : "#404040"
-            // -- "PaymentID" title
-            Text {
-                id: paymentLabel
-                width: 86
-                anchors.bottom: parent.bottom
-                font.family: "Arial"
-                font.pixelSize: 12
-                color: "#535353"
-                text: paymentId !== "" ? qsTr("Payment ID:")  + translationManager.emptyString : ""
-            }
-            // -- "PaymentID" value
-            MoneroComponents.TextBlock {
-                id: paymentIdValue
-                width: 136
-                anchors.bottom: parent.bottom
-                //elide: Text.ElideRight
-                font.family: "Arial"
-                font.pixelSize:13
-                color: "#545454"
-                text: paymentId
-
-            }
-            // Address book lookup
-            MoneroComponents.TextBlock {
-                id: addressBookLookupValue
-                width: 136
-                anchors.bottom: parent.bottom
-                //elide: Text.ElideRight
-                font.family: "Arial"
-                font.pixelSize:13
-                color: "#545454"
-                text: "(" + lookupPaymentID(paymentId) + ")"
-                visible: text !== "()"
-            }
         }
-        Row {
+
-            // block height row
+        Rectangle{
-            id: row3
-            anchors.left: parent.left
             anchors.right: parent.right
-            anchors.top: row2.bottom
+            anchors.bottom: parent.top
-            anchors.topMargin: rowSpacing
-            anchors.leftMargin: 26
-
-            // -- "BlockHeight" title
-            Text {
-                id: blockHeghtTitle
-                anchors.bottom: parent.bottom
-                width: 86
-                font.family: "Arial"
-                font.pixelSize: 12
-                color: "#535353"
-                text:  qsTr("BlockHeight:")  + translationManager.emptyString
-            }
-            // -- "BlockHeight" value
-            MoneroComponents.TextBlock {
-                width: 200
-                anchors.bottom: parent.bottom
-                //elide: Text.ElideRight
-                font.family: "Arial"
-                font.pixelSize: 13
-                color:  (confirmations < confirmationsRequired)? "#FF6C3C" : "#545454"
-                text: {
-                    if (!isPending)
-                        if(confirmations < confirmationsRequired)
-                            return blockHeight + " " + qsTr("(%1/%2 confirmations)").arg(confirmations).arg(confirmationsRequired)
-                        else
-                            return blockHeight
-                    if (!isOut)
-                        return qsTr("UNCONFIRMED") + translationManager.emptyString
-                    if (isFailed)
-                        return qsTr("FAILED") + translationManager.emptyString
-                    return qsTr("PENDING") + translationManager.emptyString
-
-                }
-            }
-            Item { //separator
-                width: 100
-                height: 14
-            }
-            // -- "Received by" title
-            Text {
-                anchors.bottom: parent.bottom
-                font.family: "Arial"
-                font.pixelSize: 12
-                color: "#535353"
-                text: (isOut ? qsTr("Spent from:") : qsTr("Received by:")) + translationManager.emptyString
-            }
-            Item { //separator
-                width: 5
-                height: 14
-            }
-            // -- "Index" value
-            Text {
-                anchors.bottom: parent.bottom
-                font.family: "Arial"
-                font.pixelSize: 13
-                font.bold: true
-                color: "#545454"
-                text: "#" + subaddrIndex
-            }
-            Item { //separator
-                width: 5
-                height: 14
-            }
-            // -- "Label" value
-            Text {
-                anchors.bottom: parent.bottom
-                font.family: "Arial"
-                font.pixelSize: 13
-                color: "#545454"
-                text: label
-                elide: Text.ElideRight
-                width: detailsButton.x - x - 30
-            }
-        }
-
-        // -- "Date", "Balance" and "Amound" section
-        Row {
-            id: row4
-            anchors.top: row3.bottom
             anchors.left: parent.left
-            spacing: 12
+            height: 1
-            anchors.topMargin: rowSpacing
+            color: "#404040"
-
-            Item { //separator
-                width: 14
-                height: 14
-            }
-
-            // -- "Date" column
-            Column {
-                anchors.top: parent.top
-                width: 215
-
-                Text {
-                    anchors.left: parent.left
-                    font.family: "Arial"
-                    font.pixelSize: 12
-                    color: "#545454"
-                    text: qsTr("Date") + translationManager.emptyString
-                }
-
-                Row {
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    spacing: 33
-
-                    Text {
-                        font.family: "Arial"
-                        font.pixelSize: 18
-                        color: "#000000"
-                        text: date
-                    }
-
-                    Text {
-                        font.family: "Arial"
-                        font.pixelSize: 18
-                        color: "#000000"
-                        text: time
-                    }
-                }
-            }
-            // -- "Balance" column
-            // XXX: we don't have a balance
-            /*
-            Column {
-                anchors.top: parent.top
-                width: 148
-                visible: false
-
-                Text {
-                    anchors.left: parent.left
-                    font.family: "Arial"
-                    font.pixelSize: 12
-                    color: "#545454"
-                    text: qsTr("Balance") + translationManager.emptyString
-                }
-
-                Text {
-                    font.family: "Arial"
-                    font.pixelSize: 18
-                    color: "#000000"
-                    text: balance
-                }
-            }
-            */
-
-            // -- "Amount column
-            Column {
-                anchors.top: parent.top
-
-                Text {
-                    anchors.left: parent.left
-                    font.family: "Arial"
-                    font.pixelSize: 12
-                    color: "#545454"
-                    text: qsTr("Amount") + translationManager.emptyString
-                }
-
-                Row {
-                    spacing: 2
-                    Text {
-                        anchors.bottom: parent.bottom
-                        anchors.bottomMargin: 3
-                        font.family: "Arial"
-                        font.pixelSize: 16
-                        color: isOut ? "#FF4F41" : "#36B05B"
-                        text: isOut ? "↓" : "↑"
-                    }
-
-                    Text {
-                        id: amountText
-                        anchors.bottom: parent.bottom
-                        font.family: "Arial"
-                        font.pixelSize: 18
-                        color: isOut ? "#FF4F41" : "#36B05B"
-                        text:  displayAmount
-                    }
-                }
-            }
-
-            // -- "Fee column
-            Column {
-                anchors.top: parent.top
-                width: 148
-                visible: isOut && fee != ""
-                Text {
-                    anchors.left: parent.left
-                    font.family: "Arial"
-                    font.pixelSize: 12
-                    color: "#545454"
-                    text: qsTr("Fee") + translationManager.emptyString
-                }
-
-                Row {
-                    spacing: 2
-                    Text {
-                        anchors.bottom: parent.bottom
-                        font.family: "Arial"
-                        font.pixelSize: 18
-                        color: "#FF4F41"
-                        text:  fee
-                    }
-                }
-            }
         }
 
-
+        Rectangle{
-        /*
-        // Transaction dropdown menu.
-        // Disable for now until AddressBook implemented
-        TableDropdown {
-            id: dropdown
             anchors.right: parent.right
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: 11
+            anchors.left: parent.left
-            anchors.rightMargin: 5
+            height: 1
-            dataModel: dropModel
+            color: "#404040"
-            z: 1
+        }
-            onExpandedChanged: {
+
-                if(expanded) {
+        Rectangle {
-                    listView.previousItem = delegate
+            id: row1
-                    listView.currentIndex = index
+            anchors.left: parent.left
-                }
+            anchors.leftMargin: 20 * scaleRatio
+            anchors.right: parent.right
+            anchors.rightMargin: 20 * scaleRatio
+            anchors.top: parent.top
+            anchors.topMargin: 15 * scaleRatio
+            height: 40 * scaleRatio
+            color: "transparent"
+
+            Image {
+                id: arrowImage
+                source: isOut ? "../images/downArrow.png" : "../images/upArrow-green.png"
+                height: 18 * scaleRatio
+                width: 12 * scaleRatio
+                anchors.top: parent.top
+                anchors.topMargin: 12 * scaleRatio
             }
-            onOptionClicked: {
+
-                if(option === 0)
+            Text {
-                    clipboard.setText(address)
+                id: txrxLabel
+                anchors.left: arrowImage.right
+                anchors.leftMargin: 18 * scaleRatio
+                font.family: Style.fontRegular.name
+                font.pixelSize: 14 * scaleRatio
+                text: isOut ? "Sent" : "Received"
+                color: "#808080"
+            }
+
+//            // -- "BlockHeight" value
+//            TextEdit {
+//                readOnly: true
+//                selectByMouse: true
+//                width: 85
+//                anchors.bottom: parent.bottom
+//                //elide: Text.ElideRight
+//                font.family: "Arial"
+//                font.pixelSize: 13
+//                color:  (confirmations < confirmationsRequired)? "#FF6C3C" : "#545454"
+//                text: {
+//                    if (!isPending)
+//                        if(confirmations < confirmationsRequired)
+//                            return blockHeight + " " + qsTr("(%1/%2 confirmations)").arg(confirmations).arg(confirmationsRequired)
+//                        else
+//                            return blockHeight
+//                    if (!isOut)
+//                        return qsTr("UNCONFIRMED") + translationManager.emptyString
+//                    if (isFailed)
+//                        return qsTr("FAILED") + translationManager.emptyString
+//                    return qsTr("PENDING") + translationManager.emptyString
+//                }
+//            }
+
+            Text {
+                id: amountLabel
+                anchors.left: arrowImage.right
+                anchors.leftMargin: 18 * scaleRatio
+                anchors.top: txrxLabel.bottom
+                anchors.topMargin: 0 * scaleRatio
+                font.family: Style.fontBold.name
+                font.pixelSize: 18 * scaleRatio
+                font.bold: true
+                text: { return (displayAmount * 1) + " XMR" }  // hack, removes trailing zeros
+                color: isOut ? "white" : "#2eb358"
+            }
+
+            Rectangle {
+                anchors.right: parent.right
+                width: 300 * scaleRatio
+                height: parent.height
+                color: "transparent"
+
+                Text {
+                    id: dateLabel
+                    anchors.left: parent.left
+                    font.family: Style.fontRegular.name
+                    font.pixelSize: 14 * scaleRatio
+                    text: date
+                    color: "#808080"
+                }
+
+                Text {
+                    id: timeLabel
+                    anchors.left: dateLabel.right
+                    anchors.leftMargin: 7 * scaleRatio
+                    anchors.top: parent.top
+                    anchors.topMargin: 3 * scaleRatio
+                    font.pixelSize: 12 * scaleRatio
+                    text: time
+                    color: "#808080"
+                }
+
+                Text {
+                    id: toLabel
+                    property string address: ""
+                    color: "#BBBBBB"
+                    anchors.left: parent.left
+                    anchors.top: dateLabel.bottom
+                    anchors.topMargin: 0
+                    font.family: Style.fontRegular.name
+                    font.pixelSize: 16 * scaleRatio
+                    text: {
+                        if(isOut){
+                            var _address = destinations.split(" ")[1];
+                            if(_address === undefined) return ""
+
+                            if(_address){
+                                address = _address;
+                                var address_truncated = address.substring(0, 6) + "..." + address.substring(address.length-6);
+                                return "To " + address_truncated;
+                            } else {
+                                return "Unknown recipient";
+                            }
+                        }
+                        return ""
+                    }
+
+                    MouseArea{
+                        visible: parent.address !== undefined
+                        hoverEnabled: true
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        onEntered: {
+                            toLabel.color = "white";
+                        }
+                        onExited: {
+                            toLabel.color = "#BBBBBB";
+                        }
+                        onClicked: {
+                            if(parent.address){
+                                console.log(parent.address + " copied to clipboard");
+                                clipboard.setText(parent.address);
+                                appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3)
+                            }
+                        }
+                    }
+                }
+
+                Rectangle {
+                    height: 24 * scaleRatio
+                    width: 24 * scaleRatio
+                    color: "transparent"
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    Image {
+                        id: dropdownImage
+                        height: 8 * scaleRatio
+                        width: 12 * scaleRatio
+                        source: "../images/whiteDropIndicator.png"
+                        rotation: delegate.collapsed ? 180 : 0
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    MouseArea{
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            delegate.collapsed = !delegate.collapsed;
+                        }
+                    }
+                }
             }
         }
 
         Rectangle {
+            id: row2
             anchors.left: parent.left
+            anchors.leftMargin: 20 * scaleRatio
             anchors.right: parent.right
-            anchors.bottom: parent.bottom
+            anchors.rightMargin: 20 * scaleRatio
-            height: 1
+            anchors.top: row1.bottom
-            color: "#DBDBDB"
+            anchors.topMargin: 15 * scaleRatio
-        }
+            height: 40 * scaleRatio
-        */
+            color: "transparent"
-    }
+            visible: delegate.collapsed
 
-    ListModel {
+            // left column
-        id: dropModel
+            HistoryTableInnerColumn{
-        ListElement { name: "<b>Copy address to clipboard</b>"; icon: "../images/dropdownCopy.png" }
+                anchors.left: parent.left
-        ListElement { name: "<b>Add to address book</b>"; icon: "../images/dropdownAdd.png" }
+                anchors.leftMargin: 30 * scaleRatio
-        ListElement { name: "<b>Send to this address</b>"; icon: "../images/dropdownSend.png" }
+
-        ListElement { name: "<b>Find similar transactions</b>"; icon: "../images/dropdownSearch.png" }
+                labelHeader: "Transaction ID"
+                labelValue: hash.substring(0, 18) + "..."
+                copyValue: hash
+            }
+
+            // right column
+            HistoryTableInnerColumn{
+                anchors.right: parent.right
+                anchors.rightMargin: 100 * scaleRatio
+                width: 200 * scaleRatio
+                height: parent.height
+                color: "transparent"
+
+                labelHeader: qsTr("Fee")
+                labelValue: {
+                    if(!isOut && !fee){
+                        return "-";
+                    } else if(isOut && fee){
+                        return fee + " XMR";
+                    } else {
+                        return "Unknown"
+                    }
+                }
+                copyValue: {
+                    if(isOut && fee){ return fee }
+                    else { return "" }
+                }
+            }
+
+        }
+
+        Rectangle {
+            id: row3
+            anchors.left: parent.left
+            anchors.leftMargin: 20 * scaleRatio
+            anchors.right: parent.right
+            anchors.rightMargin: 20 * scaleRatio
+            anchors.top: row2.bottom
+            anchors.topMargin: 15 * scaleRatio
+            height: 40 * scaleRatio
+            color: "transparent"
+            visible: delegate.collapsed
+
+            // left column
+            HistoryTableInnerColumn{
+                anchors.left: parent.left
+                anchors.leftMargin: 30 * scaleRatio
+                labelHeader: qsTr("Payment ID")
+                labelValue: paymentId !== "" && !paymentId.startsWith("00000000") ? paymentId.substring(0, 32) + "..." : "-"
+                copyValue: {
+                    if(paymentId !== "") { return paymentId }
+                    else { return undefined }
+                }
+            }
+
+            // right column
+            HistoryTableInnerColumn {
+                visible: currentWallet.getUserNote(hash)
+                anchors.right: parent.right
+                anchors.rightMargin: 80 * scaleRatio
+                width: 220 * scaleRatio
+                height: parent.height
+                color: "transparent"
+
+                labelHeader: qsTr("Description")
+                labelValue: {
+                    var note = currentWallet.getUserNote(hash);
+                    if(note){
+                        if(note.length > 28) {
+                            return note.substring(0, 28) + "...";
+                        } else {
+                            return note;
+                        }
+                    } else {
+                        return "";
+                    }
+                }
+                copyValue: {
+                    return currentWallet.getUserNote(hash);
+                }
+            }
+
+            Rectangle {
+                id: detailsButton
+                color: "#404040"
+                height: 24 * scaleRatio
+                width: 24 * scaleRatio
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 6
+                radius: 20 * scaleRatio
+
+                MouseArea {
+                    id: detailsButtonMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        var tx_key = currentWallet.getTxKey(hash)
+                        var tx_note = currentWallet.getUserNote(hash)
+                        var rings = currentWallet.getRings(hash)
+                        if (rings)
+                            rings = rings.replace(/\|/g, '\n')
+                        informationPopup.title = "Transaction details";
+                        informationPopup.content = buildTxDetailsString(hash,paymentId,tx_key,tx_note,destinations, rings);
+                        informationPopup.onCloseCallback = null
+                        informationPopup.open();
+                    }
+
+                    onEntered: {
+                        detailsButton.color = "#656565";
+                    }
+
+                    onExited: {
+                        detailsButton.color = "#404040";
+                    }
+                }
+
+                Text {
+                    color: Style.defaultFontColor
+                    text: "?"
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: parent.verticalCenter
+                    font.pixelSize: 14 * scaleRatio
+                }
+            }
+        }
     }
 
     Clipboard { id: clipboard }

components/HistoryTableInnerColumn.qml

@@ -0,0 +1,91 @@
+// Copyright (c) 2014-2015, The Monero Project
+//
+// All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without modification, are
+// permitted provided that the following conditions are met:
+//
+// 1. Redistributions of source code must retain the above copyright notice, this list of
+//    conditions and the following disclaimer.
+//
+// 2. Redistributions in binary form must reproduce the above copyright notice, this list
+//    of conditions and the following disclaimer in the documentation and/or other
+//    materials provided with the distribution.
+//
+// 3. Neither the name of the copyright holder nor the names of its contributors may be
+//    used to endorse or promote products derived from this software without specific
+//    prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL
+// THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
+// STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
+// THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+import QtQuick 2.0
+import QtQuick.Layouts 1.1
+import QtQuick.Dialogs 1.2
+import moneroComponents.Clipboard 1.0
+import moneroComponents.PendingTransaction 1.0
+import moneroComponents.Wallet 1.0
+import "../components"
+import "." 1.0
+
+
+Rectangle{
+    Clipboard { id: clipboard }
+
+    width: label1.width > label2.width ? label1.width : label2.width
+    height: label1.height + label2.height
+    color: "transparent"
+
+    property string copyValue: ""
+    property alias labelHeader: label1.text
+    property alias labelValue: label2.text
+
+    Text {
+        id: label1
+        anchors.left: parent.left
+        font.family: Style.fontRegular.name
+        font.pixelSize: 14 * scaleRatio
+        text: labelHeader
+        color: Style.greyFontColor
+    }
+
+    Text {
+        id: label2
+        anchors.left: parent.left
+        anchors.top: label1.bottom
+        font.family: Style.fontRegular.name
+        font.pixelSize: 14 * scaleRatio
+        text: labelValue
+        color: Style.dimmedFontColor
+    }
+
+    // hover effect / copy value
+    MouseArea {
+        visible: copyValue !== ""
+        hoverEnabled: true
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onEntered: {
+            label1.color = Style.defaultFontColor;
+            label2.color = Style.defaultFontColor;
+        }
+        onExited: {
+            label1.color = Style.greyFontColor;
+            label2.color = Style.dimmedFontColor;
+        }
+        onClicked: {
+            if(copyValue){
+                console.log(copyValue + " copied to clipboard");
+                clipboard.setText(copyValue);
+                appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
+            }
+        }
+    }
+}

components/HistoryTableMobile.qml

@@ -68,7 +68,7 @@ ListView {
     footer: Rectangle {
         height: 127 * scaleRatio
         width: listView.width
-        color: "#FFFFFF"
+        color: "transparent"
 
         Text {
             anchors.centerIn: parent
@@ -83,10 +83,35 @@ ListView {
         id: delegate
         height: tableContent.height + 20 * scaleRatio
         width: listView.width
-        color: index % 2 ? "#F8F8F8" : "#FFFFFF"
+        color: "transparent"
         Layout.leftMargin: 10 * scaleRatio
         z: listView.count - index
         function collapseDropdown() { dropdown.expanded = false }
+
+        Rectangle{
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            width: 1
+            color: "#404040"
+        }
+
+        Rectangle{
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.top: parent.top
+            width: 1
+            color: "#404040"
+        }
+
+        Rectangle{
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            height: 1
+            color: "#404040"
+        }
+
         MouseArea {
             anchors.fill: parent
             onClicked: {
@@ -109,7 +134,7 @@ ListView {
             anchors.topMargin: parent.height/2 - this.height/2
             width: 30 * scaleRatio; height: 30 * scaleRatio
             radius: 25
-            color: "#FF4304"
+            color: "#404040"
 
             Image {
                 width: 20 * scaleRatio
@@ -127,16 +152,16 @@ ListView {
                 Layout.topMargin: 20 * scaleRatio
                 Layout.leftMargin: 10 * scaleRatio
                 Text {
-                    font.family: "Arial"
+                    font.family: Style.fontMedium.name
                     font.pixelSize: 14 * scaleRatio
-                    color: "#555555"
+                    color: Style.defaultFontColor
                     text: date
                 }
 
                 Text {
-                    font.family: "Arial"
+                    font.family: Style.fontRegular.name
                     font.pixelSize: 14 * scaleRatio
-                    color: "#555555"
+                    color: Style.dimmedFontColor
                     text: time
                 }
 
@@ -144,7 +169,7 @@ ListView {
                 Text {
                     visible: confirmations < confirmationsRequired || isPending
                     Layout.leftMargin: 5 * scaleRatio
-                    font.family: "Arial"
+                    font.family: Style.fontRegular.name
                     font.pixelSize: 14 * scaleRatio
                     color:  (confirmations < confirmationsRequired)? "#FF6C3C" : "#545454"
                     text: {
@@ -161,7 +186,6 @@ ListView {
                 }
             }
 
-
             // Amount & confirmations
             RowLayout {
                 Layout.leftMargin: 10 * scaleRatio
@@ -169,7 +193,7 @@ ListView {
                 Text {
                     font.family: "Arial"
                     font.pixelSize: 14 * scaleRatio
-                    color: isOut ? "#FF4F41" : "#36B05B"
+                    color: isOut ? Style.defaultFontColor : "#2eb358"
                     text: isOut ? "↓" : "↑"
                 }
 
@@ -177,7 +201,7 @@ ListView {
                     id: amountText
                     font.family: "Arial"
                     font.pixelSize: 18 * scaleRatio
-                    color: isOut ? "#FF4F41" : "#36B05B"
+                    color: isOut ? Style.defaultFontColor : "#2eb358"
                     text:  displayAmount
                 }
             }

components/LineEdit.qml

@@ -33,6 +33,8 @@ Item {
     id: item
     property alias text: input.text
     property alias placeholderText: placeholderLabel.text
+    property bool placeholderCenter: false
+    property int placeholderFontSize: 18
     property alias validator: input.validator
     property alias readOnly : input.readOnly
     property alias cursorPosition: input.cursorPosition
@@ -41,6 +43,7 @@ Item {
     property alias inlineButtonText: inlineButtonId.text
     property alias inlineIcon: inlineIcon.visible
     property bool copyButton: false
+    property bool borderDisabled: false
     property int fontSize: 18 * scaleRatio
     property bool showBorder: true
     property bool fontBold: true
@@ -48,12 +51,14 @@ Item {
     property alias labelText: inputLabel.text
     property alias labelColor: inputLabel.color
     property alias labelTextFormat: inputLabel.textFormat
+    property string backgroundColor: "transparent"
     property string tipText: ""
     property int labelFontSize: 16 * scaleRatio
     property bool labelFontBold: false
     property alias labelWrapMode: inputLabel.wrapMode
     property alias labelHorizontalAlignment: inputLabel.horizontalAlignment
     property bool showingHeader: inputLabel.text !== "" || copyButton
+    property int inputHeight: 42
     signal labelLinkActivated(); // input label, rich text <a> signal
     signal editingFinished();
     signal accepted();
@@ -115,7 +120,7 @@ Item {
 
     Item{
         id: inputItem
-        height: 40 * scaleRatio
+        height: inputHeight * scaleRatio
         anchors.top: showingHeader ? inputLabel.bottom : parent.top
         anchors.topMargin: showingHeader ? 6 * scaleRatio : 2
         width: parent.width
@@ -124,12 +129,20 @@ Item {
             id: placeholderLabel
             visible: input.text ? false : true
             anchors.verticalCenter: parent.verticalCenter
-            anchors.left: parent.left
+            anchors.horizontalCenter: placeholderCenter ? parent.horizontalCenter : undefined
-            anchors.leftMargin: inlineIcon.visible ? 50 * scaleRatio : 10 * scaleRatio
+            anchors.left: placeholderCenter ? undefined : parent.left
+            anchors.leftMargin: {
+                if(placeholderCenter){
+                    return undefined;
+                }
+                else if(inlineIcon.visible){ return 50 * scaleRatio; }
+                else { return 10 * scaleRatio; }
+            }
+
             opacity: 0.25
             color: Style.defaultFontColor
             font.family: Style.fontRegular.name
-            font.pixelSize: 18 * scaleRatio
+            font.pixelSize: placeholderFontSize * scaleRatio
             text: ""
             z: 3
         }
@@ -141,8 +154,10 @@ Item {
         }
 
         Rectangle {
-            color: "transparent"
+            id: inputFill
-            border.width: 1
+            color: backgroundColor
+            anchors.fill: parent
+            border.width: borderDisabled ? 0 : 1
             border.color: {
                 if(input.activeFocus){
                     return Qt.rgba(255, 255, 255, 0.35);
@@ -151,7 +166,6 @@ Item {
                 }
             }
             radius: 4
-            anchors.fill: parent
         }
 
         Image {

components/LineEditMulti.qml

@@ -39,13 +39,14 @@ ColumnLayout {
     property alias readOnly: multiLine.readOnly
     property alias addressValidation: multiLine.addressValidation
     property alias labelButtonText: labelButton.text
+    property bool labelFontBold: false
     property bool labelButtonVisible: false
     property bool copyButton: false
     signal labelButtonClicked();
     signal inputLabelLinkActivated();
 
     spacing: 0
-    Rectangle{
+    Rectangle {
         id: inputLabelRect
         color: "transparent"
         Layout.fillWidth: true
@@ -77,9 +78,9 @@ ColumnLayout {
             anchors.rightMargin: labelButton.visible? 4 : 0
             onClicked: {
                 if (multiLine.text.length > 0) {
-                    console.log(multiLine.text + " copied to clipboard")
+                    console.log(multiLine.text + " copied to clipboard");
-                    clipboard.setText(multiLine.text)
+                    clipboard.setText(multiLine.text);
-                    appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
+                    appWindow.showStatusMessage(qsTr("Copied to clipboard"), 3);
                 }
             }
         }
@@ -91,6 +92,8 @@ ColumnLayout {
         addressValidation: true
         anchors.top: inputLabelRect.bottom
         Layout.fillWidth: true
+        topPadding: 10
+        bottomPadding: 10
 
         Text {
             id: placeholderLabel

components/StandardButton.qml

@@ -62,7 +62,7 @@ Item {
         color: parent.enabled ? Style.buttonBackgroundColor : Style.buttonBackgroundColorDisabled
         border.width: parent.focus ? 1 : 0
 
-        MouseArea{
+        MouseArea {
             anchors.fill: parent
             cursorShape: Qt.PointingHandCursor
             hoverEnabled: true

components/StandardDialog.qml

@@ -37,7 +37,7 @@ import "../components" as MoneroComponents
 
 Rectangle {
     id: root
-    color: "white"
+    color: "transparent"
     visible: false
     property alias title: dialogTitle.text
     property alias text: dialogContent.text
@@ -55,6 +55,14 @@ Rectangle {
     signal rejected()
     signal closeCallback();
 
+    Image {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        source: "../images/middlePanelBg.jpg"
+    }
+
     // Make window draggable
     MouseArea {
         anchors.fill: parent
@@ -99,7 +107,7 @@ Rectangle {
                 horizontalAlignment: Text.AlignHCenter
                 font.pixelSize: 18 * scaleRatio
                 font.family: "Arial"
-                color: "#555555"
+                color: Style.defaultFontColor
             }
 
         }
@@ -115,6 +123,10 @@ Rectangle {
                 font.pixelSize: 12 * scaleRatio
                 selectByMouse: false
                 wrapMode: TextEdit.Wrap
+                textColor: Style.defaultFontColor
+                style: TextAreaStyle {
+                    backgroundColor: "black"
+                }
 
                 MouseArea {
                     anchors.fill: parent

components/StandardDropdown.qml

@@ -39,11 +39,17 @@ Item {
     property string textColor: "#FFFFFF"
     property alias currentIndex: column.currentIndex
     property bool expanded: false
+    property int dropdownHeight: 40
+    property int fontHeaderSize: 16 * scaleRatio
+    property int fontItemSize: 14 * scaleRatio
+    property string colorHeaderBackground: "transparent"
+    property bool headerBorder: true
+    property bool headerFontBold: true
+
+    height: dropdownHeight
 
     signal changed();
 
-    height: 40 * scaleRatio
-
     onExpandedChanged: if(expanded) appWindow.currentItem = dropdown
     function hide() { dropdown.expanded = false }
     function containsPoint(px, py) {
@@ -68,15 +74,14 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
-        height: 40 * scaleRatio
+        height: dropdown.dropdownHeight
 
         Rectangle {
-            color: "transparent"
+            color: dropdown.colorHeaderBackground
-            border.width: 1
+            border.width: dropdown.headerBorder ? 1 : 0
             border.color: Qt.rgba(1, 1, 1, 0.25)
             radius: 4
             anchors.fill: parent
-            z: 4
         }
 
         Text {
@@ -86,8 +91,8 @@ Item {
             anchors.leftMargin: 12 * scaleRatio
             elide: Text.ElideRight
             font.family: Style.fontRegular.name
-            font.bold: true
+            font.bold: dropdown.headerFontBold
-            font.pixelSize: 16 * scaleRatio
+            font.pixelSize: dropdown.fontHeaderSize
             color: "#FFFFFF"
         }
 
@@ -109,6 +114,8 @@ Item {
             id: dropArea
             anchors.fill: parent
             onClicked: dropdown.expanded = !dropdown.expanded
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
         }
     }
 
@@ -162,23 +169,23 @@ Item {
                 property string stringSent:  qsTr("Sent") + translationManager.emptyString
                 property string stringReceived:  qsTr("Received") + translationManager.emptyString
 
-
                 delegate: Rectangle {
                     anchors.left: parent.left
                     anchors.right: parent.right
-                    height: 30 * scaleRatio
+                    height: (dropdown.dropdownHeight * 0.75) * scaleRatio
                     //radius: index === repeater.count - 1 ? 4 : 0
                     color: itemArea.containsMouse || index === column.currentIndex || itemArea.containsMouse ? dropdown.releasedColor : dropdown.pressedColor
 
                     Text {
+                        id: col1Text
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.left: parent.left
                         anchors.right: col2Text.left
                         anchors.leftMargin: 12 * scaleRatio
-                        anchors.rightMargin: column2.length > 0 ? 12  * scaleRatio: 0
+                        anchors.rightMargin: 0
                         font.family: Style.fontRegular.name
                         font.bold: true
-                        font.pixelSize: 14 * scaleRatio
+                        font.pixelSize: fontItemSize
                         color: itemArea.containsMouse || index === column.currentIndex || itemArea.containsMouse ? "#FA6800" : "#FFFFFF"
                         text: qsTr(column1) + translationManager.emptyString
                     }
@@ -191,7 +198,7 @@ Item {
                         font.family: Style.fontRegular.name
                         font.pixelSize: 14 * scaleRatio
                         color: "#FFFFFF"
-                        text: column2
+                        text: ""
                     }
 
                     Rectangle {

components/Style.qml

@@ -8,7 +8,11 @@ QtObject {
     property QtObject fontLight: FontLoader { id: _fontLight; source: "qrc:/fonts/SFUIDisplay-Light.otf"; }
     property QtObject fontRegular: FontLoader { id: _fontRegular; source: "qrc:/fonts/SFUIDisplay-Regular.otf"; }
 
+    property string grey: "#404040"
+
     property string defaultFontColor: "white"
+    property string greyFontColor: "#808080"
+    property string dimmedFontColor: "#BBBBBB"
     property string inputBoxBackground: "black"
     property string inputBoxBackgroundError: "#FFDDDD"
     property string inputBoxColor: "white"
@@ -17,7 +21,6 @@ QtObject {
     property string buttonBackgroundColorHover: "#E65E00"
     property string buttonBackgroundColorDisabled: "#707070"
     property string buttonBackgroundColorDisabledHover: "#808080"
-
     property string buttonTextColor: "white"
     property string buttonTextColorDisabled: "black"
     property string dividerColor: "white"

components/TableHeader.qml

@@ -36,26 +36,40 @@ Rectangle {
     property int offset: 0
 
     height: 31
-    color: "#FFFFFF"
+    color: "transparent"
+
+    Rectangle{
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        width: 1
+        color: "#808080"
+    }
+
+    Rectangle{
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        width: 1
+        color: "#808080"
+    }
 
     Rectangle {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         height: 1
-        color: "#DBDBDB"
+        color: "#808080"
     }
 
     Row {
         id: row
-        anchors.horizontalCenter: header.offset !== 0 ? undefined: parent.horizontalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.left: header.offset !== 0 ? parent.left : undefined
-        anchors.leftMargin: header.offset
 
         Rectangle {
             height: 31
             width: 1
-            color: "#DBDBDB"
+            color: "#808080"
         }
 
         Repeater {
@@ -70,6 +84,7 @@ Rectangle {
             delegate: Rectangle {
                 id: delegate
                 property bool desc: false
+                color: "transparent"
                 height: 31
                 width: columnWidth
 
@@ -86,7 +101,7 @@ Rectangle {
                     color: {
                         if(delegateArea.pressed)
                             return "#FF4304"
-                        return index === header.activeSortColumn || delegateArea.containsMouse ? "#FF6C3C" : "#4A4949"
+                        return index === header.activeSortColumn || delegateArea.containsMouse ? "white" : "#808080"
                     }
                     text: qsTr(columnName) + translationManager.emptyString
                 }
@@ -95,6 +110,7 @@ Rectangle {
                     id: delegateArea
                     hoverEnabled: true
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     onClicked: {
                         delegate.desc = !delegate.desc
                         header.activeSortColumn = index
@@ -170,7 +186,7 @@ Rectangle {
                     anchors.right: parent.right
                     anchors.bottom: parent.bottom
                     height: 1
-                    color: index === header.activeSortColumn ? "#FFFFFF" : "#DBDBDB"
+                    color: "transparent"
                 }
 
                 Rectangle {
@@ -178,7 +194,7 @@ Rectangle {
                     anchors.bottom: parent.bottom
                     anchors.right: parent.right
                     width: 1
-                    color: "#DBDBDB"
+                    color: "#808080"
                 }
             }
         }

pages/History.qml

@@ -27,7 +27,8 @@
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 import QtQuick 2.0
-
+import QtQuick.Layouts 1.1
+import QtQuick.Dialogs 1.2
 import moneroComponents.Wallet 1.0
 import moneroComponents.WalletManager 1.0
 import moneroComponents.TransactionHistory 1.0
@@ -39,13 +40,14 @@ import "../components"
 Rectangle {
     id: root
     property var model
+    property int tableHeight: !isMobile ? table.contentHeight : tableMobile.contentHeight
 
     QtObject {
         id: d
         property bool initialized: false
     }
 
-    color: "#F0EEEE"
+    color: "transparent"
 
     function getSelectedAmount() {
       if (typeof model === 'undefined' || model == null)
@@ -81,178 +83,25 @@ Rectangle {
 
     onModelChanged: {
         if (typeof model !== 'undefined' && model != null) {
-
-            selectedAmount.text = getSelectedAmount()
-
             if (!d.initialized) {
                 // setup date filter scope according to real transactions
                 fromDatePicker.currentDate = model.transactionHistory.firstDateTime
                 toDatePicker.currentDate = model.transactionHistory.lastDateTime
 
-                /* Default sorting by timestamp desc */
-                /* Sort indicator on table header */
-                /* index of 'sort by blockheight' column */
-                header.activeSortColumn = 2
-                /* Sorting model */
-
                 model.sortRole = TransactionHistoryModel.TransactionBlockHeightRole
                 model.sort(0, Qt.DescendingOrder);
                 d.initialized = true
-                // TODO: public interface for 'Header' item that will cause 'sortRequest' signal
             }
-
         }
     }
 
     function onFilterChanged() {
+        // set datepicker error states
         var datesValid = fromDatePicker.currentDate <= toDatePicker.currentDate
-        var amountsValid = amountFromLine.text === "" ? true :
+        fromDatePicker.error = !datesValid;
-                            amountToLine.text === "" ? true:
+        toDatePicker.error = !datesValid;
-                                parseFloat(amountFromLine.text) <= parseFloat(amountToLine.text)
-
-        // reset error state if amount filter valid
-        if (amountsValid) {
-            amountFromLine.error = amountToLine.error = false
-        }
-
-        filterButton.enabled = datesValid && amountsValid
-    }
-
-
-    Text {
-        visible: !isMobile
-        id: filterHeaderText
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.leftMargin: 17
-        anchors.topMargin: 17
-
-        elide: Text.ElideRight
-        font.family: "Arial"
-        font.pixelSize: 18
-        color: "#4A4949"
-        text: qsTr("Filter transaction history") + translationManager.emptyString
-    }
-
-    Label {
-        visible: !isMobile
-        id: selectedAmount
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.rightMargin: 17
-        anchors.topMargin: 17
-        text: getSelectedAmount()
-        fontSize: 14
-    }
-
-    // Filter by string
-    LineEdit {
-        visible: !isMobile
-        id: searchLine
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: filterHeaderText.bottom
-        anchors.leftMargin: 17
-        anchors.rightMargin: 17
-        anchors.topMargin: 5
-        placeholderText: qsTr("Type for incremental search...") + translationManager.emptyString
-        onTextChanged:  {
-            model.searchFilter = searchLine.text
-            selectedAmount.text = getSelectedAmount()
-        }
-    }
-
-    // Filter by description input (not implemented yet)
-    /*
-    Label {
-        id: descriptionLabel
-        anchors.left: parent.left
-        anchors.top: searchLine.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 17
-        text: qsTr("Description <font size='2'>(Local database)</font>") + translationManager.emptyString
-        fontSize: 14
-    }
-
-    LineEdit {
-        id: descriptionLine
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: descriptionLabel.bottom
-        anchors.leftMargin: 17
-        anchors.rightMargin: 17
-        anchors.topMargin: 5
-    }
-    */
-
-
-    // DateFrom picker
-    Label {
-        visible: !isMobile
-        id: dateFromText
-        anchors.left: parent.left
-        anchors.top:  searchLine.bottom // descriptionLine.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 17
-        width: 156
-        text: qsTr("Date from") + translationManager.emptyString
-        fontSize: 14
-    }
-
-    DatePicker {
-        visible: !isMobile
-        id: fromDatePicker
-        anchors.left: parent.left
-        anchors.top: dateFromText.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 5
-        z: 2
-        onCurrentDateChanged: {
-            error = currentDate > toDatePicker.currentDate
-            onFilterChanged()
-        }
-    }
-
-    // DateTo picker
-    Label {
-        visible: !isMobile
-        id: dateToText
-        anchors.left: dateFromText.right
-        anchors.top:  searchLine.bottom //descriptionLine.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 17
-        text: qsTr("To") + translationManager.emptyString
-        fontSize: 14
-    }
-
-    DatePicker {
-        visible: !isMobile
-        id: toDatePicker
-        anchors.left: fromDatePicker.right
-        anchors.top: dateToText.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 5
-        z: 2
-        onCurrentDateChanged: {
-            error = currentDate < fromDatePicker.currentDate
-            onFilterChanged()
-        }
-    }
-
-
-
-    StandardButton {
-        visible: !isMobile
-        id: filterButton
-        anchors.bottom: toDatePicker.bottom
-        anchors.left: toDatePicker.right
-        anchors.leftMargin: 17
-        width: 60
-        text: qsTr("Filter") + translationManager.emptyString
-        onClicked:  {
-            // Apply filter here;
 
+        if(datesValid){
             resetFilter(model)
 
             if (fromDatePicker.currentDate > toDatePicker.currentDate) {
@@ -262,279 +111,233 @@ Rectangle {
                 model.dateToFilter    = toDatePicker.currentDate
             }
 
-            if (advancedFilteringCheckBox.checked) {
+            model.searchFilter = searchLine.text;
-                if (amountFromLine.text.length) {
+            tableHeader.visible = model.rowCount() > 0;
-                    model.amountFromFilter = parseFloat(amountFromLine.text)
-                }
-
-                if (amountToLine.text.length) {
-                    model.amountToFilter = parseFloat(amountToLine.text)
-                }
-
-                var directionFilter = transactionsModel.get(transactionTypeDropdown.currentIndex).value
-                console.log("Direction filter: " + directionFilter)
-                model.directionFilter = directionFilter
-            }
-
-            selectedAmount.text = getSelectedAmount()
         }
     }
 
-    CheckBox {
+    Rectangle{
-        visible: !isMobile
+        id: rootLayout
-        id: advancedFilteringCheckBox
+        visible: false
-        text: qsTr("Advanced filtering") + translationManager.emptyString
-        anchors.left: filterButton.right
-        anchors.bottom: filterButton.bottom
-        anchors.leftMargin: 17
-        onClicked: {
-            if(checked) tableRect.height = Qt.binding(function(){ return tableRect.collapsedHeight })
-            else tableRect.height = Qt.binding(function(){ return tableRect.middleHeight })
-        }
     }
 
-    Label {
+    ColumnLayout {
-        visible: !isMobile
+        id: pageRoot
-        id: transactionTypeText
+        anchors.margins: isMobile ? 17 : 20 * scaleRatio
+        anchors.topMargin: isMobile ? 0 : 40 * scaleRatio
+
         anchors.left: parent.left
-        anchors.top: fromDatePicker.bottom
+        anchors.top: parent.top
-        anchors.leftMargin: 17
-        anchors.topMargin: 17
-        width: 156
-        text: qsTr("Type of transaction") + translationManager.emptyString
-        fontSize: 14
-    }
-
-    ListModel {
-        id: transactionsModel
-        ListElement { column1: "All"; column2: ""; value: TransactionInfo.Direction_Both }
-        ListElement { column1: "Sent"; column2: ""; value: TransactionInfo.Direction_Out }
-        ListElement { column1: "Received"; column2: ""; value: TransactionInfo.Direction_In }
-
-    }
-
-    StandardDropdown {
-        visible: !isMobile
-        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 {
-        visible: !isMobile
-        id: amountFromText
-        anchors.left: transactionTypeText.right
-        anchors.top: fromDatePicker.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 17
-        width: 156
-        text: qsTr("Amount from") + translationManager.emptyString
-        fontSize: 14
-    }
-
-    LineEdit {
-        visible: !isMobile
-        id: amountFromLine
-        anchors.left: transactionTypeDropdown.right
-        anchors.top: amountFromText.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 5
-        width: 156
-        validator: DoubleValidator {
-            locale: "C"
-            notation: DoubleValidator.StandardNotation
-            bottom: 0
-        }
-        onTextChanged: {
-            // indicating error
-            amountFromLine.error = amountFromLine.text === "" ? false : parseFloat(amountFromLine.text) > parseFloat(amountToLine.text)
-            onFilterChanged()
-        }
-
-    }
-
-    Label {
-        visible: !isMobile
-        id: amountToText
-        anchors.left: amountFromText.right
-        anchors.top: fromDatePicker.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 17
-        width: 156
-        text: qsTr("To") + translationManager.emptyString
-        fontSize: 14
-    }
-
-    LineEdit {
-        visible: !isMobile
-        id: amountToLine
-        anchors.left: amountFromLine.right
-        anchors.top: amountToText.bottom
-        anchors.leftMargin: 17
-        anchors.topMargin: 5
-        width: 156
-        validator: DoubleValidator {
-            locale: "C"
-            notation: DoubleValidator.StandardNotation
-            bottom: 0.0
-        }
-
-        onTextChanged: {
-            // indicating error
-            amountToLine.error = amountToLine.text === "" ? false : parseFloat(amountFromLine.text) > parseFloat(amountToLine.text)
-            onFilterChanged()
-        }
-
-    }
-
-    Item {
-        visible: !isMobile
-        id: expandItem
-        property bool expanded: false
-
         anchors.right: parent.right
-        anchors.bottom: tableRect.top
-        width: 34
-        height: 34
 
-        Image {
+        spacing: 0
-            anchors.centerIn: parent
-            source: "../images/expandTable.png"
-            rotation: parent.expanded ? 180 : 0
-        }
 
-        MouseArea {
+        GridLayout {
-            anchors.fill: parent
+            columns: (isMobile)? 1 : 2
-            onClicked: {
+            Layout.fillWidth: true
-                parent.expanded = !parent.expanded
+            columnSpacing: 26 * scaleRatio
-                if (advancedFilteringCheckBox.checked) {
+
-                    tableRect.height = Qt.binding(function() { return parent.expanded ? tableRect.expandedHeight : tableRect.collapsedHeight })
+            RowLayout {
-                } else {
+                visible: !isMobile
-                    tableRect.height = Qt.binding(function() { return parent.expanded ? tableRect.expandedHeight : tableRect.middleHeight })
+            }
+
+            RowLayout {
+                LineEdit {
+                    id: searchLine
+                    fontSize: 14 * scaleRatio
+                    inputHeight: 28 * scaleRatio
+                    borderDisabled: true
+                    Layout.fillWidth: true
+                    backgroundColor: "#404040"
+                    placeholderText: qsTr("Search") + translationManager.emptyString
+                    placeholderCenter: true
+                    onTextChanged:  {
+                        onFilterChanged();
+                    }
                 }
             }
         }
-    }
 
-    Rectangle {
+        GridLayout {
-        id: tableRect
+            z: 6
-        property int expandedHeight: parent.height - filterHeaderText.y - filterHeaderText.height - 5
+            columns: (isMobile)? 1 : 3
-        property int middleHeight: parent.height - fromDatePicker.y - fromDatePicker.height - 17
+            Layout.fillWidth: true
-        property int collapsedHeight: parent.height - transactionTypeDropdown.y - transactionTypeDropdown.height - 17
+            columnSpacing: 22 * scaleRatio
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-//        anchors.top: parent.top
-        color: "#FFFFFF"
-        z: 1
-
-        height: (isMobile)? parent.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
-            property int pidWidth: 127 * scaleRatio
-            ListElement { columnName: "Payment ID"; columnWidth: 127 }
-            ListElement { columnName: "Date"; columnWidth: 100 }
-            ListElement { columnName: "Block height"; columnWidth: 150 }
-            ListElement { columnName: "Amount"; columnWidth: 148 }
-            // ListElement { columnName: "Description"; columnWidth: 148 }
-        }
-
-        TableHeader {
-            id: header
             visible: !isMobile
-            anchors.left: parent.left
+
-            anchors.right: parent.right
+            ColumnLayout {
-            anchors.top: parent.top
+                Layout.fillWidth: true
-            anchors.topMargin: 17 * scaleRatio
+
-            anchors.leftMargin: 14 * scaleRatio
+                RowLayout {
-            anchors.rightMargin: 14 * scaleRatio
+                    Layout.fillWidth: true
-            dataModel: columnsModel
+                    id: fromDateRow
-            offset: 20
+                    Layout.minimumWidth: 150 * scaleRatio
-            onSortRequest: {
+
-                console.log("column: " + column + " desc: " + desc)
+                    DatePicker {
-                switch (column) {
+                        visible: !isMobile
-                case 0:
+
-                    // Payment ID
+                        id: fromDatePicker
-                    model.sortRole = TransactionHistoryModel.TransactionPaymentIdRole
+                        Layout.fillWidth: true
-                    break;
+                        width: 100 * scaleRatio
-                case 1:
+                        inputLabel.text: "Date from"
-                    // Date (actually sort by timestamp as we want to have transactions sorted within one day as well);
+
-                    model.sortRole = TransactionHistoryModel.TransactionTimeStampRole
+                        onCurrentDateChanged: {
-                    break;
+                            onFilterChanged()
-                case 2:
+                        }
-                    // BlockHeight;
+                    }
-                    model.sortRole = TransactionHistoryModel.TransactionBlockHeightRole
+                }
-                    break;
+            }
-                case 3:
+
-                    // Amount;
+            ColumnLayout {
-                    model.sortRole = TransactionHistoryModel.TransactionAmountRole
+                Layout.fillWidth: true
-                    break;
+
+                RowLayout {
+                    Layout.fillWidth: true
+                    id: toDateRow
+                    Layout.minimumWidth: 150 * scaleRatio
+
+                    DatePicker {
+                        visible: !isMobile
+
+                        id: toDatePicker
+                        Layout.fillWidth: true
+                        width: 100 * scaleRatio
+                        inputLabel.text: "Date to"
+
+                        onCurrentDateChanged: {
+                            onFilterChanged()
+                        }
+                    }
+                }
+            }
+
+            ColumnLayout {
+                Layout.fillWidth: true
+
+                Label {
+                    id: transactionPriority
+                    Layout.minimumWidth: 120 * scaleRatio
+                    text: qsTr("Sort") + translationManager.emptyString
+                }
+
+                ListModel {
+                     id: priorityModelV5
+
+                     ListElement { column1: qsTr("Block height") ; column2: "";}
+                     ListElement { column1: qsTr("Date") ; column2: ""; }
+                 }
+
+                StandardDropdown {
+                    id: priorityDropdown
+                    anchors.topMargin: 2 * scaleRatio
+                    fontHeaderSize: 14 * scaleRatio
+                    dropdownHeight: 28 * scaleRatio
+
+                    Layout.fillWidth: true
+                    shadowReleasedColor: "#FF4304"
+                    shadowPressedColor: "#B32D00"
+                    releasedColor: "#404040"
+                    pressedColor: "#202020"
+                    colorHeaderBackground: "#404040"
+
+                    onChanged: {
+                        switch(priorityDropdown.currentIndex){
+                            case 0:
+                                // block sort
+                                model.sortRole = TransactionHistoryModel.TransactionBlockHeightRole;
+                                break;
+                            case 1:
+                                // amount sort
+                                model.sortRole = TransactionHistoryModel.TransactionDateRole;
+                                break;
+                        }
+                        model.sort(0, Qt.DescendingOrder);
+                    }
+
                 }
-                model.sort(0, desc ? Qt.DescendingOrder : Qt.AscendingOrder)
             }
         }
 
-        Scroll {
+        GridLayout {
-            id: flickableScroll
+            id: tableHeader
-            visible: !isMobile
+            columns: 1
-            anchors.right: table.right
+            columnSpacing: 0
-            anchors.rightMargin: !isMobile ? -14 * scaleRatio : 0
+            rowSpacing: 0
-            anchors.top: table.top
+            Layout.topMargin: 20
-            anchors.bottom: table.bottom
+            Layout.fillWidth: true
-            flickable: table
-        }
 
-        HistoryTable {
+            RowLayout{
-            id: table
+                Layout.preferredHeight: 10
-            visible: !isMobile
+                Layout.fillWidth: true
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: header.bottom
-            anchors.bottom: parent.bottom
-            anchors.leftMargin: 14 * scaleRatio
-            anchors.rightMargin: 14 * scaleRatio
-            onContentYChanged: flickableScroll.flickableContentYChanged()
-            model: !isMobile ? root.model : null
-            addressBookModel: null
-        }
 
-        HistoryTableMobile {
+                Rectangle {
-            id: tableMobile
+                    id: header
-            visible: isMobile
+                    Layout.fillWidth: true
-            anchors.left: parent.left
+
-            anchors.right: parent.right
+                    height: 10
-            anchors.top: parent.top
+                    color: "#CC000000"
-            anchors.bottom: parent.bottom
+
-            onContentYChanged: flickableScroll.flickableContentYChanged()
+                    Rectangle {
-            model: isMobile ? root.model : null
+                        anchors.top: parent.top
-            addressBookModel: null
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.rightMargin: 10
+                        anchors.leftMargin: 10
+
+                        height: 1
+                        color: "#404040"
+                    }
+
+                    Image {
+                        anchors.top: parent.top
+                        anchors.left: parent.left
+
+                        width: 10
+                        height: 10
+
+                        source: "../images/historyBorderRadius.png"
+                    }
+
+                    Image {
+                        anchors.top: parent.top
+                        anchors.right: parent.right
+
+                        width: 10
+                        height: 10
+
+                        source: "../images/historyBorderRadius.png"
+                        rotation: 90
+                    }
+                }
+            }
+
+            RowLayout {
+                Layout.preferredHeight: isMobile ? tableMobile.contentHeight : table.contentHeight
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                HistoryTable {
+                    id: table
+                    visible: !isMobile
+                    onContentYChanged: flickableScroll.flickableContentYChanged()
+                    model: !isMobile ? root.model : null
+                    addressBookModel: null
+
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                }
+
+                HistoryTableMobile {
+                    id: tableMobile
+                    visible: isMobile
+                    onContentYChanged: flickableScroll.flickableContentYChanged()
+                    model: isMobile ? root.model : null
+                    addressBookModel: null
+
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                }
+            }
         }
     }
 
@@ -542,8 +345,11 @@ Rectangle {
         if(currentWallet != null && typeof currentWallet.history !== "undefined" ) {
             currentWallet.history.refresh(currentWallet.currentSubaddressAccount)
             table.addressBookModel = currentWallet ? currentWallet.addressBookModel : null
-            transactionTypeDropdown.update()
+            //transactionTypeDropdown.update()
         }
 
+        priorityDropdown.dataModel = priorityModelV5;
+        priorityDropdown.currentIndex = 0;
+        priorityDropdown.update();
     }
 }

pages/Transfer.qml

@@ -388,7 +388,6 @@ Rectangle {
             onFillLevelChanged: updateMixin()
         }
 
-
         GridLayout {
             visible: persistentSettings.transferShowAdvanced
             Layout.topMargin: 50 * scaleRatio

qml.qrc

@@ -197,5 +197,9 @@
         <file>components/LabelSubheader.qml</file>
         <file>images/arrow-right-medium-white.png</file>
         <file>images/rightArrow.png</file>
+        <file>images/upArrow-green.png</file>
+        <file>images/downArrow.png</file>
+        <file>images/historyBorderRadius.png</file>
+        <file>components/HistoryTableInnerColumn.qml</file>
     </qresource>
 </RCC>