feat(StatusSeedPhraseInput): exposed keys on pressed signal (#599)

* feat(StatusSeedPhraseInput): exposed touch/keys pressed events

Exposed keys.onPressed signal, mouse on clicked signal
as well as tabNavItem to be set in KeyNavigation.tab
when needed

Needed for task https://github.com/status-im/status-desktop/issues/4955

* feat(StatusListItem): Added new tags inline in the StatusListItem (#607)

Co-authored-by: Khushboo-dev-cpp <60327365+Khushboo-dev-cpp@users.noreply.github.com>

sandbox/controls/ListItems.qml

@@ -4,6 +4,7 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1
 
 GridLayout {
     columns: 1
@@ -338,6 +339,24 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         }
     }
 
+    StatusListItem {
+        title: "List Item with Inline Tags"
+        icon.isLetterIdenticon: true
+        tagsModel : 2
+        tagsDelegate: StatusListItemTag {
+            color: "blue"
+            height: 24
+            radius: 6
+            closeButtonVisible: false
+            icon.emoji: "😁"
+            icon.emojiSize: Emoji.size.verySmall
+            icon.isLetterIdenticon: true
+            title: "helloworld.eth"
+            titleText.font.pixelSize: 12
+            titleText.color: Theme.palette.indirectColor1
+        }
+    }
+
     StatusListItem {
         title: "List Item with Emoji"
         subTitle: "Emoji"

src/StatusQ/Components/StatusExpandableItem.qml

@@ -12,6 +12,7 @@ Rectangle {
     property alias additionalText: additionalText.text
     property alias button: button
     property alias expandableComponent: expandableRegion.sourceComponent
+    property alias expandableItem: expandableRegion.item
 
     property int type: StatusExpandableItem.Type.Primary
     property bool expandable: true
@@ -185,7 +186,7 @@ Rectangle {
         anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0
         anchors.right: parent.right
         anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0
-        active: false
+        visible: false
     }
 
     onExpandedChanged: {
@@ -202,13 +203,13 @@ Rectangle {
             name: "EXPANDED"
             PropertyChanges {target: expandImage; icon: "chevron-up"}
             PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
-            PropertyChanges {target: expandableRegion; active: true}
+            PropertyChanges {target: expandableRegion; visible: true}
         },
         State {
             name: "COLLAPSED"
             PropertyChanges {target: expandImage; icon: "chevron-down"}
             PropertyChanges {target: statusExpandableItem; height: 82}
-            PropertyChanges {target: expandableRegion; active: false}
+            PropertyChanges {target: expandableRegion; visible: false}
         }
     ]
 

src/StatusQ/Components/StatusListItem.qml

@@ -25,6 +25,8 @@ Rectangle {
     property list<Item> components
     property var bottomModel: []
     property Component bottomDelegate
+    property var tagsModel: []
+    property Component tagsDelegate
 
     property StatusIconSettings icon: StatusIconSettings {
         height: isLetterIdenticon ? 40 : 20
@@ -71,6 +73,7 @@ Rectangle {
     property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
     property alias statusListItemComponentsSlot: statusListItemComponentsSlot
     property alias statusListItemTagsSlot: statusListItemTagsSlot
+    property alias statusListItemInlineTagsSlot: statusListItemTagsSlotInline
 
     signal clicked(string itemId)
     signal titleClicked(string titleId)
@@ -248,6 +251,18 @@ Rectangle {
                 implicitHeight: visible ? 22 : 0
             }
 
+            Row {
+                id: statusListItemTagsSlotInline
+                anchors.top: statusListItemTertiaryTitle.bottom
+                width: parent.width
+                spacing: 10
+                clip: true
+
+                Repeater {
+                    model: tagsModel
+                    delegate: tagsDelegate
+                }
+            }
         }
 
         Row {

src/StatusQ/Controls/StatusBaseInput.qml

@@ -41,6 +41,7 @@ Item {
     property real rightPadding: 16
     property real topPadding: 12
     property real bottomPadding: 12
+    property var tabNavItem: null
 
     property real minimumHeight: 0
     property real maximumHeight: 0
@@ -72,6 +73,8 @@ Item {
     property Component rightComponent
 
     signal iconClicked
+    signal keyPressed(var event)
+    signal editClicked()
 
     implicitWidth: 448
     implicitHeight: multiline ? Math.min(Math.max(
@@ -115,8 +118,8 @@ Item {
             cursorShape: Qt.IBeamCursor
             onClicked: {
                 edit.forceActiveFocus()
+                root.editClicked()
             }
-
             RowLayout {
                 anchors {
                     fill: parent
@@ -186,7 +189,12 @@ Item {
                         Keys.onReturnPressed: event.accepted = !multiline
                         Keys.onEnterPressed: event.accepted = !multiline
                         Keys.forwardTo: [root]
-                        Keys.onPressed: edit.keyEvent = event.key
+                        KeyNavigation.priority: !!root.tabNavItem ? KeyNavigation.BeforeItem : KeyNavigation.AfterItem
+                        KeyNavigation.tab: root.tabNavItem
+                        Keys.onPressed: {
+                            edit.keyEvent = event.key
+                            root.keyPressed(event);
+                        }
 
                         onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
                         onActiveFocusChanged: if (root.pristine) root.pristine = false

src/StatusQ/Controls/StatusInput.qml

@@ -107,6 +107,8 @@ Item {
     property var pendingValidators: []
 
     signal iconClicked()
+    signal keyPressed(var event)
+    signal editClicked()
 
     /*!
        \qmltype ValidationMode
@@ -290,6 +292,12 @@ Item {
 
         Keys.forwardTo: [root]
         onIconClicked: root.iconClicked()
+        onKeyPressed: {
+            root.keyPressed(event);
+        }
+        onEditChanged: {
+            root.editClicked();
+        }
     }
 
     StatusBaseText {

src/StatusQ/Controls/StatusSeedPhraseInput.qml

@@ -7,6 +7,42 @@ import StatusQ.Popups 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
+/*!
+   \qmltype StatusSeedPhraseInput
+   \inherits Item
+   \inqmlmodule StatusQ.Controls
+   \since StatusQ.Controls 0.1
+   \brief Displays a text input with suggestions. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-item.html}{Item}.
+
+   The \c StatusSeedPhraseInput item displays a text input with suggestions filtered based on the typed text.
+   For example:
+
+   \qml
+       StatusSeedPhraseInput {
+           id: statusSeedInput
+           anchors.left: parent.left
+           anchors.right: parent.right
+           textEdit.input.anchors.leftMargin: 16
+           textEdit.input.anchors.rightMargin: 16
+           textEdit.input.anchors.topMargin: 11
+           leftComponentText: "1"
+           inputList: ListModel {
+               ListElement {
+                   seedWord: "panda"
+               }
+               ListElement {
+                   seedWord: "posible"
+               }
+               ListElement {
+                   seedWord: "wing"
+               }
+           }
+       }
+   \endqml
+
+   For a list of components available see StatusQ.
+*/
+
 Item {
     id: root
     width: 162
@@ -17,6 +53,12 @@ Item {
     property ListModel inputList: ListModel { }
     property ListModel filteredList: ListModel { }
     signal doneInsertingWord(string word)
+    /*
+        This signal is emitted when the user pressed a keyboard key and passes as a
+        parameter the event. The corresponding handler is \c onKeyPressed.
+    */
+    signal keyPressed(var event)
+    signal editClicked()
 
     onActiveFocusChanged: {
         if (root.activeFocus) {
@@ -57,6 +99,12 @@ Item {
                 seedSuggestionsList.model = 0;
             }
         }
+        onKeyPressed: {
+            root.keyPressed(event);
+        }
+        onEditClicked: {
+            root.editClicked();
+        }
     }
 
     Item {