feat(Popups): Add status modal header

ui/StatusQ/src/StatusQ/Components/StatusImageWithTitle.qml

@@ -0,0 +1,69 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+Row {
+    id: statusImageWithTitle
+
+    property alias title: headerTitle.text
+    property alias subTitle: headerSubTitle.text
+    property bool editable: false
+
+    signal editButtonClicked
+
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+    }
+
+    spacing: 8
+
+    StatusRoundedImage {
+        id: headerImage
+        anchors.verticalCenter: parent.verticalCenter
+        width: statusImageWithTitle.image.width
+        height: statusImageWithTitle.image.height
+        image.source:  statusImageWithTitle.image.source
+        showLoadingIndicator: true
+        visible: !!statusImageWithTitle.image.source.toString()
+    }
+
+    Column {
+        id: textLayout
+
+        Row {
+            spacing: 4
+            StatusBaseText {
+                id: headerTitle
+                font.family: Theme.palette.baseFont.name
+                font.pixelSize: 17
+                font.bold: true
+                color: Theme.palette.directColor1
+            }
+            StatusFlatRoundButton {
+                id: editButton
+                visible: statusImageWithTitle.editable
+                anchors.bottom: headerTitle.bottom
+                anchors.bottomMargin: -1
+                height: 24
+                width: 24
+                type: StatusFlatRoundButton.Type.Secondary
+                icon.name: "pencil"
+                icon.color: Theme.palette.directColor1
+                icon.width: 12.5
+                icon.height: 12.5
+
+                onClicked: statusImageWithTitle.editButtonClicked()
+            }
+        }
+
+        StatusBaseText {
+            id: headerSubTitle
+            font.family: Theme.palette.baseFont.name
+            font.pixelSize: 15
+            color:Theme.palette.baseColor1
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml

@@ -0,0 +1,15 @@
+import QtQuick 2.14
+
+QtObject {
+    property string title
+    property string subTitle
+    property StatusIconSettings detailsButtonSettings: StatusIconSettings {
+        width: 20
+        height: 20
+    }
+
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+    }
+}

ui/StatusQ/src/StatusQ/Core/qmldir

@@ -5,4 +5,5 @@ StatusIcon 0.1 StatusIcon.qml
 StatusIconSettings 0.1 StatusIconSettings.qml
 StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
 StatusImageSettings 0.1 StatusImageSettings.qml
+StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
 

ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml

@@ -0,0 +1,79 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: statusModalHeader
+
+    property alias title: imageWithTitle.title
+    property alias subTitle: imageWithTitle.subTitle
+    property alias actionButton: actionButtonLoader.sourceComponent
+
+    property alias image: imageWithTitle.image
+    property bool editable: false
+
+    signal editClicked
+    signal close
+
+    implicitHeight: imageWithTitle.implicitHeight + 32
+    implicitWidth: 480
+
+    radius: 16
+
+    color: Theme.palette.statusModal.backgroundColor
+
+
+    StatusImageWithTitle {
+        id: imageWithTitle
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+
+        editable: statusModalHeader.editable
+        onEditButtonClicked: statusModalHeader.editButtonClicked()
+    }
+
+    Loader {
+        id: actionButtonLoader
+        anchors.right: closeButton.left
+        anchors.rightMargin: 24.5
+        anchors.top: parent.top
+        anchors.topMargin: 18
+
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 20
+        height: 20
+
+        icon.width: detailsButtonSettings.width
+        icon.height: detailsButtonSettings.height
+        icon.name: detailsButtonSettings.name
+        icon.color: detailsButtonSettings.color
+
+        onClicked: statusModalHeader.detailsClicked()
+    }
+
+    StatusFlatRoundButton {
+        id: closeButton
+        anchors.right: parent.right
+        anchors.rightMargin: 22.5
+        anchors.top: parent.top
+        anchors.topMargin: 22.5
+        width: 11.5
+        height: 11.5
+        type: StatusFlatRoundButton.Type.Secondary
+        icon.name: "close"
+        icon.color: Theme.palette.directColor1
+
+        onClicked: statusModalHeader.close()
+    }
+
+    Rectangle {
+        anchors.bottom: parent.bottom
+        width: parent.width
+        height: parent.radius
+        color: parent.color
+    }
+}

ui/StatusQ/src/assets/img/icons/pencil.svg

@@ -0,0 +1,4 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.100954 12.5959L0.798362 9.80623C0.830588 9.67733 0.871226 9.55116 0.919852 9.42847C0.981714 9.27239 1.18145 9.24231 1.30017 9.36102L3.63897 11.6998C3.75769 11.8185 3.7276 12.0183 3.57152 12.0801C3.44883 12.1288 3.32266 12.1694 3.19376 12.2016L0.404123 12.899C0.221028 12.9448 0.0551798 12.779 0.100954 12.5959Z" fill="black"/>
+<path d="M4.32312 10.2627C4.71364 10.6532 5.34681 10.6532 5.73733 10.2627L12.2928 3.7072C12.6833 3.31668 12.6833 2.68351 12.2928 2.29299L10.707 0.7072C10.3165 0.316676 9.68332 0.316675 9.29279 0.707199L2.73733 7.26266C2.34681 7.65318 2.34681 8.28635 2.73733 8.67687L4.32312 10.2627Z" fill="black"/>
+</svg>