From d689d4e1faf28e2f14772516d02227904f4d7b34 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 1 Jun 2017 13:31:15 +0100 Subject: [PATCH 1/4] quick and dirty RoomAvatarEvent --- .../views/messages/RoomAvatarEvent.js | 92 +++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 src/components/views/messages/RoomAvatarEvent.js diff --git a/src/components/views/messages/RoomAvatarEvent.js b/src/components/views/messages/RoomAvatarEvent.js new file mode 100644 index 0000000000..9f69473dd6 --- /dev/null +++ b/src/components/views/messages/RoomAvatarEvent.js @@ -0,0 +1,92 @@ +/* +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. +*/ + +'use strict'; + +var React = require('react'); + +var MatrixClientPeg = require("../../../MatrixClientPeg"); +var ContentRepo = require("matrix-js-sdk").ContentRepo; +import { _tJsx } from '../../../languageHandler'; +import sdk from '../../../index'; +import Modal from '../../../Modal'; +import AccessibleButton from '../elements/AccessibleButton'; + +module.exports = React.createClass({ + displayName: 'RoomAvatarEvent', + + propTypes: { + /* the MatrixEvent to show */ + mxEvent: React.PropTypes.object.isRequired, + }, + + onAvatarClick: function(name, e) { + var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(this.props.mxEvent.getContent().url); + var ImageView = sdk.getComponent("elements.ImageView"); + var params = { + src: httpUrl, + name: name, + }; + Modal.createDialog(ImageView, params, "mx_Dialog_lightbox"); + }, + + render: function() { + var ev = this.props.mxEvent; + var senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender(); + var BaseAvatar = sdk.getComponent("avatars.BaseAvatar"); + + var room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId()); + var name = room ? room.name : ''; + + if (!ev.getContent().url || ev.getContent().url.trim().length === 0) { + return ( +
+ { _t('%(senderDisplayName)s removed the room avatar.', {senderDisplayName: senderDisplayName}) } +
+ ); + } + + var url = ContentRepo.getHttpUriForMxc( + MatrixClientPeg.get().getHomeserverUrl(), + ev.getContent().url, + 14 * window.devicePixelRatio, + 14 * window.devicePixelRatio, + 'crop' + ); + + // it sucks that _tJsx doesn't support normal _t substitutions :(( + return ( +
+ { _tJsx('$senderDisplayName changed the room avatar to ', + [ + /\$senderDisplayName/, + //, + ], + [ + (sub) => senderDisplayName, + (sub) => + + + , + ] + ) + } +
+ ); + }, +}); From 00750b4686f9184e4ef87739ab13525daa3f8673 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 1 Jun 2017 13:31:24 +0100 Subject: [PATCH 2/4] quick and dirty RoomAvatarEvent --- src/TextForEvent.js | 1 + src/components/structures/login/Login.js | 2 +- src/components/views/elements/PowerSelector.js | 2 +- src/components/views/messages/RoomAvatarEvent.js | 15 +++++++++------ src/components/views/messages/TextualEvent.js | 5 +++++ src/components/views/rooms/EventTile.js | 1 + src/i18n/strings/en_EN.json | 5 ++++- 7 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/TextForEvent.js b/src/TextForEvent.js index fa78f9d61b..62521bc4ac 100644 --- a/src/TextForEvent.js +++ b/src/TextForEvent.js @@ -17,6 +17,7 @@ limitations under the License. var MatrixClientPeg = require("./MatrixClientPeg"); var CallHandler = require("./CallHandler"); import { _t } from './languageHandler'; +import sdk from './index'; import * as Roles from './Roles'; function textForMemberEvent(ev) { diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js index 59d8c74022..8848a33deb 100644 --- a/src/components/structures/login/Login.js +++ b/src/components/structures/login/Login.js @@ -18,7 +18,7 @@ limitations under the License. 'use strict'; import React from 'react'; -import { _t } from '../../../languageHandler'; +import { _t, _tJsx } from '../../../languageHandler'; import ReactDOM from 'react-dom'; import sdk from '../../../index'; import Login from '../../../Login'; diff --git a/src/components/views/elements/PowerSelector.js b/src/components/views/elements/PowerSelector.js index f12ef3ac9d..a4a117b9cb 100644 --- a/src/components/views/elements/PowerSelector.js +++ b/src/components/views/elements/PowerSelector.js @@ -118,7 +118,7 @@ module.exports = React.createClass({ }); options.push({ value: "Custom", text: "Custom level" }); options = options.map((op) => { - return ; + return ; }); select = diff --git a/src/components/views/messages/RoomAvatarEvent.js b/src/components/views/messages/RoomAvatarEvent.js index 9f69473dd6..65e1339daf 100644 --- a/src/components/views/messages/RoomAvatarEvent.js +++ b/src/components/views/messages/RoomAvatarEvent.js @@ -20,7 +20,7 @@ var React = require('react'); var MatrixClientPeg = require("../../../MatrixClientPeg"); var ContentRepo = require("matrix-js-sdk").ContentRepo; -import { _tJsx } from '../../../languageHandler'; +import { _t, _tJsx } from '../../../languageHandler'; import sdk from '../../../index'; import Modal from '../../../Modal'; import AccessibleButton from '../elements/AccessibleButton'; @@ -33,7 +33,7 @@ module.exports = React.createClass({ mxEvent: React.PropTypes.object.isRequired, }, - onAvatarClick: function(name, e) { + onAvatarClick: function(name) { var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(this.props.mxEvent.getContent().url); var ImageView = sdk.getComponent("elements.ImageView"); var params = { @@ -49,7 +49,10 @@ module.exports = React.createClass({ var BaseAvatar = sdk.getComponent("avatars.BaseAvatar"); var room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId()); - var name = room ? room.name : ''; + var name = _t('%(senderDisplayName)s changed the avatar for %(roomName)s', { + senderDisplayName: senderDisplayName, + roomName: room ? room.name : '', + }); if (!ev.getContent().url || ev.getContent().url.trim().length === 0) { return ( @@ -78,9 +81,9 @@ module.exports = React.createClass({ [ (sub) => senderDisplayName, (sub) => - - + , ] diff --git a/src/components/views/messages/TextualEvent.js b/src/components/views/messages/TextualEvent.js index 8319dbd434..088f7cbbc6 100644 --- a/src/components/views/messages/TextualEvent.js +++ b/src/components/views/messages/TextualEvent.js @@ -24,6 +24,11 @@ import sdk from '../../../index'; module.exports = React.createClass({ displayName: 'TextualEvent', + propTypes: { + /* the MatrixEvent to show */ + mxEvent: React.PropTypes.object.isRequired, + }, + render: function() { const EmojiText = sdk.getComponent('elements.EmojiText'); var text = TextForEvent.textForEvent(this.props.mxEvent); diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index d9a6925793..e527f53170 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -38,6 +38,7 @@ var eventTileTypes = { 'm.call.answer' : 'messages.TextualEvent', 'm.call.hangup' : 'messages.TextualEvent', 'm.room.name' : 'messages.TextualEvent', + 'm.room.avatar' : 'messages.RoomAvatarEvent', 'm.room.topic' : 'messages.TextualEvent', 'm.room.third_party_invite' : 'messages.TextualEvent', 'm.room.history_visibility' : 'messages.TextualEvent', diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 15aa3916bc..95baf1f50e 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -776,5 +776,8 @@ "Online": "Online", "Idle": "Idle", "Offline": "Offline", - "Disable URL previews for this room (affects only you)": "Disable URL previews for this room (affects only you)" + "Disable URL previews for this room (affects only you)": "Disable URL previews for this room (affects only you)", + "$senderDisplayName changed the room avatar to ": "$senderDisplayName changed the room avatar to ", + "%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.", + "%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s" } From 01cdc7ff217c478f802164ccfe2e260bed35fe7c Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 1 Jun 2017 14:42:38 +0100 Subject: [PATCH 3/4] remove rogue import --- src/TextForEvent.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/TextForEvent.js b/src/TextForEvent.js index 62521bc4ac..fa78f9d61b 100644 --- a/src/TextForEvent.js +++ b/src/TextForEvent.js @@ -17,7 +17,6 @@ limitations under the License. var MatrixClientPeg = require("./MatrixClientPeg"); var CallHandler = require("./CallHandler"); import { _t } from './languageHandler'; -import sdk from './index'; import * as Roles from './Roles'; function textForMemberEvent(ev) { From e6cf93e2378f310ceb94f19de8dccf20510d8745 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 1 Jun 2017 14:42:44 +0100 Subject: [PATCH 4/4] switch to imports --- src/components/views/messages/RoomAvatarEvent.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/views/messages/RoomAvatarEvent.js b/src/components/views/messages/RoomAvatarEvent.js index 65e1339daf..525f7b81ee 100644 --- a/src/components/views/messages/RoomAvatarEvent.js +++ b/src/components/views/messages/RoomAvatarEvent.js @@ -14,12 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -'use strict'; - -var React = require('react'); - -var MatrixClientPeg = require("../../../MatrixClientPeg"); -var ContentRepo = require("matrix-js-sdk").ContentRepo; +import React from 'react'; +import MatrixClientPeg from '../../../MatrixClientPeg'; +import { ContentRepo } from 'matrix-js-sdk'; import { _t, _tJsx } from '../../../languageHandler'; import sdk from '../../../index'; import Modal from '../../../Modal';