mirror of https://github.com/vector-im/riot-web
open ImageView when clicking on a set avatar
parent
9fa2680dc6
commit
5ab98e9899
|
@ -55,6 +55,10 @@ limitations under the License.
|
|||
color: $button-danger-bg-color;
|
||||
}
|
||||
|
||||
& > img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > img,
|
||||
.mx_AvatarSetting_avatarPlaceholder {
|
||||
display: block;
|
||||
|
|
|
@ -162,6 +162,7 @@ export default class RoomProfileSettings extends React.Component {
|
|||
</div>
|
||||
<AvatarSetting
|
||||
avatarUrl={this.state.avatarUrl}
|
||||
avatarName={this.state.displayName || this.props.roomId}
|
||||
avatarAltText={_t("Room avatar")}
|
||||
uploadAvatar={this.state.canSetAvatar ? this._uploadAvatar : undefined}
|
||||
removeAvatar={this.state.canSetAvatar ? this._removeAvatar : undefined} />
|
||||
|
|
|
@ -14,18 +14,34 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import React, {useCallback} from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import sdk from "../../../index";
|
||||
import {_t} from "../../../languageHandler";
|
||||
import Modal from "../../../Modal";
|
||||
|
||||
const AvatarSetting = ({avatarUrl, avatarAltText, uploadAvatar, removeAvatar}) => {
|
||||
const AvatarSetting = ({avatarUrl, avatarAltText, avatarName, uploadAvatar, removeAvatar}) => {
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
|
||||
const openImageView = useCallback(() => {
|
||||
const ImageView = sdk.getComponent("elements.ImageView");
|
||||
Modal.createDialog(ImageView, {
|
||||
src: avatarUrl,
|
||||
name: avatarName,
|
||||
}, "mx_Dialog_lightbox");
|
||||
}, [avatarUrl, avatarName]);
|
||||
|
||||
let avatarElement = <div className="mx_AvatarSetting_avatarPlaceholder" />;
|
||||
if (avatarUrl) {
|
||||
avatarElement = <img src={avatarUrl} alt={avatarAltText} />;
|
||||
avatarElement = (
|
||||
<AccessibleButton
|
||||
element="img"
|
||||
src={avatarUrl}
|
||||
alt={avatarAltText}
|
||||
aria-label={avatarAltText}
|
||||
onClick={openImageView} />
|
||||
);
|
||||
}
|
||||
|
||||
let uploadAvatarBtn;
|
||||
|
@ -53,6 +69,7 @@ const AvatarSetting = ({avatarUrl, avatarAltText, uploadAvatar, removeAvatar}) =
|
|||
|
||||
AvatarSetting.propTypes = {
|
||||
avatarUrl: PropTypes.string,
|
||||
avatarName: PropTypes.string.isRequired, // name of user/room the avatar belongs to
|
||||
uploadAvatar: PropTypes.func,
|
||||
removeAvatar: PropTypes.func,
|
||||
avatarAltText: PropTypes.string.isRequired,
|
||||
|
|
|
@ -157,6 +157,7 @@ export default class ProfileSettings extends React.Component {
|
|||
</div>
|
||||
<AvatarSetting
|
||||
avatarUrl={this.state.avatarUrl}
|
||||
avatarName={this.state.displayName || this.state.userId}
|
||||
avatarAltText={_t("Profile picture")}
|
||||
uploadAvatar={this._uploadAvatar}
|
||||
removeAvatar={this._removeAvatar} />
|
||||
|
|
Loading…
Reference in New Issue