@chat21/chat21-ionic 3.0.85 → 3.0.86-rc.2

package/src/app/pages/conversation-detail/conversation-detail.page.html

@@ -1,23 +1,29 @@
 <span *ngIf="conversationWith && loggedUser; then showConversation else showPlaceholder"></span>
 <ng-template #showPlaceholder>
+
+  <ion-header no-border class="ion-no-border" [class.mobile]="isMobile">
+    <ion-toolbar [class.mobile]="isMobile">
+
+    </ion-toolbar>
+  </ion-header>
   <!-- class="splash-page" -->
-  <ion-content padding>
+  <ion-content padding id="contentPlaceholder" [class.mobile]="isMobile"> 
     <!-- <div padding class="image-splash-page"></div>
     <div padding class="title-splash-page">
       text new conversation + button
     </div> -->
+    
 
-    <ion-grid style="height: 100%;">
-      <ion-row class="ion-justify-content-center ion-align-items-center" style="height: 100%; flex-direction: column">
+    <ion-grid class="grid_content" [class.mobile]="isMobile">
+      <ion-row class="row_content ion-justify-content-center ion-align-items-center" style="flex-direction: column">
         <span *ngIf="isOnline === true  && !showSpinner"
-          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">
+          style="color: #92949c; font-size: 16px;line-height: 18px;">
           <span *ngIf="conversation_count > 0 ">
             {{'PleaseSelectChatToStartMessaging' | translate }}
           </span>
           <span *ngIf="conversation_count === 0" style="line-height: 1.2;color: #4b5258;
         font-weight: 500;">
             {{'ALL_CONVS_SERVED' | translate}}
-
           </span>
 
         </span>
@@ -37,15 +43,13 @@
     [idLoggedUser]="loggedUser.uid"
     [conversationUid]="conversationWith"
     [conversationAvatar]="conversationAvatar" 
-    [translationMap]="translationMap"
-    [isOpenInfoConversation]="isOpenInfoConversation" 
-    [conv_type]="conv_type"
-    (eventOpenCloseInfoConversation)="returnOpenCloseInfoConversation($event)">
+    [translationsMap]="translationsHeaderMap"
+    [conv_type]="conv_type">
   </app-header-conversation-detail>
 
-  <ion-content id="conv-details">
-    <ion-grid class="grid_content">
-      <ion-row class="row_content">
+  <ion-content id="conv-details" [class.mobile]="isMobile">
+    <ion-grid class="grid_content" [class.mobile]="isMobile">
+      <ion-row class="row_content" [class.mobile]="isMobile">
         <ion-col id="chatArea" [class.mobile]="isMobile" [class.open]="openInfoConversation"
         [ngClass]="{'chat-area-apps-sidebar-wide': appsidebarIsWide === true}">
 
@@ -98,10 +102,15 @@
             </ng-template>
 
             <ng-template #content_messages>
-              <ion-content #ionContentChatArea appScrollbarTheme class="ionContentChatArea" (drop)="drop($event)"
-                (dragover)="allowDrop($event)" (dragleave)="drag($event)" [scrollEvents]="true"
-                (ionScrollStart)="logScrollStart($event)" (ionScroll)="logScrolling($event)"
-                (ionScrollEnd)="logScrollEnd($event)" [class.active]="showIonContent">
+              <ion-content #ionContentChatArea appScrollbarTheme class="ionContentChatArea" 
+                (drop)="drop($event)"
+                (dragover)="allowDrop($event)" 
+                (dragleave)="drag($event)" 
+                [scrollEvents]="true"
+                (ionScrollStart)="logScrollStart($event)" 
+                (ionScroll)="logScrolling($event)"
+                (ionScrollEnd)="logScrollEnd($event)" 
+                [class.active]="true">
 
                 <!-- ----------------------------------------------------------- -->
                 <!-- DROPZONE -->
@@ -125,7 +134,13 @@
                   [senderId]="loggedUser.uid"
                   [baseLocation]="window?.location?.origin"
                   [areVisibleCAR]="areVisibleCAR" 
