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.
This commit is contained in:
Pascal Precht 2021-05-25 17:31:40 +02:00 committed by Pascal Precht
parent b40d427d88
commit a4e62fb2cf
5 changed files with 36 additions and 6 deletions

View File

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

View File

@ -5,16 +5,22 @@ import StatusQ.Core.Theme 0.1
Rectangle { Rectangle {
id: statusRoundedIcon id: statusRoundedIcon
implicitWidth: 40
implicitHeight: 40
radius: width / 2;
color: Theme.palette.primaryColor3;
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
width: 24 width: 24
height: 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 { StatusIcon {
id: statusIcon id: statusIcon
anchors.centerIn: parent anchors.centerIn: parent

View File

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

View File

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

View File

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