From 0c26e7e35bd9f7a6be89eee4602a92ede9e6ba2c Mon Sep 17 00:00:00 2001
From: Noelia <noelia@status.im>
Date: Tue, 28 Jun 2022 18:56:51 +0200
Subject: [PATCH] feat(StatusPickerButton): Added configurable image in front
 of text

---
 .../StatusQ/Controls/StatusPickerButton.qml   | 63 +++++++++++++------
 1 file changed, 44 insertions(+), 19 deletions(-)

diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusPickerButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusPickerButton.qml
index c8f4691f83..f25ca9c422 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusPickerButton.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusPickerButton.qml
@@ -1,25 +1,36 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
 
 Button {
     id: root
-    implicitWidth: 446
-    implicitHeight: 44
 
     property color bgColor: Theme.palette.baseColor2
     property color contentColor: Theme.palette.baseColor1
     property var type: StatusPickerButton.Type.Next
     property int lateralMargins: 16
     property int textPixelSize: 15
+    /*!
+       \qmlproperty StatusImageSettings StatusPickerButton::image
+       This property holds the image settings information.
+    */
+    property StatusImageSettings image: StatusImageSettings {
+        width: 20
+        height: 20
+        isIdenticon: false
+    }
 
     enum Type {
         Next,
         Down
     }
 
+    implicitWidth: 446
+    implicitHeight: 44
     background: Item {
         anchors.fill: parent
         Rectangle {
@@ -34,18 +45,32 @@ Button {
         anchors.fill: parent
         state: root.type === StatusPickerButton.Type.Next ? "NEXT" : "DOWN"
 
-        StatusBaseText {
-            id: textLabel
+        RowLayout {
+            id: rowLabel
+            width: parent.width - icon.width - icon.anchors.rightMargin - icon.anchors.leftMargin
             anchors.verticalCenter: parent.verticalCenter
-            width: parent.width - icon.width - anchors.rightMargin - anchors.leftMargin - icon.anchors.rightMargin - icon.anchors.leftMargin
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: root.textPixelSize
-            color: root.contentColor
-            text: root.text
             clip: true
-            elide: Text.ElideRight
+            spacing: 4
+            StatusRoundedImage {
+                id: rowImage
+                Layout.alignment: Qt.AlignVCenter
+                visible: root.image.source.toString() !== ""
+                Layout.preferredWidth: root.image.width
+                Layout.preferredHeight: root.image.height
+                image.source: root.image.source
+            }
+            StatusBaseText {
+                id: textLabel
+                Layout.alignment: Qt.AlignVCenter
+                Layout.fillWidth: true
+                verticalAlignment: Text.AlignVCenter
+                font.pixelSize: root.textPixelSize
+                color: root.contentColor
+                text: root.text
+                clip: true
+                elide: Text.ElideRight
+            }
         }
-
         StatusIcon {
             id: icon
             anchors.verticalCenter: parent.verticalCenter
@@ -60,10 +85,10 @@ Button {
                 PropertyChanges {target: icon; anchors.right: parent.right }
                 PropertyChanges {target: icon; anchors.rightMargin: root.lateralMargins / 2 }
                 PropertyChanges {target: icon; anchors.leftMargin: root.lateralMargins / 2 }
-                PropertyChanges {target: textLabel; anchors.left: parent.left }
-                PropertyChanges {target: textLabel; anchors.right: undefined }
-                PropertyChanges {target: textLabel; anchors.rightMargin: undefined }
-                PropertyChanges {target: textLabel; anchors.leftMargin: root.lateralMargins }
+                PropertyChanges {target: rowLabel; anchors.left: parent.left }
+                PropertyChanges {target: rowLabel; anchors.right: undefined }
+                PropertyChanges {target: rowLabel; anchors.rightMargin: undefined }
+                PropertyChanges {target: rowLabel; anchors.leftMargin: root.lateralMargins }
             },
             State {
                 name: "DOWN"
@@ -72,10 +97,10 @@ Button {
                 PropertyChanges {target: icon; anchors.right: undefined }
                 PropertyChanges {target: icon; anchors.rightMargin: root.lateralMargins / 2 }
                 PropertyChanges {target: icon; anchors.leftMargin: root.lateralMargins }
-                PropertyChanges {target: textLabel; anchors.left: icon.right }
-                PropertyChanges {target: textLabel; anchors.right: undefined }
-                PropertyChanges {target: textLabel; anchors.rightMargin: root.lateralMargins / 2 }
-                PropertyChanges {target: textLabel; anchors.leftMargin: undefined }
+                PropertyChanges {target: rowLabel; anchors.left: icon.right }
+                PropertyChanges {target: rowLabel; anchors.right: undefined }
+                PropertyChanges {target: rowLabel; anchors.rightMargin: root.lateralMargins / 2 }
+                PropertyChanges {target: rowLabel; anchors.leftMargin: undefined }
             }
         ]
     }