@chat21/chat21-ionic 3.0.97-rc.1 → 3.0.97-rc.3

package/src/global.scss

@@ -607,24 +607,29 @@ select:-webkit-autofill:focus {
 
 // select teammate status in user detail drawer
 .teammate-status-in-drawer {
-
+    &.sidebar{
+        --background-color: #2d323e;
+    }
+    &.profile-info{
+        --background-color: #1e2129;
+    }
     &.ng-select {
 
         .ng-select-container {
-            background-color: #2d323e;
+            background-color: var(--background-color);
             color: #fff;
-            border: 1px solid #2d323e;
+            border: 1px solid var(--background-color);
         }
         &.ng-select-opened{
             .ng-select-container {
-                background-color: #2d323e;
-                border: 1px solid #2d323e;
+                background-color: var(--background-color);
+                border: 1px solid var(--background-color);
             }
         }
     
         &.ng-select-focused:not(.ng-select-opened){
              >.ng-select-container{
-                border: 1px solid #2d323e;
+                border: 1px solid var(--background-color);
                 box-shadow: unset;
              }
         }
@@ -633,11 +638,11 @@ select:-webkit-autofill:focus {
     }
 
     .ng-dropdown-panel {
-        background-color: #2d323e;
-        border: 1px solid #2d323e;
+        background-color: var(--background-color);
+        border: 1px solid var(--background-color);
     
         &.ng-select-bottom {
-            border: 1px solid #2d323e;
+            border: 1px solid var(--background-color);
             margin-top: 8px;
             border-top-right-radius: 4px;
             border-top-left-radius: 4px;
@@ -645,7 +650,7 @@ select:-webkit-autofill:focus {
     
         .ng-dropdown-panel-items {
             .ng-option {
-                background-color: #2d323e;
+                background-color: var(--background-color);
                 color: #fff;
     
                 &.ng-option-marked {
@@ -654,7 +659,7 @@ select:-webkit-autofill:focus {
                 }
     
                 &.ng-option-selected {
-                    background-color: #2d323e;
+                    background-color: var(--background-color);
                     color: #fff;
                 }
     
@@ -756,20 +761,27 @@ ul.dropdown-menu > li > a {
 
 
 //MODALS
-.modal-wrapper{
-    border-radius: 16px !important;
+//is desktop computers, laptops, and smartphones with a stylus 
+@media (hover: hover) {
+    .modal-wrapper{
+        border-radius: 16px !important;
+    }
 
+    .json-modal-class .modal-wrapper{
+        --height: 90%;
+        --width: 70%;
+        span.key{ color: red; }
+        span.number { color:#6eb4bc; }
+        span.boolean { color:#a693e0; }
+        span.null { color:#e09393; }
+        span.key { color: #a9d18f; }
+    }
 }
+// .modal-wrapper{
+//     border-radius: 16px !important;
+// }
+
 
-.json-modal-class .modal-wrapper{
-    --height: 90%;
-    --width: 70%;
-    span.key{ color: red; }
-    span.number { color:#6eb4bc; }
-    span.boolean { color:#a693e0; }
-    span.null { color:#e09393; }
-    span.key { color: #a9d18f; }
-}
 
 
 //TOAST
@@ -788,3 +800,103 @@ ul.dropdown-menu > li > a {
         width: 250px; 
     }
 }
+
+
+//TOOLTIP
+.tooltip-container {
+    font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    letter-spacing: normal;
+    font-stretch: normal;
+    font-variant: normal;
+    font-weight: 300;
+    z-index: 100;
+    position: fixed;
+    padding: 6px 12px;
+    line-height: initial;
+    color: black;
+    width: auto;
+    background:rgb(255, 255, 255);
+    border-radius: 10px;
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); 
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+    box-sizing: border-box;
+    opacity: 0;
+    transform: translate(-80%, -70%);
+    animation: tooltip-slide 0.18s ease-out 0.5s;
+    animation-fill-mode: forwards;
+    pointer-events: none;
+}
+
+@keyframes tooltip-slide {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -70%);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+
+
+.ng-tooltip {
+    position: absolute;
+    max-width: 150px;
+    font-size: 14px;
+    text-align: center;
+    color: black;
+    padding: 3px 8px;
+    background:rgb(255, 255, 255);
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); 
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+    border-radius: 10px;
+    z-index: 1000;
+    opacity: 0;
+
+    font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    letter-spacing: normal;
+    font-stretch: normal;
+    font-variant: normal;
+    font-weight: 300;
+
+  }
+  .ng-tooltip:after {
+    content: "";
+    position: absolute;
+    border-style: solid;
+  }
+  .ng-tooltip-top:after {
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-color: rgb(255, 255, 255) transparent transparent transparent;
+  }
+  .ng-tooltip-bottom:after {
+    bottom: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-color: transparent transparent rgb(255, 255, 255) transparent;
+  }
+  .ng-tooltip-left:after {
+    top: 50%;
+    left: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-color: transparent transparent transparent rgb(255, 255, 255);
+  }
+  .ng-tooltip-right:after {
+    top: 50%;
+    right: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-color: transparent rgb(255, 255, 255) transparent transparent;
+  }
+  .ng-tooltip-show {
+    opacity: 1;
+  }

package/src/index.html

@@ -11,8 +11,7 @@
 
   <!-- <meta name="color-scheme" content="light dark" /> disable dark mode: Note in theme/variable.scss is also commented all the code that referts to dark-mode -->
   <meta name="color-scheme" content="light" />
-  <meta name="viewport"
-    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="viewport" content="width=device-width, height=device-height ,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <meta name="format-detection" content="telephone=no" />
   <meta name="msapplication-tap-highlight" content="no" />
 

package/src/app/pages/details/details-routing.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { DetailsPage } from './details.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: DetailsPage
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class DetailsPageRoutingModule {}

package/src/app/pages/details/details.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
-
-import { DetailsPageRoutingModule } from './details-routing.module';
-
-import { DetailsPage } from './details.page';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonicModule,
-    DetailsPageRoutingModule
-  ],
-  declarations: [
-    DetailsPage]
-})
-export class DetailsPageModule {}

package/src/app/pages/details/details.page.html

@@ -1,28 +0,0 @@
-<ion-header class="ion-no-border">
-  <ion-toolbar>
-  
-    <!-- <ion-buttons slot="start">
-      <ion-button ion-button icon-only fill="clear" (click)="onOpenContactsDirectory($event)">
-        <ion-icon slot="icon-only" name="reorder-three-outline"></ion-icon>
-      </ion-button>
-    </ion-buttons> -->
-  
-    <ion-title>
-     conversation
-    </ion-title>
-  
-    <!-- <ion-buttons slot="end">
-      <ion-button ion-button fill="clear" (click)="onClose()">
-        <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon>
-      </ion-button>
-      <ion-button ion-button fill="clear" (click)="onClose()">
-        <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon>
-      </ion-button>
-    </ion-buttons> -->
-
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  detail
-</ion-content>

package/src/app/pages/details/details.page.scss

@@ -1,23 +0,0 @@
-ion-header {
-    border-bottom-style: solid;
-    border-color: var(--light-gray);
-    border-bottom-width: thin;
-}
-ion-grid {
-    height: 100%; 
-    background-color: gainsboro;
-}
-.content {
-    height: 100%;
-}
-.chat{
-    height: calc(100% - 40px);
-}
-.insert{
-    height: 40px;
-    background-color: red;
-}
-.info {
-    max-width: 250px;
-    background-color: yellow;
-}

package/src/app/pages/details/details.page.spec.ts

@@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { DetailsPage } from './details.page';
-
-describe('DetailsPage', () => {
-  let component: DetailsPage;
-  let fixture: ComponentFixture<DetailsPage>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ DetailsPage ],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DetailsPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/app/pages/details/details.page.ts

@@ -1,65 +0,0 @@
-import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-
-// Logger
-import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-
-@Component({
-  selector: 'app-details',
-  templateUrl: './details.page.html',
-  styleUrls: ['./details.page.scss'],
-})
-export class DetailsPage implements OnInit, OnDestroy {
-
-  conversationWith: string;
-  conversationWithFullname: string;
-  private logger: LoggerService = LoggerInstance.getInstance();
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router
-    
-  ) {
-    this.conversationWith = this.route.snapshot.paramMap.get('IDConv');
-    this.conversationWithFullname = this.route.snapshot.paramMap.get('FullNameConv');
-    this.logger.log('constructor DetailsPage: ', this.conversationWith, this.conversationWithFullname);
-  }
-
-  ngOnInit() {
-    this.conversationWith = this.route.snapshot.paramMap.get('IDConv');
-    this.conversationWithFullname = this.route.snapshot.paramMap.get('FullNameConv');
-    this.logger.log('ngOnInit DetailsPage: ', this.conversationWith, this.conversationWithFullname);
-  }
-
-  // ngOnDestroy() {
-  //   this.conversationWith = this.route.snapshot.paramMap.get('IDConv');
-  //   this.conversationWithFullname = this.route.snapshot.paramMap.get('FullNameConv');
-  //   this.logger.log('ngOnDestroy DetailsPage: ', this.conversationWith, this.conversationWithFullname);
-  //   // this.destroyParent();
-  // }
-
-  @HostListener("window:beforeunload")
-  ngOnDestroy() {
-    this.logger.log("Parent component destroyed")
-  }
-
-  ionViewWillEnter() {
-    this.conversationWith = this.route.snapshot.paramMap.get('IDConv');
-    this.conversationWithFullname = this.route.snapshot.paramMap.get('FullNameConv');
-    this.logger.log('ionViewWillEnter DetailsPage: ', this.conversationWith, this.conversationWithFullname);
-  }
-
-  /** */
-  ionViewDidEnter() {
-    this.conversationWith = this.route.snapshot.paramMap.get('IDConv');
-    this.conversationWithFullname = this.route.snapshot.paramMap.get('FullNameConv');
-    this.logger.log('ionViewDidEnter DetailsPage: ', this.conversationWith, this.conversationWithFullname);
-  }
-
-  ionViewWillLeave() {
-    this.conversationWith = this.route.snapshot.paramMap.get('IDConv');
-    this.conversationWithFullname = this.route.snapshot.paramMap.get('FullNameConv');
-    this.logger.log('ionViewWillLeave DetailsPage: ', this.conversationWith, this.conversationWithFullname);
-  }
-
-}

package/src/assets/chat21-logo.svg

@@ -1,78 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   id="svg30"
-   version="1.1"
-   viewBox="0 0 412 132">
-  <metadata
-     id="metadata34">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs4">
-    <style
-       id="style2">.cls-1{fill:#3c3c3b;}.cls-2{fill:#ef806e;}.cls-3{fill:none;}</style>
-  </defs>
-  <title
-     id="title6">tiledesk-logo</title>
-  <g
-     data-name="Livello 2"
-     id="Livello_2">
-    <g
-       data-name="Livello 1"
-       id="Livello_1-2">
-      <path
-         id="path8"
-         d="M88.09,58.83h11V41.69h7V58.83h10.93v6.52H106.14v37.59h-7V65.35h-11Z"
-         class="cls-1" />
-      <path
-         id="path10"
-         d="M135,46.75a4.45,4.45,0,1,1-1.3-3.16A4.3,4.3,0,0,1,135,46.75Zm-7.92,56.19V58.83h7v44.11Z"
-         class="cls-1" />
-      <path
-         id="path12"
-         d="M149.54,102.94V27.75h7v75.19Z"
-         class="cls-1" />
-      <path
-         id="path14"
-         d="M214.71,83.59h-38.8a15,15,0,0,0,5.51,9.32,15.94,15.94,0,0,0,17.49,2A16.22,16.22,0,0,0,204.68,90h8a22.46,22.46,0,0,1-8.47,10,21,21,0,0,1-11.53,3.66,25.12,25.12,0,0,1-10-1.8,23.88,23.88,0,0,1-7.32-4.91,21.92,21.92,0,0,1-6.77-16.24,23.1,23.1,0,0,1,23.06-23.06,22.57,22.57,0,0,1,16.09,6.52,21,21,0,0,1,7,15.74ZM201.62,68.26a15.18,15.18,0,0,0-10-3.61q-8.57,0-13.53,7.77A15.58,15.58,0,0,0,176,77.58h31.28A16.21,16.21,0,0,0,201.62,68.26Z"
-         class="cls-1" />
-      <path
-         id="path16"
-         d="M261.32,102.94V95.41q-.59.77-1.25,1.52a20.38,20.38,0,0,1-30.78,0,24.24,24.24,0,0,1,0-32.08,20.38,20.38,0,0,1,30.78,0q.66.74,1.25,1.52V27.75h7v75.19Zm-4.46-33.28a15.16,15.16,0,0,0-22.16,0,16.36,16.36,0,0,0,0,22.46,15.16,15.16,0,0,0,22.16,0,16.36,16.36,0,0,0,0-22.46Z"
-         class="cls-1" />
-      <path
-         id="path18"
-         d="M326.49,83.59h-38.8a15,15,0,0,0,5.51,9.32,15.94,15.94,0,0,0,17.49,2A16.22,16.22,0,0,0,316.46,90h8A22.46,22.46,0,0,1,316,100a21,21,0,0,1-11.53,3.66,25.12,25.12,0,0,1-10-1.8,23.88,23.88,0,0,1-7.32-4.91,21.92,21.92,0,0,1-6.77-16.24,23.1,23.1,0,0,1,23.06-23.06,22.57,22.57,0,0,1,16.09,6.52,21,21,0,0,1,7,15.74ZM313.4,68.26a15.18,15.18,0,0,0-10-3.61q-8.58,0-13.53,7.77a15.58,15.58,0,0,0-2.11,5.16h31.28A16.21,16.21,0,0,0,313.4,68.26Z"
-         class="cls-1" />
-      <path
-         id="path20"
-         d="M351.22,98.43q9.63,0,9.63-7.2,0-4.2-6.9-6.44-2.91-1-6.26-1.77a34,34,0,0,1-6.3-2.16,12.35,12.35,0,0,1-5.11-4,9.67,9.67,0,0,1-1.7-5.7q0-6.57,4.62-10a18.18,18.18,0,0,1,11-3.39,20,20,0,0,1,10.66,2.64q4.23,2.6,5.64,9.29H359q-1.12-3.69-3.42-4.9A11.72,11.72,0,0,0,350,63.64a10.66,10.66,0,0,0-5.63,1.42,4.8,4.8,0,0,0-2.4,4.42,5,5,0,0,0,2,4.36,17.61,17.61,0,0,0,4.87,2.28q2.91.91,6.26,1.66A29.59,29.59,0,0,1,361.46,80q6.81,3.25,6.81,10.37t-5.1,10.52a19.46,19.46,0,0,1-5.67,2.55,25.09,25.09,0,0,1-6.67.85q-15.34,0-17.62-13.63h7.42q1.12,4.29,3.78,6A12,12,0,0,0,351.22,98.43Z"
-         class="cls-1" />
-      <path
-         id="path22"
-         d="M378.32,102.94V27.75h7V78.58l16.14-19.85h9.32L392.65,80.19,412,102.94h-9.32L385.33,81.78v21.17Z"
-         class="cls-1" />
-      <polygon
-         id="polygon24"
-         points="38.24 27.75 0 27.75 0 104.25 76.49 104.25 76.49 66 38.24 66 38.24 27.75"
-         class="cls-2" />
-      <rect
-         id="rect26"
-         height="132"
-         width="412"
-         class="cls-3" />
-    </g>
-  </g>
-</svg>