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

Merge pull request #1160 from foresto/reaction-colors

Browse Source 
Reactions: avoid highlight color misuse, subdue bright border color
This commit is contained in:
DeepBlueV7.X 2022-08-20 21:49:57 +00:00 committed by GitHub
commit 3b0b8605a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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
} }