From 9e37fa46b154594afad3281157c21cc1a8c47ebf Mon Sep 17 00:00:00 2001 From: Maxwell Kepler Date: Thu, 18 May 2017 22:01:00 +0100 Subject: [PATCH 1/4] 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 a97f54b1..8417f91f 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 ( - - { DateUtils.formatTime(date) } - - ); + if (UserSettingsStore.getSyncedSetting('showTwelveHourTimestamps')) { + return ( + + { DateUtils.formatTime(date) } + + ); + } + else { + return ( + + { DateUtils.formatTime(date) } + + ); + } }, }); - 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 872085b6..58e09064 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 cbd71422..acfe768a 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; From 1ebe819aa274e4a9efb3ac5396ed3b8fe468ea87 Mon Sep 17 00:00:00 2001 From: Kieran Gould Date: Fri, 19 May 2017 21:14:01 +0100 Subject: [PATCH 2/4] Revert _EventTile.scss padding. --- .../vector/css/matrix-react-sdk/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 acfe768a..5943cfdc 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: 100px; + padding-left: 60px; background-color: $event-selected-color; } From cae62c83830890f7f904148f43e2484ee699f6ac Mon Sep 17 00:00:00 2001 From: Kieran Gould Date: Fri, 19 May 2017 22:29:06 +0100 Subject: [PATCH 3/4] MessageTimestamp now has 12 hour prop --- .../views/messages/MessageTimestamp.js | 25 ++++++++----------- .../views/rooms/_EventTile.scss | 10 +++++--- 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/components/views/messages/MessageTimestamp.js b/src/components/views/messages/MessageTimestamp.js index 8417f91f..dacfad92 100644 --- a/src/components/views/messages/MessageTimestamp.js +++ b/src/components/views/messages/MessageTimestamp.js @@ -23,21 +23,16 @@ const DateUtils = require('matrix-react-sdk/lib/DateUtils'); module.exports = React.createClass({ displayName: 'MessageTimestamp', + propTypes: { + showTwelveHour: React.PropTypes.bool, + }, + render: function() { - var date = new Date(this.props.ts); - if (UserSettingsStore.getSyncedSetting('showTwelveHourTimestamps')) { - return ( - - { DateUtils.formatTime(date) } - - ); - } - else { - return ( - - { DateUtils.formatTime(date) } - - ); - } + const date = new Date(this.props.ts); + return ( + + { DateUtils.formatTime(date, this.props.showTwelveHour) } + + ); }, }); 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 5943cfdc..3ea25ba2 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: px; background-color: $event-selected-color; } @@ -263,8 +263,12 @@ limitations under the License. cursor: pointer; } -.mx_EventTile_e2eIcon_12hr { - padding-left: 5px; +.mx_EventTile_12hr .mx_EventTile_e2eIcon { + padding-left: 5px; +} + +.mx_EventTile_12hr .mx_MessageTimestamp { + text-align: center; } .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, From e26422ef1007158ed2c90d7c4cececf493751919 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 26 May 2017 18:22:53 +0100 Subject: [PATCH 4/4] fix a typo --- .../vector/css/matrix-react-sdk/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 3ea25ba2..2dd037eb 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: px; + padding-left: 60px; background-color: $event-selected-color; }