@chat21/chat21-ionic 3.0.5-8.1 → 3.0.6-2.1

package/src/app/pages/conversations-list/conversations-list.module.ts

@@ -18,7 +18,7 @@ import { ContactsDirectoryPageModule } from '../contacts-directory/contacts-dire
 import { ProfileInfoPageModule } from '../profile-info/profile-info.module';
 // import { ConversationDetailPageModule } from '../conversation-detail/conversation-detail.module';
 import { SharedModule } from 'src/app/shared/shared.module';
-
+import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
 @NgModule({
   imports: [
     CommonModule,
@@ -28,6 +28,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
     // ConversationDetailPageModule,
     ContactsDirectoryPageModule,
     ProfileInfoPageModule,
+    ScrollbarThemeModule,
     TranslateModule.forChild({
       loader: {
         provide: TranslateLoader,

package/src/app/pages/conversations-list/conversations-list.page.html

@@ -1,51 +1,85 @@
-
 <ion-header no-border class="ion-no-border">
   <app-ddp-header *ngIf="conversationType ==='active'" 
     [numberOpenConv]="numberOpenConv" 
     [supportMode]="supportMode"
+    [archived_btn]="archived_btn"
+    [writeto_btn]="writeto_btn"
     (openContactsDirectory)=openContactsDirectory($event) 
     (openProfileInfo)=openProfileInfo($event)>
   </app-ddp-header>
 
-  <app-option-header *ngIf="conversationType !=='active'" [headerTitle]=headerTitle
+  <app-option-header *ngIf="conversationType !=='active'" 
+  [headerTitle]=headerTitle
     (onBackButton)=onBackButtonFN($event)>
   </app-option-header>
 </ion-header>
 
-<ion-content #ioncontentconvlist class="list-avatar-page" appScrollbarTheme>
-
+<ion-content id="convs-list" #ioncontentconvlist class="list-avatar-page" appScrollbarTheme>
+  <!-- class="ps" style="position: relative; max-width: 600px; max-height: 100%;" [perfectScrollbar]="config" -->
   <div id="scrollbar2">
     <ion-list>
 
+                   <!-- -------------------------------------------------------------------------- -->
+        <!-- New   <ion-spinner class="spinner-middle" style="margin-left: 19px;"></ion-spinner> -->
+        <!-- -------------------------------------------------------------------------- -->
+        <ion-item *ngIf="isOnline === false" style="padding-left:0px!important ;padding-right:0px!important" button="true" lines="none" class="ion-no-padding waiting-for-connection">
+          <div tabindex="0"></div>
+          <ion-avatar item-start>
+            <div class="sk-fading-circle">
+              <div class="sk-circle1 sk-circle"></div>
+              <div class="sk-circle2 sk-circle"></div>
+              <div class="sk-circle3 sk-circle"></div>
+              <div class="sk-circle4 sk-circle"></div>
+              <div class="sk-circle5 sk-circle"></div>
+              <div class="sk-circle6 sk-circle"></div>
+              <div class="sk-circle7 sk-circle"></div>
+              <div class="sk-circle8 sk-circle"></div>
+              <div class="sk-circle9 sk-circle"></div>
+              <div class="sk-circle10 sk-circle"></div>
+              <div class="sk-circle11 sk-circle"></div>
+              <div class="sk-circle12 sk-circle"></div>
+            </div>
+          </ion-avatar>
+          <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
+        </ion-item>
+        <!-- supportMode && -->
+        <ion-item  *ngIf="displayNewConvsItem && conversationType !=='archived'" class="ion-no-padding open-iframe-item">
+          <div tabindex="0"></div>
+          <!-- <ion-note class="pinned-project">
+            {{ 'PINNED_PROJECT' | translate }}
+          </ion-note> -->
+     
+          <app-project-item style="width: 100%;" 
+          (openUnsevedConvsEvent)="openUnsevedConversationIframe($event)"  
+          (projectIdEvent)="getLastProjectId($event)">
+        </app-project-item>
+        </ion-item>
+
       <span
         *ngIf="(conversations.length > 0 && conversationType ==='active') || (archivedConversations.length > 0  && conversationType ==='archived');then contentConversations else contentMessageWelcome">
         here is ignored
       </span>
 
+ 
+
       <ng-template #contentConversations>
         <!-- ---------------------------------- -->
         <!-- ACTIVE CONVERSATION LIST -->
         <!-- ---------------------------------- -->
-        <ion-list-conversations *ngIf="conversationType ==='active'" 
-          [uidConvSelected]="uidConvSelected"
-          [listConversations]="conversations" 
-          [stylesMap]="stylesMap" 
-          [translationMap]="translationMapConversation"
-          (onConversationSelected)=onConversationSelected($event) 
-          (onImageLoaded)="onImageLoaded($event)"
-          (onConversationLoaded)="onConversationLoaded($event)" 
-          (onCloseConversation)="onCloseConversation($event)">
+        <ion-list-conversations *ngIf="conversationType ==='active'" [uidConvSelected]="uidConvSelected"
+          [listConversations]="conversations" [stylesMap]="stylesMap" [translationMap]="translationMapConversation"
+          (onConversationSelected)=onConversationSelected($event) (onImageLoaded)="onImageLoaded($event)"
+          (onConversationLoaded)="onConversationLoaded($event)" (onCloseConversation)="onCloseConversation($event)" 
+          [archiveActionNotAllowed]="archiveActionNotAllowed"
+          (onCloseAlert)="onCloseAlert($event)">
         </ion-list-conversations>
 
         <!-- ---------------------------------- -->
         <!-- ARCHIVED CONVERSATION LIST -->
         <!-- ---------------------------------- -->
-        <ion-list-conversations *ngIf="conversationType ==='archived'" 
-          [listConversations]="archivedConversations"
-          [stylesMap]="stylesMap" 
-          [translationMap]="translationMapConversation"
-          (onConversationSelected)=onConversationSelected($event) 
-          (onImageLoaded)="onImageLoaded($event)"
+        <ion-list-conversations *ngIf="conversationType ==='archived'" [listConversations]="archivedConversations"
+          [stylesMap]="stylesMap" [translationMap]="translationMapConversation"
+          (onConversationSelected)=onConversationSelected($event) (onImageLoaded)="onImageLoaded($event)"
           (onConversationLoaded)="onConversationLoaded($event)">
         </ion-list-conversations>
       </ng-template>
@@ -84,8 +118,8 @@
             </ion-label>
           </ion-item>
         </div>
-        
+
       </ng-template>
     </ion-list>
   </div>
-</ion-content>
+</ion-content>

package/src/app/pages/conversations-list/conversations-list.page.scss

@@ -1,139 +1,321 @@
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+
 ion-header {
-    border-bottom-style: solid;
-    border-color: var(--light-gray);
-    border-bottom-width: thin;
+  border-bottom-style: solid;
+  border-color: var(--light-gray);
+  border-bottom-width: thin;
 }
 
-
-
 ion-list {
-    display: block;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    padding-inline-start: 40px;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 40px;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 
-    ion-item {
-        cursor: pointer;
-        height: 64px;
+  ion-item {
+    cursor: pointer;
+    height: 64px;
+    position: relative;
+    display: flex;
+    text-decoration: none;
+    padding-left: 8px;
+    padding-right: 8px;
+    --padding-start: 0;
+    --inner-padding-end: 0;
+    .selected {
+      border-radius: 10px;
+      padding-left: 8px;
+      padding-right: 8px;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    ion-avatar {
+      position: relative;
+      padding: 0;
+      margin: 0 12px 0 8px;
+      height: 50px;
+      width: 50px;
+      min-width: 50px;
+      min-height: 50px;
+      line-height: 50px;
+      .avatar-placeholder {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        text-align: center;
+        font-size: 20px;
+        color: #ffffff;
+        font-weight: 500;
+      }
+      .avatar-profile {
         position: relative;
-        display: flex;
-        text-decoration: none;
-        padding-left: 8px;
-        padding-right: 8px;
-        --padding-start: 0;
-        --inner-padding-end: 0;
-        .selected {
-            border-radius: 10px;
-            padding-left: 8px;
-            padding-right: 8px;
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            z-index:-1;
-            background-color: rgba(0, 0, 0, .05);
-        }
-        ion-avatar {
-            position: relative;
-            padding:0;
-            margin:0 12px 0 8px;
-            height: 50px;
-            width: 50px;
-            min-width: 50px;
-            min-height: 50px;
-            line-height: 50px;
-            .avatar-placeholder {
-                position: absolute;
-                top:0;
-                left:0;
-                width: 100%;
-                height: 100%;
-                border-radius: 50%;
-                text-align: center;
-                font-size: 20px;
-                color:#ffffff;
-                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: #c3c3c3;
-                border-style: solid;
-                border-width: 0px;
-            }
-        }
-        ion-label {
-            flex: 1 1 0px;
-            justify-content: center;
-            min-width: 0;
-            padding: 0;
-            font-family: Helvetica, Helvetica, Arial, sans-serif;
-            line-height: 1.28;
-            text-rendering: optimizeLegibility;
-            .conversation_with {
-                color: rgba(0, 0, 0, 1);
-                font-size: 15px;
-                font-weight: 400;
-                line-height: 1.4;
-            }
-            .conversation_message {
-                p {
-                    color: rgba(153, 153, 153, 1);
-                    font-size: 13px;
-                    font-weight: 400;
-                    height: 18px;
-                    &.not-read {
-                        font-weight:bold;
-                    }
-                }
-                
-            }
-            
-        }
-        ion-note {
-            position: absolute;
-            right: 8px;
-            top: 4px;
-            font-size: 10px;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        background-size: cover;
+        background-position: top center;
+        border-radius: 50%;
+        border-color: #c3c3c3;
+        border-style: solid;
+        border-width: 0px;
+      }
+    }
+    ion-label {
+      flex: 1 1 0px;
+      justify-content: center;
+      min-width: 0;
+      padding: 0;
+      font-family: Helvetica, Helvetica, Arial, sans-serif;
+      line-height: 1.28;
+      text-rendering: optimizeLegibility;
+      .conversation_with {
+        color: rgba(0, 0, 0, 1);
+        font-size: 15px;
+        font-weight: 400;
+        line-height: 1.4;
+      }
+      .conversation_message {
+        p {
+          color: rgba(153, 153, 153, 1);
+          font-size: 13px;
+          font-weight: 400;
+          height: 18px;
+          &.not-read {
+            font-weight: bold;
+          }
         }
-        ion-buttons {
-            margin: 0;
-            ion-button {
-                padding: 0;
-                margin: 0;
-                height: 24px;
-                width: 24px;
-                font-size: 10px;
-                --padding-start: 0px;
-                --padding-end: 0px;
-                color: rgba(153, 153, 153, 1);
-                background-color: transparent;
-                &:hover {
-                    background-color: rgba(0, 0, 0, .05)
-                }
-            }
+      }
+    }
+    ion-note {
+      position: absolute;
+      right: 8px;
+      top: 4px;
+      font-size: 10px;
+    }
+    ion-buttons {
+      margin: 0;
+      ion-button {
+        padding: 0;
+        margin: 0;
+        height: 24px;
+        width: 24px;
+        font-size: 10px;
+        --padding-start: 0px;
+        --padding-end: 0px;
+        color: rgba(153, 153, 153, 1);
+        background-color: transparent;
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.05);
         }
+      }
+    }
 
-        .notification_point {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            background-color: #0b5c89;
-            position: absolute;
-            right: 6px;
-            bottom: 8px;
-        }
+    .notification_point {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #0b5c89;
+      position: absolute;
+      right: 6px;
+      bottom: 8px;
     }
+  }
+}
+
+.waiting-for-connection {
+  --background: #fdd764;
+  --min-height: 70px;
+}
+
+// -------------------------------
+// Spinner
+// -------------------------------
+.sk-fading-circle {
+  // margin: 100px auto;
+  width: 25px;
+  height: 25px;
+  position: relative;
+  margin-left: 10px;
+  margin-top: 13px;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+  -ms-transform: rotate(30deg);
+  transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+  -ms-transform: rotate(60deg);
+  transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+  -ms-transform: rotate(120deg);
+  transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+  -ms-transform: rotate(150deg);
+  transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+  -ms-transform: rotate(210deg);
+  transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+  -ms-transform: rotate(240deg);
+  transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+  -ms-transform: rotate(300deg);
+  transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+  -ms-transform: rotate(330deg);
+  transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
 
-    
+@-webkit-keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
 }
+
+@keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+#no-convs-wpr {
+  margin: 100px auto;
+}
+
+.open-iframe-item {
+  padding-left: 0px !important ;
+  padding-right: 0px !important;
+  // height: 55px !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  --background-hover: #ffffff;
+  cursor:default !important;
+}
+
+.pinned-project {
+  color: #3880ff;
+  position: absolute;
+  right: 8px;
+  top: 2px;
+  // font-size: 12px !important;
+}
+
+// #convs-list {
+//   overflow: hidden;
+// }
+// #convs-list:hover {
+//   overflow-y: scroll;
+// }