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

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.scss

@@ -1,11 +1,12 @@
 // @import '../../../../../sass/variables';
 
 div {
-    --backgroundColor: --basic-blue;
-    --textColor: --bck-msg-sent;
-    --hoverBackgroundColor: --bck-msg-sent;
-    --hoverTextColor: --basic-blue;
-    --buttonFontSize: --button-in-msg-font-size;
+    --bck-msg-sent: #62a8ea;
+    --col-msg-sent:#ffffff;
+    --light-white: #f7f7f7;
+    --black: #1a1a1a;
+    --gray: #aaaaaa;
+    --blue: rgb(42, 106, 193);
 }
 
 .button-in-msg {
@@ -14,32 +15,32 @@ div {
     max-width: 300px;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--textColor);
+    border: 1px solid var(--blue);
     border-radius: 20px;
     margin: 3px;
-    background: var(--backgroundColor);
+    background: transparent;
     overflow: hidden;
     font-family: 'Muli', sans-serif;
-    font-size: var(--buttonFontSize);
+    font-size: 15px;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--textColor);
+    color: var(--blue);
     line-height: 16px;
 }
 
 .action {
-    background: var(--backgroundColor);
+    background: white;
     transition: background-color .6s ease;
     &:focus,
     &:hover {
-        color: var(--hoverTextColor);
-        background:  var(--hoverBackgroundColor);
+        color: white;
+        background:  var(--blue);
         .icon-button-action {
             svg {
-                fill:  var(--hoverTextColor);
+                fill: white;
             }
         }
     }
@@ -79,12 +80,4 @@ div {
     //         height: 200px;
     //     }
     // }
-}
-
-
-.disabled {
-    // border: 1px solid #999999;
-    // background-color: #cccccc;
-    // color: #666666;
-    pointer-events: none;
-}
+}

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'chat-action-button-attachment',
@@ -8,36 +8,16 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChang
 export class ActionButtonComponent implements OnInit {
 
   @Input() button: any;
-  @Input() fontSize: string;
-  @Input() backgroundColor: string;
-  @Input() textColor: string;
-  @Input() hoverBackgroundColor: string;
-  @Input() hoverTextColor: string;
+  @Input() themeColor: string;
+  @Input() foregroundColor: string;
   @Output() onButtonClicked = new EventEmitter();
-
   public type: string = "action"
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
-  }
-
-  ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
-    if(this.fontSize) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonFontSize', this.fontSize);
-    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--backgroundColor', this.backgroundColor);
-    if(this.textColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--textColor', this.textColor);
-    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
-    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverTextColor', this.hoverTextColor);
-  }
-
-  onMouseOver(event){
-    // if(this.themeColor) this.elementRef.nativeElement.querySelector('.action').style.background = this.themeColor
-    // if(this.foregroundColor) this.elementRef.nativeElement.querySelector('.action').style.color = this.foregroundColor
-  }
-
-  onMouseOut(event){
-    // this.elementRef.nativeElement.querySelector('.action').style.color = '';
-    // this.elementRef.nativeElement.querySelector('.action').style.background = ''
+    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
+    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
   }
 
   actionButtonAction(){

package/src/app/chatlib/conversation-detail/message/buttons/link-button/link-button.component.html

@@ -1,5 +1,4 @@
-<div class="button-in-msg url" (click)="actionButtonUrl()" title="{{button?.value}}"
-(mouseover)="onMouseOver($event)" (mouseout)="onMouseOut($event)"> 
+<div class="button-in-msg url" (click)="actionButtonUrl()" title="{{button?.value}}"> 
   <span *ngIf="button?.target !== 'self'" class="icon-button-action">
     <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="12px" height="12px">
       <path d="M0 0h24v24H0z" fill="none"/>

package/src/app/chatlib/conversation-detail/message/buttons/link-button/link-button.component.scss

@@ -1,11 +1,12 @@
 // @import '../../../../../sass/variables';
 
 div {
-    --backgroundColor: --basic-blue;
-    --textColor: --bck-msg-sent;
-    --hoverBackgroundColor: --bck-msg-sent;
-    --hoverTextColor: --basic-blue;
-    --buttonFontSize: --button-in-msg-font-size;
+    --bck-msg-sent: #62a8ea;
+    --col-msg-sent:#ffffff;
+    --light-white: #f7f7f7;
+    --black: #1a1a1a;
+    --gray: #aaaaaa;
+    --blue: rgb(42, 106, 193);
 }
 
 .button-in-msg {
@@ -14,19 +15,19 @@ div {
     max-width: 300px;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--textColor);
+    border: 1px solid var(--blue);
     border-radius: 20px;
     margin: 3px;
-    background: var(--backgroundColor);
+    background: transparent;
     overflow: hidden;
     font-family: 'Muli', sans-serif;
-    font-size: var(--buttonFontSize);
+    font-size: 15px;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--textColor);
+    color: var(--blue);
     line-height: 16px;
 }
 
