@chat21/chat21-ionic 3.0.97-rc.1 → 3.0.97-rc.3

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.scss

@@ -79,11 +79,13 @@
         color: var(--basic-blue);
     }
     .buttons-left {
-        position: absolute;
-        top: 2px;
-        right: 0;
+        // position: absolute;
+        // top: 2px;
+        // right: 0;
         // width: 30px;
         // height: 100%;
+        display: flex;
+        align-items: flex-end;
         .attach-button {
             font-size: 24px;
             position: absolute;
@@ -98,9 +100,10 @@
     }
     .buttons-right {
         display: flex;
-        position: absolute;
-        top: 2px;
-        right: 0;
+        align-items: flex-end;
+        // position: absolute;
+        // top: 2px;
+        // right: 0;
         // width: 30px;
         // height: 100%;
         .send-button {
@@ -126,8 +129,8 @@
         // margin: 0 70px;
         // width: calc(100% - 100px);
         // ----- new after adding emoji picker
-        margin: 0 108px;
-        width: calc(100% - 140px);
+        // margin: 0 108px;
+        width: 100%; //calc(100% - 140px);
         ion-textarea {
             // border-radius: 4px;
             border-radius: 20px; // NK edited
@@ -253,7 +256,7 @@
 .emoji-mart-desktop {
     position: absolute;
     bottom: 53px;
-    right: -246px;
+    // right: -246px;
 }
 .emoji-mart-mobile {
     position: absolute;

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -19,6 +19,7 @@ import { UploadModel } from 'src/chat21-core/models/upload';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { EventsService } from 'src/app/services/events-service';
+import { isOnMobileDevice } from 'src/chat21-core/utils/utils';
 
 
 @Component({
@@ -75,16 +76,6 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   section: string= 'chat'
 
-  tooltipOptions = {
-    'show-delay': 500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
-
   showEmojiPicker: boolean = false; //To show/hide emoji picker
   addWhiteSpaceBefore: boolean;
   emojiPerLine: number = 9
@@ -139,20 +130,9 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
 
     this.listenToNewCannedResponseCreated()
-    this.isOnMobileDevice()
+    this.IS_ON_MOBILE_DEVICE = isOnMobileDevice()
   }
 
-  isOnMobileDevice() {
-    this.IS_ON_MOBILE_DEVICE = false;
-    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
-      this.IS_ON_MOBILE_DEVICE = true;
-      this.emojiPerLine = 7
-    }
-    // this.logger.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
-    return this.IS_ON_MOBILE_DEVICE;
-  }
-
-
   ngOnChanges(changes: SimpleChanges) {
     if (this.translationMap) {
       // this.LONG_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG')
@@ -166,7 +146,6 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     if (this.dropEvent) {
       this.presentModal(this.dropEvent)
     }
-
   }
 
   // ngAfterViewInit() {
@@ -423,7 +402,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
         if (form && form.text && form.text.trim() !== '') {
           const text = '**' + form.subject + '**\r\n' + form.text
           const attributes = {
-            channel: TYPE_MSG_EMAIL
+            offline_channel: TYPE_MSG_EMAIL
           }
           this.eventSendMessage.emit({ msg: text, type: TYPE_MSG_TEXT, metadata: null, attributes: attributes });
         }

package/src/app/components/conversation-info/advanced-info-accordion/advanced-info-accordion.component.html

@@ -12,19 +12,6 @@
 <div id="{{'advanced-info-panel_'+ teammateID}}" class="advanced-info-panel">
   <div *ngFor="let attr of advancedAttributes">
 
-    <!-- <span [tooltip]="HtmlContent" [options]="tooltipOptions" placement="top" content-type="template">
-      <span class="material-icons icon-with-background">
-        {{ attr.icon }}
-      </span>
-    </span>
-    <ng-template #HtmlContent>
-      <span>{{ attr.key }}</span>
-    </ng-template>
-    {{ attr.value}} -->
-
-
-
-
     <div class="attributes-wpr">
       <div class="attributes-icon-wpr-1">
         <div class="attributes-icon-wpr-2">

package/src/app/components/conversation-info/advanced-info-accordion/advanced-info-accordion.component.ts

@@ -13,15 +13,6 @@ export class AdvancedInfoAccordionComponent implements OnInit, OnChanges {
   @Input() translationMap: Map<string, string>;
   public teammateID: string;
 
-  tooltipOptions = {
-    'show-delay': 100,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
   private logger: LoggerService = LoggerInstance.getInstance()
   
   constructor() { }

package/src/app/components/conversation-info/conversation-info.module.ts

@@ -1,13 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { TooltipModule } from 'ng2-tooltip-directive';
 
 
 @NgModule({
   declarations: [],
   imports: [
     CommonModule,
-    TooltipModule,
   ]
 })
 export class ConversationInfoModule { }

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

@@ -27,7 +27,6 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 
 
 export class InfoContentComponent implements OnInit {
-  @Input() openInfoConversation: boolean;
   // @Input() member: UserModel;
   @Input() loggedUser: UserModel
   @Input() tenant: string

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

@@ -30,17 +30,6 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
   private unsubscribe$: Subject<any> = new Subject<any>();
 
 
-  tooltip: HTMLElement;
-  tooltipOptions = {
-    'show-delay': 100,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
-
   private logger: LoggerService = LoggerInstance.getInstance();
   route: string;
   previousUrl: string;

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

@@ -23,26 +23,20 @@
 
   <ion-buttons slot="end">
     
-    <ion-button ion-button fill="clear" (click)="presentCreateTicketModal()"
-      tooltip="{{translationMap?.get('CreateTicket')}}" 
-      [options]="tooltipOptions" 
-      placement="bottom">
+    <ion-button *ngIf="!isMobile" ion-button fill="clear" (click)="presentCreateTicketModal()"
+      tooltip="{{translationMap?.get('CreateTicket')}}" placement="bottom">
       <ion-icon slot="icon-only" name="ticket-outline"></ion-icon>
     </ion-button>
 
     <ion-button *ngIf="archived_btn" ion-button fill="clear" (click)="onClickArchivedConversation()" 
-      tooltip="{{translationMap?.get('ViewArchivedConversations')}}" 
-      [options]="tooltipOptions" 
-      placement="bottom">
+      tooltip="{{translationMap?.get('ViewArchivedConversations')}}" placement="bottom">
       <ion-icon slot="icon-only" name="file-tray-full-outline"></ion-icon>
       <!-- <ion-icon name="file-tray-stacked-outline"></ion-icon> -->
       <!-- <ion-icon name="file-tray-full-outline"></ion-icon> -->
     </ion-button>
 
     <ion-button *ngIf="writeto_btn" ion-button fill="clear" (click)="onOpenContactsDirectory($event)"
-      tooltip="{{translationMap?.get('ViewContactsList')}}" 
-      [options]="tooltipOptions" 
-      placement="bottom">
+      tooltip="{{translationMap?.get('ViewContactsList')}}" placement="bottom">
       <ion-icon slot="icon-only" name="create-outline"></ion-icon>
       <!-- <ion-icon slot="icon-only" name="people-outline"></ion-icon> -->
     </ion-button>

package/src/app/components/conversations-list/header-conversations-list/header-conversations-list.component.ts

@@ -22,15 +22,7 @@ export class HeaderConversationsList implements OnInit {
 
   createTicketModal = null
   public translationMap: Map<string, string>;
-  tooltipOptions = {
-    'show-delay': 0,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 0
-  };
+
   constructor(
     public events: EventsService,
     public modalController: ModalController,

package/src/app/components/project-item/project-item.component.html

@@ -2,8 +2,7 @@
 
     <!-- <div class="pinned-project">Pinned project </div> margin-left:4px -->
     <div *ngIf="project?.id_project?.status !== 0" class="flex-container-project-for-panel project-row">
-      <div class="flex-child-left" [tooltip]="conversationsInQueueOnProjectName" [options]="tooltipOptions" placement="top"
-        content-type="template" (click)="openUnservedConvs()">
+      <div class="flex-child-left" tooltip="({{ unservedRequestCount }}) {{translationMap?.get('UnassignedConversations') }}" placement="top" (click)="openUnservedConvs()">
         <div class="unassigned-notifications-icon-wpr">
           <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon">
             <g class="style-scope yt-icon">
@@ -23,8 +22,7 @@
 
 
       <div class="flex-child-right">
-        <div class="project-name-project-for-panel" [tooltip]="conversationsInQueueOnProjectName"
-          [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
+        <div class="project-name-project-for-panel" tooltip="({{ unservedRequestCount }}) {{translationMap?.get('UnassignedConversations') }}" placement="top" (click)="openUnservedConvs()">
           <div class="unassigned_label"> <a>{{ translationMap?.get('UnassignedConversations') }}</a> </div>
         </div>
         

package/src/app/components/project-item/project-item.component.ts

@@ -40,16 +40,7 @@ export class ProjectItemComponent implements OnInit {
   window_width_is_60: boolean;
   newInnerWidth: any;
   avaialble_status_for_tooltip: string;
-  tooltipOptions = {
-    'show-delay': 500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
-  IS_ON_MOBILE_DEVICE: boolean;
+  
   constructor(
     public wsService: WebsocketService,
     public appStorageService: AppStorageService,
@@ -68,7 +59,6 @@ export class ProjectItemComponent implements OnInit {
     this.translations();
     this.listenToPostMsgs();
     this.onInitWindowWidth();
-    this.isOnMobileDevice();
   }
 
   ngOnDestroy() {
@@ -78,14 +68,6 @@ export class ProjectItemComponent implements OnInit {
 
   }
 
-  isOnMobileDevice() {
-    this.IS_ON_MOBILE_DEVICE = false;
-    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
-      this.IS_ON_MOBILE_DEVICE = true;
-    }
-    return this.IS_ON_MOBILE_DEVICE;
-  }
-
   openUnservedConvs() {
     this.openUnsevedConvsEvent.emit({event: 'notificationsorprjctbtn', data: this.unservedConversations})
   }

package/src/app/components/sidebar-user-details/sidebar-user-details.component.html

@@ -74,7 +74,7 @@
         <ng-select style="text-align: left;" 
             (change)="changeAvailabilityStateInUserDetailsSidebar(selectedStatus)" 
             [(ngModel)]="selectedStatus" 
-            class="teammate-status-in-drawer" 
+            class="teammate-status-in-drawer sidebar" 
             [items]="teammateStatus" 
             bindLabel="name" bindValue="id"
             [clearable]="false"

package/src/app/directives/tooltip.directive.spec.ts

@@ -0,0 +1,20 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+import { async, TestBed } from '@angular/core/testing';
+import { TooltipDirective } from './tooltip.directive';
+
+describe('TooltipNewDirective', () => {
+  let el: ElementRef;
+  let renderer: Renderer2;
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ],
+      imports: [ElementRef, Renderer2]
+    }).compileComponents();
+
+  }));
+  
+  it('should create an instance', () => {
+    const directive = new TooltipDirective(el, renderer);
+    expect(directive).toBeTruthy();
+  });
+});

package/src/app/directives/tooltip.directive.ts

@@ -0,0 +1,134 @@
+import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
+import { isOnMobileDevice } from 'src/chat21-core/utils/utils';
+
+@Directive({
+  selector: '[tooltip]'
+})
+export class TooltipDirective {
+
+  @Input('tooltip') tooltipTitle: string;
+  @Input() placement: string;
+  @Input() delay: string;
+  tooltip: HTMLElement;
+  
+  offset = 10;
+  isMobile = isOnMobileDevice()
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  @HostListener('mouseenter') onMouseEnter() {
+    if (!this.tooltip && !this.isMobile) { this.show(); }
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    if (this.tooltip) { this.hide(); }
+  }
+
+  show() {
+    this.create();
+    this.setPosition();
+    this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
+  }
+
+  hide() {
+    this.renderer.removeClass(this.tooltip, 'ng-tooltip-show');
+    window.setTimeout(() => {
+      this.renderer.removeChild(document.body, this.tooltip);
+      this.tooltip = null;
+    }, +this.delay);
+  }
+
+  create() {
+    this.tooltip = this.renderer.createElement('span');
+
+    this.renderer.appendChild(
+      this.tooltip,
+      this.renderer.createText(this.tooltipTitle) // textNode
+    );
+
+    this.renderer.appendChild(document.body, this.tooltip);
+    // this.renderer.appendChild(this.el.nativeElement, this.tooltip);
+
+    this.renderer.addClass(this.tooltip, 'ng-tooltip');
+    this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
+
+    // delay 설정
+    this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`);
+  }
+
+  setPosition() {
+    const hostPos = this.el.nativeElement.getBoundingClientRect();
+    const tooltipPos = this.tooltip.getBoundingClientRect();
+
+    const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+
+    let top, left;
+
+    if (this.placement === 'top') {
+      top = hostPos.top - tooltipPos.height - this.offset;
+      left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+    }
+
+    if (this.placement === 'bottom') {
+      top = hostPos.bottom + this.offset;
+      left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+    }
+
+    if (this.placement === 'left') {
+      top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+      left = hostPos.left - tooltipPos.width - this.offset;
+    }
+
+    if (this.placement === 'right') {
+      top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+      left = hostPos.right + this.offset;
+    }
+
+    this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
+    this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
+  }
+
+
+
+  // @Input() tooltip2: any; // The text for the tooltip to display
+  // @Input() delay? = 190; // Optional delay input, in ms
+
+  // private myPopup;
+  // private timer;
+
+
+  // ngOnDestroy(): void {
+  //   if (this.myPopup) { this.myPopup.remove() }
+  // }
+
+  // @HostListener('mouseenter') onMouseEnter() {
+  //   this.timer = setTimeout(() => {
+  //     let x = this.el.nativeElement.getBoundingClientRect().left + this.el.nativeElement.offsetWidth / 2; // Get the middle of the element
+  //     let y = this.el.nativeElement.getBoundingClientRect().top + this.el.nativeElement.offsetHeight + 6; // Get the bottom of the element, plus a little extra
+  //     this.createTooltipPopup(x, y);
+  //   }, this.delay)
+  // }
+
+  // @HostListener('mouseleave') onMouseLeave() {
+  //   if (this.timer) clearTimeout(this.timer);
+  //   if (this.myPopup) { this.myPopup.remove() }
+  // }
+
+  // private createTooltipPopup(x: number, y: number) {
+  //   let popup = document.createElement('div');
+  //   popup.innerHTML = this.tooltip2;
+  //   popup.setAttribute("class", "tooltip-container");
+  //   popup.style.top = y.toString() + "px";
+  //   popup.style.left = x.toString() + "px";
+  //   document.body.appendChild(popup);
+  //   this.myPopup = popup;
+  //   setTimeout(() => {
+  //     if (this.myPopup) this.myPopup.remove();
+  //   }, 5000); // Remove tooltip after 5 seconds
+  // }
+
+
+}

package/src/app/pages/authentication/login/login.page.ts

@@ -60,7 +60,7 @@ export class LoginPage implements OnInit {
 
   /** */
   initialize() {
-    this.companyLogoBlackUrl = 'assets/chat21-logo.svg';
+    this.companyLogoBlackUrl = 'assets/chat21-logo.png';
     this.companyName = 'Tiledesk'; // this.chatManager.getTenant();
     this.translations();
     this.events.subscribe('sign-in', this.signIn);

package/src/app/pages/conversation-detail/conversation-detail.module.ts

@@ -3,7 +3,6 @@ import { BubbleMessageComponent } from './../../chatlib/conversation-detail/mess
 import { CannedResponseComponent } from './../../components/canned-response/canned-response.component';
 import { TruncatePipe } from './../../directives/truncate.pipe';
 import { IonConversationDetailComponent } from '../../chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component';
-import { TooltipModule } from 'ng2-tooltip-directive';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -32,7 +31,6 @@ import { InfoGroupComponent } from 'src/app/components/conversation-info/info-gr
 
 
 import { SharedModule } from 'src/app/shared/shared.module';
-import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
 import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 
@@ -42,7 +40,6 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
     CommonModule,
     FormsModule,
     IonicModule,
-    TooltipModule,
     ConversationDetailPageRoutingModule,
     ScrollbarThemeModule,
     PickerModule,
@@ -54,7 +51,6 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
       },
     }),
     SharedModule,
-    NgxLinkifyjsModule,
   ],
   // entryComponents: [MessageTextAreaComponent],
   entryComponents: [ BubbleInfoPopoverComponent],

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

@@ -45,7 +45,8 @@
     [conversationAvatar]="conversationAvatar"
     [liveInfo]="liveInfo" 
     [translationsMap]="translationsHeaderMap"
-    [conv_type]="conv_type">
+    [conv_type]="conv_type"
+    (onOpenInfoConversation)="onOpenCloseInfoConversation($event)">
   </app-header-conversation-detail>
 
   <ion-content id="conv-details" [class.mobile]="isMobile">
@@ -250,8 +251,7 @@
 
         <ion-col id="chat21-info-conversation" [class.mobile]="isMobile" [class.open]="openInfoConversation"
         [ngClass]="{'info-convs-apps-sidebar-wide': appsidebarIsWide === true}">
-          <app-info-content 
-            [openInfoConversation]="openInfoConversation" 
+          <app-info-content  
             [loggedUser]="loggedUser" 
             [tenant]="tenant" 
             [groupDetail]="groupDetail"