Fancy hidden timestamps

qml/pages/ChatPage.qml

@@ -123,8 +123,12 @@ Page {
                 delegate: ListItem {
                     id: messageItem
 
+                    property bool showTimestamp: false
+
                     contentHeight: content.height + 2 * Theme.paddingMedium
                     width: chatView.width
+                    onClicked: showTimestamp = !showTimestamp
+                    menu: messageMenu
 
                     BubbleBackground {
                         id: bubble
@@ -137,8 +141,8 @@ Page {
                         color: Theme.rgba(Theme.primaryColor, Theme.opacityFaint)
                         opacity: model.IsSender ? Theme.opacityFaint : Theme.opacityHigh
                         radius: Theme.paddingLarge
-                        height: content.implicitHeight + 2 * Theme.paddingSmall
                         width: content.implicitWidth + 2 * Theme.paddingSmall
+                        height: content.implicitHeight + 2 * Theme.paddingSmall
                         roundedCorners: BubbleBackground.NoCorners | (model.IsSender ? BubbleBackground.BottomLeft : BubbleBackground.BottomRight)
 
                         anchors {
@@ -149,7 +153,6 @@ Page {
                             right: model.IsSender ? parent.right : undefined
                             left: !model.IsSender ? parent.left : undefined
                             top: parent.top
-                            bottom: parent.bottom
                         }
 
                         Behavior on width {
@@ -160,6 +163,16 @@ Page {
 
                         }
 
+                        Behavior on height {
+                            NumberAnimation {
+                                id: contentHeightAnimation
+
+                                duration: 100
+                                easing.type: Easing.InOutQuad
+                            }
+
+                        }
+
                     }
 
                     ColumnLayout {
@@ -174,6 +187,8 @@ Page {
                         }
 
                         Text {
+                            id: username
+
                             text: room.userIdToUserName(model.UserId)
                             color: room.userColor(model.UserId, "#00000000")
                             Layout.alignment: model.IsSender ? Qt.AlignRight : Qt.AlignLeft
@@ -191,6 +206,8 @@ Page {
                         Text {
                             id: ts
 
+                            visible: showTimestamp
+                            height: showTimestamp ? implicitHeight : 0
                             Layout.alignment: model.IsSender ? Qt.AlignRight : Qt.AlignLeft
                             text: model.Timestamp.toLocaleString()
                             color: Theme.highlightColor
@@ -198,6 +215,35 @@ Page {
                             horizontalAlignment: Text.AlignRight
                         }
 
+                        // padding so that content doesn't jump, when ts hides or unhides
+                        Item {
+                            Layout.fillHeight: true
+                        }
+
+                    }
+
+                    Behavior on showTimestamp {
+                        SequentialAnimation {
+                            NumberAnimation {
+                                target: ts
+                                property: "opacity"
+                                to: 0
+                                easing.type: Easing.InQuad
+                            }
+                            // actually change the controlled property between the 2 other animations
+
+                            PropertyAction {
+                            }
+
+                            NumberAnimation {
+                                target: ts
+                                property: "opacity"
+                                to: 1
+                                easing.type: Easing.OutQuad
+                            }
+
+                        }
+
                     }
 
                 }
@@ -249,4 +295,28 @@ Page {
 
     }
 
+    Component {
+        id: messageMenu
+
+        ContextMenu {
+            MenuItem {
+                text: qsTr("React")
+            }
+
+            MenuItem {
+                text: qsTr("Reply")
+            }
+
+            MenuItem {
+                text: qsTr("Edit")
+            }
+
+            MenuItem {
+                text: qsTr("Redact")
+            }
+
+        }
+
+    }
+
 }