@chat21/chat21-ionic 3.0.82-rc.7 → 3.0.82

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

@@ -1,29 +1,23 @@
 <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 id="contentPlaceholder" [class.mobile]="isMobile"> 
+  <ion-content padding>
     <!-- <div padding class="image-splash-page"></div>
     <div padding class="title-splash-page">
       text new conversation + button
     </div> -->
-    
 
-    <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">
+    <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  && !showSpinner"
-          style="color: #92949c; font-size: 16px;line-height: 18px;">
+          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>
@@ -43,13 +37,15 @@
     [idLoggedUser]="loggedUser.uid"
     [conversationUid]="conversationWith"
     [conversationAvatar]="conversationAvatar" 
-    [translationsMap]="translationsHeaderMap"
-    [conv_type]="conv_type">
+    [translationMap]="translationMap"
+    [isOpenInfoConversation]="isOpenInfoConversation" 
+    [conv_type]="conv_type"
+    (eventOpenCloseInfoConversation)="returnOpenCloseInfoConversation($event)">
   </app-header-conversation-detail>
 
-  <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-content id="conv-details">
+    <ion-grid class="grid_content">
+      <ion-row class="row_content">
         <ion-col id="chatArea" [class.mobile]="isMobile" [class.open]="openInfoConversation"
         [ngClass]="{'chat-area-apps-sidebar-wide': appsidebarIsWide === true}">
 
@@ -102,15 +98,10 @@
             </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]="true">
+              <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 -->
@@ -134,13 +125,7 @@
                   [senderId]="loggedUser.uid"
                   [baseLocation]="window?.location?.origin"
                   [areVisibleCAR]="areVisibleCAR" 
-                  [supportMode]= "supportMode"
-                  [isMobile]="isMobile"
-                  [isTypings]="isTypings"
-                  [openInfoConversation]="openInfoConversation"
-                  [idUserTypingNow]="idUserTypingNow"
-                  [nameUserTypingNow]="nameUserTypingNow" 
-                  [translationMap]="translationsContentMap"
+                  [supportMode]= "supportMode" 
                   [stylesMap]="styleMap"
                   (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                   (onAfterMessageRender)="onAfterMessageRenderFN($event)"
@@ -148,8 +133,7 @@
                   (onScrollContent)="returnOnScrollContent($event)" 
                   (onMenuOptionShow)="returnOnMenuOption($event)"
                   (onElementRendered)="onElementRenderedFN($event)"
-                  (onAddUploadingBubble)="addUploadingBubbleEvent($event)"
-                  (onOpenCloseInfoConversation)="onOpenCloseInfoConversation($event)">
+                  (onAddUploadingBubble)="addUploadingBubbleEvent($event)">
                 </ion-conversation-detail>
 
               </ion-content>
@@ -171,8 +155,7 @@
               [conversationWith]="conversationWith"
               [conversationWithFullname]="conversationWithFullname"
               [currentString]="messageStr"
-              [stylesMap]="styleMap"
-              [translationMap]="translationsMap"
+              [translationMap]="translationMap"
               (onLoadedCannedResponses)="onLoadedCannedResponses($event)"
               (onClickCanned)="replaceTagInMessage($event)"
               (onClickAddCannedResponse)="presentCreateCannedResponseModal()">
@@ -228,9 +211,9 @@
               [loggedUser]="loggedUser" 
               [conversationWith]="conversationWith" 
               [tagsCannedFilter]="tagsCannedFilter"
-              [translationMap]="translationsMap"
+              [translationMap]="translationMap"
               [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"
-              [isOpenInfoConversation]="openInfoConversation" 
+              [isOpenInfoConversation]="isOpenInfoConversation" 
               [dropEvent]="dropEvent"
               [disableTextarea]="disableTextarea"
               (eventChangeTextArea)="returnChangeTextArea($event)"
@@ -247,11 +230,10 @@
         [ngClass]="{'info-convs-apps-sidebar-wide': appsidebarIsWide === true}">
           <app-info-content 
             [openInfoConversation]="openInfoConversation" 
+            [translationMap]="translationMap"
             [loggedUser]="loggedUser" 
             [tenant]="tenant" 
-            [groupDetail]="groupDetail"
-            [isMobile]="isMobile"
-            [translationMap]="translationsMap">
+            [groupDetail]="groupDetail">
           </app-info-content>
         </ion-col>
 

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

@@ -25,6 +25,8 @@
     font-size: 24px;
 }
 
+
+
 #canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > span {
     color: #1877f2;
 }
@@ -36,32 +38,259 @@
     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: 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);
-        }
-    }
+    border-bottom-style: solid;
+    border-color: var(--light-gray);
+    border-bottom-width: thin;
 }
 
 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;
@@ -73,10 +302,6 @@ ion-content {
         padding: 0;
         margin: 0;
         overflow: hidden;
-
-        &:not(.mobile){
-            padding: var(--padding-conversation-detail);
-        }
     }
     .row_content {
         width: 100%;
@@ -86,14 +311,6 @@ 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;
         }
@@ -109,7 +326,7 @@ ion-content {
         position: absolute;
         bottom: 0;
         width: calc(100% - 0px);
-        // border-top: 1px solid #e2e2e2;
+        border-top: 1px solid #e2e2e2;
     }
 
     #chatArea {
@@ -171,12 +388,6 @@ 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;
@@ -229,7 +440,6 @@ ion-content {
 
 .ionContentChatArea {
     opacity: 0;
-    --background: white;
     &.active {
         opacity: 1;
     }