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

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")
+        primaryText: "Back up seed phrase"
-        secondaryText: qsTr("Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD")
+        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")
+        primaryText: "Account signing phrase"
-        secondaryText: qsTr("View your signing phrase and ensure that you never get scammed")
+        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")
+        primaryText: "View private key"
-        secondaryText: qsTr("Back up your seed phrase now to secure this account")
+        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 {

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
                         }

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 }
+        }
+    ]
+}

ui/StatusQ/src/StatusQ/Components/StatusExpandableSettingsItem.qml

@@ -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 }
-        }
-    ]
-}

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

ui/StatusQ/statusq.qrc

@@ -266,7 +266,7 @@
         <file>src/assets/img/icons/windows_titlebar/status.svg</file>
         <file>src/StatusQ/Controls/StatusSwitchTabButton.qml</file>
         <file>src/StatusQ/Controls/StatusSwitchTabBar.qml</file>
-        <file>src/StatusQ/Components/StatusExpandableSettingsItem.qml</file>
+        <file>src/StatusQ/Components/StatusExpandableItem.qml</file>
         <file>src/assets/img/icons/snt.svg</file>
     </qresource>
 </RCC>