From 53396ff38dcac527605d327f5b4123c4a8884727 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Sat, 26 May 2018 19:42:09 -0600
Subject: [PATCH] Show timestamp of pinned messages on hover

Addresses part of https://github.com/vector-im/riot-web/issues/5405

Signed-off-by: Travis Ralston <travpc@gmail.com>
---
 res/css/views/rooms/_PinnedEventTile.scss     | 14 ++++++++++++--
 src/components/views/rooms/PinnedEventTile.js |  4 ++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss
index fa76f4c679..f7417272b6 100644
--- a/res/css/views/rooms/_PinnedEventTile.scss
+++ b/res/css/views/rooms/_PinnedEventTile.scss
@@ -25,19 +25,29 @@ limitations under the License.
     background-color: $event-selected-color;
 }
 
-.mx_PinnedEventTile .mx_PinnedEventTile_sender {
+.mx_PinnedEventTile .mx_PinnedEventTile_sender,
+.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
     color: #868686;
     font-size: 0.8em;
     vertical-align: top;
-    display: block;
+    display: inline-block;
     padding-bottom: 3px;
 }
 
+.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
+    padding-left: 15px;
+    display: none;
+}
+
 .mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
     float: left;
     margin-right: 10px;
 }
 
+.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
+    display: inline-block;
+}
+
 .mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
     display: block;
 }
diff --git a/src/components/views/rooms/PinnedEventTile.js b/src/components/views/rooms/PinnedEventTile.js
index 478454a3d8..d0572e489a 100644
--- a/src/components/views/rooms/PinnedEventTile.js
+++ b/src/components/views/rooms/PinnedEventTile.js
@@ -22,6 +22,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import MessageEvent from "../messages/MessageEvent";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { _t } from '../../../languageHandler';
+import {formatFullDate} from '../../../DateUtils';
 
 module.exports = React.createClass({
     displayName: 'PinnedEventTile',
@@ -86,6 +87,9 @@ module.exports = React.createClass({
                 <span className="mx_PinnedEventTile_sender">
                     { sender.name }
                 </span>
+                <span className="mx_PinnedEventTile_timestamp">
+                    { formatFullDate(new Date(this.props.mxEvent.getTs())) }
+                </span>
                 <div className="mx_PinnedEventTile_message">
                     <MessageEvent mxEvent={this.props.mxEvent} className="mx_PinnedEventTile_body" maxImageHeight={150}
                                   onWidgetLoad={() => {}} // we need to give this, apparently