Merge pull request #1510 from glific/interactive-design-cleanup

Updated design for interactive template

CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [v1.8.0](https://github.com/glific/glific-frontend/compare/v1.7.1...v1.8.0)
+
+> 06 July 2021
+
+- Added UI for interactive message list and quick-reply for chat screen and simulator [`#1497`](https://github.com/glific/glific-frontend/pull/1497)
+- Remove hardcoded audio type, that breaks media playing in safari [`#1504`](https://github.com/glific/glific-frontend/pull/1504)
+- Started with responsive chat screen [`#1491`](https://github.com/glific/glific-frontend/pull/1491)
+- Updated floweditor version with interactive list node support [`#1494`](https://github.com/glific/glific-frontend/pull/1494)
+- Now simulator will support attachments [`#1485`](https://github.com/glific/glific-frontend/pull/1485)
+- Added export functionality for flows [`#1458`](https://github.com/glific/glific-frontend/pull/1458)
+- Fixed jump to latest bug [`#1484`](https://github.com/glific/glific-frontend/pull/1484)
+- Suspense fallback loading fix [`#1483`](https://github.com/glific/glific-frontend/pull/1483)
+- Fixed attachment template bug [`#1481`](https://github.com/glific/glific-frontend/pull/1481)
+
+#### [v1.7.1](https://github.com/glific/glific-frontend/compare/v1.7.0...v1.7.1)
+
+> 23 June 2021
+
+- Fixed variables values getting vanished when focus is lost on chat [`#1478`](https://github.com/glific/glific-frontend/pull/1478)
+- Added support for split by groups [`#1477`](https://github.com/glific/glific-frontend/pull/1477)
+
 #### [v1.7.0](https://github.com/glific/glific-frontend/compare/v1.6.2...v1.7.0)
 
 > 22 June 2021

package.json

@@ -1,6 +1,6 @@
 {
   "name": "glific-frontend",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "private": true,
   "dependencies": {
     "@absinthe/socket": "^0.2.1",

src/components/simulator/Simulator.module.css

@@ -307,3 +307,8 @@
   background-color: rgba(0, 0, 0, 0.5);
   content: '';
 }
+
+.InteractiveReceivedMessage {
+  background: transparent !important;
+  padding: 0px !important;
+}

src/components/simulator/Simulator.tsx

@@ -132,8 +132,18 @@ export const Simulator: React.FC<SimulatorProps> = ({
     }
   }
 
-  const getStyleForDirection = (direction: string): string =>
-    direction === 'send' ? styles.SendMessage : styles.ReceivedMessage;
+  const getStyleForDirection = (direction: string, isInteractive: boolean): string => {
+    const simulatorClasses = [styles.ReceivedMessage, styles.InteractiveReceivedMessage];
+    if (isInteractive && direction === 'received') {
+      return simulatorClasses.join(' ');
+    }
+
+    if (direction === 'send') {
+      return styles.SendMessage;
+    }
+
+    return styles.ReceivedMessage;
+  };
 
   const releaseUserSimulator = () => {
     releaseSimulator();
@@ -197,7 +207,7 @@ export const Simulator: React.FC<SimulatorProps> = ({
 
     return (
       <div key={index}>
-        <div className={getStyleForDirection(direction)}>
+        <div className={getStyleForDirection(direction, isInteractiveContentPresent)}>
           {isInteractiveContentPresent && direction !== 'send' ? (
             template
           ) : (

src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.module.css

@@ -240,3 +240,15 @@
 .TemplateButtonOnError {
   margin-left: 42px;
 }
+
+.InteractiveMessage {
+  box-shadow: none !important;
+}
+
+.InteractiveMessageMimeColor {
+  background-color: #00000000;
+}
+
+.InteractiveContent {
+  padding: 0px !important;
+}

src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx

@@ -274,6 +274,13 @@ export const ChatMessage: React.SFC<ChatMessageProps> = (props) => {
   const stickerClasses = type === 'STICKER' ? styles.StickerBackground : '';
 
   const chatMessageClasses = [styles.ChatMessage, mineColor, errorClasses, stickerClasses];
+  const chatMessageContent = [styles.Content];
+
+  if (isInteractiveContentPresent && !isSender) {
+    chatMessageClasses.push(styles.InteractiveMessage);
+    chatMessageClasses.push(styles.InteractiveMessageMimeColor);
+    chatMessageContent.push(styles.InteractiveContent);
+  }
 
   let template = null;
   if (type === INTERACTIVE_LIST) {
@@ -325,7 +332,7 @@ export const ChatMessage: React.SFC<ChatMessageProps> = (props) => {
         <div className={chatMessageClasses.join(' ')}>
           <Tooltip title={tooltipTitle} placement={isSender ? 'right' : 'left'}>
             <div>
-              <div className={styles.Content} data-testid="content">
+              <div className={chatMessageContent.join(' ')} data-testid="content">
                 {isInteractiveContentPresent && !isSender ? (
                   template
                 ) : (

src/containers/Chat/ChatMessages/ListReplyTemplate/ListReplyTemplate.module.css

@@ -72,12 +72,12 @@
   max-width: 100%;
   border-radius: 12px;
   font-family: 'Heebo', sans-serif, emoji;
-  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
   clear: both;
   max-width: 404px;
   min-width: 85px;
-  /* padding: 8px 16px; */
-  /* background: white; */
+  padding: 10px 16px;
+  background: white;
 }
 
 .ChatTemplateBody > p:nth-of-type(1) {
@@ -102,3 +102,8 @@
 .ChatTemplateButton > button:disabled {
   background: #eaedec !important;
 }
+
+.SimulatorContent {
+  background: white;
+  padding: 8px 10px;
+}

src/containers/Chat/ChatMessages/ListReplyTemplate/ListReplyTemplate.tsx

@@ -61,7 +61,7 @@ export const SimulatorTemplate: React.SFC<TemplateProps> = (props) => {
   const { title, body, globalButtonTitle, items, onGlobalButtonClick, disabled } = props;
 
   return (
-    <div>
+    <div className={styles.SimulatorContent}>
       <p>{title}</p>
       <p>{body}</p>
       <hr />

src/containers/Chat/ChatMessages/QuickReplyTemplate/QuickReplyTemplate.module.css

@@ -11,6 +11,9 @@
 .ButtonItem > button {
   width: 100%;
   border-radius: 12px;
+  padding: 8px;
+  font-size: 16px;
+  box-shadow: none;
 }
 
 .ChatMessageButton {
@@ -21,7 +24,19 @@
 }
 
 .SimulatorButton {
-  background: #eaedec !important;
+  background: white !important;
   color: #1690cf !important;
-  padding: 11px 16px;
+}
+
+.MessageContent {
+  max-width: 100%;
+  border-radius: 12px;
+  font-family: 'Heebo', sans-serif, emoji;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  clear: both;
+  max-width: 404px;
+  min-width: 85px;
+  padding: 10px;
+  background: white;
+  margin-bottom: 5px;
 }

src/containers/Chat/ChatMessages/QuickReplyTemplate/QuickReplyTemplate.tsx

@@ -52,13 +52,15 @@ export const QuickReplyTemplate: React.SFC<QuickReplyTemplateProps> = (props) =>
   const contentType = type === 'file' ? 'DOCUMENT' : type.toUpperCase();
   return (
     <div>
-      <ChatMessageType
-        type={contentType}
-        body={caption || text || filename}
-        media={media}
-        location={{}}
-        isSimulatedMessage={isSimulator}
-      />
+      <div className={styles.MessageContent}>
+        <ChatMessageType
+          type={contentType}
+          body={caption || text || filename}
+          media={media}
+          location={{}}
+          isSimulatedMessage={isSimulator}
+        />
+      </div>
       <div className={styles.ButtonContainer}>{quickReplyButtons}</div>
     </div>
   );