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

feat(StatusBadge): introduce `borderColor` and `hoverBorderColor` 

`StatusBadge` uses a border with same color as its underlying component
to create "fake space" (see `StatusNavTabButton`).

The color depends on the parent component background and its state,
which the `StatusBadge` doesn't know about by itself, so the border color
has to be set explicity whereever it's desired.

This commit introduces (default) colors for the border based on where
badge is used.
This commit is contained in:
Pascal Precht 2021-05-26 12:23:24 +02:00 committed by Pascal Precht
parent cb9492abed
commit 041c11fb94
4 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
sandbox/Layout.qml
View File

@ -28,6 +28,8 @@ GridLayout {
icon.name: "chat"
badge.value: 33
badge.visible: true
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Chat"
}
}
@ -37,6 +39,8 @@ GridLayout {
icon.name: "chat"
badge.value: 33
badge.visible: true
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Chat"
}
@ -72,7 +76,7 @@ GridLayout {
badge.visible: true
badge.anchors.rightMargin: 4
badge.anchors.topMargin: 5
badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Profile"
@ -85,6 +89,8 @@ GridLayout {
icon.name: "chat"
badge.value: 33
badge.visible: true
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Chat"
}
@ -118,6 +124,8 @@ GridLayout {
icon.name: "chat"
badge.value: 33
badge.visible: true
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Chat"
}
@ -166,7 +174,7 @@ GridLayout {
badge.visible: true
badge.anchors.rightMargin: 4
badge.anchors.topMargin: 5
badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Profile"
@ -180,6 +188,8 @@ GridLayout {
icon.name: "chat"
badge.value: 33
badge.visible: true
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Chat"
}
@ -247,7 +257,7 @@ GridLayout {
badge.visible: true
badge.anchors.rightMargin: 4
badge.anchors.topMargin: 5
badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Profile"

2
src/StatusQ/Core/Theme/StatusDarkTheme.qml
View File

@ -139,6 +139,8 @@ ThemePalette {
property QtObject statusBadge: QtObject {
property color foregroundColor: baseColor3
property color borderColor: baseColor5
property color hoverBorderColor: "#353A4D"
}
}

2
src/StatusQ/Core/Theme/StatusLightTheme.qml
View File

@ -139,6 +139,8 @@ ThemePalette {
property QtObject statusBadge: QtObject {
property color foregroundColor: white
property color borderColor: baseColor4
property color hoverBorderColor: "#DDE3F3"
}
}

2
src/StatusQ/Core/Theme/ThemePalette.qml
View File

@ -100,6 +100,8 @@ QtObject {
property QtObject statusBadge: QtObject {
property color foregroundColor
property color borderColor
property color hoverBorderColor
}
function alphaColor(color, alpha) {