New history page, including the mobile version.

This commit is contained in:
Sander Ferdinand
2017-12-27 00:53:21 +01:00
committed by moneromooo-monero
parent c28d2daf20
commit cf2791a246
18 changed files with 851 additions and 875 deletions

View File

@@ -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 <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;
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();
}
}

View File

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