@chat21/chat21-ionic 3.0.5-9.2 → 3.0.6-2.3

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

@@ -9,12 +9,22 @@
 
     <ion-grid style="height: 100%;">
       <ion-row class="ion-justify-content-center ion-align-items-center" style="height: 100%; flex-direction: column">
-        <span *ngIf="isOnline === true"
-          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">{{'PleaseSelectChatToStartMessaging'
-          | translate }}</span>
-
-          <span *ngIf="isOnline === false"
-          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">Internet is slow or not working</span>
+        <span *ngIf="isOnline === true  && !showSpinner"
+          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">
+          <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>
+
+        <span *ngIf="isOnline === false"
+          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">Internet is slow or not
+          working</span>
       </ion-row>
     </ion-grid>
   </ion-content>
@@ -22,16 +32,13 @@
 
 <ng-template #showConversation>
 
-  <app-header-conversation-detail 
-    [isMobile]="isMobile" 
-    [idLoggedUser]="loggedUser.uid"
-    [conversationAvatar]="conversationAvatar" 
-    [translationMap]="translationMap"
+  <app-header-conversation-detail [isMobile]="isMobile" [idLoggedUser]="loggedUser.uid"
+    [conversationAvatar]="conversationAvatar" [translationMap]="translationMap"
     (eventOpenCloseInfoConversation)="returnOpenCloseInfoConversation($event)"
-    [isOpenInfoConversation]="isOpenInfoConversation">
+    [isOpenInfoConversation]="isOpenInfoConversation" [conv_type]="conv_type">
   </app-header-conversation-detail>
 
-  <ion-content>
+  <ion-content id="conv-details">
     <ion-grid class="grid_content">
       <ion-row class="row_content">
         <ion-col id="chatArea" [class.mobile]="isMobile" [class.open]="openInfoConversation">
@@ -48,7 +55,7 @@
               <!-- <div class="messageFirst">
                 {{ 'LABEL_NO_MSG_HERE' | translate }}
               </div> -->
-              
+
               <ion-grid style="height: 100%" [ngClass]="{'is-in-drop-event': isHovering === true}" (drop)="drop($event)"
                 (dragover)="allowDrop($event)" (dragleave)="drag($event)">
                 <ion-row class="ion-justify-content-center ion-align-items-center" *ngIf="isHovering === false"
@@ -85,15 +92,10 @@
             </ng-template>
 
             <ng-template #content_messages>
-              <ion-content #ionContentChatArea 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]="showIonContent">
 
                 <!-- ----------------------------------------------------------- -->
                 <!-- DROPZONE -->
@@ -111,16 +113,12 @@
 
 
                 <ion-conversation-detail *ngIf="isHovering === false" #conversationContentDetail
