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): 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 committed by Michał Cieślak
parent c85d626f1e
commit 15b8d1e896
2 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/StatusQ/sandbox/ListItems.qml
View File

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

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

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