@chat21/chat21-ionic 3.0.80-rc.1 → 3.0.80

package/src/app/components/conversation-info/info-group/info-group.component.html

@@ -1,51 +1,115 @@
 <!-- <pre style="font-size: 12px;"> {{ groupDetail | json }} </pre>  -->
 
 <ion-content class="group-profile">
-    <ion-card>
-      <div class="chat21-box-profile chat21-box">
-        <div class="chat21-content">
-          <div class="image-profile">
-            <app-avatar-profile [itemAvatar]="groupDetail"></app-avatar-profile>
-          </div>
-  
-          <div class="info-profile">
-            <div class="name">
-              <span class="read">{{groupDetail?.name}}</span>
-            </div>
+  <ion-card class="first-card">
+    <div class="chat21-box-profile chat21-box">
+      <div class="chat21-content">
+        <div class="image-profile">
+          <app-avatar-profile [itemAvatar]="groupDetail"></app-avatar-profile>
+        </div>
+
+        <div class="info-profile">
+          <div class="name">
+            <span class="read">{{groupDetail?.name}}</span>
           </div>
         </div>
-  
+        <!-- <div class="member-email">
+          <a [href]="'mailto:' + member.email + '?Subject='">
+            {{member.email}}
+          </a>
+        </div> -->
       </div>
-    </ion-card>
-    
-    <ion-list id="fake-members-list" *ngIf="displaySkeletonScreen">
-      <ion-item lines="none" *ngFor="let fake of generateFake(membersObjectLength)" style="margin-left:-3px">
-        <ion-avatar slot="start">
-          <ion-skeleton-text animated style="width: 44px; height: 44px;"></ion-skeleton-text>
-        </ion-avatar>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 60%;position: relative;top: 2px;height: 16px;"></ion-skeleton-text>
-          </h3>
-        </ion-label>
-      </ion-item>
-    </ion-list>
-  
-    <!-- <pre style="font-size: 8px;"> {{member_array | json }} </pre>  <pre style="font-size: 8px;"> {{displaySkeletonScreen}} </pre> -->
-    <ion-list id="members-list" *ngIf="groupDetail?.member_array?.length > 0 && !displaySkeletonScreen">
-      <ion-item lines="none" *ngFor='let member of groupDetail?.member_array'>
-        <ion-avatar  slot="start" style="margin-right: 12px;"> 
-          <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
-          <div class="status-icon-container" [class.mobile]="isMobile" >
-            <svg xmlns="http://www.w3.org/2000/svg" [class.online]="(member?.userOnline)" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-          </div>
-        </ion-avatar>
-        <ion-label>
-          <h3>
-            {{ member.fullname }}
-          </h3>
-        </ion-label>
-      </ion-item>
-    </ion-list>
+
+    </div>
+  </ion-card>
   
-  </ion-content>
+  <ion-list id="fake-members-list" *ngIf="displaySkeletonScreen">
+    <ion-item lines="none" *ngFor="let fake of generateFake(membersObjectLength)" style="margin-left:-3px">
+      <ion-avatar slot="start">
+        <ion-skeleton-text animated style="width: 44px; height: 44px;"></ion-skeleton-text>
+      </ion-avatar>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 60%;position: relative;top: 2px;height: 16px;"></ion-skeleton-text>
+        </h3>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <!-- <pre style="font-size: 8px;"> {{member_array | json }} </pre>  <pre style="font-size: 8px;"> {{displaySkeletonScreen}} </pre> -->
+  <ion-list id="members-list" *ngIf="groupDetail?.member_array?.length > 0 && !displaySkeletonScreen">
+    <ion-item lines="none" *ngFor='let member of groupDetail?.member_array'>
+      <ion-avatar  slot="start" style="margin-right: 12px;"> 
+        <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
+        <div class="user-online" [ngStyle]="{ 'background-color':(member?.userOnline)?'#24d066':'#db4437' }"></div>
+      </ion-avatar>
+      <ion-label>
+        <h3>
+          {{ member.fullname }}
+        </h3>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+
+
+
+  <div *ngIf="groupDetail" style="display:none">
+    <div *ngFor='let member of groupDetail?.member_array'>
+      <ion-grid>
+        <ion-row class="ion-align-items-center">
+          <ion-col size="3">
+            <div class="member-profile">
+              <!-- (click)="copyLoggedUserUID({member.userid)" -->
+              <!-- <div class="avatar-container" [tooltip]="useruidTooltip" [options]="tooltipOptions" placement="top"
+                content-type="template" > -->
+              <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
+              <!-- </div> -->
+              <!-- <ng-template #useruidTooltip>
+                <span> {{member.userid}}</span>
+              </ng-template> -->
+
+              <div class="user-online" [ngStyle]="{ 'background-color':(member?.userOnline)?'#24d066':'#db4437' }">
+              </div>
+            </div>
+
+
+          </ion-col>
+          <ion-col>
+            <ion-label>
+              {{ member.fullname }}
+            </ion-label>
+
+            <!-- <div class="info-group-member-email">
+              <a [href]="'mailto:' + member.email + '?Subject='">
+                {{member.email}}
+              </a>
+            </div> -->
+
+
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+      <!-- </ion-avatar>
+      </ion-item> -->
+      <!-- {{member | json}}
+    
+    >>>  {{member?.avatar}} -->
+    </div>
+  </div>
+
+  <!-- <ion-list> 
+
+
+  </ion-list> -->
+
+  <!-- </div> -->
+
+
+  <!-- <app-advanced-info-accordion 
+  [advancedAttributes]="advancedAttributes"
+  [translationMap]="translationMap">
+
+  </app-advanced-info-accordion> -->
+
+</ion-content>

