From 6e164d04743823fca6392ed9cce9e75acd537a0c Mon Sep 17 00:00:00 2001 From: Arjen Hiemstra 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 --- .../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