feat(StatusListItem): introduce primary and secondary types

Also enable `icon.rotation` via `StatusIconSettings.
This commit is contained in:
Pascal Precht 2021-06-21 12:53:55 +02:00 committed by Michał Cieślak
parent f56e3d1677
commit 10699d754a
6 changed files with 33 additions and 3 deletions

View File

@ -10,7 +10,20 @@ Rectangle {
implicitWidth: 448 implicitWidth: 448
implicitHeight: 64 implicitHeight: 64
color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusListItem.backgroundColor enum Type {
Primary,
Secondary
}
color: {
if (sensor.containsMouse) {
return type === StatusListItem.Type.Primary ?
Theme.palette.baseColor2 :
Theme.palette.statusListItem.secondaryHoverBackgroundColor
}
return Theme.palette.statusListItem.backgroundColor
}
radius: 8 radius: 8
property string title: "" property string title: ""
@ -20,10 +33,13 @@ Rectangle {
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
height: 20 height: 20
width: 20 width: 20
rotation: 0
background: StatusIconBackgroundSettings { background: StatusIconBackgroundSettings {
width: 40 width: 40
height: 40 height: 40
color: Theme.palette.primaryColor3 color: type === StatusListItem.Type.Primary ?
Theme.palette.primaryColor3 :
"transparent"
} }
} }
property StatusImageSettings image: StatusImageSettings { property StatusImageSettings image: StatusImageSettings {
@ -32,6 +48,8 @@ Rectangle {
} }
property string label: "" property string label: ""
property int type: StatusListItem.Type.Primary
property alias sensor: sensor property alias sensor: sensor
property alias statusListItemTitle: statusListItemTitle property alias statusListItemTitle: statusListItemTitle
property alias statusListItemSubTitle: statusListItemSubTitle property alias statusListItemSubTitle: statusListItemSubTitle
@ -70,6 +88,7 @@ Rectangle {
icon.width: statusListItem.icon.width icon.width: statusListItem.icon.width
icon.height: statusListItem.icon.height icon.height: statusListItem.icon.height
icon.name: statusListItem.icon.name icon.name: statusListItem.icon.name
icon.rotation: statusListItem.icon.rotation
color: statusListItem.icon.background.color color: statusListItem.icon.background.color
width: statusListItem.icon.background.width width: statusListItem.icon.background.width
height: statusListItem.icon.background.height height: statusListItem.icon.background.height
@ -95,7 +114,12 @@ Rectangle {
id: statusListItemTitle id: statusListItemTitle
text: statusListItem.title text: statusListItem.title
font.pixelSize: 15 font.pixelSize: 15
color: Theme.palette.directColor1 color: {
if (statusListItem.type === StatusListItem.Type.Primary) {
return Theme.palette.directColor1
}
return Theme.palette.primaryColor1
}
} }
StatusBaseText { StatusBaseText {

View File

@ -8,6 +8,7 @@ Rectangle {
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
width: 24 width: 24
height: 24 height: 24
rotation: 0
background: StatusIconBackgroundSettings { background: StatusIconBackgroundSettings {
width: 40 width: 40
height: 40 height: 40
@ -30,5 +31,6 @@ Rectangle {
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
icon: statusRoundedIcon.icon.name icon: statusRoundedIcon.icon.name
rotation: statusRoundedIcon.icon.rotation
} }
} }

View File

@ -13,6 +13,7 @@ QtObject {
'blue3': '#88B0FF', 'blue3': '#88B0FF',
'blue4': '#869EFF', 'blue4': '#869EFF',
'blue5': '#AAC6FF', 'blue5': '#AAC6FF',
'blue6': '#ECEFFC',
'brown': '#8B3131', 'brown': '#8B3131',
'brown2': '#9B832F', 'brown2': '#9B832F',

View File

@ -132,6 +132,7 @@ ThemePalette {
property QtObject statusListItem: QtObject { property QtObject statusListItem: QtObject {
property color backgroundColor: baseColor3 property color backgroundColor: baseColor3
property color secondaryHoverBackgroundColor: primaryColor3
} }
property QtObject statusChatListItem: QtObject { property QtObject statusChatListItem: QtObject {

View File

@ -130,6 +130,7 @@ ThemePalette {
property QtObject statusListItem: QtObject { property QtObject statusListItem: QtObject {
property color backgroundColor: white property color backgroundColor: white
property color secondaryHoverBackgroundColor: getColor('blue6')
} }
property QtObject statusChatListItem: QtObject { property QtObject statusChatListItem: QtObject {

View File

@ -91,6 +91,7 @@ QtObject {
property QtObject statusListItem: QtObject { property QtObject statusListItem: QtObject {
property color backgroundColor property color backgroundColor
property color secondaryHoverBackgroundColor
} }
property QtObject statusChatListItem: QtObject { property QtObject statusChatListItem: QtObject {