@chat21/chat21-ionic 3.0.78-rc.3 → 3.0.78-rc.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # chat21-ionic ver 3.0
 
+### 3.0.78-rc.4
+- bug-fixed: unassigned request not sound the if is the first at all
+- bug-fixed: translations missed
+- bug-fixed: direct info not showed in conversation-header component
+- removed: conversation-footer border top
+- changed: colors to message-text-area icons and message-attachment components
+
 ### 3.0.78-rc.3
 - changed: user-typing location moved from conversation-header to conversation-detail component
 - changed: replace includes with startsWith for check what type of conversation is in project info conversation-list component

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.78-rc.3",
+    "version": "3.0.78-rc.4",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.scss

@@ -2,6 +2,7 @@
     min-width: 360px; //312px;
     display: block; // Safari bug fix
     margin-left: 60px;
+    --border: 0px;
 }
 
 .sidebar-visible {

package/src/app/app.component.ts

@@ -102,7 +102,6 @@ export class AppComponent implements OnInit {
   public missingConnectionToast: any
   public executedInitializeAppByWatchConnection: boolean = false;
   private isInitialized: boolean = false;
-  private hasToSoundUnservedRequestCount: boolean = false;
   private version: string;
   IS_ONLINE: boolean;
   IS_ON_MOBILE_DEVICE: boolean;
@@ -1125,7 +1124,6 @@ export class AppComponent implements OnInit {
     if (hasClickedLogout === true) {
       this.appStorageService.removeItem('conversations')
       this.isInitialized = false;
-      this.hasToSoundUnservedRequestCount = false;
       // ----------------------------------------------
       // PUSH NOTIFICATIONS
       // ----------------------------------------------
@@ -1150,12 +1148,9 @@ export class AppComponent implements OnInit {
 
   subscribeUnservedRequestCount = (unservedRequestCount) => {
     if(unservedRequestCount && unservedRequestCount > 0){
-      this.logger.debug("hasToSoundUnservedRequestCount::::", this.hasToSoundUnservedRequestCount, this.isInitialized)
-      if(this.hasToSoundUnservedRequestCount){
+      this.logger.debug("appIsInitialized::::",this.isInitialized)
+      if(this.isInitialized){
         this.manageTabNotification(unservedRequestCount) //sound and alternate title
-      } else {
-        //not sound the first time
-        this.hasToSoundUnservedRequestCount = true
       }
     }
   }

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.html

@@ -120,8 +120,6 @@
       class="message_sender_fullname">
       {{message.sender_fullname}}
     </div>
-
-
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
 
       <!-- <chat-avatar-image class="slide-in-left"  
@@ -164,12 +162,11 @@
 
   <!-- uploadProgress -> {{ uploadProgress }} -->
   <div *ngIf="uploadProgress !== 100" class="msg_container base_sent" style="margin-right: 20px;">
-    <div class="messages msg_sent">
-      <div class="spinner">
-        <div class="bounce1"></div>
-        <div class="bounce2"></div>
-        <div class="bounce3"></div>
-      </div>
+    <div class="chat21-spinner active" id="chat21-spinner" style="margin: 0px 6px 0px;">
+      <div class="chat21-bounce1" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
+      <div class="chat21-bounce2" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'opacity': 0.4}"></div>
+      <div class="chat21-bounce3" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'opacity': 0.6}"></div>
+      <!-- <span [ngStyle]="{'color': stylesMap.get('themeColor')}">{{translationMap.get('LABEL_LOADING')}}</span> -->
     </div>
   </div>
 

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.scss

@@ -65,10 +65,11 @@
 
     ion-button {
         text-transform: unset;
+        color: var(--basic-blue);
         &:hover {
             --background-hover: transparent;
             text-decoration: underline;
-            text-decoration-color: var(--ion-color-primary);
+            text-decoration-color: var(--basic-blue);
         }
     }
 
@@ -105,7 +106,7 @@ ion-item {
 
 .message_sender_fullname {
     font-size: 0.9em;
-    margin: 0 0 1px 10px;
+    margin: 0 0 1px 20px;
     // color: var(--gray);
     font-weight: 500;
     color: #080f1a;
@@ -179,7 +180,7 @@ ion-item {
 /** recive message **/
 .base_receive {
     // padding: 0px 0px 6px 0px;
-    padding: 0px 0px 15px 0px; // edited to display the date at the bottom of the "message bubble"
+    padding: 0px 0px 15px 10px; // edited to display the date at the bottom of the "message bubble"
     /* avatar */
     .content-avatar {
         position: relative;
@@ -240,57 +241,57 @@ ion-item {
     margin-bottom: 20px;
 }
 
-// Loading Spinner
-.spinner {
-    // margin: 100px auto 0;
-    width: 90px;
+ /* LOADING */
+/*http://tobiasahlin.com/spinkit/*/
+#chat21-spinner {
+    display: none;
+    width: 70px;
     min-height: 20px;
-    padding: 7px;
+    margin: 20px auto 0;
     text-align: center;
 }
-
-.spinner > div {
-    width: 10px;
-    height: 10px;
-    background-color: rgb(255, 255, 255);
-
+#chat21-spinner.active {
+    display: block;
+}
+#chat21-spinner > div {
+    width: 12px;
+    height: 12px;
+    background-color: var(--bubble-blue);
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
 }
-
-.spinner .bounce1 {
+#chat21-spinner .chat21-bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
 }
-
-.spinner .bounce2 {
+#chat21-spinner .chat21-bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
 }
-
+#chat21-spinner span {
+    display: block;
+    margin: 0.5em 0 0 0;
+    color: var(--col-msg-sent);
+    /* text-transform: uppercase; */
+    font-family: 'Roboto', sans-serif;
+    -webkit-animation: pulse 2000ms linear infinite;
+    -moz-animation: pulse 2000ms linear infinite;
+    animation: pulse 2000ms linear infinite;
+    text-align: center;
+}
 @-webkit-keyframes sk-bouncedelay {
-    0%,
-    80%,
-    100% {
-        -webkit-transform: scale(0);
-    }
-    40% {
-        -webkit-transform: scale(1);
-    }
+    0%, 80%, 100% { -webkit-transform: scale(0) }
+    40% { -webkit-transform: scale(1.0) }
 }
-
 @keyframes sk-bouncedelay {
-    0%,
-    80%,
-    100% {
-        -webkit-transform: scale(0);
-        transform: scale(0);
-    }
-    40% {
-        -webkit-transform: scale(1);
-        transform: scale(1);
+    0%, 80%, 100% { 
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    } 40% { 
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
     }
 }
 

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

@@ -1,3 +1,7 @@
-<div #actionButton id="actionButton" class="button-in-msg action" (click)="actionButtonAction()" title="{{button?.value}}">
+<div #actionButton id="actionButton" class="button-in-msg action" 
+title="{{button?.value}}"
+(click)="actionButtonAction()"
+(mouseover)="onMouseOver($event)" 
+(mouseout)="onMouseOut($event)">
   {{button.value}}
 </div>

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

@@ -1,12 +1,11 @@
 // @import '../../../../../sass/variables';
 
 div {
-    --bck-msg-sent: #62a8ea;
-    --col-msg-sent:#ffffff;
-    --light-white: #f7f7f7;
-    --black: #1a1a1a;
-    --gray: #aaaaaa;
-    --blue: rgb(42, 106, 193);
+    --backgroundColor: --basic-blue;
+    --textColor: --bck-msg-sent;
+    --hoverBackgroundColor: --bck-msg-sent;
+    --hoverTextColor: --basic-blue;
+    --buttonFontSize: --button-in-msg-font-size;
 }
 
 .button-in-msg {
@@ -15,32 +14,32 @@ div {
     max-width: 300px;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--blue);
+    border: 1px solid var(--textColor);
     border-radius: 20px;
     margin: 3px;
-    background: transparent;
+    background: var(--backgroundColor);
     overflow: hidden;
     font-family: 'Muli', sans-serif;
-    font-size: 15px;
+    font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--blue);
+    color: var(--textColor);
     line-height: 16px;
 }
 
 .action {
-    background: white;
+    background: var(--backgroundColor);
     transition: background-color .6s ease;
     &:focus,
     &:hover {
-        color: white;
-        background:  var(--blue);
+        color: var(--hoverTextColor);
+        background:  var(--hoverBackgroundColor);
         .icon-button-action {
             svg {
-                fill: white;
+                fill:  var(--hoverTextColor);
             }
         }
     }
@@ -80,4 +79,12 @@ 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 } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'chat-action-button-attachment',
@@ -8,16 +8,36 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@ang
 export class ActionButtonComponent implements OnInit {
 
   @Input() button: any;
-  @Input() themeColor: string;
-  @Input() foregroundColor: string;
+  @Input() fontSize: string;
+  @Input() backgroundColor: string;
+  @Input() textColor: string;
+  @Input() hoverBackgroundColor: string;
+  @Input() hoverTextColor: 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
-    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
-    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
+    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 = ''
   }
 
   actionButtonAction(){

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

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

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 } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'chat-link-button-attachment',
@@ -8,16 +8,35 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@ang
 export class LinkButtonComponent implements OnInit {
 
   @Input() button: any;
-  @Input() themeColor: string;
-  @Input() foregroundColor: string;
+  @Input() fontSize: string;
+  @Input() backgroundColor: string;
+  @Input() textColor: string;
+  @Input() hoverBackgroundColor: string;
+  @Input() hoverTextColor: 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
-    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
-    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
+    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 = ''
   }
 
   actionButtonUrl(){

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

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

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

@@ -1,11 +1,10 @@
 // @import '../../../../../sass/variables';
 div {
-    --bck-msg-sent: #62a8ea;
-    --col-msg-sent:#ffffff;
-    --light-white: #f7f7f7;
-    --black: #1a1a1a;
-    --gray: #aaaaaa;
-    --blue: rgb(42, 106, 193);
+    --backgroundColor: --basic-blue;
+    --textColor: --bck-msg-sent;
+    --hoverBackgroundColor: --bck-msg-sent;
+    --hoverTextColor: --basic-blue;
+    --buttonFontSize: --button-in-msg-font-size;
 }
 
 
@@ -15,19 +14,19 @@ div {
     max-width: 300px;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--blue);
+    border: 1px solid var(--textColor); //$blue
     border-radius: 20px;
     margin: 3px;
-    background: transparent;
+    background: var(--backgroundColor);
     overflow: hidden;
     font-family: 'Muli', sans-serif;
-    font-size: 15px;
+    font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--blue);
+    color: var(--textColor); //$blue
     line-height: 16px;
 }
 
@@ -36,11 +35,11 @@ div {
     transition: background-color .6s ease;
     &:focus,
     &:hover {
-        color: white;
-        background: var(--blue);
+        color: var(--hoverTextColor);
+        background: var(--hoverBackgroundColor);
         .icon-button-action {
             svg {
-                fill: var(--black);
+                fill: --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 } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
 
 
 @Component({
@@ -9,16 +9,37 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@ang
 export class TextButtonComponent implements OnInit {
 
   @Input() button: any;
-  @Input() themeColor: string;
-  @Input() foregroundColor: string;
+  @Input() isConversationArchived: boolean;
+  @Input() fontSize: string;
+  @Input() backgroundColor: string;
+  @Input() textColor: string;
+  @Input() hoverBackgroundColor: string;
+  @Input() hoverTextColor: 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
-    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
-    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
+    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 = ''
   }
 
   actionButtonText(){

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

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

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

@@ -12,7 +12,9 @@ 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}>()

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -144,19 +144,28 @@
   <ion-note *ngIf="!conversation.archived" class="conversation_time" [ngClass]="{'is-on-mobile': isApp}">
     {{conversation.timestamp | amTimeAgo}}
   </ion-note>
+  <ion-note item-end *ngIf="conversation?.archived" class="conversation_time">
+    <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') === currentYear">
+      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD') : (conversation.timestamp| amDateFormat:'DD MMM')}}
+      <!-- {{conversation.timestamp | amDateFormat:'DD MMM'}} -->
+    </span>
+    <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') !== currentYear">
+      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD YYYY') : (conversation.timestamp| amDateFormat:'DD MMM YYYY') }}
+      <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
+    </span>
+  </ion-note>
 
   <ion-buttons slot="end">
     <ion-button *ngIf="!conversation.archived" [tooltip]="archiveTooltip"  [options]="tooltip_options" placement="bottom"  content-type="template"
       [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
       id="{{ 'close_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
       item-end (click)="closeConversation(conversation);$event.stopPropagation();" padding>
-      <ion-icon slot="icon-only" style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}"
-        color="close-conversation" name="archive-outline" item-end></ion-icon>
+      <ion-icon slot="icon-only" style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}" name="archive-outline" item-end></ion-icon>
 
-        <ng-template #archiveTooltip>
-          <span *ngIf="conversation?.recipient.startsWith('support-group')"> {{ resolve_btn_tooltip}} </span>
-          <span *ngIf="!conversation?.recipient.startsWith('support-group')"> {{ archive_btn_tooltip }} </span>
-        </ng-template>
+      <ng-template #archiveTooltip>
+        <span *ngIf="conversation?.recipient.startsWith('support-group')"> {{ translationsMap?.get('Resolve')}} </span>
+        <span *ngIf="!conversation?.recipient.startsWith('support-group')"> {{ translationsMap?.get('Archive') }} </span>
+      </ng-template>
     </ion-button>
     <!-- <ion-button *ngIf="conversation.archived" class="close-conversation-button" ion-button clear item-end disabled padding>
       <!- - <ion-icon  style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}" color="close-conversation" name="archive-outline" item-end></ion-icon> - ->
@@ -165,18 +174,7 @@
     </ion-button> -->
   </ion-buttons>
 
-  <div item-end *ngIf="conversation?.archived" class="achived-icon-wpr">
-    <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') === currentYear" class="time-in-archived">
-      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD') : (conversation.timestamp| amDateFormat:'DD MMM')}}
-
-      <!-- {{conversation.timestamp | amDateFormat:'DD MMM'}} -->
-    </span>
-    <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') !== currentYear" class="time-in-archived">
-      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD YYYY') : (conversation.timestamp| amDateFormat:'DD MMM YYYY') }}
-      <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
-    </span>
-    <!-- <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i> -->
-  </div>
+  
 
   <!-- && !conversation?.archived -->
   <div item-end class="notification_point"

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.scss

@@ -159,7 +159,7 @@ ion-item {
             font-size: 10px;
             --padding-start: 0px;
             --padding-end: 0px;
-            color: rgba(153, 153, 153, 1);
+            color: var(--basic-blue);//rgba(153, 153, 153, 1);
             background-color: transparent;
             border-radius: 50%; // nk
             &:hover {
@@ -172,7 +172,7 @@ ion-item {
         width: 10px;
         height: 10px;
         border-radius: 50%;
-        background-color: rgb(22, 92, 238);
+        background-color: var(--basic-blue);
         position: absolute;
         right: 6px;
         bottom: 8px;
@@ -249,7 +249,7 @@ ion-item:hover {
 
 .ion-selected {
     --background: rgba(24, 119, 242, 0.04);
-    border-right: 4px solid #1876f2;
+    border-right: 4px solid var(--basic-blue);
 }
 
 .time-in-archived {

package/src/app/components/canned-response/canned-response.component.html

@@ -22,10 +22,10 @@
   <div  class="loader" *ngIf="tagsCannedFilter.length === 0">
     <div class="box">
       <div class="container">
-        <span class="circle"></span>
-        <span class="circle"></span>
-        <span class="circle"></span>
-        <span class="circle"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
       </div>
       <div class="label">{{translationMap.get('LABEL_LOADING')}}</div>
     </div>

package/src/app/components/canned-response/canned-response.component.scss

@@ -179,7 +179,7 @@ ion-item {
             width: 15px;
             height: 15px;
             border-radius: 50%;
-            background-color: #1877f2;
+            background-color: var(--basic-blue);
             animation: move 500ms linear 0ms infinite;
             margin-right: 30px;
             

package/src/app/components/canned-response/canned-response.component.ts

@@ -20,6 +20,7 @@ export class CannedResponseComponent implements OnInit {
   @Input() conversationWith: string;
   @Input() conversationWithFullname: string;
   @Input() currentString: string;
+  @Input() stylesMap: Map<string, string>;
   @Input() translationMap: Map<string, string>;
   @Output() onLoadedCannedResponses = new EventEmitter<[any]>();
   @Output() onClickCanned = new EventEmitter<any>();

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

@@ -78,12 +78,12 @@
         <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Crea ticket' | translate}} </span>
       </ion-button> -->
 
-      <ion-button *ngIf="conversationUid?.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" color="primary" size="small" 
+      <ion-button *ngIf="conversationUid?.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" size="small" 
         (click)="closeConversation()" [disabled]="conv_closed === true">
         <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
         <ion-icon name="archive-outline"></ion-icon>
         <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
-        <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Resolve' | translate}} </span>
+        <span style="text-transform: capitalize; margin-left: 5px;"> {{translationsMap?.get('Resolve')}} </span>
       </ion-button>
 
       <!-- <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">

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

@@ -5,7 +5,7 @@ ion-header {
     border-color: var(--light-gray);
     border-bottom-width: thin;
     ion-toolbar{
-        height: --header-height;
+        height: var(--header-height);
         .flex-container{
             display: flex;
         }
@@ -120,6 +120,9 @@ ion-header {
     }
     
     ion-buttons {
+        ion-icon , span{
+            color: var(--basic-blue)
+        }
         button {
             max-width: 30px;
             padding: 0;
@@ -164,7 +167,7 @@ ion-header {
 
 .user-presence {
     position: absolute;
-    bottom: 0;
+    bottom: 3px; //0;
     height: 12px;
     left: 30px;
     width: 100px;

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

@@ -72,7 +72,6 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar,)
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) -  conv_type', this.conv_type)
     this.listenToConversationHasBeenClosed()
-    this.initialize();
     // this.isOniOSMobileDevice()
   }
 
@@ -90,6 +89,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar', this.conversationAvatar)
     if (this.conversationAvatar) {
       this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
+      this.initialize()
     }
   }
 

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

@@ -4,6 +4,10 @@
     height: auto;
     padding: 0;
     margin: 0;
+
+    ion-icon{
+        color: var(--basic-blue);
+    }
     .buttons-left {
         position: absolute;
         left: 0;
@@ -165,10 +169,6 @@
     border-radius: 50%;
 }
 
-.send-msg-activated {
-    color: #3880ff !important;
-}
-
 .send-msg-disabled {
     cursor: default;
     opacity: 0.8;

package/src/app/components/ddp-header/ddp-header.component.scss

@@ -1,5 +1,5 @@
 ion-toolbar {
-    height: --header-height;
+    height: var(--header-height);
 }
 
 ion-title img {

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

@@ -312,8 +312,9 @@ export class ProjectItemComponent implements OnInit {
           }
         });
         //not sound if unservedRequest is already chached and web-sk is closed and restart again
+        // this.logger.log('updateUnservedRequestCount::: count , unservedRequestCount ', count , this.unservedRequestCount)
         if(count > this.unservedRequestCount ){  
-          this.events.publish('unservedRequest:count', this.unservedRequestCount)
+          this.events.publish('unservedRequest:count', count)
         }
         this.unservedRequestCount = count;
 

package/src/app/components/utils/user-presence/user-presence.component.html

@@ -1,2 +1,2 @@
 <div class="status-icon" [class.online]="online" [style.border-color]="borderColor"></div>
-<div class="online-point" [style.color]="fontColor">{{status}}</div>
+<!-- <div class="online-point" [style.color]="fontColor">{{status}}</div> -->

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

@@ -96,10 +96,15 @@
             </ng-template>
 
             <ng-template #content_messages>
-              <ion-content #ionContentChatArea appScrollbarTheme class="ionContentChatArea" (drop)="drop($event)"
-                (dragover)="allowDrop($event)" (dragleave)="drag($event)" [scrollEvents]="true"
-                (ionScrollStart)="logScrollStart($event)" (ionScroll)="logScrolling($event)"
-                (ionScrollEnd)="logScrollEnd($event)" [class.active]="showIonContent">
+              <ion-content #ionContentChatArea appScrollbarTheme class="ionContentChatArea" 
+                (drop)="drop($event)"
+                (dragover)="allowDrop($event)" 
+                (dragleave)="drag($event)" 
+                [scrollEvents]="true"
+                (ionScrollStart)="logScrollStart($event)" 
+                (ionScroll)="logScrolling($event)"
+                (ionScrollEnd)="logScrollEnd($event)" 
+                [class.active]="showIonContent">
 
                 <!-- ----------------------------------------------------------- -->
                 <!-- DROPZONE -->
@@ -159,6 +164,7 @@
               [conversationWith]="conversationWith"
               [conversationWithFullname]="conversationWithFullname"
               [currentString]="messageStr"
+              [stylesMap]="styleMap"
               [translationMap]="translationsMap"
               (onLoadedCannedResponses)="onLoadedCannedResponses($event)"
               (onClickCanned)="replaceTagInMessage($event)"

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

@@ -324,7 +324,7 @@ ion-content {
         position: absolute;
         bottom: 0;
         width: calc(100% - 0px);
-        border-top: 1px solid #e2e2e2;
+        // border-top: 1px solid #e2e2e2;
     }
 
     #chatArea {

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

@@ -620,6 +620,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'LABEL_TO',
       'LABEL_LAST_ACCESS',
       'ARRAY_DAYS',
+      'Resolve',
     ]
 
     const keysContentDetail = [
@@ -659,11 +660,17 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   }
 
   private setStyleMap(){
-      this.styleMap.set('themeColor', 'var(--basic-gray)')
+      this.styleMap.set('themeColor', 'var(--basic-blue)')
                     .set('bubbleReceivedBackground','var(--bck-msg-received)')
                     .set('bubbleReceivedTextColor', 'var(--col-msg-received)')
                     .set('bubbleSentBackground', 'var(--bck-msg-sent)')
                     .set('bubbleSentTextColor', 'var(--col-msg-sent)')
+                    .set('buttonFontSize','var(--button-in-msg-font-size)')
+                    .set('buttonBackgroundColor', 'var(--buttonBackgroundColor)')
+                    .set('buttonTextColor', 'var(--buttonTextColor)')
+                    .set('buttonHoverBackgroundColor', 'var(--buttonHoverBackgroundColor)')
+                    .set('buttonHoverTextColor', 'var(--buttonHoverTextColor)')
+  
   }
   // -------------------------------------------------------------------------------------
   // * retrieving the handler from chatManager

package/src/app/pages/conversations-list/conversations-list.page.ts

@@ -502,22 +502,6 @@ export class ConversationListPage implements OnInit {
     this.logger.log('[CONVS-LIST-PAGE] - subscribeLoggedUserLogout uidConvSelected ',this.uidConvSelected)
   }
 
-  // ------------------------------------------------------------------------------------
-  // @ SUBSCRIBE TO CONVERSATION CHANGED  ??????????? SEEMS NOT USED ?????????????????
-  // ------------------------------------------------------------------------------------
-  conversationsChanged = (conversations: ConversationModel[]) => {
-    this.numberOpenConv = this.conversationsHandlerService.countIsNew()
-    this.logger.log('[CONVS-LIST-PAGE] - conversationsChanged - NUMB OF CONVERSATIONS: ',this.numberOpenConv)
-    // console.log('conversationsChanged »»»»»»»»» uidConvSelected', that.conversations[0], that.uidConvSelected);
-    if (this.uidConvSelected && !this.conversationSelected) {
-      const conversationSelected = this.conversations.find((item) => item.uid === this.uidConvSelected)
-      if (conversationSelected) {
-        this.conversationSelected = conversationSelected
-        this.setUidConvSelected(this.uidConvSelected)
-      }
-    }
-  }
-
   /**
    * ::: subscribeChangedConversationSelected :::
    * evento richiamato quando si seleziona un utente nell'elenco degli user
@@ -654,7 +638,7 @@ export class ConversationListPage implements OnInit {
    * ::: setUidConvSelected :::
    */
   setUidConvSelected(uidConvSelected: string, conversationType?: string) {
-    this.logger.log('[CONVS-LIST-PAGE] setuidCOnvSelected', uidConvSelected)
+    this.logger.log('[CONVS-LIST-PAGE] setuidCOnvSelected', uidConvSelected, conversationType)
     this.uidConvSelected = uidConvSelected
     // this.conversationsHandlerService.uidConvSelected = uidConvSelected;
     if (uidConvSelected) {

package/src/app/pages/loader-preview/loader-preview.page.html

@@ -55,7 +55,7 @@
 
   <!-- fab placed to the (vertical) center and end -->
   <ion-fab vertical="end" horizontal="end" slot="fixed" class="sendButton">
-    <ion-fab-button color="primary" (click)="onSendMessage()">
+    <ion-fab-button (click)="onSendMessage()">
       <ion-icon name="send"></ion-icon>
     </ion-fab-button>
   </ion-fab>

package/src/app/pages/loader-preview/loader-preview.page.scss

@@ -11,6 +11,10 @@
     transform: translateX(-50%);
 }
 
+ion-fab-button{
+    --background: var(--basic-blue);
+}
+
 .previewSelected {
     width: 100%;
     height: auto;

package/src/global.scss

@@ -794,66 +794,70 @@ select:-webkit-autofill:focus {
 }
 
 // select teammate status in user detail drawer
-.ng-select.teammate-status-in-drawer {
+.teammate-status-in-drawer {
+
+    &.ng-select {
 
-    .ng-select-container {
-        background-color: #2d323e;
-        color: #fff;
-        border: 1px solid #2d323e;
-    }
-    &.ng-select-opened{
         .ng-select-container {
             background-color: #2d323e;
+            color: #fff;
             border: 1px solid #2d323e;
         }
+        &.ng-select-opened{
+            .ng-select-container {
+                background-color: #2d323e;
+                border: 1px solid #2d323e;
+            }
+        }
+    
+        &.ng-select-focused:not(.ng-select-opened){
+             >.ng-select-container{
+                border: 1px solid #2d323e;
+                box-shadow: unset;
+             }
+        }
+    
+        
     }
 
-    &.ng-select-focused:not(.ng-select-opened){
-         >.ng-select-container{
+    .ng-dropdown-panel {
+        background-color: #2d323e;
+        border: 1px solid #2d323e;
+    
+        &.ng-select-bottom {
             border: 1px solid #2d323e;
-            box-shadow: unset;
-         }
-    }
-
+            margin-top: 8px;
+            border-top-right-radius: 4px;
+            border-top-left-radius: 4px;
+        }
     
-}
-
-.ng-dropdown-panel {
-    background-color: #2d323e;
-    border: 1px solid #2d323e;
-
-    &.ng-select-bottom {
-        border: 1px solid #2d323e;
-        margin-top: 8px;
-        border-top-right-radius: 4px;
-        border-top-left-radius: 4px;
-    }
-
-    .ng-dropdown-panel-items {
-        .ng-option {
-            background-color: #2d323e;
-            color: #fff;
-
-            &.ng-option-marked {
-                background-color: rgba(30, 33, 41, 0.3);
-                color: #fff;
-            }
-
-            &.ng-option-selected {
+        .ng-dropdown-panel-items {
+            .ng-option {
                 background-color: #2d323e;
                 color: #fff;
+    
+                &.ng-option-marked {
+                    background-color: rgba(30, 33, 41, 0.3);
+                    color: #fff;
+                }
+    
+                &.ng-option-selected {
+                    background-color: #2d323e;
+                    color: #fff;
+                }
+    
+                &.ng-option-marked.ng-option-selected{
+                    background-color: rgba(30, 33, 41, 0.3);
+                    color: #fff;
+                }
             }
-
-            &.ng-option-marked.ng-option-selected{
-                background-color: rgba(30, 33, 41, 0.3);
-                color: #fff;
-            }
+            
         }
-        
     }
 }
 
 
+
 /* *** SMALL SIDEBAR STYLE ***  */
 .small-sidebar-tiledesk-nav-user {
     height: 40px;

package/src/variables.scss

@@ -7,18 +7,13 @@
     --basic-green: #0A7D41;
     --dark-green: #005f3b;
     --light-green: #8cc841;
-    
     --light-gray: #F2F2F2;
     --basic-gray: #666666;
     --dark-gray: #363636;
-    
-
     --light-blue: #C9E4F6;
     --basic-blue: #2a69c1;
     --bubble-blue: rgb(0, 153, 255);
-    --bubble-lightyellow: rgb(255, 247, 237);
-    --bubble-privateMsg: rgb(254, 214, 168);
-    --bubble-privateMsgColor: rgb(47, 57, 65);
+    
 
     --basic-yellow: #FFC627;
     --basic-red: #EB1E23;
@@ -29,11 +24,21 @@
     --bck-msg-received: #f0f2f7;
     --col-msg-received: #06132b;
 
+    --bubble-lightyellow: rgb(255, 247, 237);
+    --bubble-privateMsg: rgb(254, 214, 168);
+    --bubble-privateMsgColor: rgb(47, 57, 65);
+
     --light-white: #f7f7f7;
     --black: #1a1a1a;
     --gray: #aaaaaa;
 
     --header-height: 60px;
 
+    --button-in-msg-font-size: 15px;
+    --buttonBackgroundColor: #ffffff;
+    --buttonTextColor: #2a6ac1;
+    --buttonHoverBackgroundColor: #2a6ac1;
+    --buttonHoverTextColor: #ffffff;
+
     
-  }
+}