Add placeholder for reactions

This commit is contained in:
Nicolas Werner 2020-05-04 00:59:05 +02:00
parent a8b22e49c3
commit a9aed09d35
3 changed files with 79 additions and 1 deletions

View File

@ -0,0 +1,74 @@
import QtQuick 2.6
import QtQuick.Controls 2.2
Flow {
anchors.left: parent.left
anchors.right: parent.right
spacing: 4
Repeater {
model: ListModel {
id: nameModel
ListElement { key: "😊"; count: 5; reactedBySelf: true; users: "Nico, RedSky, AAA, BBB, CCC" }
ListElement { key: "🤠"; count: 6; reactedBySelf: false; users: "Nico, AAA, BBB, CCC" }
ListElement { key: "💘"; count: 1; reactedBySelf: true; users: "Nico" }
ListElement { key: "🙈"; count: 7; reactedBySelf: false; users: "Nico, RedSky, AAA, BBB, CCC, DDD" }
ListElement { key: "👻"; count: 6; reactedBySelf: false; users: "Nico, RedSky, BBB, CCC" }
}
Button {
id: reaction
//border.width: 1
text: model.key
hoverEnabled: true
implicitWidth: contentItem.childrenRect.width + contentItem.padding*2
implicitHeight: contentItem.childrenRect.height + contentItem.padding*2
ToolTip.visible: hovered
ToolTip.text: model.users
contentItem: Row {
anchors.centerIn: parent
spacing: 2
padding: 4
Text {
id: reactionText
text: reaction.text
font: reaction.font
opacity: enabled ? 1.0 : 0.3
color: reaction.hovered ? colors.highlight : colors.buttonText
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
Rectangle {
height: reactionText.implicitHeight
width: 1
color: reaction.hovered ? colors.highlight : colors.buttonText
}
Text {
text: model.count
font: reaction.font
opacity: enabled ? 1.0 : 0.3
color: reaction.hovered ? colors.highlight : colors.buttonText
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
}
background: Rectangle {
anchors.centerIn: parent
implicitWidth: reaction.implicitWidth
implicitHeight: reaction.implicitHeight
opacity: enabled ? 1 : 0.3
border.color: (reaction.hovered || model.reactedBySelf )? colors.highlight : colors.buttonText
color: colors.dark
border.width: 1
radius: reaction.height / 2.0
}
}
}
}

View File

@ -52,6 +52,9 @@ MouseArea {
modelData: model
}
Reactions {
}
}
StatusIndicator {

View File

@ -117,8 +117,9 @@
<file>qml/MatrixText.qml</file>
<file>qml/StatusIndicator.qml</file>
<file>qml/EncryptionIndicator.qml</file>
<file>qml/TimelineRow.qml</file>
<file>qml/Reactions.qml</file>
<file>qml/ScrollHelper.qml</file>
<file>qml/TimelineRow.qml</file>
<file>qml/delegates/MessageDelegate.qml</file>
<file>qml/delegates/TextMessage.qml</file>
<file>qml/delegates/NoticeMessage.qml</file>