@chat21/chat21-ionic 2.0.13 → 3.0.5-9.2

package/src/app/components/conversation-detail/bubble-my-message/bubble-my-message.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BubbleMyMessageComponent } from './bubble-my-message.component';
+
+describe('BubbleMineMessageComponent', () => {
+  let component: BubbleMyMessageComponent;
+  let fixture: ComponentFixture<BubbleMyMessageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BubbleMyMessageComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BubbleMyMessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/components/conversation-detail/bubble-my-message/bubble-my-message.component.ts

@@ -0,0 +1,84 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { MessageModel } from 'src/chat21-core/models/message';
+
+
+
+// utils
+import {
+  popupUrl,
+  urlify,
+  isPopupUrl,
+  stripTags
+} from 'src/chat21-core/utils/utils';
+
+import {
+  getSizeImg
+} from 'src/chat21-core/utils/utils-message';
+
+import {
+  MSG_STATUS_SENT,
+  MSG_STATUS_RETURN_RECEIPT,
+  MAX_WIDTH_IMAGES
+} from 'src/chat21-core/utils/constants';
+
+@Component({
+  selector: 'app-bubble-my-message',
+  templateUrl: './bubble-my-message.component.html',
+  styleUrls: ['./bubble-my-message.component.scss'],
+})
+
+export class BubbleMyMessageComponent implements OnInit {
+  @Input() message: MessageModel;
+  @Input() isFirstMessage = true;
+
+  // utils functions
+  popupUrl = popupUrl;
+  urlify = urlify;
+  isPopupUrl = isPopupUrl;
+  stripTags = stripTags;
+
+  // utils-message functions
+  getSizeImg = getSizeImg;
+
+  MSG_STATUS_SENT = MSG_STATUS_SENT;
+  MSG_STATUS_RETURN_RECEIPT = MSG_STATUS_RETURN_RECEIPT;
+  MAX_WIDTH_IMAGES = MAX_WIDTH_IMAGES;
+  
+  constructor() { }
+
+  ngOnInit() {
+    // console.log('msg::::', JSON.stringify(this.message));
+  }
+
+  /** */
+  showButtonInfo() {
+    //console.log('showButtonInfo');
+  }
+
+  /**
+  * apro il menu delle opzioni 
+  * (metodo richiamato da html) 
+  * alla chiusura controllo su quale opzione ho premuto e attivo l'azione corrispondete
+  */
+ presentPopover(event, msg) {
+  // console.log('presentPopover');
+  // let popover = this.popoverCtrl.create(PopoverPage, { typePopup: TYPE_POPUP_DETAIL_MESSAGE, message: msg });
+  // popover.present({
+  //   ev: event
+  // });
+  //   /**
+  //    * 
+  //    */
+  //   popover.onDidDismiss((data: string) => {
+  //     console.log(" ********* data::: ", data);
+  //     if (data == 'logOut') {
+  //       //this.logOut();
+  //     }
+  //     else if (data == 'ProfilePage') {
+  //       if (this.chatManager.getLoggedUser()) {
+  //         this.navCtrl.push(ProfilePage);
+  //       }
+  //     }
+  //   });
+  }
+}

package/src/app/components/conversation-detail/bubble-others-message/bubble-others-message.component.html

@@ -0,0 +1,30 @@
+<div class="message message-other" [class.first-message]="isFirstMessage">
+                          
+  <span class="button-info" [ngClass]="message.uid" (click)="presentPopover($event, message)"></span>
+  
+  <div class="bobble-message" 
+    [class.image]="message.type == 'image'"
+    [class.no-text]="!message.text"
+    (mouseover)="showButtonInfo()">
+
+    <div *ngIf="isChannelTypeGroup(channelType)" class="message-sender-fullname" [style.color]="getColorBck(message.sender_fullname)">{{message.sender_fullname}}</div>
+    
+    <div *ngIf="isImage(message);" (click)="popupUrl(message.metadata.src,'windowName')">
+      <img class="message-content message-content-image" [src]="message.metadata.src" [width]="getSizeImg(message).width" [height]="getSizeImg(message).height" />
+    </div>
+    
+    <div *ngIf="isFile(message);" class="message-content message-content-text" [innerHTML]="urlify(message.metadata.src, message.metadata.name)"></div>  
+    
+    <!-- <div *ngIf="message.type == 'text'"> -->
+      <div *ngIf="isPopupUrl(message.text); then contentPopup else contentNewTab">here is ignored</div>
+      <ng-template #contentPopup>
+        <div style="text-decoration: underline; padding:8px; cursor: pointer;" (click)="popupUrl(message.text,'windowName')">{{stripTags(message.text)}}contentOther</div>
+      </ng-template>
+      <ng-template #contentNewTab>
+        <div class="message-content message-content-text" [innerHTML]="message.text"></div>
+      </ng-template>
+    <!-- </div> -->
+    <div class="timestamp-message right">{{message.timestamp | date: 'H:mm'}}</div>
+  </div>
+
+</div>

package/src/app/components/conversation-detail/bubble-others-message/bubble-others-message.component.scss

@@ -0,0 +1,83 @@
+.message {
+    .bobble-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;
+        padding: 0px;
+        .message-content-image {
+            border-radius: 15px 6px 0px 0px;
+        }
+        .message-content.message-content-text{
+            padding: 5px 20px 5px 10px;
+        }
+        &.no-text {
+            line-height: 0;
+            .message-content-image {
+                border-radius: 15px 6px 6px 0px;
+            }
+            .message-content.message-content-text{
+                padding: 0px;
+                height: 0px;
+            }
+            .timestamp-message {
+                background-color: #00000045;
+                padding: 4px;
+                color: white;
+            }
+        }
+        &.image{
+            max-width: 300px;
+        }
+    }
+    .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;
+            .bobble-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;
+                .bobble-message {
+                    border-top-left-radius: 12px;
+                    border-bottom-left-radius: 0px;
+                }
+                .message-sender-fullname {
+                    display: block;
+                }
+            }
+        }

