From 19fc81d42f583a381de342b6bffb9abd48204d08 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Wed, 26 May 2021 12:23:24 +0200
Subject: [PATCH] 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.
---
 ui/StatusQ/sandbox/Layout.qml                    | 16 +++++++++++++---
 .../src/StatusQ/Core/Theme/StatusDarkTheme.qml   |  2 ++
 .../src/StatusQ/Core/Theme/StatusLightTheme.qml  |  2 ++
 .../src/StatusQ/Core/Theme/ThemePalette.qml      |  2 ++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/ui/StatusQ/sandbox/Layout.qml b/ui/StatusQ/sandbox/Layout.qml
index baeec06eac..dcb7fcf852 100644
--- a/ui/StatusQ/sandbox/Layout.qml
+++ b/ui/StatusQ/sandbox/Layout.qml
@@ -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"
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
index 3300436bcc..ee5708dc77 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
@@ -139,6 +139,8 @@ ThemePalette {
 
     property QtObject statusBadge: QtObject {
         property color foregroundColor: baseColor3
+        property color borderColor: baseColor5
+        property color hoverBorderColor: "#353A4D"
     }
 }
 
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
index dad070a505..a347aa5c23 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
@@ -139,6 +139,8 @@ ThemePalette {
 
     property QtObject statusBadge: QtObject {
         property color foregroundColor: white
+        property color borderColor: baseColor4
+        property color hoverBorderColor: "#DDE3F3"
     }
 }
 
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
index df9f15bd8d..ba0d4a5643 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
@@ -100,6 +100,8 @@ QtObject {
 
     property QtObject statusBadge: QtObject {
         property color foregroundColor
+        property color borderColor
+        property color hoverBorderColor
     }
 
     function alphaColor(color, alpha) {