StatusGroupBox used as a base for StatusItemSelector

ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml

@@ -1,6 +1,5 @@
 import QtQuick 2.14
 import QtQuick.Layouts 1.14
-import QtQuick.Controls 2.14 as QC
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -41,23 +40,9 @@ import StatusQ.Core.Utils 0.1
    \endqml
    For a list of components available see StatusQ.
 */
-Rectangle {
+StatusGroupBox {
     id: root
-    /*!
+
-       \qmlproperty string StatusItemSelector::icon
-       This property holds the icon name for the icon represented on top of the component as a title icon.
-    */
-    property string icon
-    /*!
-       \qmlproperty int StatusItemSelector::iconSize
-       This property holds the icon size for the icon represented on top of the component as a title icon.
-    */
-    property int iconSize: 18
-    /*!
-       \qmlproperty string StatusItemSelector::title
-       This property holds the titel shown on top of the component.
-    */
-    property string title
     /*!
        \qmlproperty string StatusItemSelector::defaultItemText
        This property holds the default item text shown when the list of items is empty.
@@ -130,47 +115,16 @@ Rectangle {
     */
     signal itemClicked(var item, int index, var mouse)
 
-    color: Theme.palette.baseColor4
-    implicitHeight: columnLayout.implicitHeight + columnLayout.anchors.topMargin + columnLayout.anchors.bottomMargin
     implicitWidth: 560
-    radius: 16
     clip: true
 
-    ColumnLayout {
-        id: columnLayout
-        anchors.top: parent.top
-        anchors.topMargin: 12
-        anchors.bottomMargin: anchors.topMargin
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        anchors.right: parent.right
-        anchors.rightMargin: 16
-        spacing: 12
-        clip: true
-        RowLayout {
-            id: headerRow
-            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
-            }
-        }        
     Flow {
         id: flow
-            Layout.fillWidth: true
+
+        clip: true
+        width: root.availableWidth
         spacing: 6
+
         StatusListItemTag {
             bgColor: Theme.palette.baseColor2
             visible: !itemsModel || itemsModel.count === 0
@@ -241,5 +195,4 @@ Rectangle {
             icon.name: "add"
         }
     }
-    }
 }