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