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:
parent
b40d427d88
commit
a4e62fb2cf
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
import QtQuick 2.13
|
||||||
|
|
||||||
|
QtObject {
|
||||||
|
id: statusIconBackgroundSettings
|
||||||
|
|
||||||
|
property color color
|
||||||
|
property real width
|
||||||
|
property real height
|
||||||
|
property int radius
|
||||||
|
}
|
||||||
|
|
|
@ -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 {}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue