From 008cc95e9ca97199add9e9591a85012b3dbf8759 Mon Sep 17 00:00:00 2001 From: Maxwell Kepler Date: Thu, 18 May 2017 22:00:44 +0100 Subject: [PATCH 1/5] Add 12 hour support --- src/DateUtils.js | 34 +++++++++++++++-------- src/components/structures/UserSettings.js | 2 +- src/components/views/rooms/EventTile.js | 19 +++++++++---- 3 files changed, 38 insertions(+), 17 deletions(-) diff --git a/src/DateUtils.js b/src/DateUtils.js index c58c09d4de..f787fc0e20 100644 --- a/src/DateUtils.js +++ b/src/DateUtils.js @@ -16,27 +16,37 @@ limitations under the License. 'use strict'; -var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; -var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; +import UserSettingsStore from './UserSettingsStore'; +const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; +const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; +let time; function pad(n) { return (n < 10 ? '0' : '') + n; } +function twentyfourhour(date) { + let hours = date.getHours(); + let minutes = date.getMinutes(); + let ampm = hours >= 12 ? 'PM' : 'AM'; + hours = hours % 12; + hours = hours ? hours : 12; + minutes = minutes < 10 ? '0'+minutes : minutes; + var strTime = hours + ':' + minutes + ' ' + ampm; + return strTime; +} + module.exports = { formatDate: function(date) { - // date.toLocaleTimeString is completely system dependent. - // just go 24h for now - var now = new Date(); if (date.toDateString() === now.toDateString()) { - return pad(date.getHours()) + ':' + pad(date.getMinutes()); + return this.formatTime(date); } else if (now.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) { - return days[date.getDay()] + " " + pad(date.getHours()) + ':' + pad(date.getMinutes()); + return days[date.getDay()] + " " + this.formatTime(date); } else if (now.getFullYear() === date.getFullYear()) { - return days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + pad(date.getHours()) + ':' + pad(date.getMinutes()); + return days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + this.formatTime(date); } else { return this.formatFullDate(date); @@ -44,11 +54,13 @@ module.exports = { }, formatFullDate: function(date) { - return days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + date.getFullYear() + " " + pad(date.getHours()) + ':' + pad(date.getMinutes()); + return days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + date.getFullYear() + " " + this.formatTime(date); }, formatTime: function(date) { + if (UserSettingsStore.getSyncedSetting('showTwelveHourTimestamps')) { + return twentyfourhour(date); + } return pad(date.getHours()) + ':' + pad(date.getMinutes()); - } + }, }; - diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index 2c1f17ee3e..45774d7a6a 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -65,7 +65,6 @@ const SETTINGS_LABELS = [ id: 'dontSendTypingNotifications', label: "Don't send typing notifications", }, -/* { id: 'alwaysShowTimestamps', label: 'Always show message timestamps', @@ -74,6 +73,7 @@ const SETTINGS_LABELS = [ id: 'showTwelveHourTimestamps', label: 'Show timestamps in 12 hour format (e.g. 2:30pm)', }, +/* { id: 'useCompactLayout', label: 'Use compact timeline layout', diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 44c4051995..6ec076ba95 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -16,6 +16,8 @@ limitations under the License. 'use strict'; +import UserSettingsStore from '../../../UserSettingsStore'; + var React = require('react'); var classNames = require("classnames"); var Modal = require('../../../Modal'); @@ -479,24 +481,31 @@ module.exports = WithMatrixClient(React.createClass({ ); var e2e; + let e2e_style; // cosmetic padlocks: + if (UserSettingsStore.getSyncedSetting('showTwelveHourTimestamps')) { + e2e_style = "mx_EventTile_e2eIcon mx_EventTile_e2eIcon_12hr"; + } + else { + e2e_style = "mx_EventTile_e2eIcon"; + } if ((e2eEnabled && this.props.eventSendStatus) || this.props.mxEvent.getType() === 'm.room.encryption') { - e2e = Encrypted by verified device; + e2e = Encrypted by verified device; } // real padlocks else if (this.props.mxEvent.isEncrypted() || (e2eEnabled && this.props.eventSendStatus)) { if (this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted') { - e2e = Undecryptable; + e2e = Undecryptable; } else if (this.state.verified == true || (e2eEnabled && this.props.eventSendStatus)) { - e2e = Encrypted by verified device; + e2e = Encrypted by verified device; } else { - e2e = Encrypted by unverified device; + e2e = Encrypted by unverified device; } } else if (e2eEnabled) { - e2e = Unencrypted message; + e2e = Unencrypted message; } const timestamp = this.props.mxEvent.getTs() ? : null; From 5aa1bc418550fda7f4cbc96167151792d91b5633 Mon Sep 17 00:00:00 2001 From: Kieran Gould Date: Fri, 19 May 2017 21:31:24 +0100 Subject: [PATCH 2/5] Rename twentyFourHour Pad time --- src/DateUtils.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/DateUtils.js b/src/DateUtils.js index f787fc0e20..d0222325b7 100644 --- a/src/DateUtils.js +++ b/src/DateUtils.js @@ -19,21 +19,18 @@ limitations under the License. import UserSettingsStore from './UserSettingsStore'; const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; -let time; function pad(n) { return (n < 10 ? '0' : '') + n; } -function twentyfourhour(date) { - let hours = date.getHours(); - let minutes = date.getMinutes(); - let ampm = hours >= 12 ? 'PM' : 'AM'; - hours = hours % 12; - hours = hours ? hours : 12; - minutes = minutes < 10 ? '0'+minutes : minutes; - var strTime = hours + ':' + minutes + ' ' + ampm; - return strTime; +function twentyFourHour(date) { + let hours = date.getHours() % 12; + let minutes = pad(date.getMinutes()); + const ampm = hours >= 12 ? 'PM' : 'AM'; + hours = pad(hours ? hours : 12); + minutes = pad(minutes); + return hours + ':' + minutes + ' ' + ampm; } module.exports = { @@ -59,7 +56,7 @@ module.exports = { formatTime: function(date) { if (UserSettingsStore.getSyncedSetting('showTwelveHourTimestamps')) { - return twentyfourhour(date); + return twentyFourHour(date); } return pad(date.getHours()) + ':' + pad(date.getMinutes()); }, From f9152b205cfcc299d0cf3f08b3ad4ca1a31d992b Mon Sep 17 00:00:00 2001 From: Kieran Gould Date: Fri, 19 May 2017 22:24:02 +0100 Subject: [PATCH 3/5] Add parameter `showTwelveHours` to formatTime --- src/DateUtils.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/DateUtils.js b/src/DateUtils.js index d0222325b7..1f231088a1 100644 --- a/src/DateUtils.js +++ b/src/DateUtils.js @@ -16,7 +16,6 @@ limitations under the License. 'use strict'; -import UserSettingsStore from './UserSettingsStore'; const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; @@ -24,13 +23,13 @@ function pad(n) { return (n < 10 ? '0' : '') + n; } -function twentyFourHour(date) { +function twelveHourTime(date) { let hours = date.getHours() % 12; let minutes = pad(date.getMinutes()); const ampm = hours >= 12 ? 'PM' : 'AM'; hours = pad(hours ? hours : 12); minutes = pad(minutes); - return hours + ':' + minutes + ' ' + ampm; + return `${hours}:${minutes} ${ampm}`; } module.exports = { @@ -54,9 +53,9 @@ module.exports = { return days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + date.getFullYear() + " " + this.formatTime(date); }, - formatTime: function(date) { - if (UserSettingsStore.getSyncedSetting('showTwelveHourTimestamps')) { - return twentyFourHour(date); + formatTime: function(date, showTwelveHour=false) { + if (showTwelveHour) { + return twelveHourTime(date); } return pad(date.getHours()) + ':' + pad(date.getMinutes()); }, From 6b32975e0c1ddf152053f1842642adf089406422 Mon Sep 17 00:00:00 2001 From: Kieran Gould Date: Fri, 19 May 2017 22:26:24 +0100 Subject: [PATCH 4/5] Add 12 hour class to mx_EventTile --- src/DateUtils.js | 7 ++---- src/components/views/rooms/EventTile.js | 32 ++++++++++--------------- 2 files changed, 15 insertions(+), 24 deletions(-) diff --git a/src/DateUtils.js b/src/DateUtils.js index 1f231088a1..d516cf07bf 100644 --- a/src/DateUtils.js +++ b/src/DateUtils.js @@ -25,10 +25,9 @@ function pad(n) { function twelveHourTime(date) { let hours = date.getHours() % 12; - let minutes = pad(date.getMinutes()); + const minutes = pad(date.getMinutes()); const ampm = hours >= 12 ? 'PM' : 'AM'; hours = pad(hours ? hours : 12); - minutes = pad(minutes); return `${hours}:${minutes} ${ampm}`; } @@ -44,9 +43,7 @@ module.exports = { else if (now.getFullYear() === date.getFullYear()) { return days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + this.formatTime(date); } - else { - return this.formatFullDate(date); - } + return this.formatFullDate(date); }, formatFullDate: function(date) { diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 6ec076ba95..fd5fa81390 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -406,9 +406,12 @@ module.exports = WithMatrixClient(React.createClass({ var isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1); const isRedacted = (eventType === 'm.room.message') && this.props.isRedacted; - var classes = classNames({ + const isTwelveHour = UserSettingsStore.getSyncedSetting('showTwelveHourTimestamps'); + + const classes = classNames({ mx_EventTile: true, mx_EventTile_info: isInfoMessage, + mx_EventTile_12hr: isTwelveHour, mx_EventTile_encrypting: this.props.eventSendStatus == 'encrypting', mx_EventTile_sending: isSending, mx_EventTile_notSent: this.props.eventSendStatus == 'not_sent', @@ -476,43 +479,34 @@ module.exports = WithMatrixClient(React.createClass({ } } - var editButton = ( + const editButton = ( ); - - var e2e; - let e2e_style; + let e2e; // cosmetic padlocks: - if (UserSettingsStore.getSyncedSetting('showTwelveHourTimestamps')) { - e2e_style = "mx_EventTile_e2eIcon mx_EventTile_e2eIcon_12hr"; - } - else { - e2e_style = "mx_EventTile_e2eIcon"; - } if ((e2eEnabled && this.props.eventSendStatus) || this.props.mxEvent.getType() === 'm.room.encryption') { - e2e = Encrypted by verified device; + e2e = Encrypted by verified device; } // real padlocks else if (this.props.mxEvent.isEncrypted() || (e2eEnabled && this.props.eventSendStatus)) { if (this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted') { - e2e = Undecryptable; + e2e = Undecryptable; } else if (this.state.verified == true || (e2eEnabled && this.props.eventSendStatus)) { - e2e = Encrypted by verified device; + e2e = Encrypted by verified device; } else { - e2e = Encrypted by unverified device; + e2e = Encrypted by unverified device; } } else if (e2eEnabled) { - e2e = Unencrypted message; + e2e = Unencrypted message; } const timestamp = this.props.mxEvent.getTs() ? - : null; + : null; if (this.props.tileShape === "notif") { - var room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId()); - + const room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId()); return (
From 47e5e8d678fd24e5ad5f9e9250db74368a28b6f7 Mon Sep 17 00:00:00 2001 From: Kieran Gould Date: Fri, 19 May 2017 22:45:56 +0100 Subject: [PATCH 5/5] Moved isTwelveHour alllll the way up to TimelinePanel. --- src/components/structures/MessagePanel.js | 13 ++++++++----- src/components/structures/TimelinePanel.js | 8 ++++++-- src/components/views/rooms/EventTile.js | 10 +++++----- 3 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index d4bf147ad5..d98a464aef 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -84,6 +84,9 @@ module.exports = React.createClass({ // shape parameter to be passed to EventTiles tileShape: React.PropTypes.string, + + // show twelve hour timestamps + isTwelveHour: React.PropTypes.bool, }, componentWillMount: function() { @@ -230,8 +233,8 @@ module.exports = React.createClass({ }, _getEventTiles: function() { - var EventTile = sdk.getComponent('rooms.EventTile'); - var DateSeparator = sdk.getComponent('messages.DateSeparator'); + const EventTile = sdk.getComponent('rooms.EventTile'); + const DateSeparator = sdk.getComponent('messages.DateSeparator'); const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary'); this.eventNodes = {}; @@ -413,8 +416,8 @@ module.exports = React.createClass({ }, _getTilesForEvent: function(prevEvent, mxEv, last) { - var EventTile = sdk.getComponent('rooms.EventTile'); - var DateSeparator = sdk.getComponent('messages.DateSeparator'); + const EventTile = sdk.getComponent('rooms.EventTile'); + const DateSeparator = sdk.getComponent('messages.DateSeparator'); var ret = []; // is this a continuation of the previous message? @@ -468,7 +471,6 @@ module.exports = React.createClass({ if (this.props.manageReadReceipts) { readReceipts = this._getReadReceiptsForEvent(mxEv); } - ret.push(
    • ); diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js index 8794713501..c629f51c31 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.js @@ -29,6 +29,7 @@ var ObjectUtils = require('../../ObjectUtils'); var Modal = require("../../Modal"); var UserActivity = require("../../UserActivity"); var KeyCode = require('../../KeyCode'); +import UserSettingsStore from '../../UserSettingsStore'; var PAGINATE_SIZE = 20; var INITIAL_SIZE = 20; @@ -122,7 +123,7 @@ var TimelinePanel = React.createClass({ let initialReadMarker = null; if (this.props.manageReadMarkers) { const readmarker = this.props.timelineSet.room.getAccountData('m.fully_read'); - if (readmarker){ + if (readmarker) { initialReadMarker = readmarker.getContent().event_id; } else { initialReadMarker = this._getCurrentReadReceipt(); @@ -171,6 +172,9 @@ var TimelinePanel = React.createClass({ // cache of matrixClient.getSyncState() (but from the 'sync' event) clientSyncState: MatrixClientPeg.get().getSyncState(), + + // should the event tiles have twelve hour times + isTwelveHour: UserSettingsStore.getSyncedSetting('showTwelveHourTimestamps'), }; }, @@ -1106,7 +1110,6 @@ var TimelinePanel = React.createClass({ const forwardPaginating = ( this.state.forwardPaginating || this.state.clientSyncState == 'PREPARED' ); - return (