diff --git a/components/AddressBookTable.qml b/components/AddressBookTable.qml index 56ee7a6b..81343d4e 100644 --- a/components/AddressBookTable.qml +++ b/components/AddressBookTable.qml @@ -1,94 +1,115 @@ import QtQuick 2.0 +import moneroComponents 1.0 ListView { id: listView clip: true boundsBehavior: ListView.StopAtBounds + property var previousItem delegate: Rectangle { id: delegate height: 64 width: listView.width color: index % 2 ? "#F8F8F8" : "#FFFFFF" + function collapseDropdown() { dropdown.expanded = false } - StandardButton { - id: goToTransferButton + Text { + id: descriptionText anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - width: 37 - anchors.leftMargin: 3 - shadowReleasedColor: "#FF4304" - shadowPressedColor: "#B32D00" - releasedColor: "#FF6C3C" - pressedColor: "#FF4304" - icon: "../images/goToTransferIcon.png" - } + anchors.top: parent.top + anchors.topMargin: 12 + width: text.length ? (descriptionArea.containsMouse ? dropdown.x - x - 12 : 139) : 0 + font.family: "Arial" + font.bold: true + font.pixelSize: 19 + color: "#444444" + elide: Text.ElideRight + text: description - StandardButton { - id: removeButton - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - width: 37 - anchors.rightMargin: 3 - shadowReleasedColor: "#DBDBDB" - shadowPressedColor: "#888888" - releasedColor: "#F0EEEE" - pressedColor: "#DBDBDB" - icon: "../images/deleteIcon.png" - } - - Row { - anchors.left: goToTransferButton.right - anchors.right: removeButton.left - anchors.leftMargin: 12 - anchors.top: goToTransferButton.top - anchors.topMargin: -2 - - Text { - id: paymentIdText - anchors.top: parent.top - width: text.length ? 139 : 0 - font.family: "Arial" - font.bold: true - font.pixelSize: 19 - color: "#444444" - elide: Text.ElideRight - text: paymentId - } - - Item { //separator - width: paymentIdText.width ? 12 : 0 - height: 14 - } - - Text { - anchors.bottom: paymentIdText.bottom - width: parent.width - x - 12 - elide: Text.ElideRight - font.family: "Arial" - font.pixelSize: 14 - color: "#545454" - text: description + MouseArea { + id: descriptionArea + anchors.fill: parent + hoverEnabled: true } } Text { - anchors.top: description.length === 0 && paymentId.length === 0 ? goToTransferButton.top : undefined - anchors.bottom: description.length === 0 && paymentId.length === 0 ? undefined : goToTransferButton.bottom - anchors.topMargin: -2 - anchors.bottomMargin: -2 - - anchors.left: goToTransferButton.right - anchors.right: removeButton.left + id: addressText + anchors.bottom: descriptionText.bottom + anchors.left: descriptionText.right + anchors.right: dropdown.left + anchors.leftMargin: description.length > 0 ? 12 : 0 anchors.rightMargin: 12 - anchors.leftMargin: 12 elide: Text.ElideRight font.family: "Arial" - font.pixelSize: 14 + font.pixelSize: 16 + font.letterSpacing: -1 color: "#545454" text: address } + Text { + id: paymentLabel + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + + width: 139 + font.family: "Arial" + font.pixelSize: 12 + font.letterSpacing: -1 + color: "#535353" + text: qsTr("Payment ID:") + } + + Text { + anchors.bottom: paymentLabel.bottom + anchors.left: paymentLabel.right + anchors.leftMargin: 12 + anchors.rightMargin: 12 + anchors.right: dropdown.left + + elide: Text.ElideRight + font.family: "Arial" + font.pixelSize: 13 + font.letterSpacing: -1 + color: "#545454" + text: paymentId + } + + ListModel { + id: dropModel + ListElement { name: "Copy address to clipboard"; icon: "../images/dropdownCopy.png" } + ListElement { name: "Send to same destination"; icon: "../images/dropdownSend.png" } + ListElement { name: "Find similar transactions"; icon: "../images/dropdownSearch.png" } + ListElement { name: "Remove from history"; icon: "../images/dropdownDel.png" } + } + + Clipboard { id: clipboard } + TableDropdown { + id: dropdown + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.rightMargin: 5 + dataModel: dropModel + z: 1 + onExpandedChanged: { + if(listView.previousItem !== undefined && listView.previousItem !== delegate) + listView.previousItem.collapseDropdown() + if(expanded) { + listView.previousItem = delegate + listView.currentIndex = index + listView.currentItem.z = 2 + } + } + onCollapsed: delegate.z = 0 + onOptionClicked: { + if(option === 0) + clipboard.setText(address) + } + } + Rectangle { anchors.left: parent.left anchors.right: parent.right diff --git a/components/DashboardTable.qml b/components/DashboardTable.qml index 1b0d0f69..7afb6cb1 100644 --- a/components/DashboardTable.qml +++ b/components/DashboardTable.qml @@ -1,5 +1,4 @@ import QtQuick 2.0 -import "../components" import moneroComponents 1.0 ListView { @@ -12,7 +11,6 @@ ListView { id: delegate height: 90 width: listView.width - z: 0 color: index % 2 ? "#F8F8F8" : "#FFFFFF" function collapseDropdown() { dropdown.expanded = false } @@ -175,14 +173,6 @@ ListView { } } - Rectangle { - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom - height: 1 - color: "#DBDBDB" - } - ListModel { id: dropModel ListElement { name: "Copy address to clipboard"; icon: "../images/dropdownCopy.png" } @@ -199,6 +189,7 @@ ListView { anchors.bottomMargin: 11 anchors.rightMargin: 5 dataModel: dropModel + z: 1 onExpandedChanged: { if(listView.previousItem !== undefined && listView.previousItem !== delegate) listView.previousItem.collapseDropdown() @@ -214,5 +205,13 @@ ListView { clipboard.setText(address) } } + + Rectangle { + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + height: 1 + color: "#DBDBDB" + } } } diff --git a/images/dropdownDel.png b/images/dropdownDel.png new file mode 100644 index 00000000..140cd561 Binary files /dev/null and b/images/dropdownDel.png differ diff --git a/images/expandTable.png b/images/expandTable.png new file mode 100644 index 00000000..93206dca Binary files /dev/null and b/images/expandTable.png differ diff --git a/images/goToTransferIcon.png b/images/goToTransferIcon.png deleted file mode 100644 index b2e4d988..00000000 Binary files a/images/goToTransferIcon.png and /dev/null differ diff --git a/pages/AddressBook.qml b/pages/AddressBook.qml index 8f965e8c..ab526709 100644 --- a/pages/AddressBook.qml +++ b/pages/AddressBook.qml @@ -49,35 +49,34 @@ Rectangle { text: qsTr("Payment ID (Optional)") fontSize: 14 tipText: qsTr("Payment ID

A unique user name used in
the address book. It is not a
transfer of information sent
during thevtransfer") - width: 156 - } - - Label { - id: descriptionLabel - anchors.left: paymentIdLabel.right - anchors.top: addressLine.bottom - anchors.leftMargin: 17 - anchors.topMargin: 17 - text: qsTr("Description (Local database)") - fontSize: 14 - tipText: qsTr("Tip tekst test

test line 2") - width: 156 } LineEdit { id: paymentIdLine anchors.left: parent.left + anchors.right: parent.right anchors.top: paymentIdLabel.bottom anchors.leftMargin: 17 + anchors.rightMargin: 17 anchors.topMargin: 5 - width: 156 + } + + Label { + id: descriptionLabel + anchors.left: parent.left + anchors.top: paymentIdLine.bottom + anchors.leftMargin: 17 + anchors.topMargin: 17 + text: qsTr("Description (Local database)") + fontSize: 14 + tipText: qsTr("Tip tekst test

test line 2") } LineEdit { id: descriptionLine - anchors.left: paymentIdLine.right - anchors.right: addButton.left - anchors.top: paymentIdLabel.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.top: descriptionLabel.bottom anchors.leftMargin: 17 anchors.rightMargin: 17 anchors.topMargin: 5 @@ -85,10 +84,10 @@ Rectangle { StandardButton { id: addButton - anchors.right: parent.right - anchors.top: paymentIdLabel.bottom - anchors.rightMargin: 17 - anchors.topMargin: 5 + anchors.left: parent.left + anchors.top: descriptionLine.bottom + anchors.leftMargin: 17 + anchors.topMargin: 17 width: 60 shadowReleasedColor: "#FF4304" @@ -98,14 +97,40 @@ Rectangle { text: qsTr("ADD") } + Item { + id: expandItem + property bool expanded: false + + anchors.right: parent.right + anchors.bottom: tableRect.top + width: 34 + height: 34 + + Image { + anchors.centerIn: parent + source: "../images/expandTable.png" + rotation: parent.expanded ? 180 : 0 + } + + MouseArea { + anchors.fill: parent + onClicked: parent.expanded = !parent.expanded + } + } + Rectangle { + id: tableRect anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom - anchors.top: paymentIdLine.bottom - anchors.topMargin: 17 + height: expandItem.expanded ? parent.height - newEntryText.y - newEntryText.height - 17 : + parent.height - addButton.y - addButton.height - 17 color: "#FFFFFF" + Behavior on height { + NumberAnimation { duration: 200; easing.type: Easing.InQuad } + } + Rectangle { anchors.left: parent.left anchors.right: parent.right @@ -116,8 +141,9 @@ Rectangle { ListModel { id: columnsModel + ListElement { columnName: "Address"; columnWidth: 148 } ListElement { columnName: "Payment ID"; columnWidth: 148 } - ListElement { columnName: "Description"; columnWidth: 420 } + ListElement { columnName: "Description"; columnWidth: 148 } } TableHeader { @@ -134,19 +160,19 @@ Rectangle { ListModel { id: testModel - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "" } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" } ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "" } } diff --git a/pages/Dashboard.qml b/pages/Dashboard.qml index 1f3e62e4..df74c61a 100644 --- a/pages/Dashboard.qml +++ b/pages/Dashboard.qml @@ -9,7 +9,9 @@ Rectangle { anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top - anchors.margins: 17 + anchors.leftMargin: 17 + anchors.rightMargin: 17 + anchors.topMargin: 17 z: 1 } @@ -114,16 +116,16 @@ Rectangle { ListModel { id: testModel - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: "Client from Australia"; out: false } - ListElement { paymentId: "Martin"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: ""; out: true } - ListElement { paymentId: "Martin"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: ""; out: true } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: "Client from Australia"; out: false } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: ""; out: true } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: ""; out: true } ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: ""; out: false } ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: "Client from Australia"; out: false } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: ""; out: false } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: ""; out: false } ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: ""; out: false } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: ""; out: false } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: "Client from Australia"; out: false } - ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: ""; out: false } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: ""; out: false } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: "Client from Australia"; out: false } + ListElement { paymentId: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; date: "Jan 12, 2014"; time: "12:23 AM"; amount: "19301.870709159241"; balance: "0.000709159241"; description: ""; out: false } } Scroll { diff --git a/pages/Transfer.qml b/pages/Transfer.qml index 8fa3cd57..a20cf897 100644 --- a/pages/Transfer.qml +++ b/pages/Transfer.qml @@ -8,7 +8,9 @@ Rectangle { id: amountLabel anchors.left: parent.left anchors.top: parent.top - anchors.margins: 17 + anchors.leftMargin: 17 + anchors.rightMargin: 17 + anchors.topMargin: 17 text: qsTr("Amount") fontSize: 14 } @@ -129,13 +131,37 @@ Rectangle { anchors.topMargin: 5 } - Row { + Label { + id: descriptionLabel anchors.left: parent.left anchors.right: parent.right anchors.top: paymentLine.bottom anchors.leftMargin: 17 anchors.rightMargin: 17 anchors.topMargin: 17 + fontSize: 14 + text: qsTr("Description ( Local database )") + visible: checkBox.checked + } + + LineEdit { + id: descriptionLine + anchors.left: parent.left + anchors.right: parent.right + anchors.top: descriptionLabel.bottom + anchors.leftMargin: 17 + anchors.rightMargin: 17 + anchors.topMargin: 5 + visible: checkBox.checked + } + + Row { + anchors.left: parent.left + anchors.right: parent.right + anchors.top: checkBox.checked ? descriptionLine.bottom : paymentLine.bottom + anchors.leftMargin: 17 + anchors.rightMargin: 17 + anchors.topMargin: 17 spacing: 17 StandardButton { diff --git a/qml.qrc b/qml.qrc index eae1e0f7..cc2205cd 100644 --- a/qml.qrc +++ b/qml.qrc @@ -51,7 +51,6 @@ tabs/TweetsModel.qml components/Scroll.qml components/AddressBookTable.qml - images/goToTransferIcon.png images/deleteIcon.png images/moneroIcon.png components/StandardDropdown.qml @@ -70,5 +69,7 @@ images/collapseRightPanel.png images/expandRightPanel.png images/dropdownCopy.png + images/expandTable.png + images/dropdownDel.png