feat(Airdrops): InlineNetworksComboBox component added

storybook/PagesModel.qml

@@ -241,6 +241,10 @@ ListModel {
         title: "NetworkFilter"
         section: "Components"
     }
+    ListElement {
+        title: "InlineNetworksComboBox"
+        section: "Components"
+    }
     ListElement {
          title: "BrowserSettings"
          section: "Settings"

storybook/pages/InlineNetworksComboBoxPage.qml

@@ -0,0 +1,66 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import Models 1.0
+import utils 1.0
+import AppLayouts.Chat.controls.community 1.0
+
+Item {
+    id: root
+
+    readonly property var modelData: [
+        {
+            name: "Optimism",
+            icon: Style.svg(ModelsData.networks.optimism),
+            amount: "300"
+        },
+        {
+            name: "Arbitrum",
+            icon: Style.svg(ModelsData.networks.arbitrum),
+            amount: "400"
+        },
+        {
+            name: "Hermez",
+            icon: Style.svg(ModelsData.networks.hermez),
+            amount: "500"
+        }
+    ]
+
+    ListModel {
+        id: singleItemModel
+
+        Component.onCompleted: append(modelData[0])
+    }
+
+    ListModel {
+        id: multipleItemsModel
+
+        Component.onCompleted: append(modelData)
+    }
+
+    InlineNetworksComboBox {
+        id: comboBox
+
+        anchors.centerIn: parent
+
+        width: 300
+
+        model: singleItemRadioButton.checked ? singleItemModel
+                                             : multipleItemsModel
+    }
+
+    Row {
+        anchors.bottom: parent.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.margins: implicitHeight / 2
+
+        RadioButton {
+            id: singleItemRadioButton
+            text: "single item model"
+        }
+        RadioButton {
+            text: "multiple items model"
+            checked: true
+        }
+    }
+}

ui/app/AppLayouts/Chat/controls/community/InlineNetworksComboBox.qml

@@ -0,0 +1,139 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQml 2.15
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import SortFilterProxyModel 0.2
+
+StatusComboBox {
+    id: root
+
+    type: StatusComboBox.Type.Secondary
+    size: StatusComboBox.Size.Small
+
+    height: 48
+
+    control.enabled: !d.oneItem
+    control.padding: d.padding
+    control.spacing: d.padding
+    control.popup.y: 0
+    control.popup.padding: 0
+    control.popup.verticalPadding: 0
+    control.textRole: "name"
+    control.currentIndex: 0
+    control.indicator.visible: !d.oneItem
+
+    control.background: Rectangle {
+        radius: d.radius
+        color: "transparent"
+        border.color: Theme.palette.directColor7
+        visible: !d.oneItem
+    }
+
+    QtObject {
+        id: d
+
+        readonly property bool oneItem: control.count === 1
+
+        readonly property int padding: 8
+        readonly property int radius: 8
+        readonly property int fontSize: 13
+        readonly property int iconSize: 32
+    }
+
+    component CustomText: StatusBaseText {
+        color: Theme.palette.baseColor1
+        font.pixelSize: d.fontSize
+        font.weight: Font.Medium
+        elide: Text.ElideRight
+    }
+
+    component DelegateItem: StatusItemDelegate {
+        property alias title: titleText.text
+        property alias amount: amountText.text
+        property alias iconSource: icon.source
+
+        padding: 0
+        radius: d.radius
+
+        contentItem: RowLayout {
+            spacing: d.padding
+
+            StatusIcon {
+                id: icon
+
+                Layout.preferredWidth: d.iconSize
+                Layout.preferredHeight: d.iconSize
+
+                mipmap: true
+            }
+
+            CustomText {
+                id: titleText
+
+                Layout.fillWidth: true
+            }
+
+            CustomText {
+                id: amountText
+            }
+        }
+    }
+
+    Instantiator {
+        id: instantiator
+
+        property string icon
+        property string amount
+
+        model: SortFilterProxyModel {
+            sourceModel: root.model
+            filters: IndexFilter {
+                minimumIndex: root.currentIndex
+                maximumIndex: root.currentIndex
+            }
+        }
+        delegate: QtObject {
+            component Bind: Binding { target: instantiator }
+            readonly property list<Binding> bindings: [
+                Bind { property: "icon"; value: model.icon },
+                Bind { property: "amount"; value: model.amount }
+            ]
+        }
+    }
+
+    contentItem: DelegateItem {
+        title: root.control.displayText
+        iconSource: instantiator.icon
+
+        amount: !d.oneItem ? instantiator.amount : ""
+        cursorShape: d.oneItem ? Qt.ArrowCursor : Qt.PointingHandCursor
+
+        onClicked: {
+            if (root.oneItem)
+                return
+
+            root.control.popup.open()
+        }
+    }
+
+    delegate: DelegateItem {
+        title: model.name
+        iconSource: model.icon
+        amount: model.amount
+
+        width: root.width
+        height: root.height
+        horizontalPadding: d.padding
+
+        highlighted: root.control.highlightedIndex === index
+
+        onClicked: {
+            root.currentIndex = index
+            root.control.popup.close()
+        }
+    }
+}

ui/app/AppLayouts/Chat/controls/community/qmldir

@@ -7,6 +7,7 @@ CommunityListItem 1.0 CommunityListItem.qml
 HoldingTypes 1.0 HoldingTypes.qml
 HoldingsDropdown 1.0 HoldingsDropdown.qml
 InDropdown 1.0 InDropdown.qml
+InlineNetworksComboBox 1.0 InlineNetworksComboBox.qml
 MembersSelectorPanel 1.0 MembersSelectorPanel.qml
 PermissionItem 1.0 PermissionItem.qml
 PermissionsDropdown 1.0 PermissionsDropdown.qml