@chat21/chat21-ionic 3.0.80 → 3.0.81-rc.2

package/src/app/components/{conversation-detail/bubble-my-message/bubble-my-message.component.spec.ts → conversations-list/header-conversations-list/header-conversations-list.component.spec.ts}

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { BubbleMyMessageComponent } from './bubble-my-message.component';
+import { HeaderConversationsList } from './header-conversations-list.component';
 
-describe('BubbleMineMessageComponent', () => {
-  let component: BubbleMyMessageComponent;
-  let fixture: ComponentFixture<BubbleMyMessageComponent>;
+describe('ConversationsListHeader', () => {
+  let component: HeaderConversationsList;
+  let fixture: ComponentFixture<HeaderConversationsList>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ BubbleMyMessageComponent ],
+      declarations: [ HeaderConversationsList ],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(BubbleMyMessageComponent);
+    fixture = TestBed.createComponent(HeaderConversationsList);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

package/src/app/components/{ddp-header/ddp-header.component.ts → conversations-list/header-conversations-list/header-conversations-list.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: 'app-ddp-header',
-  templateUrl: './ddp-header.component.html',
-  styleUrls: ['./ddp-header.component.scss'],
+  selector: 'header-conversations-list',
+  templateUrl: './header-conversations-list.component.html',
+  styleUrls: ['./header-conversations-list.component.scss'],
 })
-export class DdpHeaderComponent implements OnInit {
+export class HeaderConversationsList implements OnInit {
   
   @Input() numberOpenConv: number
   @Input() supportMode: boolean
   @Input() archived_btn: boolean
   @Input() writeto_btn: boolean
-  @Input() sound_btn: string
+  @Input() sound_btn: string;
+  @Input() isMobile: boolean;
   @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 DdpHeaderComponent implements OnInit {
     public modalController: ModalController,
     private translateService: CustomTranslateService,
   ) {
-    this.isOnMobileDevice();
+
     this.translations();
     // this.listenToCloseCreateTicketModal() // published from create ticket page
   }
@@ -68,15 +68,6 @@ export class DdpHeaderComponent 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)
   }

package/src/app/components/conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.html

@@ -0,0 +1,12 @@
+<ion-toolbar [class.mobile]="isMobile">
+  
+  <ion-buttons slot="start">
+    <ion-button ion-button (click)="onBackButtonHandler()">
+      <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+
+  <ion-title> {{headerTitle}}</ion-title>
+
+</ion-toolbar>
+

package/src/app/components/conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.scss

@@ -0,0 +1,14 @@
+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);
+    }
+}

package/src/app/components/{conversation-detail/option-header/option-header.component.spec.ts → conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.spec.ts}

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

package/src/app/components/{conversation-detail/option-header/option-header.component.ts → conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.ts}

@@ -2,13 +2,14 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 
 @Component({
-  selector: 'app-option-header',
-  templateUrl: './option-header.component.html',
-  styleUrls: ['./option-header.component.scss'],
+  selector: 'header-conversations-list-archived',
+  templateUrl: './header-conversations-list-archived.component.html',
+  styleUrls: ['./header-conversations-list-archived.component.scss'],
 })
