@chat21/chat21-ionic 3.0.82-rc.7 → 3.0.82

package/src/app/components/contacts-directory/contacts-directory.component.html

@@ -1,24 +1,28 @@
 
-<ion-searchbar id="contacts-searchbar" debounce="500" (ionInput)="onSearchInput($event)"></ion-searchbar>
-
-<ion-item button="true" lines="none" class="ion-no-padding" *ngFor="let user of contacts" (click)="goToChat(user)">
-  <div tabindex="0"></div>
-  <!-- <div [class.selected]="user.uid === uidUserSelected"></div> [style.background-color]="user.color"-->
-  <ion-avatar slot="start">
-    <div #avatarPlaceholder class="avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user.color + ')'}" [innerHTML]="user.avatar"></div>
-    <div *ngIf="user.imageurl" #avatarImage class="avatar-profile" [style.background-image]="'url(' + user.imageurl + ')'"></div>
-    <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
-    <div class="user-presence">
-      <app-presence
-      [isOnline]="user.online">
-      </app-presence>
-    </div>
-  </ion-avatar>
-  
-  <ion-label>
-    <h2>{{ user.fullname }}</h2>
-    <!-- <p>{{ user.uid }}</p> -->
-  </ion-label>
-  
-</ion-item>
+<ion-content padding>
+  <ion-searchbar id="contacts-searchbar" debounce="500" (ionInput)="onSearchInput($event)"></ion-searchbar>
+  <ion-list>
+    
+    <ion-item button="true" lines="none" class="ion-no-padding" *ngFor="let user of contacts" (click)="goToChat(user)">
+      <div tabindex="0"></div>
+      <!-- <div [class.selected]="user.uid === uidUserSelected"></div> [style.background-color]="user.color"-->
+      <ion-avatar slot="start">
+        <div #avatarPlaceholder class="avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user.color + ')'}" [innerHTML]="user.avatar"></div>
+        <div *ngIf="user.imageurl" #avatarImage class="avatar-profile" [style.background-image]="'url(' + user.imageurl + ')'"></div>
+        <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
+        <div class="user-presence">
+          <app-presence
+          [isOnline]="user.online">
+          </app-presence>
+        </div>
+      </ion-avatar>
+      
+      <ion-label>
+        <h2>{{ user.fullname }}</h2>
+        <!-- <p>{{ user.uid }}</p> -->
+      </ion-label>
+      
+    </ion-item>
 
+  </ion-list>
+</ion-content>

package/src/app/components/contacts-directory/contacts-directory.component.scss

@@ -1,24 +1,22 @@
 ion-item {
     cursor: pointer;
     height: 64px;
-    --min-height: 64px;
     position: relative;
     display: flex;
     text-decoration: none;
-    margin: 4px 5px;
+    padding-left: 8px;
+    padding-right: 8px;
     --padding-start: 0;
     --inner-padding-end: 0;
-    --background: transparent;
-    --background-hover: #000000 !important;
-    border-radius: var(--border-radius-item);
-    
     .selected {
+        border-radius: 10px;
+        padding-left: 8px;
+        padding-right: 8px;
         position: absolute;
         width: 100%;
         height: 100%;
         z-index:-1;
-        background: var(--list-bkg-color-selected);
-        border-right: 4px solid var(--basic-blue);
+        background-color: rgba(0, 0, 0, .05);
     }
     ion-avatar {
         position: relative;

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

@@ -0,0 +1,3 @@
+<!-- <div class="row-day">
+  <div class="header-day">{{messageDate | amTimeAgo}}</div>
+</div> -->

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

@@ -0,0 +1,21 @@
+.row-day {
+    padding: 0 10px;
+    text-align: center;
+    width: 100%;
+    margin-top: 15px;
+    margin-bottom: 5px;
+}
+.header-day {
+    background-color: var(--transparent);
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 12px;
+    padding-right: 12px;
+    vertical-align: middle;
+    border-radius: 13px;
+    font-size: 14px;
+    font-weight: bold;
+    color: var(--basic-gray);
+    display: inline-block;
+}
+

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

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

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

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

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

@@ -0,0 +1,54 @@
+<div class="message message-my" [class.first-message]="isFirstMessage" >
+ 
+  <div class="bubble-message" 
+    [class.image]="message.type == 'image'" 
+    [class.no-text]="!message.text" 
+    (mouseover)="showButtonInfo()">
+    <span class="buttonInfo" (click)="presentPopover($event, message)"> </span>
+    
+    <div *ngIf="message.type == 'image';" 
+    (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="message.type == 'file';" class="message-content message-content-text" 
+    [innerHTML]="urlify(message.metadata.src, message.metadata.name)"
+    ></div>
+    
+    <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)}}</div>
+      </ng-template>
+      <ng-template #contentNewTab>
+        <div class="message-content message-content-text" [innerHTML]="message.text"></div>
+      </ng-template>
+    <!-- </div> -->
+
+    </div>
+    
+    <div class="timestamp-message right">{{message.timestamp | date: 'H:mm'}}</div>
+  </div>
+
+  <div class="attribute-message">
+    <div class="status-message">
+      <span *ngIf="!message.status" class="material-icons">
+        <ion-icon name="time-outline"></ion-icon>
+      </span>
+      <span *ngIf="message.status==MSG_STATUS_SENT" class="material-icons">
+        <ion-icon name="checkmark-outline"></ion-icon>
+      </span>
+      <span *ngIf="message.status==MSG_STATUS_RETURN_RECEIPT" class="material-icons">
+        <ion-icon name="checkmark-done-outline"></ion-icon>
+      </span>
+    </div>
+  </div>
+  
+</div>

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

@@ -0,0 +1,98 @@
+.message {
+    .bubble-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;
+        }
+        &.no-text {
+            line-height: 0;
+            .message-content-image {
+                border-radius: 15px 6px 0px 15px;
+            }
+            .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: 2px;
+        right: 6px;
+        line-height: 15px;
+    }
+}
+.message-my {
+    width: 100%;
+    margin-top: 4px;
+    .message-content.message-content-text{
+        color: var(--white)!important;
+        padding: 5px 20px 5px 10px;
+    }
+        
+  
+    .bubble-message {
+        background-color: var(--bubble-blue);
+        color: white;
+        margin-right: 24px;
+        float: right;
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+    }
+    &.first-message {
+        margin-top: 10px;
+        .bubble-message {
+            border-top-right-radius: 12px;
+            border-bottom-right-radius: 0px;
+        }
+    }
+    .timestamp-message {
+        color: var(--white);
+    }
+    .attribute-message {
+        position: absolute;
+        width: 100%;
+        background-color: transparent;
+        bottom: 0;
+        right: 0;
+        .status-message {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 15px;
+            .material-icons {
+                font-size: 15px;
+                color: var(--basic-blue);
+                position: absolute;
+                bottom: 4px;
+                right: 2px;
+            }
+        }
+    }
+}

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

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

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="bubble-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 {
+    .bubble-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;
+            .bubble-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;
+                .bubble-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();
+  });
+});