Add interactive timestamp to brief messages.

src/webview/css/css.js

@@ -74,7 +74,7 @@ hr {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin-bottom: 4px;
+  margin-bottom: 6px;
 }
 .timerow {
   text-align: center;
@@ -95,20 +95,40 @@ hr {
 .timerow-right {
   background: -webkit-linear-gradient(left, #999 0%, transparent 90%);
 }
-.timestamp {
-  color: #999;
-  font-size: 0.9rem;
-  white-space: nowrap;
-}
 .message,
 .loading {
   display: flex;
   word-wrap: break-word;
   padding: 16px;
+  -webkit-tap-highlight-color: transparent;
 }
 .message-brief {
   padding: 0 16px 16px 64px;
 }
+.time-container {
+  position: absolute;
+  right: 0;
+  width: 7em;
+  height: 2em;
+  overflow: hidden;
+  pointer-events: none;
+}
+.timestamp {
+  color: hsla(0, 0%, 0%, 0.65);
+  background: hsl(0, 0%, 92%);
+  box-shadow: -1px 1px 2px 0 hsla(0, 0%, 0%, 0.3), -2px 2px 4px 0 hsla(0, 0%, 0%, 0.3);
+  border-radius: 3px;
+  padding: 0.125em 0;
+  margin: 0 1.5em;
+  font-size: 0.9rem;
+  text-align: center;
+  white-space: nowrap;
+  transition: transform 0.2s;
+  transform: translateX(125%);
+}
+.timestamp.show {
+  transform: translateX(15%);
+}
 .message p + p {
   margin-top: 16px;
 }
@@ -152,7 +172,8 @@ hr {
   justify-content: space-between;
 }
 .avatar,
-.header-wrapper {
+.header-wrapper,
+.message {
   cursor: pointer;
 }
 .stream-header {

src/webview/css/cssNight.js

@@ -8,6 +8,10 @@ body {
 .topic-header {
   background: #54606E;
 }
+.timestamp {
+  color: hsla(0, 0%, 100%, 0.5);
+  background: hsl(213, 14%, 34%);
+}
 .highlight {
   background-color: hsla(51, 100%, 64%, 0.42);
 }

src/webview/html/htmlBody.js

@@ -7,7 +7,7 @@ const messageLoadingHtml = template`
   <div class="loading-content">
     <div class="loading-subheader">
       <div class="block name"></div>
-      <div class="block timestamp"></div>
+      <div class="block timestamp show"></div>
     </div>
     <div class="block"></div>
     <div class="block"></div>

src/webview/html/messageAsHtml.js

@@ -81,7 +81,7 @@ export const flagsStateToStringList = (flags: FlagsState, id: number): string[]
   Object.keys(flags).filter(key => flags[key][id]);
 
 export default (backgroundData: BackgroundData, message: Message | Outbox, isBrief: boolean) => {
-  const { id } = message;
+  const { id, timestamp } = message;
   const flagStrings = flagsStateToStringList(backgroundData.flags, id);
   const divOpenHtml = template`
     <div
@@ -91,6 +91,13 @@ export default (backgroundData: BackgroundData, message: Message | Outbox, isBri
      $!${flagStrings.map(flag => template`data-${flag}="true" `).join('')}
     >`;
 
+  const timestampHtml = (showOnRender: boolean) => template`
+<div class="time-container">
+  <div class="timestamp ${showOnRender ? 'show' : ''}">
+    ${shortTime(new Date(timestamp * 1000), backgroundData.twentyFourHourTime)}
+  </div>
+</div>
+`;
   const bodyHtml =
     message.submessages && message.submessages.length > 0
       ? widgetBody(message)
@@ -100,22 +107,21 @@ export default (backgroundData: BackgroundData, message: Message | Outbox, isBri
     return template`
 $!${divOpenHtml}
   <div class="content">
+    $!${timestampHtml(false)}
     $!${bodyHtml}
   </div>
 </div>
 `;
   }
 
-  const { sender_full_name, sender_email, timestamp } = message;
+  const { sender_full_name, sender_email } = message;
   const avatarUrl = getAvatarFromMessage(message, backgroundData.auth.realm);
   const subheaderHtml = template`
 <div class="subheader">
   <div class="username">
     ${sender_full_name}
   </div>
-  <div class="timestamp">
-    ${shortTime(new Date(timestamp * 1000), backgroundData.twentyFourHourTime)}
-  </div>
+  $!${timestampHtml(true)}
 </div>
 `;
 

src/webview/js/generatedEs3.js

@@ -527,6 +527,13 @@ documentBody.addEventListener('click', function (e) {
     });
     return;
   }
+
+  var messageElement = target.closest('.message');
+
+  if (messageElement) {
+    messageElement.getElementsByClassName('timestamp')[0].classList.toggle('show');
+    return;
+  }
 });
 
 var handleLongPress = function handleLongPress(target) {

src/webview/js/js.js

@@ -684,6 +684,12 @@ documentBody.addEventListener('click', (e: MouseEvent) => {
     });
     return;
   }
+
+  const messageElement = target.closest('.message');
+  if (messageElement) {
+    messageElement.getElementsByClassName('timestamp')[0].classList.toggle('show');
+    return;
+  }
 });
 
 const handleLongPress = (target: Element) => {