Differinate between regular text and revealed spoiler text

When you reveal a spoiler, it removes the background from the spoiler
block - effectively making it seem like regular text. There's also a
minor issue that we use the color scheme's textColor as the "spoiler
block" color, and it will usually end up white. Most chat programs have
typically used a dark background for spoiler blocks, even on dark
themes.

I killed two UX issues with one stone, first by making the spoiler block
color fixed (but mixed with the textColor, to ensure it's readable
regardless of Breeze Light/Dark.) And second by only changing the text's
visibility, not the background.
This commit is contained in:
Joshua Goins
2025-05-08 15:09:25 -04:00
parent 5d4529ccf9
commit 14cbbd394f

View File

@@ -49,6 +49,11 @@ TextEdit {
*/
property bool spoilerRevealed: !hasSpoiler.test(display)
/**
* @brief The color of spoiler blocks, to be theme-agnostic.
*/
property color spoilerBlockColor: Kirigami.ColorUtils.tintWithAlpha("#232629", Kirigami.Theme.textColor, 0.15)
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: Message.maxContentWidth
@@ -91,16 +96,27 @@ a{
color: " + Kirigami.Theme.linkColor + ";
text-decoration: none;
}
[data-mx-spoiler] a {
background: " + root.spoilerBlockColor + ";
}
[data-mx-spoiler] {
background: " + root.spoilerBlockColor + ";
}
" + (!spoilerRevealed ? "
[data-mx-spoiler] a {
color: transparent;
background: " + Kirigami.Theme.textColor + ";
}
[data-mx-spoiler] {
color: transparent;
background: " + Kirigami.Theme.textColor + ";
}
" : "") + "
" : "
[data-mx-spoiler] a {
color: white;
}
[data-mx-spoiler] {
color: white;
}
") + "
</style>" + display
color: Kirigami.Theme.textColor