@@ -37,23 +38,23 @@ div {
         top: -1px;
         right: 1px;
         svg {
-            fill: var(--textColor);
+            fill: var(--blue);
         }
     }
     .icon-button-action-self{
         position: absolute;
         right: 1px;
         svg {
-            fill: var(--textColor);
+            fill: var(--blue);
         }
     }
     &:focus,
     &:hover {
-        color: var(--hoverTextColor);
-        background:  var(--hoverBackgroundColor);
+        color: white;
+        background:  var(--blue);
         .icon-button-action, .icon-button-action-self {
             svg {
-                fill: var(--hoverTextColor);
+                fill: white;
             }
         }
     }

package/src/app/chatlib/conversation-detail/message/buttons/link-button/link-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'chat-link-button-attachment',
@@ -8,35 +8,16 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChang
 export class LinkButtonComponent implements OnInit {
 
   @Input() button: any;
-  @Input() fontSize: string;
-  @Input() backgroundColor: string;
-  @Input() textColor: string;
-  @Input() hoverBackgroundColor: string;
-  @Input() hoverTextColor: string;
+  @Input() themeColor: string;
+  @Input() foregroundColor: string;
   @Output() onButtonClicked = new EventEmitter();
   public type: string = "url"
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
-  }
-
-  ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
-    if(this.fontSize) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--buttonFontSize', this.fontSize);
-    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--backgroundColor', this.backgroundColor);
-    if(this.textColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--textColor', this.textColor);
-    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
-    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--hoverTextColor', this.hoverTextColor);
-  }
-
-  onMouseOver(event){
-    // if(this.themeColor) this.elementRef.nativeElement.querySelector('.url').style.background = this.themeColor
-    // if(this.foregroundColor) this.elementRef.nativeElement.querySelector('.url').style.color = this.foregroundColor
-  }
-
-  onMouseOut(event){
-    // this.elementRef.nativeElement.querySelector('.url').style.color = '';
-    // this.elementRef.nativeElement.querySelector('.url').style.background = ''
+    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
+    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
   }
 
   actionButtonUrl(){

package/src/app/chatlib/conversation-detail/message/buttons/text-button/text-button.component.html

@@ -1,8 +1,3 @@
-<div class="button-in-msg text" 
-[ngClass]="{'disabled': isConversationArchived}"
-title="{{button?.value}}"
-(click)="actionButtonText()" 
-(mouseover)="onMouseOver($event)" 
-(mouseout)="onMouseOut($event)">
+<div class="button-in-msg text" (click)="actionButtonText()" title="{{button?.value}}">
   {{button?.value}}
 </div>

package/src/app/chatlib/conversation-detail/message/buttons/text-button/text-button.component.scss

@@ -1,10 +1,11 @@
 // @import '../../../../../sass/variables';
 div {
-    --backgroundColor: --basic-blue;
-    --textColor: --bck-msg-sent;
-    --hoverBackgroundColor: --bck-msg-sent;
-    --hoverTextColor: --basic-blue;
-    --buttonFontSize: --button-in-msg-font-size;
+    --bck-msg-sent: #62a8ea;
+    --col-msg-sent:#ffffff;
+    --light-white: #f7f7f7;
+    --black: #1a1a1a;
+    --gray: #aaaaaa;
+    --blue: rgb(42, 106, 193);
 }
 
 
@@ -14,19 +15,19 @@ div {
     max-width: 300px;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--textColor); //$blue
+    border: 1px solid var(--blue);
     border-radius: 20px;
     margin: 3px;
-    background: var(--backgroundColor);
+    background: transparent;
     overflow: hidden;
     font-family: 'Muli', sans-serif;
-    font-size: var(--buttonFontSize);
+    font-size: 15px;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--textColor); //$blue
+    color: var(--blue);
     line-height: 16px;
 }
 
