diff options
| author | DeepBlueV7.X <nicolas.werner@hotmail.de> | 2022-08-20 21:49:57 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-08-20 21:49:57 +0000 |
| commit | 3b0b8605a88e7886258da70f81fe23661e240213 (patch) | |
| tree | 2e249233730856be96f86450cabc34e867d7e233 | |
| parent | 732b82c04dc80c2426913fa6f703dfe90ec15346 (diff) | |
| parent | f66ed4bea51d4313dab09438899f5fdc3797983e (diff) | |
Merge pull request #1160 from foresto/reaction-colors
Reactions: avoid highlight color misuse, subdue bright border color
| -rw-r--r-- | resources/qml/Reactions.qml | 17 |
1 files changed, 8 insertions, 9 deletions
diff --git a/resources/qml/Reactions.qml b/resources/qml/Reactions.qml index aaf32647..aae42cb1 100644 --- a/resources/qml/Reactions.qml +++ b/resources/qml/Reactions.qml @@ -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 } |