From e844b7aa213b5f93d5145a80bb2852182e76b148 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Oct 2015 13:47:32 +0100 Subject: [PATCH 1/2] UI to set Room Avatars --- src/skins/vector/views/atoms/RoomAvatar.js | 6 ++++- .../vector/views/molecules/ChangeAvatar.js | 14 ++++++++++- .../vector/views/molecules/RoomSettings.js | 23 +++++++++++++++++-- 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/views/atoms/RoomAvatar.js b/src/skins/vector/views/atoms/RoomAvatar.js index 39b995a7a..3d3463e27 100644 --- a/src/skins/vector/views/atoms/RoomAvatar.js +++ b/src/skins/vector/views/atoms/RoomAvatar.js @@ -43,9 +43,13 @@ module.exports = React.createClass({ }, render: function() { + var style = { + 'max-width': this.props.width, + 'max-height': this.props.height, + }; return ( ); } diff --git a/src/skins/vector/views/molecules/ChangeAvatar.js b/src/skins/vector/views/molecules/ChangeAvatar.js index 52a59e3f8..ec10e4bf9 100644 --- a/src/skins/vector/views/molecules/ChangeAvatar.js +++ b/src/skins/vector/views/molecules/ChangeAvatar.js @@ -18,6 +18,7 @@ limitations under the License. var React = require('react'); +var sdk = require('matrix-react-sdk') var ChangeAvatarController = require('matrix-react-sdk/lib/controllers/molecules/ChangeAvatar') var Loader = require("react-loader"); @@ -28,6 +29,7 @@ module.exports = React.createClass({ mixins: [ChangeAvatarController], onFileSelected: function(ev) { + this.avatarSet = true; this.setAvatarFromFile(ev.target.files[0]); }, @@ -38,13 +40,23 @@ module.exports = React.createClass({ }, render: function() { + var RoomAvatar = sdk.getComponent('atoms.RoomAvatar'); + var avatarImg; + // Having just set an avatar we just display that since it will take a little + // time to propagate through to the RoomAvatar. + if (this.props.room && !this.avatarSet) { + avatarImg = ; + } else { + avatarImg = ; + } + switch (this.state.phase) { case this.Phases.Display: case this.Phases.Error: return (
- + {avatarImg}
Upload new: diff --git a/src/skins/vector/views/molecules/RoomSettings.js b/src/skins/vector/views/molecules/RoomSettings.js index d6d36a13b..bbba0fccf 100644 --- a/src/skins/vector/views/molecules/RoomSettings.js +++ b/src/skins/vector/views/molecules/RoomSettings.js @@ -18,6 +18,7 @@ limitations under the License. var React = require('react'); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); +var sdk = require('matrix-react-sdk'); var RoomSettingsController = require('matrix-react-sdk/lib/controllers/molecules/RoomSettings') @@ -65,6 +66,8 @@ module.exports = React.createClass({ }, render: function() { + var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar'); + var topic = this.props.room.currentState.getStateEvents('m.room.topic', ''); if (topic) topic = topic.getContent().topic; @@ -76,6 +79,8 @@ module.exports = React.createClass({ var power_levels = this.props.room.currentState.getStateEvents('m.room.power_levels', ''); + var events_levels = power_levels.events || {}; + if (power_levels) { power_levels = power_levels.getContent(); @@ -91,8 +96,7 @@ module.exports = React.createClass({ if (power_levels.kick == undefined) kick_level = 50; if (power_levels.redact == undefined) redact_level = 50; - var user_levels = power_levels.users || []; - var events_levels = power_levels.events || []; + var user_levels = power_levels.users || {}; var user_id = MatrixClientPeg.get().credentials.userId; @@ -124,6 +128,20 @@ module.exports = React.createClass({ var can_change_levels = false; } + var room_avatar_level = parseInt(power_levels.state_default || 0); + if (events_levels['m.room.avatar'] !== undefined) { + room_avatar_level = events_levels['m.room.avatar']; + } + var can_set_room_avatar = current_user_level >= room_avatar_level; + + var change_avatar; + if (can_set_room_avatar) { + change_avatar =
+

Room Icon

+ +
; + } + var banned = this.props.room.getMembersWithMemership("ban"); return ( @@ -207,6 +225,7 @@ module.exports = React.createClass({ ); })}
+ {change_avatar}
); } From 5392afdec49c5de140bdde3f711cd8745a8331c5 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Oct 2015 17:36:02 +0100 Subject: [PATCH 2/2] Add UI for changing room avatars and update UI when room avatars change --- src/controllers/organisms/RoomList.js | 7 +++++++ src/skins/vector/views/atoms/RoomAvatar.js | 4 ++-- src/skins/vector/views/molecules/ChangeAvatar.js | 6 +++++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/controllers/organisms/RoomList.js b/src/controllers/organisms/RoomList.js index c715faade..03a1bfcd1 100644 --- a/src/controllers/organisms/RoomList.js +++ b/src/controllers/organisms/RoomList.js @@ -33,6 +33,7 @@ module.exports = { cli.on("Room", this.onRoom); cli.on("Room.timeline", this.onRoomTimeline); cli.on("Room.name", this.onRoomName); + cli.on("RoomState.events", this.onRoomStateEvents); var rooms = this.getRoomList(); this.setState({ @@ -66,6 +67,7 @@ module.exports = { MatrixClientPeg.get().removeListener("Room", this.onRoom); MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline); MatrixClientPeg.get().removeListener("Room.name", this.onRoomName); + MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents); } }, @@ -110,6 +112,11 @@ module.exports = { this.refreshRoomList(); }, + onRoomStateEvents: function(ev, state) { + setTimeout(this.refreshRoomList, 0); + }, + + refreshRoomList: function() { var rooms = this.getRoomList(); this.setState({ diff --git a/src/skins/vector/views/atoms/RoomAvatar.js b/src/skins/vector/views/atoms/RoomAvatar.js index 3d3463e27..e57b3b7ae 100644 --- a/src/skins/vector/views/atoms/RoomAvatar.js +++ b/src/skins/vector/views/atoms/RoomAvatar.js @@ -44,8 +44,8 @@ module.exports = React.createClass({ render: function() { var style = { - 'max-width': this.props.width, - 'max-height': this.props.height, + maxWidth: this.props.width, + maxHeight: this.props.height, }; return ( ; } else { - avatarImg = ; + var style = { + maxWidth: 320, + maxHeight: 240, + }; + avatarImg = ; } switch (this.state.phase) {