mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
put event in the avatar element and trigger it in conversation header
This commit is contained in:
parent
e3a8e5f73c
commit
c61249e5e0
|
@ -290,6 +290,14 @@
|
||||||
onInviteFriends: () => {
|
onInviteFriends: () => {
|
||||||
window.Whisper.events.trigger('inviteFriends', this.model);
|
window.Whisper.events.trigger('inviteFriends', this.model);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onShowUserDetails: (pubkey) => {
|
||||||
|
if (this.model.isPrivate()) {
|
||||||
|
window.Whisper.events.trigger('onShowUserDetails', {
|
||||||
|
userPubKey: pubkey,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
this.titleView = new Whisper.ReactWrapperView({
|
this.titleView = new Whisper.ReactWrapperView({
|
||||||
|
|
|
@ -17,6 +17,7 @@ interface Props {
|
||||||
size: number;
|
size: number;
|
||||||
borderColor?: string;
|
borderColor?: string;
|
||||||
borderWidth?: number;
|
borderWidth?: number;
|
||||||
|
onAvatarClick?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
|
@ -25,11 +26,13 @@ interface State {
|
||||||
|
|
||||||
export class Avatar extends React.PureComponent<Props, State> {
|
export class Avatar extends React.PureComponent<Props, State> {
|
||||||
public handleImageErrorBound: () => void;
|
public handleImageErrorBound: () => void;
|
||||||
|
public onAvatarClickBound: () => void;
|
||||||
|
|
||||||
public constructor(props: Props) {
|
public constructor(props: Props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.handleImageErrorBound = this.handleImageError.bind(this);
|
this.handleImageErrorBound = this.handleImageError.bind(this);
|
||||||
|
this.onAvatarClickBound = this.onAvatarClick.bind(this);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
imageBroken: false,
|
imageBroken: false,
|
||||||
|
@ -171,12 +174,19 @@ export class Avatar extends React.PureComponent<Props, State> {
|
||||||
hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image',
|
hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image',
|
||||||
!hasImage ? `module-avatar--${color}` : null
|
!hasImage ? `module-avatar--${color}` : null
|
||||||
)}
|
)}
|
||||||
|
onClick={this.onAvatarClickBound}
|
||||||
>
|
>
|
||||||
{hasImage ? this.renderAvatarOrIdenticon() : this.renderNoImage()}
|
{hasImage ? this.renderAvatarOrIdenticon() : this.renderNoImage()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private onAvatarClick() {
|
||||||
|
if (this.props.onAvatarClick) {
|
||||||
|
this.props.onAvatarClick()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private renderAvatarOrIdenticon() {
|
private renderAvatarOrIdenticon() {
|
||||||
const { avatarPath, conversationType } = this.props;
|
const { avatarPath, conversationType } = this.props;
|
||||||
|
|
||||||
|
|
|
@ -68,12 +68,14 @@ interface Props {
|
||||||
onLeaveGroup: () => void;
|
onLeaveGroup: () => void;
|
||||||
|
|
||||||
onInviteFriends: () => void;
|
onInviteFriends: () => void;
|
||||||
|
onShowUserDetails?: (userPubKey: string) => void;
|
||||||
|
|
||||||
i18n: LocalizerType;
|
i18n: LocalizerType;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class ConversationHeader extends React.Component<Props> {
|
export class ConversationHeader extends React.Component<Props> {
|
||||||
public showMenuBound: (event: React.MouseEvent<HTMLDivElement>) => void;
|
public showMenuBound: (event: React.MouseEvent<HTMLDivElement>) => void;
|
||||||
|
public onShowUserDetailsBound: (userPubKey: string) => void;
|
||||||
public menuTriggerRef: React.RefObject<any>;
|
public menuTriggerRef: React.RefObject<any>;
|
||||||
|
|
||||||
public constructor(props: Props) {
|
public constructor(props: Props) {
|
||||||
|
@ -81,6 +83,7 @@ export class ConversationHeader extends React.Component<Props> {
|
||||||
|
|
||||||
this.menuTriggerRef = React.createRef();
|
this.menuTriggerRef = React.createRef();
|
||||||
this.showMenuBound = this.showMenu.bind(this);
|
this.showMenuBound = this.showMenu.bind(this);
|
||||||
|
this.onShowUserDetailsBound = this.onShowUserDetails.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
public showMenu(event: React.MouseEvent<HTMLDivElement>) {
|
public showMenu(event: React.MouseEvent<HTMLDivElement>) {
|
||||||
|
@ -180,6 +183,9 @@ export class ConversationHeader extends React.Component<Props> {
|
||||||
size={28}
|
size={28}
|
||||||
borderColor={borderColor}
|
borderColor={borderColor}
|
||||||
borderWidth={2}
|
borderWidth={2}
|
||||||
|
onAvatarClick={() => {
|
||||||
|
this.onShowUserDetailsBound(phoneNumber);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
@ -397,4 +403,9 @@ export class ConversationHeader extends React.Component<Props> {
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public onShowUserDetails(userPubKey: string) {
|
||||||
|
if (this.props.onShowUserDetails)
|
||||||
|
this.props.onShowUserDetails(userPubKey);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -674,12 +674,7 @@ export class Message extends React.PureComponent<Props, State> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="module-message__author-avatar"
|
className="module-message__author-avatar">
|
||||||
role="button"
|
|
||||||
onClick={() => {
|
|
||||||
onShowUserDetails(authorPhoneNumber);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Avatar
|
<Avatar
|
||||||
avatarPath={authorAvatarPath}
|
avatarPath={authorAvatarPath}
|
||||||
color={authorColor}
|
color={authorColor}
|
||||||
|
@ -689,6 +684,9 @@ export class Message extends React.PureComponent<Props, State> {
|
||||||
phoneNumber={authorPhoneNumber}
|
phoneNumber={authorPhoneNumber}
|
||||||
profileName={authorProfileName}
|
profileName={authorProfileName}
|
||||||
size={36}
|
size={36}
|
||||||
|
onAvatarClick={() => {
|
||||||
|
onShowUserDetails(authorPhoneNumber);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
{isModerator && (
|
{isModerator && (
|
||||||
<div className="module-avatar__icon--crown-wrapper">
|
<div className="module-avatar__icon--crown-wrapper">
|
||||||
|
|
Loading…
Reference in a new issue