package/src/app/components/conversation-info/info-group/info-group.component.scss

@@ -7,114 +7,74 @@
         -webkit-box-shadow: none;
         box-shadow: none;
         border-bottom: 1px solid rgba(169, 169, 169, 0.2);
+    }
 
-        .image-profile {
-            padding: 0 0 0 0;
-            width: 100px;
-            height: 100px;
-            margin: auto;
-            line-height: 100px;
-            font-size: 40px;
-            color: white;
-        }
-
-        .info-profile {
-            padding: 10px 0 0 0;
-            text-align: center;
-            .name {
-                -webkit-font-smoothing: antialiased;
-                text-rendering: optimizeLegibility;
-                text-size-adjust: none;
-                user-select: text;
-                font-family: "Roboto", "Helvetica Neue", sans-serif;
-                -webkit-box-direction: normal;
-                color: #333333;
-                font-weight: 500;
-                font-size: 17px;
-                box-sizing: border-box;
-                -webkit-tap-highlight-color: transparent;
-                display: block;
-                font-size: large;
-                font-weight: bold;
-            }
-        }
+    .image-profile {
+        padding: 0 0 0 0;
+        width: 100px;
+        height: 100px;
+        margin: auto;
+        line-height: 100px;
+        font-size: 40px;
+        color: white;
     }
 
+    .member-profile {
+        padding: 0 0 0 0;
+        width: 55px;
+        height: 55px;
+        margin: auto;
+        line-height: 57px;
+        font-size: 25px;
+        color: white;
+        position: relative;
+    }
 
