feat(Core): introduce StatusIconBackgroundSettings

This is a settings object to complement the existing `StatusIconSettings`.
Some components, like `StatusRoundIcon` need to be able to configure the
surroundings of the icon their rendering.

In such cases, `StatusIconBackgroundSettings` expose an API that give consumers
a way to configure things like background color, width, height and radius.

ui/StatusQ/src/StatusQ/Components/StatusListItem.qml

@@ -18,6 +18,11 @@ Rectangle {
     property StatusIconSettings icon: StatusIconSettings {
         height: 20
         width: 20
+        background: StatusIconBackgroundSettings {
+            width: 40
+            height: 40
+            color: Theme.palette.primaryColor3
+        }
     }
     property StatusImageSettings image: StatusImageSettings {}
     property string label: ""
@@ -51,7 +56,12 @@ Rectangle {
         Component {
             id: statusRoundedIcon
             StatusRoundIcon {
-                icon: statusListItem.icon
+                icon.width: statusListItem.icon.width
+                icon.height: statusListItem.icon.height
+                icon.name: statusListItem.icon.name
+                color: statusListItem.icon.background.color
+                width: statusListItem.icon.background.width
+                height: statusListItem.icon.background.height
             }
         }
 

ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml

@@ -5,16 +5,22 @@ import StatusQ.Core.Theme 0.1
 Rectangle {
     id: statusRoundedIcon
 
-    implicitWidth: 40
-    implicitHeight: 40
-    radius: width / 2;
-
-    color: Theme.palette.primaryColor3;
     property StatusIconSettings icon: StatusIconSettings {
         width: 24
         height: 24
+        background: StatusIconBackgroundSettings {
+            width: 40
+            height: 40
+            color: Theme.palette.primaryColor3
+        }
     }
 
+    color: icon.background.color
+    implicitWidth: icon.background.width
+    implicitHeight: icon.background.height
+    radius: icon.background.width / 2
+
+
     StatusIcon {
         id: statusIcon
         anchors.centerIn: parent

ui/StatusQ/src/StatusQ/Core/StatusIconBackgroundSettings.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.13
+
+QtObject {
+    id: statusIconBackgroundSettings
+
+    property color color
+    property real width
+    property real height
+    property int radius
+}
+

ui/StatusQ/src/StatusQ/Core/StatusIconSettings.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.13
+import StatusQ.Core 0.1
 
 QtObject {
     id: statusIconSettings
@@ -8,4 +9,5 @@ QtObject {
     property real height
     property color color
     property url source
+    property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {}
 }

ui/StatusQ/src/StatusQ/Core/qmldir

@@ -3,5 +3,6 @@ module StatusQ.Core
 StatusBaseText 0.1 StatusBaseText.qml
 StatusIcon 0.1 StatusIcon.qml
 StatusIconSettings 0.1 StatusIconSettings.qml
+StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
 StatusImageSettings 0.1 StatusImageSettings.qml