diff --git a/src/DateUtils.js b/src/DateUtils.js index 46dda6aeb4..bc8594c671 100644 --- a/src/DateUtils.js +++ b/src/DateUtils.js @@ -51,40 +51,52 @@ 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 - const days = getDaysArray(); - const months = getMonthsArray(); - - // TODO: use standard date localize function provided in counterpart - var hoursAndMinutes = pad(date.getHours()) + ':' + pad(date.getMinutes()); var now = new Date(); if (date.toDateString() === now.toDateString()) { - return hoursAndMinutes; + return this.formatTime(date); } else if (now.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) { // TODO: use standard date localize function provided in counterpart - return _t('%(weekDayName)s %(time)s', {weekDayName: days[date.getDay()], time: hoursAndMinutes}); + return _t('%(weekDayName)s %(time)s', {weekDayName: days[date.getDay()], time: this.formatTime(date)}); } else if (now.getFullYear() === date.getFullYear()) { // TODO: use standard date localize function provided in counterpart - return _t('%(weekDayName)s, %(monthName)s %(day)s %(time)s', {weekDayName: days[date.getDay()], monthName: months[date.getMonth()], day: date.getDate(), time: hoursAndMinutes}); - } - else { - return this.formatFullDate(date); + return _t('%(weekDayName)s, %(monthName)s %(day)s %(time)s', { + weekDayName: days[date.getDay()], + monthName: months[date.getMonth()], + day: date.getDate(), + time: this.formatTime(date), + }); } + return this.formatFullDate(date); }, formatFullDate: function(date) { const days = getDaysArray(); const months = getMonthsArray(); - var hoursAndMinutes = pad(date.getHours()) + ':' + pad(date.getMinutes()); - return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s', {weekDayName: days[date.getDay()], monthName: months[date.getMonth()], day: date.getDate(), fullYear: date.getFullYear(),time: hoursAndMinutes}); + return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s', { + weekDayName: days[date.getDay()], + monthName: months[date.getMonth()], + day: date.getDate(), + fullYear: date.getFullYear(), + time: 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 60c8c25114..5a5132a31e 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.js @@ -30,6 +30,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; @@ -123,7 +124,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(); @@ -172,6 +173,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'), }; }, @@ -1104,7 +1108,6 @@ var TimelinePanel = React.createClass({ const forwardPaginating = ( this.state.forwardPaginating || this.state.clientSyncState == 'PREPARED' ); - return (