status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
View File

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

2
ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml
View File

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

1
ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml
View File

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

1
ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
View File

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

1
ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
View File

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

1
ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
View File

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