Merge pull request #681 from Bilb/655-clickable-profile

655 clickable profile

js/background.js

@@ -1014,6 +1014,13 @@
     });
 
     Whisper.events.on('onShowUserDetails', async ({ userPubKey }) => {
+      const isMe = userPubKey === textsecure.storage.user.getNumber();
+
+      if (isMe) {
+        Whisper.events.trigger('onEditProfile');
+        return;
+      }
+
       const conversation = await ConversationController.getOrCreateAndWait(
         userPubKey,
         'private'

stylesheets/_modules.scss

@@ -2199,6 +2199,27 @@
   width: 42px;
 }
 
+.module-avatar--300 {
+  height: 300px;
+  width: 300px;
+
+  img {
+    height: 300px;
+    width: 300px;
+  }
+}
+
+.module-avatar__label--300 {
+  width: 300px;
+  font-size: 150px;
+  line-height: 302px;
+}
+
+.module-avatar__icon--300 {
+  height: 158px;
+  width: 158px;
+}
+
 .module-avatar__icon--note-to-self {
   width: 70%;
   height: 70%;

ts/components/Avatar.tsx

@@ -162,7 +162,13 @@ export class Avatar extends React.PureComponent<Props, State> {
     const hasAvatar = avatarPath || conversationType === 'direct';
     const hasImage = !noteToSelf && hasAvatar && !imageBroken;
 
-    if (size !== 28 && size !== 36 && size !== 48 && size !== 80) {
+    if (
+      size !== 28 &&
+      size !== 36 &&
+      size !== 48 &&
+      size !== 80 &&
+      size !== 300
+    ) {
       throw new Error(`Size ${size} is not supported!`);
     }
 

ts/components/JazzIcon/Paper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const styles = {
-  borderRadius: '50px',
+  borderRadius: '50%',
   display: 'inline-block',
   margin: 0,
   overflow: 'hidden',

ts/components/MainHeader.tsx

@@ -232,6 +232,9 @@ export class MainHeader extends React.Component<Props, any> {
           phoneNumber={phoneNumber}
           profileName={profileName}
           size={28}
+          onAvatarClick={() => {
+            trigger('onEditProfile');
+          }}
         />
         <div className="module-main-header__contact-name">
           <ContactName

ts/components/UserDetailsDialog.tsx

@@ -17,7 +17,13 @@ interface Props {
   onStartConversation: any;
 }
 
-export class UserDetailsDialog extends React.Component<Props> {
+interface State {
+  isEnlargedImageShown: boolean;
+}
+
+export class UserDetailsDialog extends React.Component<Props, State> {
+  private modalRef: any;
+
   constructor(props: any) {
     super(props);
 
@@ -25,6 +31,16 @@ export class UserDetailsDialog extends React.Component<Props> {
     this.onKeyUp = this.onKeyUp.bind(this);
     this.onClickStartConversation = this.onClickStartConversation.bind(this);
     window.addEventListener('keyup', this.onKeyUp);
+    this.modalRef = React.createRef();
+    this.state = { isEnlargedImageShown: false };
+  }
+
+  public componentWillMount() {
+    document.addEventListener('mousedown', this.handleClick, false);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClick, false);
   }
 
   public render() {
@@ -34,25 +50,27 @@ export class UserDetailsDialog extends React.Component<Props> {
     const startConversation = i18n('startConversation');
 
     return (
-      <div className="content">
-        <div className="avatar-center">
-          <div className="avatar-center-inner">{this.renderAvatar()}</div>
-        </div>
-        <div className="profile-name">{this.props.profileName}</div>
-        <div className="message">{this.props.pubkey}</div>
-
-        <div className="buttons">
-          <button className="cancel" tabIndex={0} onClick={this.closeDialog}>
-            {cancelText}
-          </button>
-
-          <button
-            className="ok"
-            tabIndex={0}
-            onClick={this.onClickStartConversation}
-          >
-            {startConversation}
-          </button>
+      <div ref={element => (this.modalRef = element)}>
+        <div className="content">
+          <div className="avatar-center">
+            <div className="avatar-center-inner">{this.renderAvatar()}</div>
+          </div>
+          <div className="profile-name">{this.props.profileName}</div>
+          <div className="message">{this.props.pubkey}</div>
+
+          <div className="buttons">
+            <button className="cancel" tabIndex={0} onClick={this.closeDialog}>
+              {cancelText}
+            </button>
+
+            <button
+              className="ok"
+              tabIndex={0}
+              onClick={this.onClickStartConversation}
+            >
+              {startConversation}
+            </button>
+          </div>
         </div>
       </div>
     );
@@ -61,6 +79,7 @@ export class UserDetailsDialog extends React.Component<Props> {
   private renderAvatar() {
     const avatarPath = this.props.avatarPath;
     const color = this.props.avatarColor;
+    const size = this.state.isEnlargedImageShown ? 300 : 80;
 
     return (
       <Avatar
@@ -71,11 +90,17 @@ export class UserDetailsDialog extends React.Component<Props> {
         name={this.props.profileName}
         phoneNumber={this.props.pubkey}
         profileName={this.props.profileName}
-        size={80}
+        size={size}
+        onAvatarClick={this.handleShowEnlargedDialog}
+        borderWidth={size / 2}
       />
     );
   }
 
+  private readonly handleShowEnlargedDialog = () => {
+    this.setState({ isEnlargedImageShown: !this.state.isEnlargedImageShown });
+  };
+
   private onKeyUp(event: any) {
     switch (event.key) {
       case 'Enter':
@@ -98,4 +123,11 @@ export class UserDetailsDialog extends React.Component<Props> {
     this.props.onStartConversation();
     this.closeDialog();
   }
+
+  private readonly handleClick = (e: any) => {
+    if (this.modalRef.contains(e.target)) {
+      return;
+    }
+    this.closeDialog();
+  };
 }