From 264a45cec3dfe17897cd7e1c64e7887b1646c525 Mon Sep 17 00:00:00 2001
From: Noelia <noelia@status.im>
Date: Mon, 13 Jun 2022 15:40:54 +0200
Subject: [PATCH] feat(StatusItemSelector): First component iteration

- Layout, basic properties and signal.
- Default tag displayed.
- TODO: Selector logic.
---
 .../StatusQ/Components/StatusItemSelector.qml | 72 +++++++++++++++++++
 ui/StatusQ/src/StatusQ/Components/qmldir      |  1 +
 2 files changed, 73 insertions(+)
 create mode 100644 ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml

diff --git a/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml
new file mode 100644
index 0000000000..be379be63e
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml
@@ -0,0 +1,72 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: root
+
+    property string icon
+    property int iconSize: 18
+    property string title
+    property string defaultItemText
+
+    signal addItem()
+
+    color: Theme.palette.baseColor4
+    height: column.implicitHeight + column.anchors.topMargin + column.anchors.bottomMargin
+    radius: 16
+    ColumnLayout {
+        id: column
+        anchors.top: parent.top
+        anchors.topMargin: 12
+        anchors.bottomMargin: anchors.topMargin
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        spacing: 12
+        RowLayout {
+            spacing: 8
+            Image {
+                sourceSize.width: width || undefined
+                sourceSize.height: height || undefined
+                fillMode: Image.PreserveAspectFit
+                mipmap: true
+                antialiasing: true
+                width: root.iconSize
+                height: width
+                source: root.icon
+            }
+            StatusBaseText {
+                Layout.alignment: Qt.AlignVCenter
+                text: root.title
+                color: Theme.palette.directColor1
+                font.pixelSize: 17
+            }
+        }
+        // TODO: Next component iteration - model and selector
+        GridLayout {
+            rowSpacing: 6
+            columnSpacing: 12
+            Repeater {
+                model: 1
+                StatusListItemTag {
+                    title: root.defaultItemText
+                    color: Theme.palette.baseColor2
+                    closeButtonVisible: false
+                    titleText.color: Theme.palette.baseColor1
+                    titleText.font.pixelSize: 15
+                }
+            }
+            StatusRoundButton {
+                implicitHeight: 32
+                implicitWidth: implicitHeight
+                height: width
+                type: StatusRoundButton.Type.Secondary
+                icon.name: "add"
+                onClicked: root.addItem()
+            }
+        }
+    }
+}
diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir
index 4557806ef5..e405e5e71b 100644
--- a/ui/StatusQ/src/StatusQ/Components/qmldir
+++ b/ui/StatusQ/src/StatusQ/Components/qmldir
@@ -37,3 +37,4 @@ StatusImageCropPanel 0.1 StatusImageCropPanel.qml
 StatusColorSpace 0.0 StatusColorSpace.qml
 StatusCommunityCard 0.1 StatusCommunityCard.qml
 StatusCommunityTags 0.1 StatusCommunityTags.qml
+StatusItemSelector 0.1 StatusItemSelector.qml
\ No newline at end of file