package/src/app/components/conversation-detail/bubble-others-message/bubble-others-message.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BubbleOthersMessageComponent } from './bubble-others-message.component';
+
+describe('BubbleOthersMessageComponent', () => {
+  let component: BubbleOthersMessageComponent;
+  let fixture: ComponentFixture<BubbleOthersMessageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BubbleOthersMessageComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BubbleOthersMessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/components/conversation-detail/bubble-others-message/bubble-others-message.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { MessageModel } from 'src/chat21-core/models/message';
+// utils
+import {
+  popupUrl,
+  urlify,
+  isPopupUrl,
+  stripTags
+} from 'src/chat21-core/utils/utils';
+
+import {
+  getColorBck
+} from 'src/chat21-core/utils/utils-user';
+
+import {
+  isImage,
+  isFile,
+  isInfo,
+  getSizeImg,
+  isChannelTypeGroup
+} from 'src/chat21-core/utils/utils-message';
+
+import {
+  MSG_STATUS_SENT,
+  MSG_STATUS_RETURN_RECEIPT
+} from 'src/chat21-core/utils/constants';
+
+@Component({
+  selector: 'app-bubble-others-message',
+  templateUrl: './bubble-others-message.component.html',
+  styleUrls: ['./bubble-others-message.component.scss'],
+})
+
+
+export class BubbleOthersMessageComponent implements OnInit {
+  @Input() message: MessageModel;
+  @Input() isFirstMessage = true;
+  @Input() channelType: string;
+
+  // utils functions
+  popupUrl = popupUrl;
+  urlify = urlify;
+  isPopupUrl = isPopupUrl;
+  getColorBck = getColorBck;
+  stripTags = stripTags;
+
+  // utils-message functions
+  isImage = isImage;
+  isFile = isFile;
+  isInfo = isInfo;
+  getSizeImg = getSizeImg;
+  isChannelTypeGroup = isChannelTypeGroup;
+
+  MSG_STATUS_SENT = MSG_STATUS_SENT;
+  MSG_STATUS_RETURN_RECEIPT = MSG_STATUS_RETURN_RECEIPT;
+
+  constructor() { }
+
+  ngOnInit() {}
+
+  showButtonInfo() {
+  }
+
+  presentPopover(event, msg) {
+    // console.log('presentPopover');
+  }
+
+}

package/src/app/components/conversation-detail/bubble-system-message/bubble-system-message.component.html

@@ -0,0 +1,3 @@
+<div class="message-content-info-support">
+  <span>{{ messageText }}</span>
+</div>

package/src/app/components/conversation-detail/bubble-system-message/bubble-system-message.component.scss

@@ -0,0 +1,10 @@
+.message-content-info-support {
+    border-radius: 14px;
+    border: 0px solid var(--light-blue);
+    padding: 6px 10px;
+    background: var(--light-blue);
+    color: var(--basic-gray);
+    font-size: 12px;
+    margin: 10px auto 0;
+    max-width: 100%;
+}

package/src/app/components/conversation-detail/bubble-system-message/bubble-system-message.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BubbleSystemMessageComponent } from './bubble-system-message.component';
+
+describe('BubbleSystemMessageComponent', () => {
+  let component: BubbleSystemMessageComponent;
+  let fixture: ComponentFixture<BubbleSystemMessageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BubbleSystemMessageComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BubbleSystemMessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/components/conversation-detail/bubble-system-message/bubble-system-message.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-bubble-system-message',
+  templateUrl: './bubble-system-message.component.html',
+  styleUrls: ['./bubble-system-message.component.scss'],
+})
+export class BubbleSystemMessageComponent implements OnInit {
+  @Input() messageText = '';
+  constructor() { }
+
+  ngOnInit() {}
+
+}

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.html

@@ -0,0 +1,71 @@
+
+<ion-header no-border class="ion-no-border">
+  <ion-toolbar>
+    
+    <ion-buttons slot="start">
+      <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
+      <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
+      </ion-back-button> 
+    </ion-buttons>
+
+    <ion-title [class.info-open]="openInfoConversation || openInfoMessage">
+
+      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr">
+        <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
+        <div *ngIf="conversationAvatar" class="avatar-container" [ngClass] = "{ 'avatar-container-ios': platformName === 'ios' }">
+          <app-avatar-profile
+            [itemAvatar] = conversationAvatar
+          ></app-avatar-profile>
+        </div>
+        <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '63px' : ''  }" -->
+        <div *ngIf="isDirect" class="user-presence" [ngClass] = "{ 'user-presence-ios': platformName === 'ios' }">
+          <app-user-presence 
+            [idUser] = conversationAvatar.conversation_with
+            [translationMap] = translationMap
+            [borderColor] = borderColor
+            [fontColor] = fontColor>
+          </app-user-presence>
+        </div>
+
+        <div *ngIf="conversationAvatar" class="user-typing">
+          <app-user-typing 
+            [idConversation] = conversationAvatar.uid
+            [idCurrentUser] = idLoggedUser
+            [isDirect] = isDirect
+            [translationMap] = translationMap
+            [color] = fontColor
+            [membersConversation] = membersConversation
+          ></app-user-typing>
+        </div>
+
+      </div>
+      <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
+      <div *ngIf="conversationAvatar" class="tile-info-with" (click)="onOpenCloseInfoConversation()" 
+      [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' }">        
+        <!-- <span class="tile-username">{{ conversationAvatar.conversation_with_fullname }} </span> -->
+        <span class="tile-username">{{ conversation_with_fullname }} </span>
+        
+      </div>
+
+      <!-- <div *ngIf="conversationWithFullname" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        
+        <span class="tile-username">{{ conversationWithFullname }} </span>
+      </div> -->
+
+    </ion-title>
+    <!-- openInfoConversation  {{openInfoConversation}} -->
+    <ion-buttons slot="end">
+
+          <ion-button  *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+            <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+            <ion-icon slot="icon-only"  name="information-circle-outline"></ion-icon>
+            <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+          
+          </ion-button>
+          <ion-button  *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+            <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
+          </ion-button>
+
+    </ion-buttons>
+
+  </ion-toolbar>
+</ion-header>

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.scss

@@ -0,0 +1,161 @@
+
+ion-header {
+    --ion-background-color: #fff;
+    border-bottom-style: solid;
+    border-color: var(--light-gray);
+    border-bottom-width: thin;
+    ion-title {
+        text-align: left;
+        height: 40px;
+        width: 100%;
+    }
+    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;
+        // margin: -6px 0px 0 6px;
+        position: absolute;
+        margin: auto 0;
+        height: 100%;
+        top: 0;
+        left: 50px;
+        vertical-align: middle;
+        cursor: pointer;
+    }
+    .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;
+        color: var(--black);
+        margin: 0;
+        padding: 0;
+
+        color: #3c4858;
+        font-family: "Google Sans",sans-serif!important;
+        font-weight: 600;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -webkit-text-size-adjust: none;
+        -moz-text-size-adjust: none;
+        -ms-text-size-adjust: none;
+        text-size-adjust: none;
+        -webkit-user-select: text;
+        -moz-user-select: text;
+        -ms-user-select: text;
+        user-select: text;
+    }
+
+    .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);
+        }
+    }
+    
+    ion-buttons {
+        button {
+            max-width: 30px;
+            padding: 0;
+            margin-right: 20px;
+        }
+    }
+}
+
+.avatar-container {
+    background-color: #fff;
+    color: #fff;
+    text-align: center;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 0;
+    border-radius: 50%;
+    padding: 0px;
+    transform: translateX(-50%);
+    left: 20px;
+
+    border-color: #fff;
+    border-style: solid;
+    border-width: 0px;
+    line-height: 40px;
+    display: inline-block;
+}
+.user-presence {
+    position: absolute;
+    bottom: 0;
+    height: 12px;
+    left: 30px;
+    width: 100px;
+}
+.user-typing {
+    position: absolute;
+    left: 50px;
+    bottom: -3px;
+    padding: 0;
+    margin: 0;
+    height: 16px;
+    width: 140px;
+}
+
+.tile-info-with-ios {
+    left: 82px !important;
+}
+
+.user-presence-ios {
+    left: 63px;
+}
+
+.avatar-container-ios {
+    left: 55px;
+}

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { HeaderConversationDetailComponent } from './header-conversation-detail.component';
+
+describe('HeaderConversationDetailComponent', () => {
+  let component: HeaderConversationDetailComponent;
+  let fixture: ComponentFixture<HeaderConversationDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderConversationDetailComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HeaderConversationDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});