From 1398b3c9d5550c023f015a9335b3214dc9d3d9a5 Mon Sep 17 00:00:00 2001 From: Khushboo Mehta Date: Tue, 31 Aug 2021 13:46:15 +0200 Subject: [PATCH] feat(StatusExpandableSettingsItem): Added new component for wallet settings Also added a page in the sandbox to demonstrate its usage. --- .../StatusExpandableSettingsItemPage.qml | 69 ++++++++ ui/StatusQ/sandbox/main.qml | 10 ++ ui/StatusQ/sandbox/qml.qrc | 1 + .../StatusExpandableSettingsItem.qml | 155 ++++++++++++++++++ ui/StatusQ/src/StatusQ/Components/qmldir | 1 + .../src/assets/img/icons/seed-phrase.svg | 10 ++ ui/StatusQ/statusq.qrc | 2 + 7 files changed, 248 insertions(+) create mode 100644 ui/StatusQ/sandbox/StatusExpandableSettingsItemPage.qml create mode 100644 ui/StatusQ/src/StatusQ/Components/StatusExpandableSettingsItem.qml create mode 100644 ui/StatusQ/src/assets/img/icons/seed-phrase.svg diff --git a/ui/StatusQ/sandbox/StatusExpandableSettingsItemPage.qml b/ui/StatusQ/sandbox/StatusExpandableSettingsItemPage.qml new file mode 100644 index 0000000000..501f30e1aa --- /dev/null +++ b/ui/StatusQ/sandbox/StatusExpandableSettingsItemPage.qml @@ -0,0 +1,69 @@ +import QtQuick 2.14 +import QtQuick.Layouts 1.14 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Components 0.1 + +Column { + spacing: 12 + width: 800 + anchors.top:parent.top + leftPadding: 20 + rightPadding: 20 + + StatusExpandableSettingsItem { + anchors.horizontalCenter: parent.horizontalCenter + + expandable: false + icon.name: "seed-phrase" + primaryText: qsTr("Back up seed phrase") + secondaryText: qsTr("Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD") + button.text: qsTr("Back up seed phrase") + } + + StatusExpandableSettingsItem { + anchors.horizontalCenter: parent.horizontalCenter + + expandable: true + icon.name: "secret" + primaryText: qsTr("Account signing phrase") + secondaryText: qsTr("View your signing phrase and ensure that you never get scammed") + expandableComponent: notImplemented + } + + StatusExpandableSettingsItem { + anchors.horizontalCenter: parent.horizontalCenter + + expandable: true + icon.name: "seed-phrase" + primaryText: qsTr("View private key") + secondaryText: qsTr("Back up your seed phrase now to secure this account") + expandableComponent: notImplemented + button.text: qsTr("View private key") + button.icon.name: "tiny/public-chat" + button.onClicked: { + // To-do open enter password Modal + expanded = !expanded + } + } + + Component { + id: notImplemented + Rectangle { + anchors.centerIn: parent + width: 654 + height: infoText.implicitHeight + color: Theme.palette.baseColor5 + StatusBaseText { + id: infoText + anchors.centerIn: parent + color: Theme.palette.directColor4 + font.pixelSize: 15 + lineHeight: 22 + lineHeightMode: Text.FixedHeight + font.weight: Font.Medium + text: qsTr("Not Implemented") + } + } + } +} diff --git a/ui/StatusQ/sandbox/main.qml b/ui/StatusQ/sandbox/main.qml index 3ebe313d97..4357b5cd88 100644 --- a/ui/StatusQ/sandbox/main.qml +++ b/ui/StatusQ/sandbox/main.qml @@ -169,6 +169,11 @@ StatusWindow { selected: page.sourceComponent == othersComponent onClicked: page.sourceComponent = othersComponent } + StatusNavigationListItem { + title: "StatusExpandableSettingsItem" + selected: page.sourceComponent == settingsComponent + onClicked: page.sourceComponent = settingsComponent + } StatusListSectionHeadline { text: "StatusQ.Popup" } StatusNavigationListItem { title: "StatusPopupMenu" @@ -291,6 +296,11 @@ StatusWindow { StatusTabSwitchPage {} } + Component { + id: settingsComponent + StatusExpandableSettingsItemPage{} + } + Component { id: demoAppCmp diff --git a/ui/StatusQ/sandbox/qml.qrc b/ui/StatusQ/sandbox/qml.qrc index 319941aae7..7e150260f1 100644 --- a/ui/StatusQ/sandbox/qml.qrc +++ b/ui/StatusQ/sandbox/qml.qrc @@ -13,5 +13,6 @@ ThemeSwitch.qml Layout.qml Popups.qml + StatusExpandableSettingsItemPage.qml diff --git a/ui/StatusQ/src/StatusQ/Components/StatusExpandableSettingsItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusExpandableSettingsItem.qml new file mode 100644 index 0000000000..111e6e5dde --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Components/StatusExpandableSettingsItem.qml @@ -0,0 +1,155 @@ +import QtQuick 2.14 +import StatusQ.Core 0.1 +import StatusQ.Controls 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Components 0.1 + +Rectangle { + id: statusExpandableSettingsItem + + property alias primaryText: primaryText.text + property alias secondaryText: secondaryText.text + property alias button: button + property alias expandableComponent: expandableRegion.sourceComponent + + property bool expandable: true + property bool expanded: false + property StatusIconSettings icon: StatusIconSettings { + color: Theme.palette.directColor1 + background: StatusIconBackgroundSettings { + width: 32 + height: 32 + color: Theme.palette.primaryColor2 + } + } + + implicitWidth: 718 + + radius: 8 + color: "transparent" + border.color: Theme.palette.baseColor2 + state: "COLLAPSED" + clip: true + + StatusRoundIcon { + id: roundIcon + anchors.top: parent.top + anchors.topMargin: 25 + anchors.left: parent.left + anchors.leftMargin: 11 + + icon.background.width: statusExpandableSettingsItem.icon.background.width + icon.background.height: statusExpandableSettingsItem.icon.background.height + icon.background.color: statusExpandableSettingsItem.icon.background.color + icon.color: statusExpandableSettingsItem.icon.color + icon.name: statusExpandableSettingsItem.icon.name + } + + StatusBaseText { + id: primaryText + anchors.top: parent.top + anchors.topMargin: 17 + anchors.left: roundIcon.right + anchors.leftMargin: 10 + + width: button.visible ? parent.width - icon.background.width - button.width - 70 : + parent.width - icon.background.width - 70 + + font.weight: Font.Medium + font.pixelSize: 15 + lineHeight: 22 + lineHeightMode: Text.FixedHeight + elide: Text.ElideRight + color: Theme.palette.directColor1 + } + + StatusBaseText { + id: secondaryText + anchors.top: primaryText.bottom + anchors.topMargin: 4 + anchors.left: primaryText.left + anchors.right: primaryText.right + + font.pixelSize: 15 + lineHeight: 22 + lineHeightMode: Text.FixedHeight + elide: Text.ElideRight + color: Theme.palette.directColor3 + } + + StatusButton { + id: button + anchors.top: parent.top + anchors.topMargin: 19 + anchors.right: parent.right + anchors.rightMargin: 16 + visible: !!text + } + + StatusIcon { + id: expandImage + anchors.top: parent.top + anchors.topMargin: 36 + anchors.right: parent.right + anchors.rightMargin: 23 + visible: expandable && !button.visible + color: Theme.palette.directColor1 + } + + Loader { + id: expandableRegion + anchors.top: secondaryText.bottom + anchors.topMargin: 16 + anchors.left: parent.left + anchors.leftMargin: 48 + width: parent.width - 64 + } + + MouseArea { + anchors.fill: parent + onClicked: { + if(expandable) { + expanded = !expanded + } + } + cursorShape: Qt.PointingHandCursor + visible: !button.visible && expandable + } + + onExpandedChanged: { + if(expanded) { + state = "EXPANDED" + } + else { + state = "COLLAPSED" + } + } + + states: [ + State { + name: "EXPANDED" + PropertyChanges {target: expandImage; icon: "chevron-up"} + PropertyChanges {target: statusExpandableSettingsItem; height: 82 + expandableRegion.height + 22} + PropertyChanges {target: expandableRegion; active: true} + }, + State { + name: "COLLAPSED" + PropertyChanges {target: expandImage; icon: "chevron-down"} + PropertyChanges {target: statusExpandableSettingsItem; height: 82} + PropertyChanges {target: expandableRegion; active: false} + } + ] + + transitions: [ + Transition { + from: "COLLAPSED" + to: "EXPANDED" + NumberAnimation { properties: "height"; duration: 200 } + }, + Transition { + from: "EXPANDED" + to: "COLLAPSED" + NumberAnimation { properties: "height"; duration: 200 } + } + ] +} diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir index 433d2d6b30..ccc42fd92e 100644 --- a/ui/StatusQ/src/StatusQ/Components/qmldir +++ b/ui/StatusQ/src/StatusQ/Components/qmldir @@ -20,3 +20,4 @@ StatusRoundIcon 0.1 StatusRoundIcon.qml StatusRoundedImage 0.1 StatusRoundedImage.qml StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml StatusListItemBadge 0.1 StatusListItemBadge.qml +StatusExpandableSettingsItem 0.1 StatusExpandableSettingsItem.qml diff --git a/ui/StatusQ/src/assets/img/icons/seed-phrase.svg b/ui/StatusQ/src/assets/img/icons/seed-phrase.svg new file mode 100644 index 0000000000..4d2125507e --- /dev/null +++ b/ui/StatusQ/src/assets/img/icons/seed-phrase.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ui/StatusQ/statusq.qrc b/ui/StatusQ/statusq.qrc index 0657838c54..e7a6e8917d 100644 --- a/ui/StatusQ/statusq.qrc +++ b/ui/StatusQ/statusq.qrc @@ -243,6 +243,7 @@ src/assets/img/icons/add-contact.svg src/assets/img/icons/add-circle.svg src/assets/img/icons/activity.svg + src/assets/img/icons/seed-phrase.svg src/StatusQ/Components/StatusChatListCategoryItem.qml src/StatusQ/Components/StatusChatListCategory.qml src/StatusQ/Controls/StatusBaseInput.qml @@ -265,5 +266,6 @@ src/assets/img/icons/windows_titlebar/status.svg src/StatusQ/Controls/StatusSwitchTabButton.qml src/StatusQ/Controls/StatusSwitchTabBar.qml + src/StatusQ/Components/StatusExpandableSettingsItem.qml