@chat21/chat21-ionic 3.0.85 → 3.0.86-rc.1

package/src/chat21-core/utils/user-typing/user-typing.component.ts

@@ -1,113 +1,31 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
-
-// services
-import { TypingService } from '../../providers/abstract/typing.service';
-
-// Logger
-import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { Component, OnInit, OnDestroy, Input, ElementRef } from '@angular/core';
 
 @Component({
-  selector: 'app-user-typing',
+  selector: 'user-typing',
   templateUrl: './user-typing.component.html',
   styleUrls: ['./user-typing.component.scss'],
 })
 export class UserTypingComponent implements OnInit, OnDestroy {
 
-  @Input() idConversation: string;
-  @Input() idCurrentUser: string;
-  @Input() isDirect: boolean;
+ // @Input() idConversation: string;
+  // @Input() idCurrentUser: string;
+  // @Input() isDirect: boolean;
+  @Input() typingLocation: string = 'content'
   @Input() translationMap: Map<string, string>;
-  @Input() color: string;
-  @Input() membersConversation: [string];
-
-  public status = '';
-  public isTyping = false;
-  public nameUserTypingNow: string;
-
-  private setTimeoutWritingMessages: any;
-  private subscriptions = [];
-
-  private logger: LoggerService = LoggerInstance.getInstance();
+  @Input() themeColor: string;
+  @Input() idUserTypingNow: string;
+  @Input() nameUserTypingNow: string;
+  // @Input() membersConversation: [string];
 
-  constructor(
-    public typingService: TypingService
-  ) { }
+  constructor(private elementRef: ElementRef) { }
 
   /** */
   ngOnInit() {
-    this.logger.log('[USER-TYPING-COMPONENT] - ngOnInit');
-    this.initialize();
+    this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
   }
 
   /** */
   ngOnDestroy() {
-    this.logger.log('UserTypingComponent - ngOnDestroy');
-    // this.unsubescribeAll();
-  }
-
-  /** */
-  initialize() {
-    this.status = ''; // this.translationMap.get('LABEL_AVAILABLE');
-    this.logger.log('this.translationMap', this.translationMap);
-    this.logger.log('this.status', this.status);
-    this.setSubscriptions();
-    this.typingService.isTyping(this.idConversation, this.idCurrentUser, this.isDirect);
-  }
-
-  /** */
-  private setSubscriptions() {
-    const that = this;
-    const conversationSelected = this.subscriptions.find(item => item.key === this.idConversation);
-    if (!conversationSelected) {
-      const subscribeBSIsTyping =  this.typingService.BSIsTyping.subscribe((data: any) => {
-        this.logger.log('***** BSIsTyping *****', data);
-        if (data) {
-          const isTypingUid = data.uid;
-          if (this.idConversation === isTypingUid) {
-            that.subscribeTypings(data);
-          }
-        }
-      });
-      const subscribe = {key: this.idConversation, value: subscribeBSIsTyping };
-      this.subscriptions.push(subscribe);
-    }
-  }
-
-  /** */
-  subscribeTypings(data: any) {
-    const that = this;
-    try {
-      const key = data.uidUserTypingNow;
-      this.nameUserTypingNow = null;
-      if (data.nameUserTypingNow) {
-        this.nameUserTypingNow = data.nameUserTypingNow;
-      }
-      this.logger.log('subscribeTypings data:', data);
-      const userTyping = this.membersConversation.includes(key);
-      if ( !userTyping ) {
-        this.isTyping = true;
-        this.logger.log('child_changed key', key);
-        this.logger.log('child_changed name', this.nameUserTypingNow);
-        clearTimeout(this.setTimeoutWritingMessages);
-        this.setTimeoutWritingMessages = setTimeout(() => {
-            that.isTyping = false;
-        }, 2000);
-      }
-    } catch (error) {
-      this.logger.log('error: ', error);
-    }
-  }
-
-
-  /** */
-  private unsubescribeAll() {
-    this.logger.log('UserTypingComponent unsubescribeAll: ', this.subscriptions);
-    this.subscriptions.forEach((subscription: any) => {
-      this.logger.log('unsubescribe: ', subscription);
-      subscription.unsubescribe();
-    });
-    this.subscriptions = [];
   }
 
 

package/src/chat21-core/utils/utils.ts

@@ -590,18 +590,24 @@ export function setConversationAvatar(
   conversationWith: string,
   conversationWithFullname: string,
   conversationChannelType: string,
+  conversationWithEmail?: string,
+  projectId?: string,
+  project_name?: string,
   width?: string,
-  height?: string
+  height?: string,
 ): any {
   const conversationWidth = (width) ? width : '40px';
   const conversationHeight = (height) ? height : '40px';
   const conversationAvatar = {
     uid: conversationWith,
-    conversation_with_fullname: conversationWithFullname,
     conversation_with: conversationWith,
+    conversation_with_fullname: conversationWithFullname,
+    conversationWithEmail: conversationWithEmail,
     channelType: conversationChannelType,
     avatar: avatarPlaceholder(conversationWithFullname),
     color: getColorBck(conversationWithFullname),
+    projectId: projectId,
+    project_name: project_name,
     width: conversationWidth,
     height: conversationHeight
   };
@@ -694,15 +700,35 @@ export function isURL(str: string) {
   }
 }
 
-// export function isHostname() {
-
-
-//   if (environment.supportMode === true) {
-
-//     return true
-//   }
-//   return false
-// }
+export function convertColorToRGBA(color, opacity) {
+  let result = color;
+  // console.log('convertColorToRGBA' + color, opacity);
+  if ( color.indexOf('#') > -1 ) {
+    color = color.replace('#', '');
+    const r = parseInt(color.substring(0, 2), 16);
+    const g = parseInt(color.substring(2, 4), 16);
+    const b = parseInt(color.substring(4, 6), 16);
+    result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
+  } else if ( color.indexOf('rgba') > -1 ) {
+    const rgb = color.split(',');
+    const r = rgb[0].substring(5);
+    const g = rgb[1];
+    const b = rgb[2];
+    // const b = rgb[2].substring(1, rgb[2].length - 1);
+    result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
+  } else if ( color.indexOf('rgb(') > -1 ) {
+    const rgb = color.split(',');
+    // console.log(rgb);
+    const r = rgb[0].substring(4);
+    const g = rgb[1];
+    const b = rgb[2].substring(0, rgb[2].length - 1);
+    // console.log(b);
+    // console.log(rgb[2].length);
+    result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
+  }
+  // console.log('convertColorToRGBA' + color + result);
+  return result;
+}
 
 export function getParameterByName(name: string) {
   var url = window.location.href;
@@ -810,6 +836,10 @@ export function redirect2(router, IDConv, conversationSelected) {
 /** */
 export function checkPlatformIsMobile() {
   // console.log('UTILS - checkPlatformIsMobile:: ', window.innerWidth);
+  // if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+  //   return true
+  // }
+  // return false
   if (window.innerWidth < 768) {
     return true;
   }

package/src/global.scss

@@ -107,189 +107,6 @@ app-conversations-list {
     font-size: 13px;
 }
 
-// .popover-md .popover-content{
-//     width: auto!important;
-// }
-
-// ion-backdrop{
-//     display: block;
-//     background-color: #000000!important;
-//     width: 100%;
-//     height: 100%;
-//     opacity: 0.0!important;
-// }
-
-// ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page {
-//     contain: none!important;
-// }
-
-// .avatar-profile {
-//     position: absolute;
-//     top: 0px;
-//     left: 0px;
-//     display: inline-block;
-//     width: 50px;
-//     height: 50px;
-//     background-color: transparent;
-//     background-size: cover;
-//     background-position: top center;
-//     border-radius: 50%;
-//     border-color: #c3c3c3;
-//     border-style: solid;
-//     border-width: 0px;
-// }
-// .chat21-avatar.big{
-//     width: 200px;
-//     height: 200px;
-// }
-
-// /* LOADING */
-// /*http://tobiasahlin.com/spinkit/*/
-// #chat21-spinner {
-//     min-height: 20px;
-//     display: none;
-//     margin: 20px auto 0;
-//     width: 70px;
-//     text-align: center;
-// }
-// #chat21-spinner.active {
-//     display: block;
-// }
-// #chat21-spinner > div {
-//     width: 12px;
-//     height: 12px;
-//     background-color: #2a69c1;
-//     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;
-// }
-// #chat21-spinner .chat21-bounce1 {
-//     -webkit-animation-delay: -0.32s;
-//     animation-delay: -0.32s;
-// }
-// #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: #2a6ac1;
-//     /* 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) }
-// }
-
-// @keyframes sk-bouncedelay {
-//     0%, 80%, 100% {
-//     -webkit-transform: scale(0);
-//     transform: scale(0);
-//     } 40% {
-//     -webkit-transform: scale(1.0);
-//     transform: scale(1.0);
-//     }
-// }
-
-// .c21-right{
-//     float: right;
-// }
-// .c21-left{
-//     float: left;
-// }
-// .clearfix:after {
-//     display: block;
-//     clear: both;
-//     content: '';
-// }
-// .clear{
-//     clear: both;
-// }
-
-// /* END LOADIN */
-
-// .c21-alert {
-//     &.c21-alert-notification {
-//         display: inline-block;
-//         margin: 0 auto;
-//         position: fixed;
-//         -webkit-transition: all .5s ease-in-out 0s;
-//         transition: all .5s ease-in-out 0s;
-//         z-index: 1031;
-//         top: -100px;
-//         left: 0px;
-//         right: 0px;
-//         max-width: 450px;
-//         width: 80%;
-//         padding: 10px;
-//         cursor: pointer;
-//         display: block;
-//     }
-//     &.alert-danger {
-//         background-color: #f55a4e;
-//         color: #fff;
-//         border-radius: 3px;
-//         -webkit-box-shadow: 0 12px 20px -10px rgba(244,67,54,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(244,67,54,.2);
-//         box-shadow: 0 12px 20px -10px rgba(244,67,54,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(244,67,54,.2);
-//     }
-//     &.animated {
-//         top: 10px;
-//         -webkit-animation-duration: 1s;
-//         animation-duration: 1s;
-//         -webkit-animation-fill-mode: both;
-//         animation-fill-mode: both;
-//     }
-
-// }
-
-// ion-navbar {
-//     .toolbar-background{
-//         /* height: 55px; */
-//         box-shadow: inset 0px -1px 0px #f7f7f7;
-//     }
-
-// }
-
-// ion-toolbar {
-//     .toolbar-background {
-//         background-color: #ffffff;
-//     }
-//     .transparent{
-//         .toolbar-background {
-//             background-color: transparent;
-//         }
-//     }
-// }
-
-// .footer:before {
-//     height: 1px;
-// }
-// // .modal-page {
-// //     z-index: 1;
-// //     background-color: transparent;
-// //     opacity: 0;
-// //     transition: all 0.2s;
-// //     right: -100%;
-// //     &.open {
-// //         // background-color: $trasp-black;
-// //         opacity: 1;
-// //         transition: all 0.3s;
-// //         right: 0px;
-// //     }
-// // }
-
-// .split-pane-side {
-//     border-right: 1px solid rgba(169, 169, 169, 0.1)!important;
-// }
-
 // START GESTIONE SIDEBAR ESTERNA CON IFRAME //
 #tld-sidebar {
     position: absolute;
@@ -362,19 +179,7 @@ app-message-text-area {
     z-index: 99999; // nk
     background: #fff; // nk
 }
-app-bubble-day-message {
-    width: 100%;
-}
-app-bubble-system-message {
-    max-width: 80%;
-    margin: 0 auto;
-}
-app-bubble-my-message {
-    width: 100%;
-}
-app-bubble-others-message {
-    width: 100%;
-}
+
 app-conversation-info {
     height: calc(100% - 60px);
 }
@@ -423,11 +228,6 @@ select:-webkit-autofill:focus {
     font-weight: 300;
 }
 
-// da rivedere
-// :host ::ng-deep tiledeskwidget-bubble-message > div > div > tiledeskwidget-image > div > img {
-//     display: none !important;
-// }
-
 /*
  * Canned responses
  * -------------------------------------------- */
@@ -436,6 +236,10 @@ select:-webkit-autofill:focus {
         opacity: 10 !important;
         cursor: pointer;
     }
+    .native-textarea[disabled] {
+        opacity: 10 !important;
+        cursor: pointer;
+    }
 }
 
 
@@ -481,18 +285,7 @@ select:-webkit-autofill:focus {
     line-height: 42px;
 }
 /* End rules for the member list refactoring in the "info-group.component.html" (replacement of ion-grid with ion-list) */
-.missing-connection-toast {
-    --background: #fdd764;
-    --color: #2e3939;
-    font-weight: 500;
-    font-size: 16px;
-}
 
-.missing-connection-toast::part(message) {
-    // display: none;
-    display: flex;
-    align-items: center;
-}
 
 // User details Sidebar
 .user-details-sidebar {
@@ -795,66 +588,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;
@@ -938,3 +735,10 @@ ul.dropdown-menu > li > a {
     margin-top: 5px !important;
 }
 
+
+
+//MODALS
+.modal-wrapper{
+    border-radius: 16px !important;
+}
+

package/src/index.html

@@ -33,15 +33,6 @@
   <!-- <script src="https://unpkg.com/mqtt@4.1.0/dist/mqtt.min.js"></script> -->
   <!-- <script src="./assets/js/watchToConnectionAtStartUp.js"></script> -->
 
-  
-  <!-- segment analytics -->
-  <script>
-    !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="qaTU0wG6VH6xPAhOzD2kneI70Txg1fTB";;analytics.SNIPPET_VERSION="4.15.3";
-    analytics.load("qaTU0wG6VH6xPAhOzD2kneI70Txg1fTB");
-    analytics.page();
-    }}();
-  </script>
-  
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />

package/src/variables.scss

@@ -1,4 +1,4 @@
-:root {
+body {
     /* Color palette */
     --white: #ffffff;
     --black: #000000;
@@ -7,27 +7,47 @@
     --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;
 
-    --bck-msg-sent: #62a8ea;
+    --bck-msg-sent: #2a6ac1;
     --col-msg-sent:#ffffff;
+
+    --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;
+    --list-bkg-color: #f8fafc;
+    --list-bkg-color-selected: rgba(24, 119, 242, 0.12); //rgba(24, 119, 242, 0.04);
+
+    --button-in-msg-font-size: 15px;
+    --buttonBackgroundColor: #ffffff;
+    --buttonTextColor: #2a6ac1;
+    --buttonHoverBackgroundColor: #2a6ac1;
+    --buttonHoverTextColor: #ffffff;
+
+    --padding-conversation-detail: 10px;
+
+    --border-radius-item: 16px;
+    --border-radius-content: 16px;
+
+    --sidebar-width: 60px;
+    --nav-bar-heigth: 60px;
+
+}

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

@@ -1,3 +0,0 @@
-<!-- <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

@@ -1,21 +0,0 @@
-.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;
-}
-