@chat21/chat21-ionic 3.0.79-rc.4 → 3.0.79

package/src/global.scss

@@ -362,7 +362,19 @@ 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);
 }
@@ -782,70 +794,66 @@ select:-webkit-autofill:focus {
 }
 
 // select teammate status in user detail drawer
-.teammate-status-in-drawer {
-
-    &.ng-select {
+.ng-select.teammate-status-in-drawer {
 
+    .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-dropdown-panel {
-        background-color: #2d323e;
-        border: 1px solid #2d323e;
-    
-        &.ng-select-bottom {
+    &.ng-select-focused:not(.ng-select-opened){
+         >.ng-select-container{
             border: 1px solid #2d323e;
-            margin-top: 8px;
-            border-top-right-radius: 4px;
-            border-top-left-radius: 4px;
-        }
+            box-shadow: unset;
+         }
+    }
+
     
-        .ng-dropdown-panel-items {
-            .ng-option {
+}
+
+.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 {
                 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 @@
-body {
+:root {
     /* Color palette */
     --white: #ffffff;
     --black: #000000;
@@ -7,47 +7,27 @@ body {
     --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: #2a6ac1;
+    --bck-msg-sent: #62a8ea;
     --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/conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.html

@@ -1,12 +0,0 @@
-<ion-toolbar [class.mobile]="isMobile">
-  
-  <ion-buttons slot="start">
-    <ion-button ion-button (click)="onBackButtonHandler()">
-      <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
-    </ion-button>
-  </ion-buttons>
-
-  <ion-title> {{headerTitle}}</ion-title>
-
-</ion-toolbar>
-

package/src/app/components/conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.scss

@@ -1,14 +0,0 @@
-ion-toolbar {
-    height: var(--header-height);   
-    &:not(.mobile){
-        --background: var(--list-bkg-color);
-        border: none;
-    }
-    &.mobile{
-        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    }
-
-    ion-button{
-        --color: var(--basic-blue);
-    }
-}

package/src/app/components/navbar/navbar.component.html

@@ -1,103 +0,0 @@
-<ion-navbar class="navbar navbar-absolute">
-  <div class="container-fluid">
-      <!-- <div class="navbar-left">
-        left
-      </div> -->
-      <div class="navbar-right">
-        <!-- test site -->
-        <ng-container *ngIf="project">
-          <button class="btn simulate-visitor-btn btn-success-no-boxshadow " (click)="testWidgetPage()">
-            <i class="material-icons" style="padding-top: 0px;font-size: 24px;">play_arrow</i>
-            {{translationsMap.get('NAVBAR.SIMULATE_VISITOR')}}
-          </button>
-        </ng-container>
-
-        <!--  ------ PROJECTS  DROPDOWN ------ -->
-        <ng-container *ngIf="project">
-            <li>
-              <button class="btn dropdown-toggle project-dropdown" (click)="openDropdownProjects = !openDropdownProjects">
-                <i class="material-icons" style="margin-right: 3px;">keyboard_arrow_down</i>
-                <span style="text-transform: none"> {{ project?.id_project?.name }} </span>
-              </button>
-              <div class="ripple-container"></div>
-              <div id="navbar_dropdown" class="dropdown-menu" [ngClass]="{'open': openDropdownProjects}">
-                
-                <!--  PROJECT SETTINGS  -->
-                <!-- <li *ngIf="USER_ROLE !== 'agent'">
-                  <a (click)="onClickDropdownOption('projectSettings')">
-                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">settings</i>
-                    {{translationsMap?.get('NAVBAR.PROJECT_SETTINGS')}}
-                  </a>
-                </li> -->
-  
-                <!--  ALL PROJECTS -->
-                <li (click)="onClickDropdownOption('allProjects')">
-                  <a style="cursor: pointer">
-                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">view_list</i>
-                    {{translationsMap?.get('NAVBAR.VIEW_ALL_PROJECTS')}}
-                  </a>
-                </li>
-  
-                <!--  ADD PROJECT -->
-                <li id="navbar_create_prjct" *ngIf="MT === true" (click)="onClickDropdownOption('addProject')">
-                  <a style="cursor: pointer">
-                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">add_circle_outline </i>
-                    {{translationsMap?.get('NAVBAR.ADD_PROJECT')}}
-                  </a>
-                </li>
-  
-                <li class="divider"></li>
-  
-                <!--  RECENT PROJECTS -->
-                <li>
-                  <span style="padding-left: 24px;font-size: 12px; color: rgb(118,149,165);font-weight: 400">
-                    {{translationsMap?.get('NAVBAR.RECENT_PROJECTS')}}
-                  </span>
-                </li>
-                <!-- 
-                ***** ngFor - reverse order of output using the index *****
-                Reverse() works in place. It means, it will change the original array. 
-                Slice without parameters returns a copy of projects, so original array, in this case, stays unchanged.  
-                let prjct of projects?.reverse()
-                -->
-                <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:0:5; let i=index" -->
-                <li *ngFor="let prjct of projects?.slice() | slice:0:5; let i=index" style="cursor: pointer">
-                  <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)"
-                    [ngClass]="{'li-selected' : prjct?.id_project?._id === project?.id_project?.id }">
-  
-                    <span> {{ prjct?.id_project?.name }} </span>
-                  </a>
-                </li>
-
-                <ng-container *ngIf="projects?.length > 5">
-                  <li class="divider"></li>
-                  <li>
-                    <span style="padding-left: 24px;font-size: 12px; color: rgb(118,149,165);font-weight: 400">
-                      {{translationsMap?.get('NAVBAR.OTHER_PROJECTS')}}
-                    </span>
-                  </li>
-    
-                  <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:5:10; let i=index" -->
-                  <li *ngFor="let prjct of projects?.slice() | slice:5:10; let i=index" style="cursor: pointer">
-                    <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)">
-                      {{ prjct?.id_project?.name }}
-                    </a>
-                  </li>
-                </ng-container>
-  
-              </div>
-            </li>
-        </ng-container>
-
-        <!--  Sound on / off -->
-        <ng-container *ngIf="project">
-          <button class="btn volume" style="cursor: pointer;" *ngIf="isSoundEnabled" (click)="onClickSound('disabled')">
-            <i class="material-icons">volume_up</i>
-          </button>
-          <button class="btn volume" style="cursor: pointer;" *ngIf="!isSoundEnabled" (click)="onClickSound('enabled')">
-            <i class="material-icons">volume_off</i>
-          </button>
-        </ng-container>
-      </div>
-  </div>
-</ion-navbar>

package/src/app/components/navbar/navbar.component.scss

@@ -1,249 +0,0 @@
-.navbar-absolute{
-    position: absolute;
-    width: calc(100%  - var(--sidebar-width));
-    margin-left: var(--sidebar-width);
-    padding-top: 5px;
-    z-index: 1;
-    padding-bottom: 5px;
-    border-bottom: 1px solid #e7e7e7;
-    top: 0;
-
-    -webkit-font-smoothing: auto;
-}
-
-.navbar{
-    background-color: #fff;
-    color: #555;
-    min-height: var(--nav-bar-heigth);
-    transition: all 150ms ease 0s;
-}
-
-.container-fluid{
-    padding-right: 15px;
-    padding-left: 15px;
-    margin-right: auto;
-    margin-left: auto;
-
-    width: 100%;
-}
-
-ion-navbar{
-    display: flex;
-    align-items: center;
-}
-
-.navbar-collapse{
-    border-top: none;
-    box-shadow: none;
-
-    padding-right: 15px;
-    padding-left: 15px;
-}
-
-.navbar-right{
-    float: right;
-
-    display: inline-flex;
-    align-items: center;
-}
-
-.navbar-left{
-    float: left;
-}
-
-.simulate-visitor-btn{
-    font-size: 12px;
-    padding: 0px 11px 0px 4px !important;
-    max-height: 24px;
-    border-radius: 30px;
-    font-family: 'Poppins';
-
-    box-shadow: unset!important;
-    text-transform: none!important;
-    background: #3ecf8e!important;
-    color: #fff;
-
-}
-
-.btn{
-    display: flex;
-    position: relative;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: center;
-
-    border: 1px solid transparent;
-    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
-}
-
-
-.dropdown-toggle, .volume{
-    background-color: transparent;
-    color: inherit;
-
-    padding: 0px 15px;
-    font-weight: 400;
-}
-
-.project-dropdown {
-    max-width: 180px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 12px;
-}
-
-li{
-    position: relative;
-    display: block
-}
-
-.dropdown-menu {
-    border-radius: 3px;
-    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.26);
-
-    position: absolute;
-    top: 100%;
-    right: 0;
-    left: auto;
-    z-index: 1000;
-    display: none;
-    float: left;
-    min-width: 160px;
-    padding: 5px 0;
-    margin: 2px 0 0;
-    font-size: 14px;
-    text-align: left;
-    list-style: none;
-    background-color: #fff;
-    -webkit-background-clip: padding-box;
-    background-clip: padding-box;
-}
-.dropdown-menu{
-    max-height: 240px;
-    overflow-y: auto;
-}
-.dropdown-menu:not(.open){
-    margin-top: -20px;
-    opacity: 0;
-    visibility: hidden;
-    display: block;
-}
-
-.dropdown-menu.open{
-    margin-top: 12px; //0;
-    opacity: 1;
-    visibility: visible;
-    display: block;
-    transition: all 150ms linear;
-}
-
-.dropdown-menu li {
-    position: relative;
-
-    .li-selected{
-        color: #4285f4;
-        background-color: #eee;
-    }
-}
-
-.dropdown-menu .divider{
-    background-color: rgba(0,0,0,.12);
-    margin: 5px 0;
-
-    height: 1px;
-    overflow: hidden;
-}
-
-.dropdown-menu li>a{
-    font-size: 13px;
-    padding: 10px 20px;
-    margin: 0 5px;
-    border-radius: 2px;
-    transition: all 150ms linear;
-
-    display: block;
-    clear: both;
-    font-weight: 400;
-    line-height: 1.42857143;
-    color: #333;
-    white-space: nowrap;
-    text-decoration: none;
-
-    cursor: pointer;
-
-    .material-icons {
-        vertical-align: middle;
-    }
-
-    &:hover{
-        background-color: #3ea9f5;
-        color: #fff;
-        box-shadow: 0 12px 20px -10px rgba(62, 169, 245, 0.28), 0 4px 20px 0 rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(62, 169, 245, 0.2);
-    }
-}
-
-
-.material-icons {
-    font-family: "Material Icons";
-    font-weight: 400;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-    font-feature-settings: "liga";
-
-    top: 0;
-    position: relative;
-    font-size: 20px;
-    vertical-align: middle;
-}
-
-.ripple-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border-radius: inherit;
-    pointer-events: none;
-
-    .disabled &{
-        display: none;
-    }
-}
-.ripple {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    margin-left: -10px;
-    margin-top: -10px;
-    border-radius: 100%;
-    background-color: #000; // fallback color
-    background-color: rgba(0,0,0,0.05);
-    transform: scale(1);
-    transform-origin: 50%;
-    opacity: 0;
-    pointer-events: none;
-}
-.ripple.ripple-on {
-    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-    opacity: 0.1;
-}
-.ripple.ripple-out {
-    transition: opacity 0.1s linear 0s !important;
-    opacity: 0;
-}
-
-
-