-export class OptionHeaderComponent implements OnInit {
+export class HeaderConversationsListArchived implements OnInit {
 
   @Input() headerTitle: string
+  @Input() isMobile: boolean;
   @Output() onBackButton = new EventEmitter<boolean>();
   static UserPresenceComponent: any[] | any;
 

package/src/app/components/navbar/navbar.component.html

@@ -0,0 +1,103 @@
+<ion-navbar class="navbar navbar-absolute">
+  <div class="container-fluid">
+      <!-- <div class="navbar-left">
+        left
+      </div> -->
+      <div class="navbar-right">
+        <!-- test site -->
+        <ng-container *ngIf="project">
+          <button class="btn simulate-visitor-btn btn-success-no-boxshadow " (click)="testWidgetPage()">
+            <i class="material-icons" style="padding-top: 0px;font-size: 24px;">play_arrow</i>
+            {{translationsMap.get('NAVBAR.SIMULATE_VISITOR')}}
+          </button>
+        </ng-container>
+
+        <!--  ------ PROJECTS  DROPDOWN ------ -->
+        <ng-container *ngIf="project">
+            <li>
+              <button class="btn dropdown-toggle project-dropdown" (click)="openDropdownProjects = !openDropdownProjects">
+                <i class="material-icons" style="margin-right: 3px;">keyboard_arrow_down</i>
+                <span style="text-transform: none"> {{ project?.id_project?.name }} </span>
+              </button>
+              <div class="ripple-container"></div>
+              <div id="navbar_dropdown" class="dropdown-menu" [ngClass]="{'open': openDropdownProjects}">
+                
+                <!--  PROJECT SETTINGS  -->
+                <!-- <li *ngIf="USER_ROLE !== 'agent'">
+                  <a (click)="onClickDropdownOption('projectSettings')">
+                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">settings</i>
+                    {{translationsMap?.get('NAVBAR.PROJECT_SETTINGS')}}
+                  </a>
+                </li> -->
+  
+                <!--  ALL PROJECTS -->
+                <li (click)="onClickDropdownOption('allProjects')">
+                  <a style="cursor: pointer">
+                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">view_list</i>
+                    {{translationsMap?.get('NAVBAR.VIEW_ALL_PROJECTS')}}
+                  </a>
+                </li>
+  
+                <!--  ADD PROJECT -->
+                <li id="navbar_create_prjct" *ngIf="MT === true" (click)="onClickDropdownOption('addProject')">
+                  <a style="cursor: pointer">
+                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">add_circle_outline </i>
+                    {{translationsMap?.get('NAVBAR.ADD_PROJECT')}}
+                  </a>
+                </li>
+  
+                <li class="divider"></li>
+  
+                <!--  RECENT PROJECTS -->
+                <li>
+                  <span style="padding-left: 24px;font-size: 12px; color: rgb(118,149,165);font-weight: 400">
+                    {{translationsMap?.get('NAVBAR.RECENT_PROJECTS')}}
+                  </span>
+                </li>
+                <!-- 
+                ***** ngFor - reverse order of output using the index *****
+                Reverse() works in place. It means, it will change the original array. 
+                Slice without parameters returns a copy of projects, so original array, in this case, stays unchanged.  
+                let prjct of projects?.reverse()
+                -->
+                <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:0:5; let i=index" -->
+                <li *ngFor="let prjct of projects?.slice() | slice:0:5; let i=index" style="cursor: pointer">
+                  <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)"
+                    [ngClass]="{'li-selected' : prjct?.id_project?._id === project?.id_project?.id }">
+  
+                    <span> {{ prjct?.id_project?.name }} </span>
+                  </a>
+                </li>
+
+                <ng-container *ngIf="projects?.length > 5">
+                  <li class="divider"></li>
+                  <li>
+                    <span style="padding-left: 24px;font-size: 12px; color: rgb(118,149,165);font-weight: 400">
+                      {{translationsMap?.get('NAVBAR.OTHER_PROJECTS')}}
+                    </span>
+                  </li>
+    
+                  <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:5:10; let i=index" -->
+                  <li *ngFor="let prjct of projects?.slice() | slice:5:10; let i=index" style="cursor: pointer">
+                    <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)">
+                      {{ prjct?.id_project?.name }}
+                    </a>
+                  </li>
+                </ng-container>
+  
+              </div>
+            </li>
+        </ng-container>
+
+        <!--  Sound on / off -->
+        <ng-container *ngIf="project">
+          <button class="btn volume" style="cursor: pointer;" *ngIf="isSoundEnabled" (click)="onClickSound('disabled')">
+            <i class="material-icons">volume_up</i>
+          </button>
+          <button class="btn volume" style="cursor: pointer;" *ngIf="!isSoundEnabled" (click)="onClickSound('enabled')">
+            <i class="material-icons">volume_off</i>
+          </button>
+        </ng-container>
+      </div>
+  </div>
+</ion-navbar>

package/src/app/components/navbar/navbar.component.scss

