From a4e62fb2cfe88efe229e0e27159054b95e5f2e0d Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Tue, 25 May 2021 17:31:40 +0200 Subject: [PATCH] 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. --- src/StatusQ/Components/StatusListItem.qml | 12 +++++++++++- src/StatusQ/Components/StatusRoundIcon.qml | 16 +++++++++++----- .../Core/StatusIconBackgroundSettings.qml | 11 +++++++++++ src/StatusQ/Core/StatusIconSettings.qml | 2 ++ src/StatusQ/Core/qmldir | 1 + 5 files changed, 36 insertions(+), 6 deletions(-) create mode 100644 src/StatusQ/Core/StatusIconBackgroundSettings.qml diff --git a/src/StatusQ/Components/StatusListItem.qml b/src/StatusQ/Components/StatusListItem.qml index 739e3753..7e06e5a3 100644 --- a/src/StatusQ/Components/StatusListItem.qml +++ b/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 } } diff --git a/src/StatusQ/Components/StatusRoundIcon.qml b/src/StatusQ/Components/StatusRoundIcon.qml index 94f7e7e4..a6c70d9c 100644 --- a/src/StatusQ/Components/StatusRoundIcon.qml +++ b/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 diff --git a/src/StatusQ/Core/StatusIconBackgroundSettings.qml b/src/StatusQ/Core/StatusIconBackgroundSettings.qml new file mode 100644 index 00000000..7dc52011 --- /dev/null +++ b/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 +} + diff --git a/src/StatusQ/Core/StatusIconSettings.qml b/src/StatusQ/Core/StatusIconSettings.qml index 4699ccbc..cb0d135e 100644 --- a/src/StatusQ/Core/StatusIconSettings.qml +++ b/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 {} } diff --git a/src/StatusQ/Core/qmldir b/src/StatusQ/Core/qmldir index 7a1cc071..ec1996d7 100644 --- a/src/StatusQ/Core/qmldir +++ b/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