-                  [supportMode]= "supportMode" 
+                  [supportMode]= "supportMode"
+                  [isMobile]="isMobile"
+                  [isTypings]="isTypings"
+                  [openInfoConversation]="openInfoConversation"
+                  [idUserTypingNow]="idUserTypingNow"
+                  [nameUserTypingNow]="nameUserTypingNow" 
+                  [translationMap]="translationsContentMap"
                   [stylesMap]="styleMap"
                   (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                   (onAfterMessageRender)="onAfterMessageRenderFN($event)"
@@ -133,7 +148,8 @@
                   (onScrollContent)="returnOnScrollContent($event)" 
                   (onMenuOptionShow)="returnOnMenuOption($event)"
                   (onElementRendered)="onElementRenderedFN($event)"
-                  (onAddUploadingBubble)="addUploadingBubbleEvent($event)">
+                  (onAddUploadingBubble)="addUploadingBubbleEvent($event)"
+                  (onOpenCloseInfoConversation)="onOpenCloseInfoConversation($event)">
                 </ion-conversation-detail>
 
               </ion-content>
@@ -155,7 +171,8 @@
               [conversationWith]="conversationWith"
               [conversationWithFullname]="conversationWithFullname"
               [currentString]="messageStr"
-              [translationMap]="translationMap"
+              [stylesMap]="styleMap"
+              [translationMap]="translationsMap"
               (onLoadedCannedResponses)="onLoadedCannedResponses($event)"
               (onClickCanned)="replaceTagInMessage($event)"
               (onClickAddCannedResponse)="presentCreateCannedResponseModal()">
@@ -205,21 +222,24 @@
             <!-- [tagsCannedFilter]="tagsCannedFilter" -->
             <!-- openInfoConversation   {{openInfoConversation}} - isMobile {{isMobile}} -->
             <app-message-text-area *ngIf="(openInfoConversation === false && isMobile === true) || (openInfoConversation === true && isMobile === false) || (openInfoConversation === false && isMobile === false)"
-              [tagsCannedCount]="tagsCannedCount" 
-              [areVisibleCAR]="areVisibleCAR" 
-              [supportMode]="supportMode"
               [loggedUser]="loggedUser" 
               [conversationWith]="conversationWith" 
+              [channelType]="channelType"
               [tagsCannedFilter]="tagsCannedFilter"
-              [translationMap]="translationMap"
+              [tagsCannedCount]="tagsCannedCount" 
+              [areVisibleCAR]="areVisibleCAR" 
+              [supportMode]="supportMode"
+              [leadInfo]="leadInfo"
               [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"
-              [isOpenInfoConversation]="isOpenInfoConversation" 
+              [isOpenInfoConversation]="openInfoConversation" 
+              [translationMap]="translationsMap"
               [dropEvent]="dropEvent"
               [disableTextarea]="disableTextarea"
               (eventChangeTextArea)="returnChangeTextArea($event)"
               (onClickOpenCannedResponses)="onClickOpenCannedResponses($event)"
               (eventSendMessage)="returnSendMessage($event)" 
-              (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)">
+              (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)"
+              (onOpenFooterSection)="onOpenFooterSection($event)">
             </app-message-text-area>
             <!-- [events]="eventsReplaceTexareaText.asObservable()" -->
           </ion-row>
@@ -230,10 +250,11 @@
         [ngClass]="{'info-convs-apps-sidebar-wide': appsidebarIsWide === true}">
           <app-info-content 
             [openInfoConversation]="openInfoConversation" 
-            [translationMap]="translationMap"
             [loggedUser]="loggedUser" 
             [tenant]="tenant" 
-            [groupDetail]="groupDetail">
+            [groupDetail]="groupDetail"
+            [isMobile]="isMobile"
+            [translationMap]="translationsMap">
           </app-info-content>
         </ion-col>
 

package/src/app/pages/conversation-detail/conversation-detail.page.scss

@@ -25,8 +25,6 @@
     font-size: 24px;
 }
 
-
-
 #canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > span {
     color: #1877f2;
 }
@@ -38,259 +36,32 @@
     color: #1877f2;
 }
 
