diff --git a/src/DateUtils.js b/src/DateUtils.js index c58c09d4de..d516cf07bf 100644 --- a/src/DateUtils.js +++ b/src/DateUtils.js @@ -16,39 +16,44 @@ 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"]; +const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; +const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; function pad(n) { return (n < 10 ? '0' : '') + n; } +function twelveHourTime(date) { + let hours = date.getHours() % 12; + const minutes = pad(date.getMinutes()); + const ampm = hours >= 12 ? 'PM' : 'AM'; + hours = pad(hours ? hours : 12); + return `${hours}:${minutes} ${ampm}`; +} + 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()); - } - else { - return this.formatFullDate(date); + return days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + this.formatTime(date); } + return this.formatFullDate(date); }, 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) { + formatTime: function(date, showTwelveHour=false) { + if (showTwelveHour) { + return twelveHourTime(date); + } return pad(date.getHours()) + ':' + pad(date.getMinutes()); - } + }, }; - 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 (