@@ -0,0 +1,249 @@
+.navbar-absolute{
+    position: absolute;
+    width: calc(100%  - var(--sidebar-width));
+    margin-left: var(--sidebar-width);
+    padding-top: 5px;
+    z-index: 1;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #e7e7e7;
+    top: 0;
+
+    -webkit-font-smoothing: auto;
+}
+
+.navbar{
+    background-color: #fff;
+    color: #555;
+    min-height: var(--nav-bar-heigth);
+    transition: all 150ms ease 0s;
+}
+
+.container-fluid{
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+
+    width: 100%;
+}
+
+ion-navbar{
+    display: flex;
+    align-items: center;
+}
+
+.navbar-collapse{
+    border-top: none;
+    box-shadow: none;
+
+    padding-right: 15px;
+    padding-left: 15px;
+}
+
+.navbar-right{
+    float: right;
+
+    display: inline-flex;
+    align-items: center;
+}
+
+.navbar-left{
+    float: left;
+}
+
+.simulate-visitor-btn{
+    font-size: 12px;
+    padding: 0px 11px 0px 4px !important;
+    max-height: 24px;
+    border-radius: 30px;
+    font-family: 'Poppins';
+
+    box-shadow: unset!important;
+    text-transform: none!important;
+    background: #3ecf8e!important;
+    color: #fff;
+
+}
+
+.btn{
+    display: flex;
+    position: relative;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+
+    border: 1px solid transparent;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
+}
+
+
+.dropdown-toggle, .volume{
+    background-color: transparent;
+    color: inherit;
+
+    padding: 0px 15px;
+    font-weight: 400;
+}
+
+.project-dropdown {
+    max-width: 180px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 12px;
+}
+
+li{
+    position: relative;
+    display: block
+}
+
+.dropdown-menu {
+    border-radius: 3px;
+    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.26);
+
+    position: absolute;
+    top: 100%;
+    right: 0;
+    left: auto;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+}
+.dropdown-menu{
+    max-height: 240px;
+    overflow-y: auto;
+}
+.dropdown-menu:not(.open){
+    margin-top: -20px;
+    opacity: 0;
+    visibility: hidden;
+    display: block;
+}
+
+.dropdown-menu.open{
+    margin-top: 12px; //0;
+    opacity: 1;
+    visibility: visible;
+    display: block;
+    transition: all 150ms linear;
+}
+
+.dropdown-menu li {
+    position: relative;
+
+    .li-selected{
+        color: #4285f4;
+        background-color: #eee;
+    }
+}
+
+.dropdown-menu .divider{
+    background-color: rgba(0,0,0,.12);
+    margin: 5px 0;
+
+    height: 1px;
+    overflow: hidden;
+}
+
+.dropdown-menu li>a{
+    font-size: 13px;
+    padding: 10px 20px;
+    margin: 0 5px;
+    border-radius: 2px;
+    transition: all 150ms linear;
+
+    display: block;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap;
+    text-decoration: none;
+
+    cursor: pointer;
+
+    .material-icons {
+        vertical-align: middle;
+    }
+
+    &:hover{
+        background-color: #3ea9f5;
+        color: #fff;
+        box-shadow: 0 12px 20px -10px rgba(62, 169, 245, 0.28), 0 4px 20px 0 rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(62, 169, 245, 0.2);
+    }
+}
+
+
+.material-icons {
+    font-family: "Material Icons";
+    font-weight: 400;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "liga";
+
+    top: 0;
+    position: relative;
+    font-size: 20px;
+    vertical-align: middle;
+}
+
+.ripple-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: inherit;
+    pointer-events: none;
+
+    .disabled &{
+        display: none;
+    }
+}
+.ripple {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    margin-left: -10px;
+    margin-top: -10px;
+    border-radius: 100%;
+    background-color: #000; // fallback color
+    background-color: rgba(0,0,0,0.05);
+    transform: scale(1);
+    transform-origin: 50%;
+    opacity: 0;
+    pointer-events: none;
+}
+.ripple.ripple-on {
+    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+    opacity: 0.1;
+}
+.ripple.ripple-out {
+    transition: opacity 0.1s linear 0s !important;
+    opacity: 0;
+}
+
+
+

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

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