diff --git a/MiddlePanel.qml b/MiddlePanel.qml index bc1bc76c..62d1946c 100644 --- a/MiddlePanel.qml +++ b/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 } diff --git a/components/DatePicker.qml b/components/DatePicker.qml index 8988f2bd..6fb3605d 100644 --- a/components/DatePicker.qml +++ b/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 errorColor : "#FFDDDD" + property color backgroundColor : "#404040" + property color errorColor : "red" property bool error: false + property alias inputLabel: inputLabel - height: 37 - width: 156 + signal dateChanged(); + + 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 - Rectangle { - anchors.left: parent.left - anchors.right: parent.right - height: parent.height - //radius: 4 - y: 0 - color: "#DBDBDB" - - } + anchors.top: inputLabelRect.bottom + anchors.topMargin: 6 * scaleRatio + anchors.left: parent.left + anchors.right: parent.right + height: 28 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" - visible: datePicker.expanded + source: "../images/whiteDropIndicator.png" + rotation: datePicker.expanded ? 180 : 0 } MouseArea { anchors.fill: parent - enabled: datePicker.expanded - onClicked: datePicker.expanded = false + onClicked: datePicker.expanded = !datePicker.expanded + 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.pixelSize: 18 - // color: "#525252" + font.family: Style.fontRegular.name + font.pixelSize: 14 + 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.pixelSize: 18 - // color: "#525252" - text: "." + font.family: Style.fontRegular.name + font.pixelSize: 14 + color: datePicker.error ? errorColor : Style.defaultFontColor + text: "-" } TextInput { id: monthInput readOnly: true width: 22 - font.family: "Arial" - font.pixelSize: 18 - // color: "#525252" + font.family: Style.fontRegular.name + font.pixelSize: 14 + 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.pixelSize: 18 - // color: "#525252" - text: "." + font.family: Style.fontRegular.name + font.pixelSize: 14 + color: datePicker.error ? errorColor : Style.defaultFontColor + text: "-" } TextInput { id: yearInput width: 44 - font.family: "Arial" - font.pixelSize: 18 - /// color: "#525252" + font.family: Style.fontRegular.name + font.pixelSize: 14 + 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(); } } } diff --git a/components/HistoryTable.qml b/components/HistoryTable.qml index 18d05f6d..9954e4da 100644 --- a/components/HistoryTable.qml +++ b/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" - z: listView.count - index - function collapseDropdown() { dropdown.expanded = false } + color: "#CC000000" - StandardButton { - id: detailsButton - 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(); - } + function collapse(){ + delegate.height = 180 * scaleRatio; } - - - Row { - id: row1 - anchors.left: parent.left + // borders + Rectangle{ anchors.right: parent.right anchors.top: parent.top - anchors.topMargin: 14 - // -- direction indicator - Rectangle { - 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 - } + anchors.bottom: parent.bottom + width: 1 + color: "#404040" } - Row { - // - Payment ID - id: row2 + Rectangle{ anchors.left: parent.left - anchors.right: parent.right anchors.top: parent.top - anchors.topMargin: 40 - anchors.leftMargin: 26 - - // -- "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 !== "()" - } + anchors.bottom: parent.bottom + width: collapsed ? 2 : 1 + color: collapsed ? "#BBBBBB" : "#404040" } - Row { - // block height row - id: row3 - anchors.left: parent.left + + Rectangle{ anchors.right: parent.right - anchors.top: row2.bottom - 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.bottom: parent.top anchors.left: parent.left - spacing: 12 - anchors.topMargin: rowSpacing - - 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 - } - } - } + height: 1 + color: "#404040" } - - /* - // Transaction dropdown menu. - // Disable for now until AddressBook implemented - TableDropdown { - id: dropdown + Rectangle{ anchors.right: parent.right anchors.bottom: parent.bottom - anchors.bottomMargin: 11 - anchors.rightMargin: 5 - dataModel: dropModel - z: 1 - onExpandedChanged: { - if(expanded) { - listView.previousItem = delegate - listView.currentIndex = index - } + anchors.left: parent.left + height: 1 + color: "#404040" + } + + Rectangle { + id: row1 + 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) - clipboard.setText(address) + + Text { + 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 - height: 1 - color: "#DBDBDB" - } - */ - } + anchors.rightMargin: 20 * scaleRatio + anchors.top: row1.bottom + anchors.topMargin: 15 * scaleRatio + height: 40 * scaleRatio + color: "transparent" + visible: delegate.collapsed - ListModel { - id: dropModel - ListElement { name: "Copy address to clipboard"; icon: "../images/dropdownCopy.png" } - ListElement { name: "Add to address book"; icon: "../images/dropdownAdd.png" } - ListElement { name: "Send to this address"; icon: "../images/dropdownSend.png" } - ListElement { name: "Find similar transactions"; icon: "../images/dropdownSearch.png" } + // left column + HistoryTableInnerColumn{ + anchors.left: parent.left + anchors.leftMargin: 30 * scaleRatio + + 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 } diff --git a/components/HistoryTableInnerColumn.qml b/components/HistoryTableInnerColumn.qml new file mode 100644 index 00000000..61c39deb --- /dev/null +++ b/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) + } + } + } +} diff --git a/components/HistoryTableMobile.qml b/components/HistoryTableMobile.qml index 3b1dc31c..8ea5afcc 100644 --- a/components/HistoryTableMobile.qml +++ b/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 } } diff --git a/components/LineEdit.qml b/components/LineEdit.qml index 42da1e9d..243cc767 100644 --- a/components/LineEdit.qml +++ b/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 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.leftMargin: inlineIcon.visible ? 50 * scaleRatio : 10 * scaleRatio + anchors.horizontalCenter: placeholderCenter ? parent.horizontalCenter : undefined + 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" - border.width: 1 + id: inputFill + 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 { diff --git a/components/LineEditMulti.qml b/components/LineEditMulti.qml index 6c9dcf7a..abed2696 100644 --- a/components/LineEditMulti.qml +++ b/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") - clipboard.setText(multiLine.text) - appWindow.showStatusMessage(qsTr("Copied to clipboard"),3) + console.log(multiLine.text + " copied to clipboard"); + clipboard.setText(multiLine.text); + 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 diff --git a/components/StandardButton.qml b/components/StandardButton.qml index 0429c77e..02e08be8 100644 --- a/components/StandardButton.qml +++ b/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 diff --git a/components/StandardDialog.qml b/components/StandardDialog.qml index 7c9315d5..4804f294 100644 --- a/components/StandardDialog.qml +++ b/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 diff --git a/components/StandardDropdown.qml b/components/StandardDropdown.qml index f22cbab0..371b426e 100644 --- a/components/StandardDropdown.qml +++ b/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" - border.width: 1 + color: dropdown.colorHeaderBackground + 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.pixelSize: 16 * scaleRatio + font.bold: dropdown.headerFontBold + 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 { diff --git a/components/Style.qml b/components/Style.qml index 5e1dd26f..ffe9c194 100644 --- a/components/Style.qml +++ b/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" diff --git a/components/TableHeader.qml b/components/TableHeader.qml index d1f1778b..2936599e 100644 --- a/components/TableHeader.qml +++ b/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.left: header.offset !== 0 ? parent.left : undefined - anchors.leftMargin: header.offset + anchors.horizontalCenter: parent.horizontalCenter 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" } } } diff --git a/images/downArrow.png b/images/downArrow.png new file mode 100644 index 00000000..3e03d314 Binary files /dev/null and b/images/downArrow.png differ diff --git a/images/historyBorderRadius.png b/images/historyBorderRadius.png new file mode 100755 index 00000000..c18a6b9f Binary files /dev/null and b/images/historyBorderRadius.png differ diff --git a/images/upArrow-green.png b/images/upArrow-green.png new file mode 100644 index 00000000..5438a4d8 Binary files /dev/null and b/images/upArrow-green.png differ diff --git a/pages/History.qml b/pages/History.qml index 26b74808..2e44b940 100644 --- a/pages/History.qml +++ b/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 : - amountToLine.text === "" ? true: - 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 (Local database)") + 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; + fromDatePicker.error = !datesValid; + toDatePicker.error = !datesValid; + if(datesValid){ resetFilter(model) if (fromDatePicker.currentDate > toDatePicker.currentDate) { @@ -262,279 +111,233 @@ Rectangle { model.dateToFilter = toDatePicker.currentDate } - if (advancedFilteringCheckBox.checked) { - if (amountFromLine.text.length) { - 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() + model.searchFilter = searchLine.text; + tableHeader.visible = model.rowCount() > 0; } } - CheckBox { - visible: !isMobile - id: advancedFilteringCheckBox - 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 }) - } + Rectangle{ + id: rootLayout + visible: false } - Label { - visible: !isMobile - id: transactionTypeText + ColumnLayout { + id: pageRoot + anchors.margins: isMobile ? 17 : 20 * scaleRatio + anchors.topMargin: isMobile ? 0 : 40 * scaleRatio + anchors.left: parent.left - anchors.top: fromDatePicker.bottom - 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.top: parent.top 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 - } + spacing: 0 - MouseArea { - anchors.fill: parent - onClicked: { - parent.expanded = !parent.expanded - if (advancedFilteringCheckBox.checked) { - tableRect.height = Qt.binding(function() { return parent.expanded ? tableRect.expandedHeight : tableRect.collapsedHeight }) - } else { - tableRect.height = Qt.binding(function() { return parent.expanded ? tableRect.expandedHeight : tableRect.middleHeight }) + GridLayout { + columns: (isMobile)? 1 : 2 + Layout.fillWidth: true + columnSpacing: 26 * scaleRatio + + RowLayout { + visible: !isMobile + } + + 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 { - id: tableRect - property int expandedHeight: parent.height - filterHeaderText.y - filterHeaderText.height - 5 - 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 -// 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 + GridLayout { + z: 6 + columns: (isMobile)? 1 : 3 + Layout.fillWidth: true + columnSpacing: 22 * scaleRatio visible: !isMobile - anchors.left: parent.left - anchors.right: parent.right - anchors.top: parent.top - anchors.topMargin: 17 * scaleRatio - anchors.leftMargin: 14 * scaleRatio - anchors.rightMargin: 14 * scaleRatio - dataModel: columnsModel - offset: 20 - onSortRequest: { - console.log("column: " + column + " desc: " + desc) - switch (column) { - case 0: - // Payment ID - model.sortRole = TransactionHistoryModel.TransactionPaymentIdRole - break; - case 1: - // Date (actually sort by timestamp as we want to have transactions sorted within one day as well); - model.sortRole = TransactionHistoryModel.TransactionTimeStampRole - break; - case 2: - // BlockHeight; - model.sortRole = TransactionHistoryModel.TransactionBlockHeightRole - break; - case 3: - // Amount; - model.sortRole = TransactionHistoryModel.TransactionAmountRole - break; + + ColumnLayout { + Layout.fillWidth: true + + RowLayout { + Layout.fillWidth: true + id: fromDateRow + Layout.minimumWidth: 150 * scaleRatio + + DatePicker { + visible: !isMobile + + id: fromDatePicker + Layout.fillWidth: true + width: 100 * scaleRatio + inputLabel.text: "Date from" + + onCurrentDateChanged: { + onFilterChanged() + } + } + } + } + + ColumnLayout { + Layout.fillWidth: true + + 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 { - id: flickableScroll - visible: !isMobile - anchors.right: table.right - anchors.rightMargin: !isMobile ? -14 * scaleRatio : 0 - anchors.top: table.top - anchors.bottom: table.bottom - flickable: table - } + GridLayout { + id: tableHeader + columns: 1 + columnSpacing: 0 + rowSpacing: 0 + Layout.topMargin: 20 + Layout.fillWidth: true - HistoryTable { - id: table - visible: !isMobile - 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 - } + RowLayout{ + Layout.preferredHeight: 10 + Layout.fillWidth: true - HistoryTableMobile { - id: tableMobile - visible: isMobile - anchors.left: parent.left - anchors.right: parent.right - anchors.top: parent.top - anchors.bottom: parent.bottom - onContentYChanged: flickableScroll.flickableContentYChanged() - model: isMobile ? root.model : null - addressBookModel: null + Rectangle { + id: header + Layout.fillWidth: true + + height: 10 + color: "#CC000000" + + Rectangle { + anchors.top: parent.top + 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(); } } diff --git a/pages/Transfer.qml b/pages/Transfer.qml index 73c85b2c..6e45b62a 100644 --- a/pages/Transfer.qml +++ b/pages/Transfer.qml @@ -388,7 +388,6 @@ Rectangle { onFillLevelChanged: updateMixin() } - GridLayout { visible: persistentSettings.transferShowAdvanced Layout.topMargin: 50 * scaleRatio diff --git a/qml.qrc b/qml.qrc index c1826e1f..e6d5c51c 100644 --- a/qml.qrc +++ b/qml.qrc @@ -197,5 +197,9 @@ components/LabelSubheader.qml images/arrow-right-medium-white.png images/rightArrow.png + images/upArrow-green.png + images/downArrow.png + images/historyBorderRadius.png + components/HistoryTableInnerColumn.qml