From 6d710834719485ff7e8a4efc0f0720bcbb3bab3d Mon Sep 17 00:00:00 2001 From: "littletux89@gmail.com" <littletux89@gmail.com> Date: Thu, 6 Feb 2020 18:28:26 +0300 Subject: [PATCH] [+] Added a screen design History. --- CellFrameDashboardGUI/qml.qrc | 1 + CellFrameDashboardGUI/res/icons/ic_search.png | Bin 0 -> 754 bytes .../desktop/Dashboard/DapDashboardScreen.qml | 1 - .../Dashboard/DapDashboardTopPanelForm.ui.qml | 6 +- .../DapNewPaymentMainRightPanelForm.ui.qml | 2 +- .../desktop/History/DapHistoryRightPanel.qml | 4 +- .../desktop/History/DapHistoryScreen.qml | 253 +++++++++++++++++- .../History/DapHistoryScreenForm.ui.qml | 15 +- .../screen/desktop/History/DapHistoryTab.qml | 4 +- .../desktop/History/DapHistoryTabForm.ui.qml | 6 +- .../desktop/History/DapHistoryTopPanel.qml | 4 +- .../History/DapHistoryTopPanelForm.ui.qml | 253 ++++++++++++++++++ libdap-qt-ui-qml | 2 +- 13 files changed, 538 insertions(+), 13 deletions(-) create mode 100644 CellFrameDashboardGUI/res/icons/ic_search.png diff --git a/CellFrameDashboardGUI/qml.qrc b/CellFrameDashboardGUI/qml.qrc index 5bc6b7b..8dffd05 100755 --- a/CellFrameDashboardGUI/qml.qrc +++ b/CellFrameDashboardGUI/qml.qrc @@ -144,5 +144,6 @@ <file>screen/desktop/Dashboard/RightPanel/DapNewPaymentDoneRightPanel.qml</file> <file>screen/desktop/Dashboard/RightPanel/DapNewPaymentDoneRightPanelForm.ui.qml</file> <file>res/icons/ic_cellframe.png</file> + <file>res/icons/ic_search.png</file> </qresource> </RCC> diff --git a/CellFrameDashboardGUI/res/icons/ic_search.png b/CellFrameDashboardGUI/res/icons/ic_search.png new file mode 100644 index 0000000000000000000000000000000000000000..b13ae9c16acda11d018d918592defe6d671fc3e3 GIT binary patch literal 754 zcmeAS@N?(olHy`uVBq!ia0vp^x**KK1|+Sd9?b$$jKx9jP7LeL$-D$|EK(yp(|mmy zw18|52FCVG1{RPKAeI7R1_q`DOmGq11<VLGNHR4+JqxHL!_&nvB!ctp^v1$l4g#)< zye)iA?17v`te%`pn3glYP<VHsBq65pDVI`sg4Ko~#>)9`((-JkZ3*IYGP*VMJlEZO z_v_=;71K6rs<B7O&e-1fg-3?3omF+d1Lw2_3|7}0q~09lvpM&?c<%3N#f=HPi#|F% zl+r0$Dfh&rH{9eOTM*;-n)SRzA<3<d;fI`);|pq^tNYD6t9!{%%Fevjcjd*<n+#X0 zW4@m~ZRBTe`fY{9gxL=RY*)-}_+x5Q>7&RS=DGQ;1mAq-^JWi!y?MSlP3nZ=U5_p; zc1xRgJ1W>?HwM&u)JB`^l<Hvb@ZZSE*(v6zQB-cJz4HjuQST7{6?}(E^wanD6r2|5 zKUn=c_BfZ9^zQS2yVGj=kIfJLa>*n6^v>YameUK5#QN2nYzpqo>-q2OcadAU_|w8W zwO{j&ZCd}~YsK`->$8jN^?N>KY7|b-*dKUm;gW;DE{1RN{&H{DZe>T^hnp^G)y{5F z-zN4+VDF9RCDUJgVNbXmWs$_-{6~DFq~YFbFQ<8LpR%2syjM;pJegN&)1!seof`uy z_Q~I@+iUXkti)`YwTm2gZO>o)`QEDL*VkCIr{-Txv375sz2v6s@n)GI+X@D`TY0W# zjkzu+o~^4hU+kAF&0bK&e?M<=YyVI4y2FR=-F_rh#F}+_N%EAMQ=U&*1O6~*Z(tV{ zXnz*}@!ImA%emiNT6%9+Zlg~6*N)<k#(mr$j`#7$Ep=hIyTm%6+2l(s_vIh?8#9H^ zi7#O6x)`nc)aJBdlKR8+!dtU_`gRLHKQ;OB^P*e7|LFJG|8CN=oBg=@)4NAU{g~9* f)!6?rvez*!%kjJ~bMNLVP}=i!^>bP0l+XkKBQieZ literal 0 HcmV?d00001 diff --git a/CellFrameDashboardGUI/screen/desktop/Dashboard/DapDashboardScreen.qml b/CellFrameDashboardGUI/screen/desktop/Dashboard/DapDashboardScreen.qml index 6fed35f..4ebbe01 100644 --- a/CellFrameDashboardGUI/screen/desktop/Dashboard/DapDashboardScreen.qml +++ b/CellFrameDashboardGUI/screen/desktop/Dashboard/DapDashboardScreen.qml @@ -68,7 +68,6 @@ DapDashboardScreenForm font.weight: Font.Normal color: "#908D9D" text: address - elide: Text.ElideRight } diff --git a/CellFrameDashboardGUI/screen/desktop/Dashboard/DapDashboardTopPanelForm.ui.qml b/CellFrameDashboardGUI/screen/desktop/Dashboard/DapDashboardTopPanelForm.ui.qml index 1536800..684c2c6 100644 --- a/CellFrameDashboardGUI/screen/desktop/Dashboard/DapDashboardTopPanelForm.ui.qml +++ b/CellFrameDashboardGUI/screen/desktop/Dashboard/DapDashboardTopPanelForm.ui.qml @@ -8,8 +8,6 @@ DapAbstractTopPanel property alias dapAddWalletButton: addWalletButton property alias dapComboboxWallet: comboboxWallet - anchors.fill: parent - // Static text "Wallet" Label { @@ -38,8 +36,8 @@ DapAbstractTopPanel { id: comboboxWallet model: dapModelWallets - comboBoxTextRole: "name" - mainLineText: "all wallets" + comboBoxTextRole: ["name"] + mainLineText: ["all wallets"] indicatorImageNormal: "qrc:/res/icons/ic_arrow_drop_down.png" indicatorImageActive: "qrc:/res/icons/ic_arrow_drop_up.png" sidePaddingNormal: 0 * pt diff --git a/CellFrameDashboardGUI/screen/desktop/Dashboard/RightPanel/DapNewPaymentMainRightPanelForm.ui.qml b/CellFrameDashboardGUI/screen/desktop/Dashboard/RightPanel/DapNewPaymentMainRightPanelForm.ui.qml index 6956bea..abd372d 100644 --- a/CellFrameDashboardGUI/screen/desktop/Dashboard/RightPanel/DapNewPaymentMainRightPanelForm.ui.qml +++ b/CellFrameDashboardGUI/screen/desktop/Dashboard/RightPanel/DapNewPaymentMainRightPanelForm.ui.qml @@ -109,7 +109,7 @@ DapAbstractRightPanel id: comboboxToken anchors.left: parent.left anchors.right: parent.right - comboBoxTextRole: "name" + comboBoxTextRole: ["name"] indicatorImageNormal: "qrc:/res/icons/ic_arrow_drop_down.png" indicatorImageActive: "qrc:/res/icons/ic_arrow_drop_up.png" sidePaddingNormal: 0 * pt diff --git a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryRightPanel.qml b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryRightPanel.qml index 828b138..85821ec 100644 --- a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryRightPanel.qml +++ b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryRightPanel.qml @@ -1,4 +1,6 @@ import QtQuick 2.4 -DapHistoryRightPanelForm { +DapHistoryRightPanelForm +{ + } diff --git a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryScreen.qml b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryScreen.qml index 439e389..daeb6ba 100644 --- a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryScreen.qml +++ b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryScreen.qml @@ -1,4 +1,255 @@ import QtQuick 2.4 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 +import "qrc:/widgets" -DapHistoryScreenForm { +DapHistoryScreenForm +{ + id: historyScreen + ListModel + { + id: testModel + ListElement + { + date: "6, february" + token: "KELT" + status: "Sent" + amount: "165489878556" + } + ListElement + { + date: "6, february" + token: "DAG" + status: "Received" + amount: "333559878556" + } + ListElement + { + date: "5, february" + token: "KELT" + status: "Error" + amount: "165489878556" + } + ListElement + { + date: "5, february" + token: "DAG" + status: "Panding" + amount: "333559878556" + } + ListElement + { + date: "7, february" + token: "DAG" + status: "Received" + amount: "333559878556" + } + ListElement + { + date: "3, february" + token: "KELT" + status: "Error" + amount: "165489878556" + } + ListElement + { + date: "5, february" + token: "DAG" + status: "Panding" + amount: "333559878556" + } + } + + Component + { + id: delegateDate + Rectangle + { + width: parent.width + height: 30 * pt + color: "#908D9D" + + Text + { + anchors.fill: parent + verticalAlignment: Qt.AlignVCenter + anchors.leftMargin: 16 * pt + color: "#FFFFFF" + text: section + font.family: "Roboto" + font.styleName: "Normal" + font.weight: Font.Normal + font.pixelSize: 12 * pt + } + } + } + + + Component + { + id: delegateToken + Column + { + width: parent.width + Rectangle + { + id: frameContentToken + height: 66 * pt + width: parent.width + color: "transparent" + + // Icon token + Rectangle + { + id: frameIconToken + width: 26 * pt + height: 26 * pt + anchors.left: parent.left + anchors.leftMargin: 30 * pt + anchors.verticalCenter: parent.verticalCenter + + Image + { + id: iconToken + anchors.fill: parent + source: "qrc:/res/icons/ic_cellframe.png" + } + } + + // Token name + Rectangle + { + id: frameTokenName + width: 246 * pt + height: textTokenName.contentHeight + anchors.left: frameIconToken.right + anchors.leftMargin: 20 * pt + anchors.verticalCenter: parent.verticalCenter + + Text + { + id: textTokenName + anchors.fill: parent + text: token + color: "#070023" + font.family: "Roboto" + font.styleName: "Normal" + font.weight: Font.Normal + font.pixelSize: 16 * pt + Layout.alignment: Qt.AlignLeft + } + } + + // Wallet number + Rectangle + { + id: frameNumberWallet + anchors.left: frameTokenName.right + anchors.leftMargin: 20 * pt + anchors.verticalCenter: parent.verticalCenter + } + + // Status + Rectangle + { + id: frameStatus + width: 100 * pt + height: textSatus.contentHeight + anchors.left: frameNumberWallet.right + anchors.leftMargin: 20 * pt + anchors.right: frameBalance.left + anchors.rightMargin: 20 * pt + anchors.verticalCenter: parent.verticalCenter + + Text + { + id: textSatus + anchors.fill: parent + text: status + color: status === "Sent" ? "#4B8BEB" : status === "Error" ? "#EB4D4B" : status === "Received" ? "#6F9F00" : "#FFBC00" + font.family: "Roboto" + font.styleName: "Normal" + font.weight: Font.Normal + font.pixelSize: 14 * pt + } + } + + // Balance + Rectangle + { + id: frameBalance + width: 264 * pt + height: parent.height + anchors.right: parent.right + anchors.rightMargin: 20 * pt + anchors.verticalCenter: parent.verticalCenter + + ColumnLayout + { + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + + // Token currency + Text + { + id: lblAmount + width: parent.width + property string sign: (status === "Sent" || status === "Pending") ? "- " : "+ " + text: sign + amount + " " + token + color: "#070023" + font.family: "Roboto" + font.styleName: "Normal" + font.weight: Font.Normal + font.pixelSize: 16 * pt + Layout.alignment: Qt.AlignRight + } + + // Equivalent currency + Text + { + id: lblEquivalent + width: parent.width + property string sign: (status === "Sent" || status === "Pending") ? "- " : "+ " + text: sign + "$ " + 0.5 * amount + " USD" + color: "#C2CAD1" + font.family: "Roboto" + font.styleName: "Normal" + font.weight: Font.Normal + font.pixelSize: 12 * pt + Layout.alignment: Qt.AlignRight + } + } + } + } + // Underline + Rectangle + { + width: parent.width + height: 1 + color: "#C2CAD1" + } + } + + } + + + // Address wallet tip + Label + { + id: lblAddressWallet + padding: 3 * pt + color: "#4F5357" + font.family: "Regular" + font.pixelSize: 14 * pt + background: + Rectangle + { + anchors.fill: parent + color: "#FFFFFF"; + border.color: "#80000000" + border.width: 1 * pt + } + + visible: false + } } diff --git a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryScreenForm.ui.qml b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryScreenForm.ui.qml index 72d0099..19eadaf 100644 --- a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryScreenForm.ui.qml +++ b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryScreenForm.ui.qml @@ -3,5 +3,18 @@ import "../../" DapAbstractScreen { - dapFrame.color: "blue" + ListView + { + id: dapListViewHistory + anchors.fill: parent + + anchors.topMargin: 24 * pt + anchors.leftMargin: 24 * pt + anchors.rightMargin: 24 * pt + model: testModel + delegate: delegateToken + section.property: "date" + section.criteria: ViewSection.FullString + section.delegate: delegateDate + } } diff --git a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTab.qml b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTab.qml index 9db92f6..2e3b182 100644 --- a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTab.qml +++ b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTab.qml @@ -1,4 +1,6 @@ import QtQuick 2.4 -DapHistoryTabForm { +DapHistoryTabForm +{ + } diff --git a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTabForm.ui.qml b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTabForm.ui.qml index 0dfa21f..32ec297 100644 --- a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTabForm.ui.qml +++ b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTabForm.ui.qml @@ -10,7 +10,11 @@ DapAbstractTab dapScreen: DapHistoryScreen { } - dapRightPanel: DapHistoryRightPanel { } + dapRightPanel: + DapHistoryRightPanel + { + visible: false + } } /*##^## Designer { diff --git a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTopPanel.qml b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTopPanel.qml index e585de8..68a4f5b 100644 --- a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTopPanel.qml +++ b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTopPanel.qml @@ -1,4 +1,6 @@ import QtQuick 2.4 -DapHistoryTopPanelForm { +DapHistoryTopPanelForm +{ + } diff --git a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTopPanelForm.ui.qml b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTopPanelForm.ui.qml index 893e3fa..00b02a7 100644 --- a/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTopPanelForm.ui.qml +++ b/CellFrameDashboardGUI/screen/desktop/History/DapHistoryTopPanelForm.ui.qml @@ -1,7 +1,260 @@ import QtQuick 2.4 +import QtQuick.Controls 1.4 +import QtQuick.Controls.Styles 1.4 +import QtQuick.Layouts 1.3 +import "qrc:/widgets" import "../../" DapAbstractTopPanelForm { + // Frame icon search + Rectangle + { + id: frameIconSearch + anchors.left: parent.left + anchors.leftMargin: 16 * pt + anchors.verticalCenter: parent.verticalCenter + height: 15 * pt + width: 15 * pt + color: "transparent" + Image + { + id: iconSearch + anchors.fill: parent + source: "qrc:/res/icons/ic_search.png" + } + } + // Wallet selection combo box + Rectangle + { + id: frameTextFieldSearch + anchors.left: frameIconSearch.right + anchors.verticalCenter: parent.verticalCenter + anchors.leftMargin: 10 * pt + width: 252 * pt + height: layoutSearch.height + color: "transparent" + ColumnLayout + { + id: layoutSearch + width: parent.width + anchors.verticalCenter: parent.verticalCenter + TextField + { + id: textFieldSearch + anchors.top: parent.top + anchors.left: parent.left + anchors.leftMargin: 10 * pt + anchors.right: parent.right + placeholderText: qsTr("Search") + font.pixelSize: 12 * pt + font.family: "Roboto" + font.styleName: "Normal" + font.weight: Font.Normal + style: + TextFieldStyle + { + textColor: "#ACAAB5" + placeholderTextColor: "#ACAAB5" + background: + Rectangle + { + border.width: 0 + color: "transparent" + } + } + } + Rectangle + { + anchors.top: textFieldSearch.bottom + width: parent.width + height: 1 * pt + color: "#59556C" + } + } + } + + // Static text "Period" + Label + { + id: textPeriod + text: qsTr("Period") + anchors.left: frameTextFieldSearch.right + anchors.leftMargin: 75 * pt + anchors.verticalCenter: parent.verticalCenter + font.family: dapFontRobotoRegular.name + font.pixelSize: 12 * pt + color: "#ACAAB5" + } + + // Period selection combo box + Rectangle + { + id: frameComboBoxPeriod + + anchors.left: textPeriod.right + anchors.verticalCenter: parent.verticalCenter + anchors.leftMargin: 26 * pt + width: 108 * pt + color: "transparent" + DapComboBox + { + id: comboboxPeriod + comboBoxTextRole: ["name"] + mainLineText: ["all time"] + indicatorImageNormal: "qrc:/res/icons/ic_arrow_drop_down.png" + indicatorImageActive: "qrc:/res/icons/ic_arrow_drop_up.png" + sidePaddingNormal: 0 * pt + sidePaddingActive: 16 * pt + normalColorText: "#070023" + hilightColorText: "#FFFFFF" + normalColorTopText: "#FFFFFF" + hilightColorTopText: "#070023" + hilightColor: "#330F54" + normalTopColor: "#070023" + widthPopupComboBoxNormal: 108 * pt + widthPopupComboBoxActive: 140 * pt + heightComboBoxNormal: 24 * pt + heightComboBoxActive: 44 * pt + bottomIntervalListElement: 8 * pt + topEffect: false + x: popup.visible ? sidePaddingActive * (-1) : sidePaddingNormal + normalColor: "#FFFFFF" + hilightTopColor: normalColor + paddingTopItemDelegate: 8 * pt + heightListElement: 32 * pt + intervalListElement: 10 * pt + indicatorWidth: 24 * pt + indicatorHeight: indicatorWidth + indicatorLeftInterval: 8 * pt + colorTopNormalDropShadow: "#00000000" + colorDropShadow: "#40ABABAB" + fontComboBox.pixelSize: 14 * pt + fontComboBox.family: "Roboto" + } + } + + // Static text "Wallet" + Label + { + id: textHeaderWallet + text: qsTr("Wallet") + anchors.left: frameComboBoxPeriod.right + anchors.leftMargin: 75 * pt + anchors.verticalCenter: parent.verticalCenter + font.family: dapFontRobotoRegular.name + font.pixelSize: 12 * pt + color: "#ACAAB5" + } + + // Wallet selection combo box + Rectangle + { + id: frameComboBoxWallet + + anchors.left: textHeaderWallet.right + anchors.verticalCenter: parent.verticalCenter + anchors.leftMargin: 30 * pt + width: 148 * pt + color: "transparent" + + DapComboBox + { + id: comboboxWallet + model: dapModelWallets + comboBoxTextRole: ["name"] + mainLineText: ["all wallets"] + indicatorImageNormal: "qrc:/res/icons/ic_arrow_drop_down.png" + indicatorImageActive: "qrc:/res/icons/ic_arrow_drop_up.png" + sidePaddingNormal: 0 * pt + sidePaddingActive: 16 * pt + normalColorText: "#070023" + hilightColorText: "#FFFFFF" + normalColorTopText: "#FFFFFF" + hilightColorTopText: "#070023" + hilightColor: "#330F54" + normalTopColor: "#070023" + widthPopupComboBoxNormal: 148 * pt + widthPopupComboBoxActive: 180 * pt + heightComboBoxNormal: 24 * pt + heightComboBoxActive: 44 * pt + bottomIntervalListElement: 8 * pt + topEffect: false + x: popup.visible ? sidePaddingActive * (-1) : sidePaddingNormal + normalColor: "#FFFFFF" + hilightTopColor: normalColor + paddingTopItemDelegate: 8 * pt + heightListElement: 32 * pt + intervalListElement: 10 * pt + indicatorWidth: 24 * pt + indicatorHeight: indicatorWidth + indicatorLeftInterval: 8 * pt + colorTopNormalDropShadow: "#00000000" + colorDropShadow: "#40ABABAB" + fontComboBox.pixelSize: 14 * pt + fontComboBox.family: "Roboto" + } + } + + // Static text "Status" + Label + { + id: textHeaderStatus + text: qsTr("Status") + anchors.left: frameComboBoxWallet.right + anchors.leftMargin: 75 * pt + anchors.verticalCenter: parent.verticalCenter + font.family: dapFontRobotoRegular.name + font.pixelSize: 12 * pt + color: "#ACAAB5" + } + + // Stats selection combo box + Rectangle + { + id: frameComboBoxStatus + + anchors.left: textHeaderStatus.right + anchors.verticalCenter: parent.verticalCenter + anchors.leftMargin: 26 * pt + width: 120 * pt + color: "transparent" + + DapComboBox + { + id: comboboxStatus + comboBoxTextRole: ["name"] + mainLineText: ["all status"] + indicatorImageNormal: "qrc:/res/icons/ic_arrow_drop_down.png" + indicatorImageActive: "qrc:/res/icons/ic_arrow_drop_up.png" + sidePaddingNormal: 0 * pt + sidePaddingActive: 16 * pt + normalColorText: "#070023" + hilightColorText: "#FFFFFF" + normalColorTopText: "#FFFFFF" + hilightColorTopText: "#070023" + hilightColor: "#330F54" + normalTopColor: "#070023" + widthPopupComboBoxNormal: 120 * pt + widthPopupComboBoxActive: 152 * pt + heightComboBoxNormal: 24 * pt + heightComboBoxActive: 44 * pt + bottomIntervalListElement: 8 * pt + topEffect: false + x: popup.visible ? sidePaddingActive * (-1) : sidePaddingNormal + normalColor: "#FFFFFF" + hilightTopColor: normalColor + paddingTopItemDelegate: 8 * pt + heightListElement: 32 * pt + intervalListElement: 10 * pt + indicatorWidth: 24 * pt + indicatorHeight: indicatorWidth + indicatorLeftInterval: 8 * pt + colorTopNormalDropShadow: "#00000000" + colorDropShadow: "#40ABABAB" + fontComboBox.pixelSize: 14 * pt + fontComboBox.family: "Roboto" + } + } } diff --git a/libdap-qt-ui-qml b/libdap-qt-ui-qml index 103c3d1..ceadb4e 160000 --- a/libdap-qt-ui-qml +++ b/libdap-qt-ui-qml @@ -1 +1 @@ -Subproject commit 103c3d107cf730c8158368d20e339647cc568659 +Subproject commit ceadb4ef28ca0496518497db804fdeb638111650 -- GitLab