rnhmjoj
/
nheko
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Reactions: avoid highlight color misuse, subdue border color 

This addresses a few problems with reaction colors:

- The state-checking conditionals for reaction text, background, and border
  were inconsistent, making it difficult to choose colors for each state
  (normal, hovered, and self reactions) that worked well in all themes.
- The QPalette::Highlight color was being misused as a text/foreground color.
  This color role is intended for background areas.  It has little contrast
  against the background in themes like KDE Plasma's Breeze High Contrast,
  so using it for text and icons makes those things difficult to read.
  https://doc.qt.io/qt-5/qpalette.html#ColorRole-enum
- The reaction border was drawn in the same color as normal text, making it
  so bright in some dark themes that it distracted from reading nearby text.

Fixes Nheko-Reborn/nheko#1159
This commit is contained in:
Forest 2022-08-19 20:22:32 -07:00
parent ff87bef030
commit f66ed4bea5
1 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
resources/qml/Reactions.qml
View File

@ -12,10 +12,9 @@ import im.nheko 1.0
Flow { Flow {
id: reactionFlow id: reactionFlow
// highlight colors for selfReactedEvent background // lower-contrast colors to avoid distracting from text & to enhance hover effect
property real highlightHue: Nheko.colors.highlight.hslHue property color gentleHighlight: Qt.hsla(Nheko.colors.highlight.hslHue, Nheko.colors.highlight.hslSaturation, Nheko.colors.highlight.hslLightness, 0.8)
property real highlightSat: Nheko.colors.highlight.hslSaturation property color gentleText: Qt.hsla(Nheko.colors.text.hslHue, Nheko.colors.text.hslSaturation, Nheko.colors.text.hslLightness, 0.6)
property real highlightLight: Nheko.colors.highlight.hslLightness
property string eventId property string eventId
property alias reactions: repeater.model property alias reactions: repeater.model
@ -74,7 +73,7 @@ Flow {
return textMetrics.elidedText; return textMetrics.elidedText;
} }
font.family: Settings.emojiFont font.family: Settings.emojiFont
color: reaction.hovered ? Nheko.colors.highlight : Nheko.colors.text color: (reaction.hovered || modelData.selfReactedEvent !== '') ? Nheko.colors.highlightedText: Nheko.colors.text
maximumLineCount: 1 maximumLineCount: 1
} }
@ -83,7 +82,7 @@ Flow {
height: Math.floor(reactionCounter.implicitHeight * 1.4) height: Math.floor(reactionCounter.implicitHeight * 1.4)
width: 1 width: 1
color: (reaction.hovered || modelData.selfReactedEvent !== '') ? Nheko.colors.highlight : Nheko.colors.text color: reaction.hovered ? Nheko.colors.text: gentleText
} }
Text { Text {
@ -92,7 +91,7 @@ Flow {
anchors.verticalCenter: divider.verticalCenter anchors.verticalCenter: divider.verticalCenter
text: modelData.count text: modelData.count
font: reaction.font font: reaction.font
color: reaction.hovered ? Nheko.colors.highlight : Nheko.colors.text color: (reaction.hovered || modelData.selfReactedEvent !== '') ? Nheko.colors.highlightedText: Nheko.colors.windowText
} }
} }
@ -101,8 +100,8 @@ Flow {
anchors.centerIn: parent anchors.centerIn: parent
implicitWidth: reaction.implicitWidth implicitWidth: reaction.implicitWidth
implicitHeight: reaction.implicitHeight implicitHeight: reaction.implicitHeight
border.color: (reaction.hovered || modelData.selfReactedEvent !== '') ? Nheko.colors.highlight : Nheko.colors.text border.color: reaction.hovered ? Nheko.colors.text: gentleText
color: modelData.selfReactedEvent !== '' ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.2) : Nheko.colors.window color: reaction.hovered ? Nheko.colors.highlight : (modelData.selfReactedEvent !== '' ? gentleHighlight : Nheko.colors.window)
border.width: 1 border.width: 1
radius: reaction.height / 2 radius: reaction.height / 2
} }