From 6e164d04743823fca6392ed9cce9e75acd537a0c Mon Sep 17 00:00:00 2001
From: Arjen Hiemstra <ahiemstra@heimr.nl>
Date: Wed, 6 Nov 2024 12:22:02 +0000
Subject: [PATCH 1/4] faces/piechart: Use GraphicalEffects.Glow for rendering
 outline of compact text

Apparently using style Text.Outline leads to some pretty bad text
rendering. So instead use Glow from GraphicalEffects to achieve a
similar effect but one that's smoother. Unfortunately this uses
deprecated API because MultiEffect turns out to be completely unusable.

BUG: 494495


(cherry picked from commit 69c7ad2122b1c5dd6fcc3edaa8be4ec597bdfda5)

Co-authored-by: Arjen Hiemstra <ahiemstra@heimr.nl>
---
 .../piechart/contents/ui/UsedTotalDisplay.qml | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/faces/facepackages/piechart/contents/ui/UsedTotalDisplay.qml b/faces/facepackages/piechart/contents/ui/UsedTotalDisplay.qml
index 50242cfc..52cc787c 100644
--- a/faces/facepackages/piechart/contents/ui/UsedTotalDisplay.qml
+++ b/faces/facepackages/piechart/contents/ui/UsedTotalDisplay.qml
@@ -8,6 +8,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Qt5Compat.GraphicalEffects
+
 import org.kde.kirigami as Kirigami
 
 import org.kde.ksysguard.formatter as Formatter
@@ -87,17 +89,24 @@ Item {
             fontSizeMode: Text.HorizontalFit
             minimumPointSize: Kirigami.Theme.smallFont.pointSize * 0.8
 
-            // When we're small the text is allowed to flow over the underlying
-            // pie chart, to improve contrast we render it with an outline using
-            // the inverse text color.
-            style: root.constrained ? Text.Outline : Text.Normal
-            styleColor: Qt.rgba(1.0 - Kirigami.Theme.textColor.r, 1.0 - Kirigami.Theme.textColor.g, 1.0 - Kirigami.Theme.textColor.b, 1.0)
-
             // This slightly odd combination ensures that when the width becomes
             // too small, the unit gets hidden because the text wraps but the
             // wrapped part is hidden due to maximumLineCount.
             wrapMode: Text.Wrap
             maximumLineCount: 1
+
+            // When we're small we want to overlap the text onto the chart. To
+            // ensure the text remains readable, we want to have some sort of
+            // outline behind the text. Unfortunately, there is no way to
+            // achieve the visual effect we want here without using deprecated
+            // GraphicalEffects. MultiEffect is completely unusable and using
+            // `style: Text.Outline` makes the font rendering look pretty bad.
+            layer.enabled: root.constrained
+            layer.effect: Glow {
+                radius: 4
+                spread: 0.75
+                color: Kirigami.Theme.backgroundColor
+            }
         }
 
         Kirigami.Separator {
-- 
2.47.0