-                  [channelType]="channelType" 
-                  [messages]="messages" 
-                  [senderId]="loggedUser.uid"
-                  [baseLocation]="window?.location?.origin"
-                  [stylesMap]="styleMap"
+                  [channelType]="channelType" [messages]="messages" [senderId]="loggedUser.uid"
+                  [baseLocation]="window?.location?.origin" [stylesMap]="styleMap"
                   (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
                   (onAfterMessageRender)="returnOnAfterMessageRender($event)"
                   (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)"
-                  (onScrollContent)="returnOnScrollContent($event)" 
-                  (onMenuOptionShow)="returnOnMenuOption($event)"
+                  (onScrollContent)="returnOnScrollContent($event)" (onMenuOptionShow)="returnOnMenuOption($event)"
                   (onImageRendered)="onImageRenderedFN($event)"
                   (onAddUploadingBubble)="addUploadingBubbleEvent($event)">
                 </ion-conversation-detail>
@@ -139,32 +137,42 @@
             <!-- ----------------------------------------------------------- -->
             <!-- Canned responses -->
             <!-- ----------------------------------------------------------- -->
-         
-            <div id="canned" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
-              <ion-list class="canned-list">
+            <div id="canned">
+              <ion-list class="canned-list" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
                 <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
                   class="canned-item" id="{{'canned-item_'+ i }}"
                   *ngFor="let canned of tagsCannedFilter; let i = index;" [innerHtml]="canned.title"
                   (click)="replaceTagInMessage(canned, $event)">
                 </ion-item>
+                <ion-item  class="canned-item add-canned-response-wpr" button="true" lines="none" (click)="presentCreateCannedResponseModal()">
+                  <ion-icon class="add-canned-response-icon"  name="flash-outline"></ion-icon>
+                  <span class="add-canned-response-add-icon">+</span>
+                 <label class="add-canned-response-label" >{{translationMap?.get('AddNewCannedResponse')}}</label> 
+                </ion-item>
               </ion-list>
+              <!-- <ion-list class="canned-list" *ngIf="tagsCannedFilter.length === 0 && HIDE_CANNED_RESPONSES === false">
+                <ion-item button="true" >
+                  There are no canned responses available
+                </ion-item>
+              </ion-list> -->
             </div>
+
+
+
+
             <!-- (eventReplaceMessageWithCanned)="replaceTagInMessage($event)" -->
             <!-- [tagsCannedFilter]="tagsCannedFilter" -->
             <!-- openInfoConversation   {{openInfoConversation}} - isMobile {{isMobile}} -->
             <app-message-text-area
               *ngIf="(openInfoConversation === false && isMobile === true) || (openInfoConversation === true && isMobile === false) || (openInfoConversation === false && isMobile === false)"
-             
-              [loggedUser]="loggedUser" 
-              [conversationWith]="conversationWith" 
-              [tagsCannedFilter]="tagsCannedFilter"
-              (eventChangeTextArea)="returnChangeTextArea($event)" 
-              (eventSendMessage)="returnSendMessage($event)"
-              [translationMap]="translationMap" 
+              [tagsCannedCount]="tagsCannedCount" [areVisibleCAR]="areVisibleCAR" [support_mode]="support_mode"
+              [loggedUser]="loggedUser" [conversationWith]="conversationWith" [tagsCannedFilter]="tagsCannedFilter"
+              (eventChangeTextArea)="returnChangeTextArea($event)"
+              (hasClickedOpenCannedResponses)="hasClickedOpenCannedResponses($event)"
+              (eventSendMessage)="returnSendMessage($event)" [translationMap]="translationMap"
               [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"
-              [isOpenInfoConversation]="isOpenInfoConversation" 
-              [dropEvent]="dropEvent"  
-              (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)">
+              [isOpenInfoConversation]="isOpenInfoConversation" [dropEvent]="dropEvent"
+              (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)" [disableTextarea]="disableTextarea">
             </app-message-text-area>
             <!-- [events]="eventsReplaceTexareaText.asObservable()" -->
           </ion-row>
@@ -172,12 +180,8 @@
         </ion-col>
 
         <ion-col id="chat21-info-conversation" [class.mobile]="isMobile" [class.open]="openInfoConversation">
-          <app-info-content 
-            [openInfoConversation]="openInfoConversation" 
-            [translationMap]="translationMap"
-            [loggedUser]="loggedUser" 
-            [tenant]="tenant" 
-            [groupDetail]="groupDetail">
+          <app-info-content [openInfoConversation]="openInfoConversation" [translationMap]="translationMap"
+            [loggedUser]="loggedUser" [tenant]="tenant" [groupDetail]="groupDetail">
           </app-info-content>
         </ion-col>
 

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

@@ -25,6 +25,34 @@
     font-size: 24px;
 }
 
+.add-canned-response-icon {
+    color: #b3bfd0;
+    cursor: pointer;
+    font-size: 18px;
+}
+.add-canned-response-label {
+    color: #b3bfd0;
+    cursor: pointer;
+}
+.add-canned-response-add-icon {
+    color: #b3bfd0;
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    left: -6px;
+}
+
+#canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > span {
+    color: #1877f2;
+}
+
+#canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > ion-icon {
+    color: #1877f2;
+}
+#canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > label {
+    color: #1877f2;
+}
+
 // ion-back-button{
 //     display: none!important;
 // }