-    #members-list{
-        ion-item{
-            display: flex;
-            height: 60px;
+    .user-online {
+        height: 11px;
+        width: 11px;
+        border-radius: 50%;
+        position: absolute;
+        top: 44px;
+        left: 40px;
+        border: 0.5px solid #fff;
+    }
 
-            .status-icon-container{
-                position: absolute;
-                top: 35px;
-                left: 45px;
-                background-color: white;
-                height: 17px;
-                width: 17px;
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-        
-                &.mobile{
-                    top: 30px;
-                    left: 50px;
-                }
-            
-                svg{
-                    fill: #f44336;
-            
-                    &.online{
-                        fill: #4caf50;
-                    }
-                }
-            }
+    .user-presence {
+        position: absolute;
+        top: 88px;
+        height: 12px;
+        left: calc(50% + 30px);
+        width: 100px;
+    }
 
+    .info-profile {
+        padding: 10px 0 0 0;
+        text-align: center;
+        .name {
+            -webkit-font-smoothing: antialiased;
+            text-rendering: optimizeLegibility;
+            text-size-adjust: none;
+            user-select: text;
+            font-family: "Roboto", "Helvetica Neue", sans-serif;
+            -webkit-box-direction: normal;
+            color: #333333;
+            font-weight: 500;
+            font-size: 17px;
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+            display: block;
+            font-size: large;
+            font-weight: bold;
         }
     }
 
-    
-
-    // .member-profile {
-    //     padding: 0 0 0 0;
-    //     width: 55px;
-    //     height: 55px;
-    //     margin: auto;
-    //     line-height: 57px;
-    //     font-size: 25px;
-    //     color: white;
-    //     position: relative;
-    // }
-
-    // .user-online {
-    //     height: 11px;
-    //     width: 11px;
-    //     border-radius: 50%;
-    //     position: absolute;
-    //     top: 44px;
-    //     left: 40px;
-    //     border: 0.5px solid #fff;
-    // }
-    
-
-    // .user-presence {
-    //     position: absolute;
-    //     top: 88px;
-    //     height: 12px;
-    //     left: calc(50% + 30px);
-    //     width: 100px;
-    // }
-
-    
-
-    // .info-group-member-email {
-    //     font-size: 13px;
-    //     margin-top: 2px;
-    //     white-space: nowrap;
-    //     width: 205px;
-    //     overflow: hidden;
-    //     text-overflow: ellipsis;
-    // }
+    .info-group-member-email {
+        font-size: 13px;
+        margin-top: 2px;
+        white-space: nowrap;
+        width: 205px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }

package/src/app/components/conversation-info/info-group/info-group.component.ts

@@ -23,7 +23,6 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
   // objectKeys = Object.keys;
 
   @Input() groupDetail: any;
-  @Input() isMobile: boolean;
   // @Input() member_array: any;
   public displaySkeletonScreen: boolean = true;
   public member_array: any

package/src/app/components/{conversations-list/header-conversations-list/header-conversations-list.component.html → ddp-header/ddp-header.component.html}

@@ -1,6 +1,6 @@
-<ion-toolbar [class.mobile]="isMobile">
+<ion-toolbar style="height:60px" [ngClass]="{'bottom-border-on-mobile':IS_ON_MOBILE_DEVICE === true }">
 
-  <ion-buttons *ngIf="isMobile || supportMode === false" slot="start" style="height:60px">
+  <ion-buttons *ngIf="IS_ON_MOBILE_DEVICE === true || supportMode === false" slot="start" style="height:60px">
     <ion-button ion-button icon-only fill="clear" (click)="onOpenProfileInfo($event)">
       <ion-icon slot="icon-only" name="reorder-three-outline"></ion-icon>
     </ion-button>
@@ -11,7 +11,7 @@
     <div *ngIf="numberOpenConv > 0" class="number-open-conv">({{numberOpenConv}})</div>
   </ion-title>
 
-  <ion-buttons slot="start" *ngIf="isMobile">
+  <ion-buttons slot="start">
     <ion-button *ngIf="sound_btn==='enabled'" ion-button fill="clear" (click)="onSoundChangeFN('disabled')">
       <ion-icon slot="icon-only" name="volume-high-outline" ></ion-icon>
     </ion-button>

package/src/app/components/{conversations-list/header-conversations-list/header-conversations-list.component.scss → ddp-header/ddp-header.component.scss}

@@ -1,19 +1,3 @@
-
-ion-toolbar {
-    height: var(--header-height);   
-    &:not(.mobile){
-        --background: var(--list-bkg-color);
-        border: none;
-    }
-    &.mobile{
-        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    }
-
-    ion-button{
-        --color: var(--basic-blue);
-    }
-}
-
 ion-title img {
     height: 30px;
 }
@@ -39,4 +23,8 @@ ion-title img {
 
 .header-logo {
     margin-top: 5px;
+}
+
+.bottom-border-on-mobile {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

package/src/app/components/{navbar/navbar.component.spec.ts → ddp-header/ddp-header.component.spec.ts}

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { NavbarComponent } from './navbar.component';
+import { DdpHeaderComponent } from './ddp-header.component';
 
-describe('NavbarComponent', () => {
-  let component: NavbarComponent;
-  let fixture: ComponentFixture<NavbarComponent>;
+describe('DdpHeaderComponent', () => {
+  let component: DdpHeaderComponent;
+  let fixture: ComponentFixture<DdpHeaderComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ NavbarComponent ],
+      declarations: [ DdpHeaderComponent ],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(NavbarComponent);
+    fixture = TestBed.createComponent(DdpHeaderComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

package/src/app/components/{conversations-list/header-conversations-list/header-conversations-list.component.ts → ddp-header/ddp-header.component.ts}

@@ -4,22 +4,22 @@ import { EventsService } from 'src/app/services/events-service'
 import { CreateTicketPage } from 'src/app/pages/create-ticket/create-ticket.page'
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service'
 @Component({
-  selector: 'header-conversations-list',
-  templateUrl: './header-conversations-list.component.html',
-  styleUrls: ['./header-conversations-list.component.scss'],
+  selector: 'app-ddp-header',
+  templateUrl: './ddp-header.component.html',
+  styleUrls: ['./ddp-header.component.scss'],
 })
-export class HeaderConversationsList implements OnInit {
+export class DdpHeaderComponent implements OnInit {
   
   @Input() numberOpenConv: number
   @Input() supportMode: boolean
   @Input() archived_btn: boolean
   @Input() writeto_btn: boolean
-  @Input() sound_btn: string;
-  @Input() isMobile: boolean;
+  @Input() sound_btn: string
   @Output() onSoundChange = new EventEmitter<string>()
   @Output() openContactsDirectory = new EventEmitter()
   @Output() openProfileInfo = new EventEmitter()
 
+  IS_ON_MOBILE_DEVICE: boolean
   createTicketModal = null
   public translationMap: Map<string, string>;
   tooltipOptions = {
@@ -36,7 +36,7 @@ export class HeaderConversationsList implements OnInit {
     public modalController: ModalController,
     private translateService: CustomTranslateService,
   ) {
-
+    this.isOnMobileDevice();
     this.translations();
     // this.listenToCloseCreateTicketModal() // published from create ticket page
   }
@@ -68,6 +68,15 @@ export class HeaderConversationsList implements OnInit {
   //   }
   // }
 
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true
+    }
+    // console.log('[DDP-HEADER] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE
+  }
+
   ngOnInit() {
     // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
   }