1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
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
|
GitWeb
