From 22508a7df44d3156b8b4ec5b89fa9384750c66e2 Mon Sep 17 00:00:00 2001
From: RossyB <rossy@compass-bg.net>
Date: Fri, 7 Jun 2019 17:41:22 +0300
Subject: [PATCH 1/3] NY-6202 WEB - Implement reply to image messages

---
 .../ChatMsgBlocks/ImageType/ImageType.js      |  4 ++--
 .../ImageType/ImageType.styles.js             |  4 ++--
 .../ReplyContainer/ReplyContainer.js          | 21 +++++++++++++++++--
 .../ReplyContainer/ReplyContainer.styles.js   |  6 ++++--
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/componets/ChatComponents/ChatMsgBlocks/ImageType/ImageType.js b/src/componets/ChatComponents/ChatMsgBlocks/ImageType/ImageType.js
index 04b07f1eb..e4bd85948 100644
--- a/src/componets/ChatComponents/ChatMsgBlocks/ImageType/ImageType.js
+++ b/src/componets/ChatComponents/ChatMsgBlocks/ImageType/ImageType.js
@@ -34,8 +34,8 @@ class ImageType extends Component {
     let maxHeight = 0;
     if (image && image.RESOLUTION && image.RESOLUTION.value) {
       const resolution = image.RESOLUTION.value.split(":");
-      imageWidth = resolution && resolution[0] ? resolution[0] : 0;
-      imageHeight = resolution && resolution[1] ? resolution[1] : 0;
+      imageWidth = resolution && resolution[0] ? parseInt(resolution[0]) : 0;
+      imageHeight = resolution && resolution[1] ? parseInt(resolution[1]) : 0;
       if (imageWidth > imageHeight) {
         maxWidth = 346;
         maxHeight = 225;
diff --git a/src/componets/ChatComponents/ChatMsgBlocks/ImageType/ImageType.styles.js b/src/componets/ChatComponents/ChatMsgBlocks/ImageType/ImageType.styles.js
index 4702efe2e..1209aa8c4 100644
--- a/src/componets/ChatComponents/ChatMsgBlocks/ImageType/ImageType.styles.js
+++ b/src/componets/ChatComponents/ChatMsgBlocks/ImageType/ImageType.styles.js
@@ -129,14 +129,14 @@ export default (theme, scrollWidth, avatarPic) => ({
   uploadBox: {
     position: 'relative',
     overflow: 'hidden',
-    borderRadius: '5px 5px 0 5px'
+    borderRadius: '6px 6px 0 6px'
   },
   photoWrap: {
     overflow: 'hidden',
     minWidth: 150,
     minHeight: 126,
     border: '2px solid #ffffff',
-    borderRadius: '5px 5px 5px 5px',
+    borderRadius: '6px 6px 6px 6px',
     background: '#151619',
     display: 'flex',
     '& img': {
diff --git a/src/containers/ReplyContainer/ReplyContainer.js b/src/containers/ReplyContainer/ReplyContainer.js
index 8fd346b93..a46547fa6 100644
--- a/src/containers/ReplyContainer/ReplyContainer.js
+++ b/src/containers/ReplyContainer/ReplyContainer.js
@@ -41,7 +41,10 @@ class ReplyContainer extends Component {
     let replyData;
     let fromUser;
     let replyDataCount;
+    let message;
+    let imageWidth;
     let ellipsis = '';
+    let nameStyle;
     const {
       classes, child, getMessageByIdForP2P, getMessageByIdForRoom, getContactById, getMemberById,
       getRoom, roomId
@@ -53,7 +56,6 @@ class ReplyContainer extends Component {
 
     if (childProps.link && !Array.isArray(childProps.link)) {
       try {
-        let message;
         if (childProps.message.feed_id.tup === 'p2p') {
           message = (childProps && childProps.link && childProps.link.tup == 'Message') ? childProps.link : getMessageByIdForP2P(childProps.link);
           fromUser = getContactById(message.from);
@@ -102,6 +104,21 @@ class ReplyContainer extends Component {
         }
       }
 
+      if (message && childProps.image && childProps.image.RESOLUTION) {
+        const minImageWidth = 150;
+        const maxImageWidth = 225;
+        let realImageWidth = parseInt(childProps.image.RESOLUTION.value.split(':')[0]);
+        if (realImageWidth < minImageWidth) {
+          imageWidth = minImageWidth;
+        } else if (realImageWidth > minImageWidth && realImageWidth < maxImageWidth) {
+          imageWidth = realImageWidth;
+        } else {
+          imageWidth = maxImageWidth
+        }
+      }
+
+      nameStyle = imageWidth ? { width: `${imageWidth}` } : { width: `unset` }
+
       return (
         <div className={`${classes.replyWrap} message-reply-wrap`}>
           {sendUser != '' &&
@@ -112,7 +129,7 @@ class ReplyContainer extends Component {
               <p className={classes.userName}> {sendUser} </p>
             </span>
           }
-          <p className={classes.replyName}>{userNames}</p>
+          <p className={classes.replyName} style={nameStyle}>{userNames} </p>
           <div className={classes.replyMessage}>
             {!isGroup ?
               replyDataView
diff --git a/src/containers/ReplyContainer/ReplyContainer.styles.js b/src/containers/ReplyContainer/ReplyContainer.styles.js
index 8aafe9635..689a577f2 100644
--- a/src/containers/ReplyContainer/ReplyContainer.styles.js
+++ b/src/containers/ReplyContainer/ReplyContainer.styles.js
@@ -1,6 +1,5 @@
 export default theme => ({
   replyWrap: {
-    padding: 3,
     clear: 'both',
     float: 'right',
     color: '#292a2f',
@@ -39,7 +38,10 @@ export default theme => ({
   replyName: {
     color: '#107C5C',
     fontWeight: 'bold',
-    paddingLeft: 7
+    paddingLeft: 7,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
   },
   replyMessage: {
     width: '100%',
-- 
GitLab


From afac92d3c847f1c32e9cfc336f9392e04e789315 Mon Sep 17 00:00:00 2001
From: RossyB <rossy@compass-bg.net>
Date: Fri, 7 Jun 2019 18:06:00 +0300
Subject: [PATCH 2/3] NY-6202 WEB - Implement reply to image messages

---
 src/containers/ReplyContainer/ReplyContainer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/ReplyContainer/ReplyContainer.js b/src/containers/ReplyContainer/ReplyContainer.js
index a46547fa6..137fc190b 100644
--- a/src/containers/ReplyContainer/ReplyContainer.js
+++ b/src/containers/ReplyContainer/ReplyContainer.js
@@ -106,7 +106,7 @@ class ReplyContainer extends Component {
 
       if (message && childProps.image && childProps.image.RESOLUTION) {
         const minImageWidth = 150;
-        const maxImageWidth = 225;
+        const maxImageWidth = 346;
         let realImageWidth = parseInt(childProps.image.RESOLUTION.value.split(':')[0]);
         if (realImageWidth < minImageWidth) {
           imageWidth = minImageWidth;
-- 
GitLab


From 7842becba465d827a618d893b0b44f33c06ba2d9 Mon Sep 17 00:00:00 2001
From: RossyB <rossy@compass-bg.net>
Date: Fri, 7 Jun 2019 18:48:09 +0300
Subject: [PATCH 3/3] NY-6202 WEB - Implement reply to image messages

---
 src/containers/ReplyContainer/ReplyContainer.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/containers/ReplyContainer/ReplyContainer.js b/src/containers/ReplyContainer/ReplyContainer.js
index 137fc190b..800d3a9ff 100644
--- a/src/containers/ReplyContainer/ReplyContainer.js
+++ b/src/containers/ReplyContainer/ReplyContainer.js
@@ -105,9 +105,13 @@ class ReplyContainer extends Component {
       }
 
       if (message && childProps.image && childProps.image.RESOLUTION) {
-        const minImageWidth = 150;
-        const maxImageWidth = 346;
         let realImageWidth = parseInt(childProps.image.RESOLUTION.value.split(':')[0]);
+        let realImageHeight = parseInt(childProps.image.RESOLUTION.value.split(':')[1]);
+        const minImageWidth = 150;
+        let maxImageWidth = 346;
+        if (realImageWidth < realImageHeight) {
+          maxImageWidth = 225;
+        }
         if (realImageWidth < minImageWidth) {
           imageWidth = minImageWidth;
         } else if (realImageWidth > minImageWidth && realImageWidth < maxImageWidth) {
-- 
GitLab