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
// Signal for when a reaction is picked / unpicked
signal picked ( string room_id , string event_id , string key , string selfReactedEvent )
// 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
ToolTip.text: model . users
2020-05-22 04:21:35 +03:00
onClicked: {
console . debug ( "Picked " + model . key + "in response to " + reactionFlow . eventId + " in room " + reactionFlow . roomId + ". selfReactedEvent: " + model . selfReactedEvent )
reactionFlow . picked ( reactionFlow . roomId , reactionFlow . eventId , model . key , model . selfReactedEvent )
}
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
font.family: settings . emoji_font_family
elide: Text . ElideRight
elideWidth: 150
2020-05-16 23:19:23 +03:00
text: model . 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-05-06 04:40:24 +03:00
text: textMetrics . elidedText + ( textMetrics . elidedText == textMetrics . text ? "" : "…" )
2020-05-04 14:14:54 +03:00
font.family: settings . emoji_font_family
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-05-22 04:21:35 +03:00
color: ( reaction . hovered || model . 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-05-04 14:14:54 +03:00
text: model . counter
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-05-22 04:21:35 +03:00
border.color: ( reaction . hovered || model . selfReactedEvent !== '' ) ? colors.highlight : colors . text
color: model . 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
}
}
}
}