feat(StatusComboBox): Introduced new component to replace `StatusSelect` (#790)

sandbox/main.qml

@@ -202,6 +202,11 @@ StatusWindow {
                         selected: viewLoader.source.toString().includes(title)
                         onClicked: mainPageView.page(title);
                     }
+                    StatusNavigationListItem {
+                        title: "StatusComboBox"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
                     StatusNavigationListItem {
                         title: "StatusAccountSelector"
                         selected: viewLoader.source.toString().includes(title)

sandbox/pages/StatusComboBoxPage.qml

@@ -0,0 +1,72 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 20
+
+    ListModel {
+        id: commmonModel
+        ListElement {
+            name: "Pascal"
+        }
+        ListElement {
+            name: "Khushboo"
+        }
+        ListElement {
+            name: "Alexandra"
+        }
+        ListElement {
+            name: "Eric"
+        }
+    }
+
+    StatusComboBox {
+        id: combobox
+        label: "ComboBox"
+        model: commmonModel
+    }
+
+    StatusComboBox {
+        id: comboBox1
+        label: "ComboBox with custom delegate"
+        model: commmonModel
+        delegate: StatusItemDelegate {
+            width: comboBox1.comboBox.width
+            highlighted: comboBox1.comboBox.highlightedIndex === index
+            text: modelData
+            font: comboBox1.comboBox.font
+            icon {
+                name: "filled-account"
+                color: Theme.palette.primaryColor1
+            }
+            enabled: index != 2
+        }
+    }
+
+    StatusComboBox {
+        model: commmonModel
+        label: "Disabled ComboBox"
+        enabled: false
+    }
+
+    StatusComboBox {
+        model: commmonModel
+        label: "ComboBox with validation error"
+        validationError: "Validation failed example"
+    }
+
+    StatusComboBox {
+        model: commmonModel
+        label: "Mirrored ComboBox"
+        LayoutMirroring.enabled: true
+    }
+}
+

sandbox/pages/StatusSelectPage.qml

@@ -8,26 +8,31 @@ import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
 
 import Sandbox 0.1
+
 Column {
-    spacing: 8
+    spacing: 20
+
+    ListModel {
+        id: commmonModel
+        ListElement {
+            name: "Pascal"
+        }
+        ListElement {
+            name: "Khushboo"
+        }
+        ListElement {
+            name: "Alexandra"
+        }
+        ListElement {
+            name: "Eric"
+        }
+    }
 
     StatusSelect {
         id: select
         label: "Some label"
-        model: ListModel {
-            ListElement {
-                name: "Pascal"
-            }
-            ListElement {
-                name: "Khushboo"
-            }
-            ListElement {
-                name: "Alexandra"
-            }
-            ListElement {
-                name: "Eric"
-            }
-        }
+        model: commmonModel
+
         selectMenu.delegate: StatusMenuItemDelegate {
             statusPopupMenu: select
             action: StatusMenuItem {
@@ -38,6 +43,7 @@ Column {
                 }
             }
         }
+
         selectedItemComponent: Item {
             id: selectedItem
             anchors.fill: parent

sandbox/qml.qrc

@@ -79,5 +79,7 @@
         <file>images/SRToken.png</file>
         <file>demoapp/data/profile-image-1.jpeg</file>
         <file>demoapp/data/profile-image-2.jpeg</file>
+        <file>pages/StatusItemSelectorPage.qml</file>
+        <file>pages/StatusComboBoxPage.qml</file>
     </qresource>
 </RCC>

src/StatusQ/Controls/StatusComboBox.qml

@@ -0,0 +1,150 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Popups 0.1
+
+import QtQuick.Templates 2.14 as T
+
+Item {
+    id: root
+
+    property alias comboBox: comboBox
+    property alias model: comboBox.model
+    property alias delegate: comboBox.delegate
+    property alias contentItem: comboBox.contentItem
+
+    property alias label: labelItem.text
+    property alias validationError: validationErrorItem.text
+
+    implicitWidth: layout.implicitWidth
+    implicitHeight: layout.implicitHeight
+
+    LayoutMirroring.childrenInherit: true
+
+    ColumnLayout {
+        id: layout
+
+        anchors.fill: parent
+        spacing: 0
+
+        StatusBaseText {
+            id: labelItem
+            Layout.fillWidth: true
+            visible: !!text
+            font.pixelSize: 15
+            color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+        }
+
+        ComboBox {
+            id: comboBox
+
+            property color bgColor: Theme.palette.baseColor2
+            property color bgColorHover: bgColor
+
+            Layout.fillWidth: true
+            Layout.topMargin: 7
+
+            enabled: root.enabled
+
+            font.family: Theme.palette.baseFont.name
+            font.pixelSize: 14
+
+            padding: 16
+            spacing: 16
+
+            background: Rectangle {
+                implicitHeight: 56
+                implicitWidth: 448
+                color: Theme.palette.baseColor2
+                radius: 8
+                border.width: !!root.validationError || comboBox.hovered || comboBox.down || comboBox.activeFocus ? 1 : 0
+                border.color: !!root.validationError
+                              ? Theme.palette.dangerColor1
+                              : comboBox.activeFocus
+                                ? Theme.palette.primaryColor1
+                                : comboBox.hovered
+                                  ? Theme.palette.primaryColor2
+                                  : "transparent"
+            }
+
+            contentItem: StatusBaseText {
+                font: comboBox.font
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+                text: comboBox.displayText
+                color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+            }
+
+            indicator: StatusIcon {
+                x: comboBox.mirrored ? comboBox.padding : comboBox.width - width - comboBox.padding
+                y: comboBox.topPadding + (comboBox.availableHeight - height) / 2
+                width: 24
+                height: 24
+                icon: "chevron-down"
+                color: Theme.palette.baseColor1
+            }
+
+            popup: Popup {
+                closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+                y: comboBox.height + 8
+                width: comboBox.width
+                implicitHeight: contentItem.implicitHeight + topPadding + bottomPadding
+                padding: 1
+                verticalPadding: 8
+
+                contentItem: ListView { // TODO: Replace with StatusListView
+                    id: listView
+                    clip: true
+                    implicitHeight: contentHeight
+                    model: comboBox.popup.visible ? comboBox.delegateModel : null
+                    currentIndex: comboBox.highlightedIndex
+
+                    boundsBehavior: Flickable.StopAtBounds
+                    synchronousDrag: true
+
+                    ScrollIndicator.vertical: ScrollIndicator { }
+                }
+
+                background: Rectangle {
+                    id: backgroundItem
+                    color: Theme.palette.statusSelect.menuItemBackgroundColor
+                    radius: 8
+                    border.color: Theme.palette.baseColor2
+                    layer.enabled: true
+                    layer.effect: DropShadow {
+                        horizontalOffset: 0
+                        verticalOffset: 4
+                        radius: 12
+                        samples: 25
+                        spread: 0.2
+                        color: Theme.palette.dropShadow
+                    }
+                }
+            }
+
+            delegate: StatusItemDelegate {
+                width: comboBox.width
+                highlighted: comboBox.highlightedIndex === index
+                font: comboBox.font
+                text: modelData
+            }
+        }
+
+
+        StatusBaseText {
+            id: validationErrorItem
+            Layout.fillWidth: true
+            Layout.topMargin: 11
+            visible: !!text
+            font.pixelSize: 12
+            color: Theme.palette.dangerColor1
+            horizontalAlignment: TextEdit.AlignRight
+            wrapMode: Text.WordWrap
+        }
+    }
+
+}

src/StatusQ/Controls/StatusItemDelegate.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+ItemDelegate {
+    id: root
+
+    padding: 8
+    spacing: 8
+
+    icon.width: 16
+    icon.height: 16
+
+    contentItem: RowLayout {
+        spacing: root.spacing
+
+        StatusIcon {
+            id: iconItem
+            Layout.alignment: Qt.AlignVCenter
+            visible: !!icon
+            icon: root.icon.name
+            color: root.enabled ? root.icon.color : Theme.palette.baseColor1
+            width: root.icon.width
+            height: root.icon.height
+        }
+
+        StatusBaseText {
+            id: textItem
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            font: root.font
+            text: root.text
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+            color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+        }
+    }
+
+    background: Rectangle {
+        color: root.highlighted
+                 ? Theme.palette.statusPopupMenu.hoverBackgroundColor
+                 : "transparent"
+    }
+}

src/StatusQ/Controls/StatusSelect.qml

@@ -8,11 +8,14 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Popups 0.1
 
 Item {
+    id: root
+
     enum MenuAlignment {
         Left,
         Right,
         Center
     }
+
     property string label: ""
     readonly property bool hasLabel: label !== ""
     property color bgColor: Theme.palette.baseColor2
@@ -28,10 +31,12 @@ Item {
     property string validationError: ""
     property alias validationErrorAlignment: validationErrorText.horizontalAlignment
     property int validationErrorTopMargin: 11
+
     implicitWidth: 448
 
-    id: root
-    height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0) + (!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
+    implicitHeight: inputRectangle.height +
+                    (hasLabel ? inputLabel.height + labelMargin : 0) +
+                    (!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
 
     StatusBaseText {
         id: inputLabel
@@ -95,6 +100,10 @@ Item {
         }
     }
 
+//    ListView {
+//        id: selectMenu
+//    }
+
     StatusPopupMenu {
         id: selectMenu
         closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent

src/StatusQ/Controls/qmldir

@@ -48,3 +48,5 @@ StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
 StatusDropdown 0.1 StatusDropdown.qml
 StatusIconTextButton 0.1 StatusIconTextButton.qml
 StatusScrollBar 0.1 StatusScrollBar.qml
+StatusComboBox 0.1 StatusComboBox.qml
+StatusItemDelegate 0.1 StatusItemDelegate.qml