From 4999ececfd6cde301ffd4672adc4e871338581ac Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 4 Dec 2019 14:36:40 +1100
Subject: [PATCH] enlarged avatar when clicked in showUserDetailsDialog

---
 stylesheets/_modules.scss           | 21 +++++++++++++++++++++
 ts/components/Avatar.tsx            | 23 +++++++++++++++++++----
 ts/components/UserDetailsDialog.tsx | 16 ++++++++++++++--
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 6fa4cbeaa..8ccf49ed8 100644
--- a/stylesheets/_modules.scss
+++ b/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%;
diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx
index bc4394b05..98e6dbcf7 100644
--- a/ts/components/Avatar.tsx
+++ b/ts/components/Avatar.tsx
@@ -54,7 +54,12 @@ export class Avatar extends React.PureComponent<Props, State> {
       return this.renderNoImage();
     }
 
-    const borderStyle = this.getBorderStyle(borderColor, borderWidth);
+    const borderRadius = '50%';
+    const borderStyle = this.getBorderStyle(
+      borderColor,
+      borderWidth,
+      borderRadius
+    );
 
     // Generate the seed
     const hash = phoneNumber.substring(0, 12);
@@ -162,7 +167,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!`);
     }
 
@@ -202,7 +213,7 @@ export class Avatar extends React.PureComponent<Props, State> {
       : this.renderIdenticon();
   }
 
-  private getBorderStyle(color?: string, width?: number) {
+  private getBorderStyle(color?: string, width?: number, radius?: string) {
     const borderWidth = typeof width === 'number' ? width : 3;
 
     return color
@@ -211,6 +222,10 @@ export class Avatar extends React.PureComponent<Props, State> {
           borderStyle: 'solid',
           borderWidth: borderWidth,
         }
-      : undefined;
+      : radius
+        ? {
+            borderRadius: radius,
+          }
+        : undefined;
   }
 }
diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx
index 437059274..26c96bb7c 100644
--- a/ts/components/UserDetailsDialog.tsx
+++ b/ts/components/UserDetailsDialog.tsx
@@ -17,7 +17,11 @@ interface Props {
   onStartConversation: any;
 }
 
-export class UserDetailsDialog extends React.Component<Props> {
+interface State {
+  isEnlargeImageShown: boolean;
+}
+
+export class UserDetailsDialog extends React.Component<Props, State> {
   private modalRef: any;
 
   constructor(props: any) {
@@ -28,6 +32,7 @@ export class UserDetailsDialog extends React.Component<Props> {
     this.onClickStartConversation = this.onClickStartConversation.bind(this);
     window.addEventListener('keyup', this.onKeyUp);
     this.modalRef = React.createRef();
+    this.state = { isEnlargeImageShown: false };
   }
 
   public componentWillMount() {
@@ -74,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.isEnlargeImageShown ? 300 : 80;
 
     return (
       <Avatar
@@ -84,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({ isEnlargeImageShown: !this.state.isEnlargeImageShown });
+  };
+
   private onKeyUp(event: any) {
     switch (event.key) {
       case 'Enter':