@@ -35,11 +36,11 @@ div {
     transition: background-color .6s ease;
     &:focus,
     &:hover {
-        color: var(--hoverTextColor);
-        background: var(--hoverBackgroundColor);
+        color: white;
+        background: var(--blue);
         .icon-button-action {
             svg {
-                fill: --black;
+                fill: var(--black);
             }
         }
     }

package/src/app/chatlib/conversation-detail/message/buttons/text-button/text-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 
 @Component({
@@ -9,37 +9,16 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChang
 export class TextButtonComponent implements OnInit {
 
   @Input() button: any;
-  @Input() isConversationArchived: boolean;
-  @Input() fontSize: string;
-  @Input() backgroundColor: string;
-  @Input() textColor: string;
-  @Input() hoverBackgroundColor: string;
-  @Input() hoverTextColor: string;
+  @Input() themeColor: string;
+  @Input() foregroundColor: string;
   @Output() onButtonClicked = new EventEmitter();
-
   public type: string = "text"
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
-  }
-
-  ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
-    if(this.fontSize) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonFontSize', this.fontSize);
-    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--backgroundColor', this.backgroundColor);
-    if(this.textColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--textColor', this.textColor);
-    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
-    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--hoverTextColor', this.hoverTextColor);
-  }
-
-  onMouseOver(event){
-    // if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.text').style.background = this.textColor
-    // if(this.textColor) this.elementRef.nativeElement.querySelector('.text').style.color = this.backgroundColor
-  }
-
-  onMouseOut(event){
-    // this.elementRef.nativeElement.querySelector('.text').style.color = '';
-    // this.elementRef.nativeElement.querySelector('.text').style.background = ''
+    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
+    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
   }
 
   actionButtonText(){

package/src/app/chatlib/conversation-detail/message/frame/frame.component.html

@@ -1,9 +1,3 @@
-<div  [ngStyle] = "{ 'max-width': '100%', 'width': width, 'height': height }">
-  <div *ngIf="loading" class="loader" [ngStyle] = "{ 'width': width , 'height': height  }"></div>
-  <iframe  allowfullscreen 
-    [ngClass]="{'isLoadingImage': loading}"
-    width = "100%" height = "100%" 
-    [src]="url" 
-    (load)="onLoaded($event)">
-  </iframe>
+<div  [ngStyle] = "{ 'max-width': '100%', 'width': width, 'height': height + 'px' }">
+  <iframe  allowfullscreen width = "100%" height = "100%" style= "border:none; border-radius: 8px 8px 0 0 " [src]="url" ></iframe>
 </div>

package/src/app/chatlib/conversation-detail/message/frame/frame.component.scss

@@ -1,36 +0,0 @@
-
-:host{
-    // --borderRadius: #{$border-radius-bubble-message};
-    --borderRadius: 8px 8px 0px 0px;
-}
-
-.loader {
-    float: left;
-    // position: absolute;
-    z-index: 1000;
-    // background-color: #ccc;
-    border-radius: var(--borderRadius);
-    background-image: linear-gradient(90deg, transparent 0px, #e8e8e8 40px, transparent 80px);
-    background-size: 600px;
-    animation: shine-loader 1.6s infinite linear;
-}
-
-.isLoadingImage {
-    // position: relative;
-    // top: 6px;
-    display: none;
-}
-
-iframe {
-    border:none; 
-    border-radius: var(--borderRadius)
-}
-
-@keyframes shine-loader {
-    0% {
-        background-position: -32px;
-    }
-    40%, 100% {
-        background-position: 208px;
-    }
-}

package/src/app/chatlib/conversation-detail/message/frame/frame.component.ts

@@ -9,8 +9,8 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 export class FrameComponent implements OnInit {
 
   @Input() metadata: any;
-  @Input() width: number;
-  @Input() height: number;
+  @Input() width: string;
+  @Input() height: string;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   
   url: any;

package/src/app/chatlib/conversation-detail/message/html/html.component.ts

@@ -1,3 +1,4 @@
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Component, ElementRef, Input, OnInit, SimpleChange, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
 
 @Component({

package/src/app/chatlib/conversation-detail/message/image/image.component.html

@@ -1,5 +1,5 @@
 <!-- [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; " -->
-<div [ngStyle]="{'max-height': height +'px' }" class="c21-img-container">
+<div [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" class="c21-img-container">
   <div *ngIf="loading" class="loader" [ngStyle]="{ 'width': width , 'height': height  }"></div>
   <!-- [tooltip]="timeTooltipRight" [options]="tooltipOptions" placement="bottom" content-type="template"  -->
   <img id="myImg" 

package/src/app/chatlib/conversation-detail/message/image/image.component.scss

@@ -1,37 +1,26 @@
-
-:host{
-    // --borderRadius: #{$border-radius-bubble-message};
-    --borderRadius: 8px;
-}
-
 img {
-    border-radius: var(--borderRadius);
+    border-radius: 8px;
     //padding: 3px;
     margin-bottom: 0px;
     max-width: calc(100% - 6px);
     width: auto;
     height: auto;
     object-fit: cover;
-
-    transition: transform 0.3s ease-in-out 0s;
 }
 
-.c21-img-container img:hover{
+img:hover{
     cursor: pointer;
-    transform: scale(1.05);
 }
 
 .c21-img-container {
     text-align: center;
     width: 100%;
-    overflow: hidden;
     // background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://firebasestorage.googleapis.com/v0/b/chat21-pre-01.appspot.com/o/public%2Fimages%2Fb4361ea5-5e37-433c-b727-9034eb5586fe%2F6d74f795-5873-49a8-9165-38f48642df51%2Ffacebook_like%20(3).png?alt=media&token=79afcfe5-ba0c-4573-9263-0877e0225c84");
     // background-repeat: no-repeat;
     // background-position: 50% 0;
     // background-size: cover;
     // border-top-left-radius: $border-radius-bubble-message;
     // border-top-right-radius: $border-radius-bubble-message;
-    border-radius: var(--borderRadius);
 }
 
 .isLoadingImage {
@@ -43,10 +32,9 @@ img {
 .loader {
     float: left;
     // position: absolute;
-    z-index: 1000;
-    // background-color: #ccc;
-    border-radius: var(--borderRadius);
-    background-image: linear-gradient(90deg, transparent 0px, #e8e8e8 40px, transparent 80px);
+    background-color: #ccc;
+    border-radius: 8px;
+    background-image: linear-gradient(90deg, #f7f4f4 0px, #e8e8e8 40px, #f7f4f4 80px);
     background-size: 600px;
     animation: shine-loader 1.6s infinite linear;
 }

package/src/app/chatlib/conversation-detail/message/image/image.component.ts

@@ -8,7 +8,7 @@ import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@
 export class ImageComponent implements OnInit {
 
   @Input() metadata: any;
-  @Input() width: number;
+  @Input() width: string;
   @Input() height: number;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
 

package/src/app/chatlib/conversation-detail/message/info-message/info-message.component.scss

@@ -2,17 +2,16 @@
     display: flex;
     align-content: center;
     justify-content: center;
-    padding: 4px 0px 2px 0px;
 }
 
 .base_info {
     border-radius: 14px;
-    // border: 1px solid rgba(24, 119, 242, 0.1);
+    border: 1px solid #C9E4F6;
     padding-left: 4px;
     padding-right: 4px;
     padding: 6px 10px;
     display: inline-block;
-    background: rgba(24, 119, 242, 0.1);
+    background: #C9E4F6;
     font-size: 0.70em;
     color: var(--basic-gray);
     margin-left: 5px; //32px;

package/src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component.html

@@ -4,32 +4,22 @@
       
       <chat-text-button-attachment *ngIf="button.type === 'text' && isLastMessage === true" class="div-button"
         [button]="button"
-        [isConversationArchived]="isConversationArchived"
-        [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
-        [textColor]="stylesMap.get('buttonTextColor')"
-        [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
-        [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
+        [themeColor]="stylesMap.get('themeColor')"
+        [foregroundColor]="stylesMap.get('foregroundColor')"
         (onButtonClicked)="returnOnAttachmentButtonClicked($event)">
       </chat-text-button-attachment>
 
       <chat-link-button-attachment *ngIf="button.type === 'url'" class="div-button"
         [button]="button"
-        [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
-        [textColor]="stylesMap.get('buttonTextColor')"
-        [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
-        [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
+        [themeColor]="stylesMap.get('themeColor')"
+        [foregroundColor]="stylesMap.get('foregroundColor')"
         (onButtonClicked)="returnOnAttachmentButtonClicked($event)">
       </chat-link-button-attachment>
 
       <chat-action-button-attachment *ngIf="button.type === 'action' && isLastMessage === true" class="div-button"
         [button]="button"
-        [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
-        [textColor]="stylesMap.get('buttonTextColor')"
-        [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
-        [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
+        [themeColor]="stylesMap.get('themeColor')"
+        [foregroundColor]="stylesMap.get('foregroundColor')"
         (onButtonClicked)="returnOnAttachmentButtonClicked($event)">
       </chat-action-button-attachment>
 

package/src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component.scss

@@ -1,8 +1,10 @@
 #buttons-in-message {
     text-align: left;
     display: block; 
+    margin-top: -6px;
+    margin-bottom: 5px;
     height: auto;
-    margin: 0px 20px 5px 10px;
+    padding-left: 8px;
 
     .div-button {
         display: inline-block;

package/src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component.ts

@@ -12,9 +12,7 @@ export class MessageAttachmentComponent implements OnInit {
 
   // ========= begin:: Input/Output values ============//
   @Input() message: MessageModel;
-  @Input() isConversationArchived: boolean;
   @Input() isLastMessage: boolean;
-  @Input() fullscreenMode: boolean;
   @Input() stylesMap: Map<string, string>;
   @Output() onAttachmentButtonClicked = new EventEmitter<any>();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>()