From 10c6f24a8325376c62db690e35f00c0949e46b38 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Sun, 10 Dec 2017 12:46:12 +0000 Subject: [PATCH 1/8] CSS and Context Menu tweaks for Rich Quoting/Replies Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/context_menus/MessageContextMenu.js | 4 +-- .../views/rooms/_Autocomplete.scss | 29 +++++++++++++++++-- .../views/rooms/_EventTile.scss | 4 +-- 3 files changed, 31 insertions(+), 6 deletions(-) diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index d8f9a4da..dfff031f 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -171,8 +171,8 @@ module.exports = React.createClass({ onQuoteClick: function() { dis.dispatch({ - action: 'quote', - text: this.props.eventTileOps.getInnerText(), + action: 'quote_event', + event: this.props.mxEvent, }); this.closeMenu(); }, diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss index 6bf3f3b6..8ce81c0d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss @@ -1,4 +1,17 @@ .mx_Autocomplete { + position: absolute; + bottom: 0; + z-index: 1001; + width: 100%; + border: 1px solid $primary-hairline-color; + background: $primary-bg-color; + border-bottom: none; + border-radius: 4px 4px 0 0; + max-height: 50vh; + overflow: auto +} + +.mx_Quoting { position: absolute; bottom: 0; z-index: 1000; @@ -11,7 +24,7 @@ overflow: auto } -.mx_Autocomplete_ProviderSection { +.mx_Autocomplete_ProviderSection, .mx_Quoting_section { border-bottom: 1px solid $primary-hairline-color; } @@ -74,13 +87,25 @@ outline: none; } -.mx_Autocomplete_provider_name { +.mx_Autocomplete_provider_name, .mx_Quoting_header { margin: 12px; color: $primary-fg-color; font-weight: 400; opacity: 0.4; } +.mx_Quoting_title { + float: left; +} + +.mx_Quoting_cancel { + float: right; +} + +.mx_Quoting_clear { + clear: both; +} + /* styling for common completion elements */ .mx_Autocomplete_Completion_subtitle { font-style: italic; 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 cfc46e85..b4a42420 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 @@ -109,7 +109,7 @@ limitations under the License. /* this is used for the tile for the event which is selected via the URL. * TODO: ultimately we probably want some transition on here. */ -.mx_EventTile_selected .mx_EventTile_line { +.mx_EventTile_selected > .mx_EventTile_line { border-left: $accent-color 5px solid; padding-left: 60px; background-color: $event-selected-color; @@ -209,7 +209,7 @@ limitations under the License. visibility: visible; } -.mx_EventTile_selected .mx_MessageTimestamp { +.mx_EventTile_selected > div > a > .mx_MessageTimestamp { left: 3px; width: auto; } From 54a9ccdee759d38b24f3597a8e4fc70a980117c2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 12 Dec 2017 23:36:10 +0000 Subject: [PATCH 2/8] throw new quoting behind flags Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/context_menus/MessageContextMenu.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index dfff031f..f2a10674 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -170,10 +170,17 @@ module.exports = React.createClass({ }, onQuoteClick: function() { - dis.dispatch({ - action: 'quote_event', - event: this.props.mxEvent, - }); + if (SettingsStore.isFeatureEnabled("feature_rich_quoting")) { + dis.dispatch({ + action: 'quote_event', + event: this.props.mxEvent, + }); + } else { + dis.dispatch({ + action: 'quote', + text: this.props.eventTileOps.getInnerText(), + }); + } this.closeMenu(); }, From 4bc99b7f01c7b9488c748b05cb722ccb7217190d Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 12 Dec 2017 23:40:02 +0000 Subject: [PATCH 3/8] move QuotePreview CSS out to own file Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/skins/vector/css/_components.scss | 1 + .../views/rooms/_Autocomplete.scss | 30 ++-------------- .../views/rooms/_QuotePreview.scss | 35 +++++++++++++++++++ 3 files changed, 39 insertions(+), 27 deletions(-) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/rooms/_QuotePreview.scss diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 0dd6a1b1..01665851 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -70,6 +70,7 @@ @import "./matrix-react-sdk/views/rooms/_RoomTile.scss"; @import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss"; @import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss"; +@import "./matrix-react-sdk/views/rooms/_QuotePreview.scss"; @import "./matrix-react-sdk/views/settings/_DevicesPanel.scss"; @import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss"; @import "./matrix-react-sdk/views/voip/_CallView.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss index 8ce81c0d..732ada08 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss @@ -11,20 +11,7 @@ overflow: auto } -.mx_Quoting { - position: absolute; - bottom: 0; - z-index: 1000; - width: 100%; - border: 1px solid $primary-hairline-color; - background: $primary-bg-color; - border-bottom: none; - border-radius: 4px 4px 0 0; - max-height: 50vh; - overflow: auto -} - -.mx_Autocomplete_ProviderSection, .mx_Quoting_section { +.mx_Autocomplete_ProviderSection { border-bottom: 1px solid $primary-hairline-color; } @@ -87,25 +74,13 @@ outline: none; } -.mx_Autocomplete_provider_name, .mx_Quoting_header { +.mx_Autocomplete_provider_name { margin: 12px; color: $primary-fg-color; font-weight: 400; opacity: 0.4; } -.mx_Quoting_title { - float: left; -} - -.mx_Quoting_cancel { - float: right; -} - -.mx_Quoting_clear { - clear: both; -} - /* styling for common completion elements */ .mx_Autocomplete_Completion_subtitle { font-style: italic; @@ -115,3 +90,4 @@ .mx_Autocomplete_Completion_description { color: gray; } + diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_QuotePreview.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_QuotePreview.scss new file mode 100644 index 00000000..f0fb62b8 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_QuotePreview.scss @@ -0,0 +1,35 @@ +.mx_QuotePreview { + position: absolute; + bottom: 0; + z-index: 1000; + width: 100%; + border: 1px solid $primary-hairline-color; + background: $primary-bg-color; + border-bottom: none; + border-radius: 4px 4px 0 0; + max-height: 50vh; + overflow: auto +} + +.mx_QuotePreview_section { + border-bottom: 1px solid $primary-hairline-color; +} + +.mx_QuotePreview_header { + margin: 12px; + color: $primary-fg-color; + font-weight: 400; + opacity: 0.4; +} + +.mx_QuotePreview_title { + float: left; +} + +.mx_QuotePreview_cancel { + float: right; +} + +.mx_QuotePreview_clear { + clear: both; +} From 9c38794ad588474e8b3201ae1a985dca5551a536 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 15 Dec 2017 18:37:44 +0000 Subject: [PATCH 4/8] Style datesep inside Quote Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/skins/vector/css/_components.scss | 1 + .../views/elements/_Quote.scss | 22 +++++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/elements/_Quote.scss diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 01665851..c2725aeb 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -39,6 +39,7 @@ @import "./matrix-react-sdk/views/elements/_RichText.scss"; @import "./matrix-react-sdk/views/elements/_RoleButton.scss"; @import "./matrix-react-sdk/views/elements/_ToolTipButton.scss"; +@import "./matrix-react-sdk/views/elements/_Quote.scss"; @import "./matrix-react-sdk/views/groups/_GroupPublicityToggle.scss"; @import "./matrix-react-sdk/views/groups/_GroupRoomList.scss"; @import "./matrix-react-sdk/views/groups/_GroupUserSettings.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_Quote.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_Quote.scss new file mode 100644 index 00000000..2ccde389 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_Quote.scss @@ -0,0 +1,22 @@ +/* +Copyright 2017 Vector Creations Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_Quote .mx_DateSeparator { + font-size: 1em !important; + margin-bottom: 0; + padding-bottom: 1px; + bottom: -5px; +} From 304d281ed2ae4801cba26441ee948f30ab2b791c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Sat, 16 Dec 2017 19:01:56 +0000 Subject: [PATCH 5/8] change reply to be its own thing Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/context_menus/MessageContextMenu.js | 38 ++++++++++++------- src/i18n/strings/en_EN.json | 3 +- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index f2a10674..84bebc13 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -25,6 +25,7 @@ import { _t } from 'matrix-react-sdk/lib/languageHandler'; const Modal = require('matrix-react-sdk/lib/Modal'); const Resend = require("matrix-react-sdk/lib/Resend"); import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore"; +import {makeEventPermalink} from 'matrix-react-sdk/lib/matrix-to'; module.exports = React.createClass({ displayName: 'MessageContextMenu', @@ -170,17 +171,18 @@ module.exports = React.createClass({ }, onQuoteClick: function() { - if (SettingsStore.isFeatureEnabled("feature_rich_quoting")) { - dis.dispatch({ - action: 'quote_event', - event: this.props.mxEvent, - }); - } else { - dis.dispatch({ - action: 'quote', - text: this.props.eventTileOps.getInnerText(), - }); - } + dis.dispatch({ + action: 'quote', + text: this.props.eventTileOps.getInnerText(), + }); + this.closeMenu(); + }, + + onReplyClick: function() { + dis.dispatch({ + action: 'quote_event', + event: this.props.mxEvent, + }); this.closeMenu(); }, @@ -197,6 +199,7 @@ module.exports = React.createClass({ let permalinkButton; let externalURLButton; let quoteButton; + let replyButton; if (eventStatus === 'not_sent') { resendButton = ( @@ -268,8 +271,8 @@ module.exports = React.createClass({ // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID) permalinkButton = (
- { _t('Permalink') } + { _t('Permalink') }
); @@ -279,6 +282,14 @@ module.exports = React.createClass({ { _t('Quote') } ); + + if (SettingsStore.isFeatureEnabled("feature_rich_quoting")) { + replyButton = ( +
+ { _t('Reply') } +
+ ); + } } // Bridges can provide a 'external_url' to link back to the source. @@ -304,6 +315,7 @@ module.exports = React.createClass({ {unhidePreviewButton} {permalinkButton} {quoteButton} + {replyButton} {externalURLButton} ); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c1857e31..cdca2570 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -217,5 +217,6 @@ "Contributing code to Matrix and Riot": "Contributing code to Matrix and Riot", "Dev chat for the Riot/Web dev team": "Dev chat for the Riot/Web dev team", "Dev chat for the Dendrite dev team": "Dev chat for the Dendrite dev team", - "Co-ordination for Riot/Web translators": "Co-ordination for Riot/Web translators" + "Co-ordination for Riot/Web translators": "Co-ordination for Riot/Web translators", + "Reply": "Reply" } From 2961e1949ff3d0208983465fccb9eb29683cdf3c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Sat, 16 Dec 2017 19:05:18 +0000 Subject: [PATCH 6/8] delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/context_menus/MessageContextMenu.js | 72 +++++++++---------- 1 file changed, 35 insertions(+), 37 deletions(-) diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index 84bebc13..62bffa76 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -16,14 +16,14 @@ limitations under the License. 'use strict'; -const React = require('react'); +import React from 'react'; -const MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); -const dis = require('matrix-react-sdk/lib/dispatcher'); -const sdk = require('matrix-react-sdk'); +import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg'; +import dis from 'matrix-react-sdk/lib/dispatcher'; +import sdk from 'matrix-react-sdk'; import { _t } from 'matrix-react-sdk/lib/languageHandler'; -const Modal = require('matrix-react-sdk/lib/Modal'); -const Resend = require("matrix-react-sdk/lib/Resend"); +import Modal from 'matrix-react-sdk/lib/Modal'; +import Resend from "matrix-react-sdk/lib/Resend"; import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore"; import {makeEventPermalink} from 'matrix-react-sdk/lib/matrix-to'; @@ -108,15 +108,14 @@ module.exports = React.createClass({ onFinished: (proceed) => { if (!proceed) return; - MatrixClientPeg.get().redactEvent( - this.props.mxEvent.getRoomId(), this.props.mxEvent.getId() - ).catch(function(e) { + const cli = MatrixClientPeg.get(); + cli.redactEvent(this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()).catch(function(e) { const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); // display error message stating you couldn't delete this. const code = e.errcode || e.statusCode; Modal.createTrackedDialog('You cannot delete this message', '', ErrorDialog, { title: _t('Error'), - description: _t('You cannot delete this message. (%(code)s)', {code: code}) + description: _t('You cannot delete this message. (%(code)s)', {code}), }); }).done(); }, @@ -139,12 +138,12 @@ module.exports = React.createClass({ onPinClick: function() { MatrixClientPeg.get().getStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', '') - .catch(e => { + .catch((e) => { // Intercept the Event Not Found error and fall through the promise chain with no event. if (e.errcode === "M_NOT_FOUND") return null; throw e; }) - .then(event => { + .then((event) => { const eventIds = (event ? event.pinned : []) || []; if (!eventIds.includes(this.props.mxEvent.getId())) { // Not pinned - add @@ -154,7 +153,8 @@ module.exports = React.createClass({ eventIds.splice(eventIds.indexOf(this.props.mxEvent.getId()), 1); } - MatrixClientPeg.get().sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, ''); + const cli = MatrixClientPeg.get(); + cli.sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, ''); }); this.closeMenu(); }, @@ -193,10 +193,8 @@ module.exports = React.createClass({ let cancelButton; let forwardButton; let pinButton; - let viewSourceButton; let viewClearSourceButton; let unhidePreviewButton; - let permalinkButton; let externalURLButton; let quoteButton; let replyButton; @@ -237,14 +235,14 @@ module.exports = React.createClass({ if (this.state.canPin) { pinButton = (
- {this._isPinned() ? _t('Unpin Message') : _t('Pin Message')} + { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
); } } } - viewSourceButton = ( + const viewSourceButton = (
{ _t('View Source') }
@@ -269,7 +267,7 @@ module.exports = React.createClass({ } // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID) - permalinkButton = ( + const permalinkButton = (
{ _t('Permalink') } @@ -293,30 +291,30 @@ module.exports = React.createClass({ } // Bridges can provide a 'external_url' to link back to the source. - if( typeof(this.props.mxEvent.event.content.external_url) === "string") { - externalURLButton = ( -
- { _t('Source URL') } -
- ); + if (typeof(this.props.mxEvent.event.content.external_url) === "string") { + externalURLButton = ( +
+ { _t('Source URL') } +
+ ); } return (
- {resendButton} - {redactButton} - {cancelButton} - {forwardButton} - {pinButton} - {viewSourceButton} - {viewClearSourceButton} - {unhidePreviewButton} - {permalinkButton} - {quoteButton} - {replyButton} - {externalURLButton} + { resendButton } + { redactButton } + { cancelButton } + { forwardButton } + { pinButton } + { viewSourceButton } + { viewClearSourceButton } + { unhidePreviewButton } + { permalinkButton } + { quoteButton } + { replyButton } + { externalURLButton }
); }, From b16dcbc057bb726c9ce09fed777362e7a131e0aa Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 18 Dec 2017 19:28:19 +0000 Subject: [PATCH 7/8] styling for on-demand quote nest traversal Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../vector/css/matrix-react-sdk/views/elements/_Quote.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_Quote.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_Quote.scss index 2ccde389..0af555b5 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_Quote.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_Quote.scss @@ -20,3 +20,7 @@ limitations under the License. padding-bottom: 1px; bottom: -5px; } + +.mx_Quote_show { + cursor: pointer; +} From 77e2ceba9e068b7ee57d772e1b9219f92ee4386a Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 10 Jan 2018 21:50:32 +0000 Subject: [PATCH 8/8] switch to new ES6 DateUtils imports Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/elements/ImageView.js | 4 ++-- src/components/views/messages/DateSeparator.js | 4 ++-- src/components/views/messages/MessageTimestamp.js | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js index bdb9d17f..d1a34d02 100644 --- a/src/components/views/elements/ImageView.js +++ b/src/components/views/elements/ImageView.js @@ -20,7 +20,7 @@ var React = require('react'); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); -var DateUtils = require('matrix-react-sdk/lib/DateUtils'); +import {formatDate} from 'matrix-react-sdk/lib/DateUtils'; var filesize = require('filesize'); var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); const Modal = require('matrix-react-sdk/lib/Modal'); @@ -159,7 +159,7 @@ module.exports = React.createClass({ } eventMeta = (
- { _t('Uploaded on %(date)s by %(user)s', {date: DateUtils.formatDate(new Date(this.props.mxEvent.getTs())), user: sender}) } + { _t('Uploaded on %(date)s by %(user)s', {date: formatDate(new Date(this.props.mxEvent.getTs())), user: sender}) }
); } diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js index 84d63dd5..5d579e5d 100644 --- a/src/components/views/messages/DateSeparator.js +++ b/src/components/views/messages/DateSeparator.js @@ -16,7 +16,7 @@ limitations under the License. import React from 'react'; import { _t } from 'matrix-react-sdk/lib/languageHandler'; -import DateUtils from 'matrix-react-sdk/lib/DateUtils'; +import {formatFullDate} from 'matrix-react-sdk/lib/DateUtils'; function getdaysArray() { return [ @@ -49,7 +49,7 @@ module.exports = React.createClass({ label = days[date.getDay()]; } else { - label = DateUtils.formatFullDate(date, this.props.showTwelveHour); + label = formatFullDate(date, this.props.showTwelveHour); } return ( diff --git a/src/components/views/messages/MessageTimestamp.js b/src/components/views/messages/MessageTimestamp.js index 3102b559..3d972e4c 100644 --- a/src/components/views/messages/MessageTimestamp.js +++ b/src/components/views/messages/MessageTimestamp.js @@ -17,7 +17,7 @@ limitations under the License. 'use strict'; import React from 'react'; -import DateUtils from 'matrix-react-sdk/lib/DateUtils'; +import {formatFullDate, formatTime} from 'matrix-react-sdk/lib/DateUtils'; module.exports = React.createClass({ displayName: 'MessageTimestamp', @@ -29,8 +29,8 @@ module.exports = React.createClass({ render: function() { const date = new Date(this.props.ts); return ( - - { DateUtils.formatTime(date, this.props.showTwelveHour) } + + { formatTime(date, this.props.showTwelveHour) } ); },