feat(StatusQ): StatusGroupBox component added

storybook/PagesModel.qml

@@ -153,6 +153,10 @@ ListModel {
         title: "StatusItemSelector"
         section: "Components"
     }
+    ListElement {
+        title: "StatusGroupBox"
+        section: "Components"
+    }
     ListElement {
          title: "BrowserSettings"
          section: "Settings"

storybook/pages/StatusGroupBoxPage.qml

@@ -0,0 +1,121 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Components 0.1
+import utils 1.0
+
+
+SplitView {
+    orientation: Qt.Vertical
+
+    component LabeledSlider: Row {
+        property alias text: label.text
+        property alias value: slider.value
+        property alias from: slider.from
+        property alias to: slider.to
+
+        Label {
+            id: label
+
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Slider {
+            id: slider
+
+            value: (from + to) / 2
+            from: 10
+            to: 500
+        }
+    }
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+        clip: true
+
+        StatusGroupBox {
+            id: group
+
+            anchors.centerIn: parent
+
+            title: titleTextEdit.text
+            icon: Style.png("tokens/SNT")
+            iconSize: iconSizeSlider.value
+
+            width: undefinedSizeCheckBox.checked ? undefined
+                                                 : widthSlider.value
+            height: undefinedSizeCheckBox.checked ? undefined
+                                                  : heightSlider.value
+
+            Button {
+                width: group.availableWidth
+                height: group.availableHeight
+
+                text: "Content button with some text"
+
+                implicitWidth: contentImplicitWidthSlider.value
+                implicitHeight: contentImplicitHeightSlider.value
+            }
+        }
+    }
+
+    ScrollView {
+        clip: true
+
+        Pane {
+            SplitView.minimumHeight: 100
+            SplitView.preferredHeight: 200
+
+            ColumnLayout {
+                LabeledSlider {
+                    id: widthSlider
+
+                    enabled: !undefinedSizeCheckBox.checked
+                    text: "width:"
+                }
+
+                LabeledSlider {
+                    id: heightSlider
+
+                    enabled: !undefinedSizeCheckBox.checked
+                    text: "height:"
+                }
+
+                CheckBox {
+                    id: undefinedSizeCheckBox
+                    text: "Undefined size"
+                    checked: true
+                }
+
+                LabeledSlider {
+                    id: contentImplicitWidthSlider
+
+                    text: "content implicit width:"
+                }
+
+                LabeledSlider {
+                    id: contentImplicitHeightSlider
+
+                    text: "content implicit height:"
+                }
+
+                LabeledSlider {
+                    id: iconSizeSlider
+
+                    from: 10
+                    to: 40
+                    value: 18
+                    text: "iconSize:"
+                }
+
+                TextField {
+                    id: titleTextEdit
+
+                    text: "Some title goes here"
+                }
+            }
+        }
+    }
+}

ui/StatusQ/doc/src/statusqcomponents.qdoc

@@ -11,32 +11,33 @@
        \li \l{StatusAddress}
        \li \l{StatusBadge}
        \li \l{StatusChatInfoToolBar}
-       \li \l{StatusChatList}
-       \li \l{StatusChatListItem}
-       \li \l{StatusImageSettings}
-       \li \l{StatusChatListCategory}
-       \li \l{StatusChatListCategoryItem}
        \li \l{StatusChatListAndCategories}
+       \li \l{StatusChatListCategoryItem}
+       \li \l{StatusChatListCategory}
+       \li \l{StatusChatListItem}
+       \li \l{StatusChatList}
        \li \l{StatusChatToolBar}
        \li \l{StatusContactRequestsIndicatorListItem}
        \li \l{StatusDescriptionListItem}
+       \li \l{StatusExpandableItem}
+       \li \l{StatusGroupBox}
+       \li \l{StatusImageSettings}
        \li \l{StatusItemSelector}
        \li \l{StatusLetterIdenticon}
+       \li \l{StatusListItemBadge}
        \li \l{StatusListItem}
        \li \l{StatusListPicker}
        \li \l{StatusListSectionHeadline}
        \li \l{StatusLoadingIndicator}
+       \li \l{StatusMacWindowButtons}
        \li \l{StatusMemberListItem}
+       \li \l{StatusMessageDetails}
+       \li \l{StatusMessage}
        \li \l{StatusNavigationListItem}
        \li \l{StatusNavigationPanelHeadline}
        \li \l{StatusRoundIcon}
        \li \l{StatusRoundedImage}
-       \li \l{StatusMacWindowButtons}
-       \li \l{StatusListItemBadge}
-       \li \l{StatusExpandableItem}
        \li \l{StatusSmartIdenticon}
-       \li \l{StatusMessage}
-       \li \l{StatusMessageDetails}
        \li \l{StatusTagSelector}
        \li \l{StatusToastMessage}
        \li \l{StatusWizardStepper}

ui/StatusQ/src/StatusQ/Components/StatusGroupBox.qml

@@ -0,0 +1,67 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core 0.1
+
+
+GroupBox {
+    id: root
+
+    topPadding: label.implicitHeight
+    leftPadding: 16
+
+    /*!
+       \qmlproperty string StatusGroupBox::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: 24
+
+    background: Rectangle {
+        color: Theme.palette.baseColor4
+        radius: 16
+    }
+
+    label: Control {
+        x: root.leftPadding
+        width: root.availableWidth
+        topPadding: 12
+        bottomPadding: 12
+
+        contentItem: 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
+                Layout.fillWidth: true
+
+                text: root.title
+                color: Theme.palette.directColor1
+                font.pixelSize: 17
+
+                elide: Text.ElideRight
+            }
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -53,3 +53,4 @@ LoadingComponent 0.1 LoadingComponent.qml
 StatusQrCodeScanner 0.1 StatusQrCodeScanner.qml
 StatusSyncDeviceDelegate 0.1 StatusSyncDeviceDelegate.qml
 StatusOnlineBadge 0.1 StatusOnlineBadge.qml
+StatusGroupBox 0.1 StatusGroupBox.qml

ui/StatusQ/src/statusq.qrc

@@ -198,5 +198,6 @@
         <file>StatusQ/Core/Utils/ModelChangeTracker.qml</file>
         <file>StatusQ/Components/StatusQrCodeScanner.qml</file>
         <file>StatusQ/Components/StatusOnlineBadge.qml</file>
+        <file>StatusQ/Components/StatusGroupBox.qml</file>
     </qresource>
 </RCC>