-// ion-back-button{
-//     display: none!important;
-// }
-// @media (max-width: 767px) {
-//     /* Styles */
-//     ion-back-button{
-//         display: block!important;
-//     }
-// }
-
-// .halfscreen {
-//     width: calc(100% - 320px);
-//     min-width: 50%;
-// }
-
-// ion-header {
-//     border-bottom-style: solid;
-//     border-color: var(--light-gray);
-//     border-bottom-width: thin;
-//     ion-title {
-//         text-align: left;
-//     }
-//     ion-avatar {
-//         position: relative;
-//         display: inline-block;
-//         margin: 0 12px 0 0;
-//         padding: 0;
-//         height: 40px;
-//         width: 40px;
-//         min-width: 40px;
-//         min-height: 40px;
-//         line-height: 40px;
-//         vertical-align: middle;
-//         color: var(--white);
-//         .avatar-placeholder {
-//             position: absolute;
-//             top:0;
-//             left:0;
-//             width: 100%;
-//             height: 100%;
-//             border-radius: 50%;
-//             text-align: center;
-//             font-size: 16px;
-//             color: var(--withe);
-//             font-weight: 500;
-//         }
-//         .avatar-profile {
-//             position: relative;
-//             display: inline-block;
-//             width: 100%;
-//             height: 100%;
-//             background-color: transparent;
-//             background-size: cover;
-//             background-position: top center;
-//             border-radius: 50%;
-//             border-color: var(--basic-gray);
-//             border-style: solid;
-//             border-width: 0px;
-//         }
-//     }
-//     .tile-info-with {
-//         position: relative;
-//         display: inline-block;
-//         vertical-align: middle;
-//         // &.info-open {
-//         //     max-width: calc(100% - 300px);
-//         // }
-//     }
-//     .tile-point {
-//         width: 10px;
-//         height: 10px;
-//         border-radius: 50%;
-//         display: inline-block;
-//         line-height: 10px;
-//         margin-right: 5px;
-//         vertical-align: middle;
-//     }
-//     .tile-username {
-//         display: inline-block;
-//         font-size: 15px;
-//         font-weight: bold;
-//         color: var(--black);
-//         margin: 0;
-//         padding: 0;
-
-//     }
-//     .tile-last-activity {
-//         color: var(--light-gray);
-//         font-size: 12px;
-//         font-weight: normal;
-//         margin-top: 2px;
-//         vertical-align: middle;
-//         position: relative;
-//         .tile-typing-now {
-//             color: var(--basic-blue);
-//         }
-//     }
-//     #tile-spinner {
-//         position: relative;
-//         left: 0;
-//         top: 0;
-//         margin: 0;
-//         &.active {
-//             display: inline-block;
-//             width: 30px;
-//         }
-//     }
-//     #tile-spinner > div {
-//         width: 6px;
-//         height: 6px;
-//         background-color: var(--basic-blue);
-//     }
-//     ion-buttons {
-//         button {
-//             max-width: 30px;
-//             padding: 0;
-//             margin-right: 20px;
-//         }
-//     }
-// }
-
-// ion-content {
 
