From 9e37fa46b154594afad3281157c21cc1a8c47ebf Mon Sep 17 00:00:00 2001
From: Maxwell Kepler <kierang@largepixelcollider.net>
Date: Thu, 18 May 2017 22:01:00 +0100
Subject: [PATCH] Add 12 hour support

---
 .../views/messages/MessageTimestamp.js        | 25 +++++++++++++------
 .../structures/_FilePanel.scss                |  1 -
 .../views/rooms/_EventTile.scss               |  6 ++++-
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/views/messages/MessageTimestamp.js b/src/components/views/messages/MessageTimestamp.js
index a97f54b173..8417f91fd3 100644
--- a/src/components/views/messages/MessageTimestamp.js
+++ b/src/components/views/messages/MessageTimestamp.js
@@ -16,19 +16,28 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var DateUtils = require('matrix-react-sdk/lib/DateUtils');
+import * as UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
+const React = require('react');
+const DateUtils = require('matrix-react-sdk/lib/DateUtils');
 
 module.exports = React.createClass({
     displayName: 'MessageTimestamp',
 
     render: function() {
         var date = new Date(this.props.ts);
-        return (
-            <span className="mx_MessageTimestamp" title={ DateUtils.formatFullDate(date) }>
-                { DateUtils.formatTime(date) }
-            </span>
-        );
+        if (UserSettingsStore.getSyncedSetting('showTwelveHourTimestamps')) {
+          return (
+              <span style={{ textAlign: 'center' }} className="mx_MessageTimestamp" title={ DateUtils.formatFullDate(date) }>
+                  { DateUtils.formatTime(date) }
+              </span>
+            );
+          }
+        else {
+          return (
+              <span className="mx_MessageTimestamp" title={ DateUtils.formatFullDate(date) }>
+                  { DateUtils.formatTime(date) }
+              </span>
+            );
+          }
     },
 });
-
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
index 872085b66b..58e090645f 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
@@ -112,4 +112,3 @@ limitations under the License.
 .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
     padding-left: 0px;
 }
-
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index cbd7142285..acfe768ab5 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -94,7 +94,7 @@ limitations under the License.
  */
 .mx_EventTile_selected .mx_EventTile_line {
     border-left: $accent-color 5px solid;
-    padding-left: 60px;
+    padding-left: 100px;
     background-color: $event-selected-color;
 }
 
@@ -263,6 +263,10 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_EventTile_e2eIcon_12hr {
+  padding-left: 5px;
+}
+
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
     padding-left: 60px;