2020-05-04 01:59:05 +03:00
import QtQuick 2.6
import QtQuick . Controls 2.2
2020-05-22 04:21:35 +03:00
// This class is for showing Reactions in the timeline row, not for
// adding new reactions via the emoji picker
2020-05-04 01:59:05 +03:00
Flow {
2020-05-22 04:21:35 +03:00
id: reactionFlow
// highlight colors for selfReactedEvent background
property real highlightHue: colors . highlight . hslHue
property real highlightSat: colors . highlight . hslSaturation
property real highlightLight: colors . highlight . hslLightness
property string eventId
property string roomId
2020-05-04 01:59:05 +03:00
anchors.left: parent . left
anchors.right: parent . right
spacing: 4
2020-05-04 14:14:54 +03:00
property alias reactions: repeater . model
2020-05-04 01:59:05 +03:00
Repeater {
2020-05-04 14:14:54 +03:00
id: repeater
2020-05-22 04:21:35 +03:00
delegate: AbstractButton {
2020-05-04 01:59:05 +03:00
id: reaction
hoverEnabled: true
2020-05-06 04:40:24 +03:00
implicitWidth: contentItem . childrenRect . width + contentItem . leftPadding * 2
implicitHeight: contentItem . childrenRect . height
2020-05-04 01:59:05 +03:00
ToolTip.visible: hovered
2020-07-19 13:22:54 +03:00
ToolTip.text: modelData . users
2020-05-04 01:59:05 +03:00
2020-05-22 04:21:35 +03:00
onClicked: {
2020-07-19 13:22:54 +03:00
console . debug ( "Picked " + modelData . key + "in response to " + reactionFlow . eventId + " in room " + reactionFlow . roomId + ". selfReactedEvent: " + modelData . selfReactedEvent )
2020-07-20 01:42:48 +03:00
timelineManager . queueReactionMessage ( reactionFlow . eventId , modelData . key )
2020-05-22 04:21:35 +03:00
}
2020-05-06 04:40:24 +03:00
2020-05-04 01:59:05 +03:00
contentItem: Row {
anchors.centerIn: parent
2020-05-06 04:40:24 +03:00
spacing: reactionText . implicitHeight / 4
leftPadding: reactionText . implicitHeight / 2
rightPadding: reactionText . implicitHeight / 2
TextMetrics {
id: textMetrics
2020-06-10 04:05:27 +03:00
font.family: settings . emojiFont
2020-05-06 04:40:24 +03:00
elide: Text . ElideRight
elideWidth: 150
2020-07-19 13:22:54 +03:00
text: modelData . key
2020-05-06 04:40:24 +03:00
}
2020-05-04 01:59:05 +03:00
Text {
2020-05-04 14:41:18 +03:00
anchors.baseline: reactionCounter . baseline
2020-05-04 01:59:05 +03:00
id: reactionText
2020-07-19 13:22:54 +03:00
text: textMetrics . elidedText + ( textMetrics . elidedText == modelData . key ? "" : "…" )
2020-06-10 04:05:27 +03:00
font.family: settings . emojiFont
2020-05-06 00:43:43 +03:00
color: reaction . hovered ? colors.highlight : colors . text
2020-05-06 04:40:24 +03:00
maximumLineCount: 1
2020-05-04 01:59:05 +03:00
}
Rectangle {
2020-05-06 04:40:24 +03:00
id: divider
2020-05-26 23:27:05 +03:00
height: Math . floor ( reactionCounter . implicitHeight * 1.4 )
2020-05-04 01:59:05 +03:00
width: 1
2020-07-19 13:22:54 +03:00
color: ( reaction . hovered || modelData . selfReactedEvent !== '' ) ? colors.highlight : colors . text
2020-05-04 01:59:05 +03:00
}
Text {
2020-05-06 04:40:24 +03:00
anchors.verticalCenter: divider . verticalCenter
2020-05-04 14:41:18 +03:00
id: reactionCounter
2020-07-19 13:22:54 +03:00
text: modelData . count
2020-05-04 01:59:05 +03:00
font: reaction . font
2020-05-06 00:43:43 +03:00
color: reaction . hovered ? colors.highlight : colors . text
2020-05-04 01:59:05 +03:00
}
}
background: Rectangle {
anchors.centerIn: parent
2020-05-22 04:21:35 +03:00
2020-05-04 01:59:05 +03:00
implicitWidth: reaction . implicitWidth
implicitHeight: reaction . implicitHeight
2020-07-19 13:22:54 +03:00
border.color: ( reaction . hovered || modelData . selfReactedEvent !== '' ) ? colors.highlight : colors . text
color: modelData . selfReactedEvent !== '' ? Qt . hsla ( highlightHue , highlightSat , highlightLight , 0.20 ) : colors . base
2020-05-04 01:59:05 +03:00
border.width: 1
radius: reaction . height / 2.0
}
}
}
}