@chat21/chat21-ionic 3.0.79 → 3.0.80-rc.1

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

@@ -590,8 +590,10 @@ export function setConversationAvatar(
   conversationWith: string,
   conversationWithFullname: string,
   conversationChannelType: string,
+  projectId?: string,
+  project_name?: string,
   width?: string,
-  height?: string
+  height?: string,
 ): any {
   const conversationWidth = (width) ? width : '40px';
   const conversationHeight = (height) ? height : '40px';
@@ -602,6 +604,8 @@ export function setConversationAvatar(
     channelType: conversationChannelType,
     avatar: avatarPlaceholder(conversationWithFullname),
     color: getColorBck(conversationWithFullname),
+    projectId: projectId,
+    project_name: project_name,
     width: conversationWidth,
     height: conversationHeight
   };
@@ -694,15 +698,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 +834,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

@@ -362,19 +362,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);
 }
@@ -794,66 +782,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/index.html

@@ -33,7 +33,7 @@
   <!-- <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";
@@ -41,7 +41,7 @@
     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;
-}
-

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

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

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

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

@@ -1,98 +0,0 @@
-.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/conversation-detail/bubble-my-message/bubble-my-message.component.ts

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

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