Merge pull request #1843 from aidalgol/room-avatar-lightbox

Add UI for displaying room avatars full size
matrix-org · Apr 21, 2018 · 44d92bb · 44d92bb
2 parents 196b855 + 6a91886
commit 44d92bb
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/components/views/avatars/RoomAvatar.js b/src/components/views/avatars/RoomAvatar.js
@@ -17,6 +17,7 @@ import React from "react";
 import PropTypes from 'prop-types';
 import {ContentRepo} from "matrix-js-sdk";
 import MatrixClientPeg from "../../../MatrixClientPeg";
+import Modal from '../../../Modal';
 import sdk from "../../../index";
 
 module.exports = React.createClass({
@@ -31,6 +32,7 @@ module.exports = React.createClass({
         width: PropTypes.number,
         height: PropTypes.number,
         resizeMethod: PropTypes.string,
+        viewAvatarOnClick: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -159,6 +161,19 @@ module.exports = React.createClass({
         }
     },
 
+    onRoomAvatarClick: function() {
+        const avatarUrl = this.props.room.getAvatarUrl(
+            MatrixClientPeg.get().getHomeserverUrl(),
+            null, null, null, false);
+        const ImageView = sdk.getComponent("elements.ImageView");
+        const params = {
+            src: avatarUrl,
+            name: this.props.room.name,
+        };
+
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+    },
+
     render: function() {
         const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
@@ -169,7 +184,8 @@ module.exports = React.createClass({
         return (
             <BaseAvatar {...otherProps} name={roomName}
                 idName={room ? room.roomId : null}
-                urls={this.state.urls} />
+                urls={this.state.urls}
+                onClick={this.props.viewAvatarOnClick ? this.onRoomAvatarClick : null} />
         );
     },
 });
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
@@ -327,9 +327,8 @@ module.exports = React.createClass({
             );
         } else if (this.props.room || (this.props.oobData && this.props.oobData.name)) {
             roomAvatar = (
-                <div onClick={this.props.onSettingsClick}>
-                    <RoomAvatar room={this.props.room} width={48} height={48} oobData={this.props.oobData} />
-                </div>
+                <RoomAvatar room={this.props.room} width={48} height={48} oobData={this.props.oobData}
+                    viewAvatarOnClick={true} />
             );
         }