status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(StatusListItem): add `Danger` type support 

Usage:

```qml
StatusListItem {
    title: "Some title"
    icon.name: "delete"
    type: StatusListItem.Type.Danger
}
```

Closes #248
This commit is contained in:
Pascal Precht 2021-07-08 18:02:47 +02:00
parent 70043c5be4
commit 8155d9a218
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
2 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
sandbox/ListItems.qml
View File

@ -236,6 +236,12 @@ GridLayout {
icon.background.color: "orange" icon.background.color: "orange"
} }
StatusListItem {
title: "Title"
icon.name: "delete"
type: StatusListItem.Type.Danger
}
StatusDescriptionListItem { StatusDescriptionListItem {
title: "Title" title: "Title"
subTitle: "Subtitle" subTitle: "Subtitle"

39
src/StatusQ/Components/StatusListItem.qml
View File

@ -12,14 +12,20 @@ Rectangle {
enum Type { enum Type {
Primary, Primary,
Secondary Secondary,
Danger
} }
color: { color: {
if (sensor.containsMouse) { if (sensor.containsMouse) {
return type === StatusListItem.Type.Primary ? switch(type) {
Theme.palette.baseColor2 : case StatusListItem.Type.Primary:
Theme.palette.statusListItem.secondaryHoverBackgroundColor return Theme.palette.baseColor2
case StatusListItem.Type.Secondary:
return Theme.palette.statusListItem.secondaryHoverBackgroundColor
case StatusListItem.Type.Danger:
return Theme.palette.dangerColor3
}
} }
return Theme.palette.statusListItem.backgroundColor return Theme.palette.statusListItem.backgroundColor
} }
@ -35,12 +41,20 @@ Rectangle {
width: 20 width: 20
rotation: 0 rotation: 0
isLetterIdenticon: false isLetterIdenticon: false
color: type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor1 : Theme.palette.primaryColor1
background: StatusIconBackgroundSettings { background: StatusIconBackgroundSettings {
width: 40 width: 40
height: 40 height: 40
color: sensor.containsMouse && type === StatusListItem.Type.Secondary ? color: {
"transparent" : if (sensor.containsMouse) {
Theme.palette.primaryColor3 return type === StatusListItem.Type.Secondary ||
type === StatusListItem.Type.Danger ? "transparent" :
Theme.palette.primaryColor3
}
return type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor3 : Theme.palette.primaryColor3
}
} }
} }
property StatusImageSettings image: StatusImageSettings { property StatusImageSettings image: StatusImageSettings {
@ -97,6 +111,7 @@ Rectangle {
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 icon.rotation: statusListItem.icon.rotation
icon.color: statusListItem.icon.color
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
@ -133,10 +148,14 @@ Rectangle {
text: statusListItem.title text: statusListItem.title
font.pixelSize: 15 font.pixelSize: 15
color: { color: {
if (statusListItem.type === StatusListItem.Type.Primary) { switch (statusListItem.type) {
return Theme.palette.directColor1 case StatusListItem.Type.Primary:
return Theme.palette.directColor1
case StatusListItem.Type.Secondary:
return Theme.palette.primaryColor1
case StatusListItem.Type.Danger:
return Theme.palette.dangerColor1
} }
return Theme.palette.primaryColor1
} }
} }