d3v1l/matrixion
1
0
Fork 0
mirror of https://github.com/Nheko-Reborn/nheko.git synced 2024-11-22 03:00:46 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reactions: avoid highlight color misuse, subdue border color

Browse source 
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 {
id: reactionFlow
// highlight colors for selfReactedEvent background
property real highlightHue: Nheko.colors.highlight.hslHue
property real highlightSat: Nheko.colors.highlight.hslSaturation
property real highlightLight: Nheko.colors.highlight.hslLightness
// lower-contrast colors to avoid distracting from text & to enhance hover effect
property color gentleHighlight: Qt.hsla(Nheko.colors.highlight.hslHue, Nheko.colors.highlight.hslSaturation, Nheko.colors.highlight.hslLightness, 0.8)
property color gentleText: Qt.hsla(Nheko.colors.text.hslHue, Nheko.colors.text.hslSaturation, Nheko.colors.text.hslLightness, 0.6)
property string eventId
property alias reactions: repeater.model
@ -74,7 +73,7 @@ Flow {
return textMetrics.elidedText;
}
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
}
@ -83,7 +82,7 @@ Flow {
height: Math.floor(reactionCounter.implicitHeight * 1.4)
width: 1
color: (reaction.hovered || modelData.selfReactedEvent !== '') ? Nheko.colors.highlight : Nheko.colors.text
color: reaction.hovered ? Nheko.colors.text: gentleText
}
Text {
@ -92,7 +91,7 @@ Flow {
anchors.verticalCenter: divider.verticalCenter
text: modelData.count
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
implicitWidth: reaction.implicitWidth
implicitHeight: reaction.implicitHeight
border.color: (reaction.hovered || modelData.selfReactedEvent !== '') ? Nheko.colors.highlight : Nheko.colors.text
color: modelData.selfReactedEvent !== '' ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.2) : Nheko.colors.window
border.color: reaction.hovered ? Nheko.colors.text: gentleText
color: reaction.hovered ? Nheko.colors.highlight : (modelData.selfReactedEvent !== '' ? gentleHighlight : Nheko.colors.window)
border.width: 1
radius: reaction.height / 2
}