From 5c5d7826053e20b40b49e7c99d416e5e3b5a9095 Mon Sep 17 00:00:00 2001 From: Khushboo Mehta Date: Tue, 7 Sep 2021 13:34:35 +0200 Subject: [PATCH] feat(StatusExpandableItem): Refactored the StatusExpandableSettingsItem to support different types Renamed StatusExpandableSettingsItem to StatusExpandableItem. Added support for dofferent types of styles for the item. Type Primary: Relates to Settings Design Type Secondary: Relates to Collectibles Design Type Tertiary: Relates to the Collectibles detailed view design BREAKING CHANGE: Renamed and expanded features of the StatusExpandableSettingsItem to StatusExpandableItem --- .../StatusExpandableSettingsItemPage.qml | 103 +++++++- ui/StatusQ/sandbox/main.qml | 2 +- .../Components/StatusExpandableItem.qml | 229 ++++++++++++++++++ .../StatusExpandableSettingsItem.qml | 155 ------------ ui/StatusQ/src/StatusQ/Components/qmldir | 2 +- ui/StatusQ/statusq.qrc | 2 +- 6 files changed, 325 insertions(+), 168 deletions(-) create mode 100644 ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml delete mode 100644 ui/StatusQ/src/StatusQ/Components/StatusExpandableSettingsItem.qml diff --git a/ui/StatusQ/sandbox/StatusExpandableSettingsItemPage.qml b/ui/StatusQ/sandbox/StatusExpandableSettingsItemPage.qml index 501f30e1aa..9af00c489f 100644 --- a/ui/StatusQ/sandbox/StatusExpandableSettingsItemPage.qml +++ b/ui/StatusQ/sandbox/StatusExpandableSettingsItemPage.qml @@ -11,35 +11,46 @@ Column { leftPadding: 20 rightPadding: 20 - StatusExpandableSettingsItem { + Rectangle { + width: parent.width + height: 30 + color: Theme.palette.baseColor2 + StatusBaseText { + anchors.verticalCenter: parent.verticalCenter + text: "Type Primary" + color: Theme.palette.directColor1 + } + } + + StatusExpandableItem { 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") + primaryText: "Back up seed phrase" + secondaryText: "Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD" button.text: qsTr("Back up seed phrase") } - StatusExpandableSettingsItem { + StatusExpandableItem { 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") + primaryText: "Account signing phrase" + secondaryText: "View your signing phrase and ensure that you never get scammed. View your signing phrase and ensure that you never get scammed." expandableComponent: notImplemented } - StatusExpandableSettingsItem { + StatusExpandableItem { 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") + primaryText: "View private key" + secondaryText: "Back up your seed phrase now to secure this account" expandableComponent: notImplemented - button.text: qsTr("View private key") + button.text: "View private key" button.icon.name: "tiny/public-chat" button.onClicked: { // To-do open enter password Modal @@ -47,6 +58,78 @@ Column { } } + Rectangle { + width: parent.width + height: 30 + color: Theme.palette.baseColor2 + StatusBaseText { + anchors.verticalCenter: parent.verticalCenter + text: "Type Secondary" + color: Theme.palette.directColor1 + } + } + + StatusExpandableItem { + anchors.horizontalCenter: parent.horizontalCenter + + type: StatusExpandableItem.Type.Secondary + expandable: true + image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" + primaryText: "CryptoKitties" + additionalText: "1456 USD" + expandableComponent: notImplemented + } + + StatusExpandableItem { + anchors.horizontalCenter: parent.horizontalCenter + + type: StatusExpandableItem.Type.Secondary + expandable: true + image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" + primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text" + additionalText: "564.90 USD" + expandableComponent: notImplemented + } + + StatusExpandableItem { + anchors.horizontalCenter: parent.horizontalCenter + + type: StatusExpandableItem.Type.Secondary + expandable: true + primaryText: "CryptoKitties" + additionalText: "1456 USD" + expandableComponent: notImplemented + } + + Rectangle { + width: parent.width + height: 30 + color: Theme.palette.baseColor2 + StatusBaseText { + anchors.verticalCenter: parent.verticalCenter + text: "Type Tertiary" + color: Theme.palette.directColor1 + } + } + + StatusExpandableItem { + anchors.horizontalCenter: parent.horizontalCenter + + type: StatusExpandableItem.Type.Tertiary + expandable: true + primaryText: "CryptoKitties" + expandableComponent: notImplemented + } + + StatusExpandableItem { + anchors.horizontalCenter: parent.horizontalCenter + + type: StatusExpandableItem.Type.Tertiary + expandable: true + primaryText: "Rescue Moon" + expandableComponent: notImplemented + } + Component { id: notImplemented Rectangle { diff --git a/ui/StatusQ/sandbox/main.qml b/ui/StatusQ/sandbox/main.qml index 4357b5cd88..0ed4bd9818 100644 --- a/ui/StatusQ/sandbox/main.qml +++ b/ui/StatusQ/sandbox/main.qml @@ -170,7 +170,7 @@ StatusWindow { onClicked: page.sourceComponent = othersComponent } StatusNavigationListItem { - title: "StatusExpandableSettingsItem" + title: "StatusExpandableItem" selected: page.sourceComponent == settingsComponent onClicked: page.sourceComponent = settingsComponent } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml new file mode 100644 index 0000000000..46067e1aac --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml @@ -0,0 +1,229 @@ +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: statusExpandableItem + + property alias primaryText: primaryText.text + property alias secondaryText: secondaryText.text + property alias additionalText: additionalText.text + property alias button: button + property alias expandableComponent: expandableRegion.sourceComponent + + property int type: StatusExpandableItem.Type.Primary + 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 + } + } + property StatusImageSettings image: StatusImageSettings { + width: 40 + height: 40 + } + + enum Type { + Primary, // 0 + Secondary, // 1 + Tertiary // 2 + } + + implicitWidth: 718 + + radius: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 8 : 0 + color: "transparent" + border.color: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.palette.baseColor2 : "transparent" + state: "COLLAPSED" + clip: true + + Rectangle { + id: separatorRect + anchors.top: parent.top + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + height: 1 + + color: Theme.palette.baseColor2 + visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) + } + + Loader { + id: identicon + anchors.top: parent.top + anchors.topMargin: 25 + anchors.left: parent.left + anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 0 : 11 + active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary) + sourceComponent: !!statusExpandableItem.image.source.toString() ? roundedImage : + !!statusExpandableItem.icon.name.toString() ? roundedIcon : letterIdenticon + } + + Component { + id: roundedImage + StatusRoundedImage { + image.source: statusExpandableItem.image.source + } + } + + Component { + id: roundedIcon + StatusRoundIcon { + icon.background.width: statusExpandableItem.icon.background.width + icon.background.height: statusExpandableItem.icon.background.height + icon.background.color: statusExpandableItem.icon.background.color + icon.color: statusExpandableItem.icon.color + icon.name: statusExpandableItem.icon.name + } + } + + Component { + id: letterIdenticon + StatusLetterIdenticon { + height: 40 + width: 40 + name: primaryText.text + letterSize: 20 + color: Theme.palette.miscColor5 + } + } + + StatusBaseText { + id: primaryText + anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) || + (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined + anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17 + anchors.left: identicon.active ? identicon.right : parent.left + anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 10 : 16 + + anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined + + width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 : + parent.width - icon.background.width - additionalText.contentWidth - 110) : + (button.visible ? parent.width - icon.background.width - button.width - 70 : + parent.width - icon.background.width - 70) + + font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal + font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17 + lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24 + lineHeightMode: Text.FixedHeight + elide: Text.ElideRight + color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : 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 + } + + StatusBaseText { + id: additionalText + anchors.verticalCenter: primaryText.verticalCenter + anchors.verticalCenterOffset: 2 + anchors.right: expandImage.left + anchors.rightMargin: 16 + + font.pixelSize: 15 + lineHeight: 24 + lineHeightMode: Text.FixedHeight + elide: Text.ElideRight + color: Theme.palette.baseColor1 + } + + StatusButton { + id: button + anchors.top: parent.top + anchors.topMargin: 19 + anchors.right: parent.right + anchors.rightMargin: 16 + visible: !!text + } + + StatusIcon { + id: expandImage + anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? + primaryText.verticalCenter : identicon.verticalCenter + anchors.verticalCenterOffset:(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? -3 : -1 + anchors.right: parent.right + anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 23 : 6 + visible: expandable && !button.visible + color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? + Theme.palette.baseColor1 : + Theme.palette.directColor1 + } + + MouseArea { + anchors.fill: parent + onClicked: { + if(expandable) { + expanded = !expanded + } + } + cursorShape: Qt.PointingHandCursor + visible: !button.visible && expandable + } + + Loader { + id: expandableRegion + anchors.top: secondaryText.bottom + anchors.topMargin: 16 + anchors.left: parent.left + anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0 + anchors.right: parent.right + anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0 + active: false + } + + onExpandedChanged: { + if(expanded) { + state = "EXPANDED" + } + else { + state = "COLLAPSED" + } + } + + states: [ + State { + name: "EXPANDED" + PropertyChanges {target: expandImage; icon: "chevron-up"} + PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22} + PropertyChanges {target: expandableRegion; active: true} + }, + State { + name: "COLLAPSED" + PropertyChanges {target: expandImage; icon: "chevron-down"} + PropertyChanges {target: statusExpandableItem; 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/StatusExpandableSettingsItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusExpandableSettingsItem.qml deleted file mode 100644 index 111e6e5dde..0000000000 --- a/ui/StatusQ/src/StatusQ/Components/StatusExpandableSettingsItem.qml +++ /dev/null @@ -1,155 +0,0 @@ -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 ccc42fd92e..78e2b2038b 100644 --- a/ui/StatusQ/src/StatusQ/Components/qmldir +++ b/ui/StatusQ/src/StatusQ/Components/qmldir @@ -20,4 +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 +StatusExpandableItem 0.1 StatusExpandableItem.qml diff --git a/ui/StatusQ/statusq.qrc b/ui/StatusQ/statusq.qrc index c8684033f5..a827119531 100644 --- a/ui/StatusQ/statusq.qrc +++ b/ui/StatusQ/statusq.qrc @@ -266,7 +266,7 @@ src/assets/img/icons/windows_titlebar/status.svg src/StatusQ/Controls/StatusSwitchTabButton.qml src/StatusQ/Controls/StatusSwitchTabBar.qml - src/StatusQ/Components/StatusExpandableSettingsItem.qml + src/StatusQ/Components/StatusExpandableItem.qml src/assets/img/icons/snt.svg