-// .row-day {
-//     padding: 0 10px;
-//     text-align: center;
-//     width: 100%;
-//     margin-top: 15px;
-//     margin-bottom: 5px;
-// }
-//     .header-day {
-//         background-color: var(--transparent);
-//         padding-top: 4px;
-//         padding-bottom: 4px;
-//         padding-left: 12px;
-//         padding-right: 12px;
-//         vertical-align: middle;
-//         border-radius: 13px;
-//         font-size: 14px;
-//         font-weight: bold;
-//         color: var(--basic-gray);
-//         display: inline-block;
-//     }
-//     .message {
-//         .bubble-message {
-//             position: relative;
-//             border-radius: 15px;
-//             font-size: 15px;
-//             padding: 5px 10px 10px 10px;
-//             display: block;
-//             width: auto;
-//             max-width: 80%;
-//             line-height: 1.34;
-//             direction: ltr;
-//         }
-//         .message-content:after {
-//             content: "\00a0\00a0\00a0\00a0\00a0\00a0";
-//         }
-//         .timestamp-message {
-//             font-size: 10px;
-//             padding: 0px;
-//             position: absolute;
-//             bottom: 0px;
-//             right: 6px;
-//             line-height: 15px;
-//         }
-//         &.message-other {
-//             width: 100%;
-//             margin-top: 4px;
-//             .bubble-message {
-//                 background-color: var(--light-gray);
-//                 color: var(--black);
-//                 margin-left: 24px;
-//                 float: left;
-//                 border-top-left-radius: 6px;
-//                 border-bottom-left-radius: 6px;
-//             }
-//             .message-sender-fullname {
-//                 margin: 0;
-//                 font-size: 15px;
-//                 color: var(--basic-gray);
-//                 font-weight: bold;
-//                 display: none;
-//             }
-//             .timestamp-message {
-//                 color: var(--basic-gray);
-//                 bottom: 2px;
-//                 right: 10px;
-//             }
-//             &.first-message {
-//                 margin-top: 10px;
-//                 .bubble-message {
-//                     border-top-left-radius: 12px;
-//                     border-bottom-left-radius: 0px;
-//                 }
-//                 .message-sender-fullname {
-//                     display: block;
-//                 }
-//             }
-//         }
-//         &.message-mine {
-//             width: 100%;
-//             margin-top: 4px;
-//             .bubble-message {
-//                 background-color: var(--bubble-blue);
-//                 color: white;
-//                 margin-right: 24px;
-//                 float: right;
-//                 border-top-right-radius: 6px;
-//                 border-bottom-right-radius: 6px;
-//             }
-//             &.first-message {
-//                 margin-top: 10px;
-//                 .bubble-message {
-//                     border-top-right-radius: 12px;
-//                     border-bottom-right-radius: 0px;
-//                 }
-//             }
-//             .timestamp-message {
-//                 color: var(--white);
-//             }
-//             .attribute-message {
-//                 position: absolute;
-//                 width: 100%;
-//                 background-color: transparent;
-//                 bottom: 0;
-//                 right: 0;
-//                 .status-message {
-//                     position: absolute;
-//                     top: 0;
-//                     right: 0;
-//                     width: 15px;
-//                     .material-icons {
-//                         font-size: 15px;
-//                         color: var(--basic-blue);
-//                         position: absolute;
-//                         bottom: 4px;
-//                         right: 2px;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-
-// }
 
 ion-header {
-    border-bottom-style: solid;
-    border-color: var(--light-gray);
-    border-bottom-width: thin;
+    border: none;
+    &.mobile{
+        --ion-background-color: #fff;
+        border-bottom-style: solid;
+        border-color: var(--light-gray);
+        border-bottom-width: thin;
+    }
+    ion-toolbar{
+        height: var(--header-height);
+        &:not(.mobile){
+            --background: var(--list-bkg-color);
+        }
+    }
 }
 
 ion-content {
+
+    &#contentPlaceholder:not(.mobile),
+    &#conv-details:not(.mobile){
+        --background: var(--list-bkg-color);
+    }
+    --background: white;
+
     ion-item {
         --padding-end: 0px;
         --inner-padding-end: 0px;
@@ -302,6 +73,10 @@ ion-content {
         padding: 0;
         margin: 0;
         overflow: hidden;
+
+        &:not(.mobile){
+            padding: var(--padding-conversation-detail);
+        }
     }
     .row_content {
         width: 100%;
@@ -311,13 +86,21 @@ ion-content {
         position: absolute;
         top: 0;
         overflow: hidden;
+        background-color: white;
+
+        &:not(.mobile){
+            border-radius: var(--border-radius-content);;
+            position: unset;
+            
+        }
+
         ion-col {
             padding: 5px 0;
         }
         // background-color: aquamarine;
     }
     .row_chat_area {
-        height: calc(100% - 60px);
+        height: calc(100% - 101px);
         overflow: auto;
     }
     .row_message_text_area {
@@ -326,7 +109,7 @@ ion-content {
         position: absolute;
         bottom: 0;
         width: calc(100% - 0px);
-        border-top: 1px solid #e2e2e2;
+        // border-top: 1px solid #e2e2e2;
     }
 
     #chatArea {
@@ -338,7 +121,7 @@ ion-content {
         padding: 0;
         &.open {
             max-width: auto;
-            min-width: calc(100% - 300px);
+            min-width: calc(100% - 320px);
             &.mobile {
                 max-width: 0;
                 width: 0;
@@ -358,8 +141,8 @@ ion-content {
         display: block;
         overflow: hidden;
         &.open {
-            max-width: 300px;
-            min-width: 300px;
+            max-width: 320px;
+            min-width: 320px;
             display: block;
             -webkit-animation: slide-left 0.2s linear both;
             animation: slide-left 0.2s linear both;
@@ -388,6 +171,12 @@ ion-content {
     min-width: calc(100% - 600px) !important;
 }
 
+:host #conv-details .chat-area-apps-sidebar-wide ion-conversation-detail ::ng-deep {
+    div.manage_conversation_info_container{
+        right: calc(300px + 300px + var(--padding-conversation-detail));
+    }
+}
+
 .info-convs-apps-sidebar-wide {
     max-width: 600px !important;
     min-width: 600px !important;
@@ -440,6 +229,7 @@ ion-content {
 
 .ionContentChatArea {
     opacity: 0;
+    --background: white;
     &.active {
         opacity: 1;
     }
@@ -487,6 +277,7 @@ ion-content {
     right: 0;
     left: 0;
     bottom: 0;
+    z-index: 2;
     // z-index: 99998; // here plz remove this comma
 }