From 8639e8ccba29cb25eae749262be32a7e3940a34d Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Fri, 21 May 2021 14:32:23 +0200
Subject: [PATCH] feat(Components): introduce `StatusRoundIcon` component

This commit introduces a `StatusRoundIcon` component which renders
a `StatusIcon` inside a rounded rectangle.

This is similar to `StatusRoundButton`, just that it isn't a clickable
component.

With these changes, we also introduce a new `StatusIconSettings` config
object that can be used across component that need icon configuration.

The configuration includes the following properties:

- `name` - Name of the icon and used to locate the asset
- `width`
- `height`

Closes #53
---
 sandbox/Others.qml                         |  4 ++++
 src/StatusQ/Components/StatusRoundIcon.qml | 28 ++++++++++++++++++++++
 src/StatusQ/Components/qmldir              |  1 +
 src/StatusQ/Core/StatusIconSettings.qml    | 11 +++++++++
 src/StatusQ/Core/qmldir                    |  1 +
 5 files changed, 45 insertions(+)
 create mode 100644 src/StatusQ/Components/StatusRoundIcon.qml
 create mode 100644 src/StatusQ/Core/StatusIconSettings.qml

diff --git a/sandbox/Others.qml b/sandbox/Others.qml
index a680059e..c3f254b3 100644
--- a/sandbox/Others.qml
+++ b/sandbox/Others.qml
@@ -34,4 +34,8 @@ GridLayout {
     StatusBadge {
         value: 100
     }
+
+    StatusRoundIcon {
+        icon.name: "info"
+    }
 }
diff --git a/src/StatusQ/Components/StatusRoundIcon.qml b/src/StatusQ/Components/StatusRoundIcon.qml
new file mode 100644
index 00000000..94f7e7e4
--- /dev/null
+++ b/src/StatusQ/Components/StatusRoundIcon.qml
@@ -0,0 +1,28 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+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
+    }
+
+    StatusIcon {
+        id: statusIcon
+        anchors.centerIn: parent
+
+        width: statusRoundedIcon.icon.width
+        height: statusRoundedIcon.icon.height
+
+        color: Theme.palette.primaryColor1
+        icon: statusRoundedIcon.icon.name
+    }
+}
diff --git a/src/StatusQ/Components/qmldir b/src/StatusQ/Components/qmldir
index 9f79e37e..e583d8cd 100644
--- a/src/StatusQ/Components/qmldir
+++ b/src/StatusQ/Components/qmldir
@@ -3,4 +3,5 @@ module StatusQ.Components
 StatusBadge 0.1 StatusBadge.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
+StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
diff --git a/src/StatusQ/Core/StatusIconSettings.qml b/src/StatusQ/Core/StatusIconSettings.qml
new file mode 100644
index 00000000..4699ccbc
--- /dev/null
+++ b/src/StatusQ/Core/StatusIconSettings.qml
@@ -0,0 +1,11 @@
+import QtQuick 2.13
+
+QtObject {
+    id: statusIconSettings
+
+    property string name
+    property real width
+    property real height
+    property color color
+    property url source
+}
diff --git a/src/StatusQ/Core/qmldir b/src/StatusQ/Core/qmldir
index a151edf0..62661512 100644
--- a/src/StatusQ/Core/qmldir
+++ b/src/StatusQ/Core/qmldir
@@ -2,4 +2,5 @@ module StatusQ.Core
 
 StatusBaseText 0.1 StatusBaseText.qml
 StatusIcon 0.1 StatusIcon.qml
+StatusIconSettings 0.1 StatusIconSettings.qml