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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # chat21-ionic ver 3.0
 
+### 3.0.79-rc.1
+- added: LABEL_ONLINE, LABEL_OFFLINE translations
+- changed: renamed ddp-header with conversations-list-header
+- changed: unified control to mobile/desktop app
+- changed: LABEL_AVAILABLE/NOT_AVAILABLE with LABEL_ONLINE/OFFLINE in user-presence component	
+- changed: icon to user-presence
+- changed: UI for conversation-list, conversation-detail and info-group for desktop and mobile
+- changed: renamed option-header component with header-conversations-list-archived
+- changed: contacts-directory UI
+- bug-fixed: if app is opened and user press width expand, move correctly the right position
+
+## 3.0.78 in PROD 
+- bug-fixed: unassigned request not sound the if is the first at all
+- bug-fixed: canned responses opens in incorrect mode
+
 ### 3.0.78-rc.4
 - bug-fixed: unassigned request not sound the if is the first at all
 - bug-fixed: translations missed

package/package.json

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

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

@@ -53,6 +53,10 @@
     &.mobile{
         right: 0px;
     }
+    &:not(.mobile){
+        right: calc(300px + var(--padding-conversation-detail));
+        top: calc(60px + var(--padding-conversation-detail));
+    }
     &::before{
         content: "";
         width: 102px;

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

@@ -19,7 +19,8 @@ ion-item {
     --padding-start: 0;
     --inner-padding-end: 0;
     --background-hover: #000000 !important;
-    border-radius: 16px;
+    --background: transparent;
+    border-radius: var(--border-radius-item);
     margin: 4px 5px;
     .conv-container{
         width: 84%;
@@ -248,7 +249,7 @@ ion-item:hover {
 }
 
 .ion-selected {
-    --background: rgba(24, 119, 242, 0.04);
+    background: var(--list-bkg-color-selected);
     border-right: 4px solid var(--basic-blue);
 }
 

package/src/app/components/contacts-directory/contacts-directory.component.html

@@ -1,28 +1,24 @@
 
-<ion-content padding>
-  <ion-searchbar id="contacts-searchbar" debounce="500" (ionInput)="onSearchInput($event)"></ion-searchbar>
-  <ion-list>
-    
-    <ion-item button="true" lines="none" class="ion-no-padding" *ngFor="let user of contacts" (click)="goToChat(user)">
-      <div tabindex="0"></div>
-      <!-- <div [class.selected]="user.uid === uidUserSelected"></div> [style.background-color]="user.color"-->
-      <ion-avatar slot="start">
-        <div #avatarPlaceholder class="avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user.color + ')'}" [innerHTML]="user.avatar"></div>
-        <div *ngIf="user.imageurl" #avatarImage class="avatar-profile" [style.background-image]="'url(' + user.imageurl + ')'"></div>
-        <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
-        <div class="user-presence">
-          <app-presence
-          [isOnline]="user.online">
-          </app-presence>
-        </div>
-      </ion-avatar>
-      
-      <ion-label>
-        <h2>{{ user.fullname }}</h2>
-        <!-- <p>{{ user.uid }}</p> -->
-      </ion-label>
-      
-    </ion-item>
+<ion-searchbar id="contacts-searchbar" debounce="500" (ionInput)="onSearchInput($event)"></ion-searchbar>
+
+<ion-item button="true" lines="none" class="ion-no-padding" *ngFor="let user of contacts" (click)="goToChat(user)">
+  <div tabindex="0"></div>
+  <!-- <div [class.selected]="user.uid === uidUserSelected"></div> [style.background-color]="user.color"-->
+  <ion-avatar slot="start">
+    <div #avatarPlaceholder class="avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user.color + ')'}" [innerHTML]="user.avatar"></div>
+    <div *ngIf="user.imageurl" #avatarImage class="avatar-profile" [style.background-image]="'url(' + user.imageurl + ')'"></div>
+    <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
+    <div class="user-presence">
+      <app-presence
+      [isOnline]="user.online">
+      </app-presence>
+    </div>
+  </ion-avatar>
+  
+  <ion-label>
+    <h2>{{ user.fullname }}</h2>
+    <!-- <p>{{ user.uid }}</p> -->
+  </ion-label>
+  
+</ion-item>
 
-  </ion-list>
-</ion-content>

package/src/app/components/contacts-directory/contacts-directory.component.scss

@@ -1,22 +1,24 @@
 ion-item {
     cursor: pointer;
     height: 64px;
+    --min-height: 64px;
     position: relative;
     display: flex;
     text-decoration: none;
-    padding-left: 8px;
-    padding-right: 8px;
+    margin: 4px 5px;
     --padding-start: 0;
     --inner-padding-end: 0;
+    --background: transparent;
+    --background-hover: #000000 !important;
+    border-radius: var(--border-radius-item);
+    
     .selected {
-        border-radius: 10px;
-        padding-left: 8px;
-        padding-right: 8px;
         position: absolute;
         width: 100%;
         height: 100%;
         z-index:-1;
-        background-color: rgba(0, 0, 0, .05);
+        background: var(--list-bkg-color-selected);
+        border-right: 4px solid var(--basic-blue);
     }
     ion-avatar {
         position: relative;

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

@@ -1,5 +1,5 @@
-<ion-header no-border class="ion-no-border">
-  <ion-toolbar>
+<ion-header no-border class="ion-no-border" [class.mobile]="isMobile">
+  <ion-toolbar [class.mobile]="isMobile">
     <ion-buttons slot="start" style="height:60px" *ngIf="isMobile">
       <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
       <ion-back-button style="display: block;" text=""  (click)="goBackToConversationList()">
@@ -22,26 +22,31 @@
           <!-- (click)="onOpenCloseInfoConversation()" -->
           <div class="tile-info-with" 
             [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
-            <span class="tile-username">{{ conversationAvatar.conversation_with_fullname | truncate:50 }} </span>
+            <span class="tile-username truncate">{{ conversationAvatar.conversation_with_fullname}} </span>
             <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
           </div>
  
           <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '63px' : ''  }" -->
-          <div *ngIf="isDirect" class="user-presence" [ngClass]="{ 'user-presence-ios': platformName === 'ios' }">
+          <!-- <div *ngIf="isDirect" class="user-presence" [ngClass]="{ 'user-presence-ios': platformName === 'ios' }">
             <app-user-presence 
               [idUser]=conversationAvatar.conversation_with 
               [translationMap]=translationsMap
               [borderColor]=borderColor 
               [fontColor]=fontColor>
             </app-user-presence>
-          </div>
+          </div> -->
 
           <div class="subtitle-info">
             <div class="conversation_project">
               <!-- DIRECT CONV -->
               <div *ngIf="isDirect">
-                <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-                <span  class="truncate">{{translationsMap.get('DIRECT_CHAT')}}</span>
+                <app-user-presence 
+                  [idUser]="conversationAvatar.conversation_with"
+                  [isMobile]="isMobile"
+                  [translationMap]="translationsMap">
+                </app-user-presence>
+                <!-- <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                <span  class="truncate">{{translationsMap.get('DIRECT_CHAT')}}</span> -->
               </div>
               <!-- GROUP CONV -->
               <div *ngIf="conversationUid?.startsWith(TYPE_GROUP)">

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

@@ -1,11 +1,18 @@
 
 ion-header {
-    --ion-background-color: #fff;
-    border-bottom-style: solid;
-    border-color: var(--light-gray);
-    border-bottom-width: thin;
+    border: none;
+    &.mobile{
+        --ion-background-color: #fff;
+        border-bottom-style: solid;
+        border-color: var(--light-gray);
+        border-bottom-width: thin;
+    }
+    
     ion-toolbar{
         height: var(--header-height);
+        &:not(.mobile){
+            --background: var(--list-bkg-color);
+        }
         .flex-container{
             display: flex;
         }
@@ -69,14 +76,27 @@ ion-header {
         }
     }
     .tile-info-with {
-        // position: relative;
-        // display: inline-block;
-        // vertical-align: middle;
-        // margin: -6px 0px 0 6px;
-        // position: absolute;
-        // margin-left: 12px;
-        
-        // cursor: pointer;
+        display: flex;
+
+        .tile-username {
+            display: inline-block;
+            font-size: 18px;
+            margin: 0;
+            padding: 0;
+    
+            color: #1f2d3d;
+            font-weight: 400; //600;
+            -webkit-font-smoothing: antialiased;
+            text-rendering: optimizeLegibility;
+            -webkit-text-size-adjust: none;
+            -moz-text-size-adjust: none;
+            -ms-text-size-adjust: none;
+            text-size-adjust: none;
+            -webkit-user-select: text;
+            -moz-user-select: text;
+            -ms-user-select: text;
+            user-select: text;
+        }
     }
     .tile-point {
         width: 10px;
@@ -87,25 +107,7 @@ ion-header {
         margin-right: 5px;
         vertical-align: middle;
     }
-    .tile-username {
-        display: inline-block;
-        font-size: 18px;
-        margin: 0;
-        padding: 0;
-
-        color: #1f2d3d;
-        font-weight: 400; //600;
-        -webkit-font-smoothing: antialiased;
-        text-rendering: optimizeLegibility;
-        -webkit-text-size-adjust: none;
-        -moz-text-size-adjust: none;
-        -ms-text-size-adjust: none;
-        text-size-adjust: none;
-        -webkit-user-select: text;
-        -moz-user-select: text;
-        -ms-user-select: text;
-        user-select: text;
-    }
+    
 
     .tile-last-activity {
         color: var(--light-gray);
@@ -142,8 +144,8 @@ ion-header {
     background-color: #fff;
     color: #fff;
     text-align: center;
-    width: 40px;
-    height: 40px;
+    width: 44px;
+    height: 44px;
     // position: absolute;
     // top: 0;
     // left: 20px;
@@ -163,6 +165,7 @@ ion-header {
     flex-direction: column;
     justify-content: center;
     margin-left: 12px;
+    width: 80%;
 }
 
 .user-presence {

package/src/app/components/conversation-info/info-content/info-content.component.html

@@ -7,7 +7,8 @@
   </app-info-direct>
 
   <app-info-group *ngIf="panelType === 'group-panel' && IS_GROUP_PANEL === true"
-    [groupDetail]="groupDetail">
+    [groupDetail]="groupDetail"
+    [isMobile]="isMobile">
   </app-info-group>
 
   <app-info-support-group *ngIf="panelType === 'support-group-panel'"

package/src/app/components/conversation-info/info-content/info-content.component.ts

@@ -28,11 +28,12 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 
 export class InfoContentComponent implements OnInit {
   @Input() openInfoConversation: boolean;
-  @Input() translationMap: Map<string, string>;
   // @Input() member: UserModel;
   @Input() loggedUser: UserModel
   @Input() tenant: string
-  @Input() groupDetail: any
+  @Input() groupDetail: any;
+  @Input() isMobile: boolean;
+  @Input() translationMap: Map<string, string>;
 
 
   public member: UserModel;

package/src/app/components/conversation-info/info-direct/info-direct.component.html

@@ -8,15 +8,7 @@
         <div class="image-profile">
           <app-avatar-profile [itemAvatar]='member'></app-avatar-profile>
         </div>
-
-        <div class="user-presence">
-          <app-user-presence 
-            [idUser]='member.uid'
-            [translationMap]='translationMap' 
-            [borderColor]='borderColor'
-            [fontColor]='fontColor'>
-          </app-user-presence>
-        </div>
+        
         <!-- -> {{member |json}} -->
         <div class="info-profile">
           <div class="name">

package/src/app/components/conversation-info/info-direct/info-direct.component.ts

@@ -15,8 +15,6 @@ export class InfoDirectComponent implements OnInit, AfterViewInit, OnChanges {
   @Input() translationMap: Map<string, string>;
   @Input() conversationWith: string;
 
-  borderColor = '#ffffff';
-  fontColor = '#949494';
   advancedAttributes: Array<any> = [];
   private logger: LoggerService = LoggerInstance.getInstance();
 

package/src/app/components/conversation-info/info-group/info-group.component.html

@@ -1,115 +1,51 @@
 <!-- <pre style="font-size: 12px;"> {{ groupDetail | json }} </pre>  -->
 
 <ion-content class="group-profile">
-  <ion-card class="first-card">
-    <div class="chat21-box-profile chat21-box">
-      <div class="chat21-content">
-        <div class="image-profile">
-          <app-avatar-profile [itemAvatar]="groupDetail"></app-avatar-profile>
-        </div>
-
-        <div class="info-profile">
-          <div class="name">
-            <span class="read">{{groupDetail?.name}}</span>
+    <ion-card>
+      <div class="chat21-box-profile chat21-box">
+        <div class="chat21-content">
+          <div class="image-profile">
+            <app-avatar-profile [itemAvatar]="groupDetail"></app-avatar-profile>
           </div>
-        </div>
-        <!-- <div class="member-email">
-          <a [href]="'mailto:' + member.email + '?Subject='">
-            {{member.email}}
-          </a>
-        </div> -->
-      </div>
-
-    </div>
-  </ion-card>
   
-  <ion-list id="fake-members-list" *ngIf="displaySkeletonScreen">
-    <ion-item lines="none" *ngFor="let fake of generateFake(membersObjectLength)" style="margin-left:-3px">
-      <ion-avatar slot="start">
-        <ion-skeleton-text animated style="width: 44px; height: 44px;"></ion-skeleton-text>
-      </ion-avatar>
-      <ion-label>
-        <h3>
-          <ion-skeleton-text animated style="width: 60%;position: relative;top: 2px;height: 16px;"></ion-skeleton-text>
-        </h3>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-
-  <!-- <pre style="font-size: 8px;"> {{member_array | json }} </pre>  <pre style="font-size: 8px;"> {{displaySkeletonScreen}} </pre> -->
-  <ion-list id="members-list" *ngIf="groupDetail?.member_array?.length > 0 && !displaySkeletonScreen">
-    <ion-item lines="none" *ngFor='let member of groupDetail?.member_array'>
-      <ion-avatar  slot="start" style="margin-right: 12px;"> 
-        <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
-        <div class="user-online" [ngStyle]="{ 'background-color':(member?.userOnline)?'#24d066':'#db4437' }"></div>
-      </ion-avatar>
-      <ion-label>
-        <h3>
-          {{ member.fullname }}
-        </h3>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-
-
-
-
-  <div *ngIf="groupDetail" style="display:none">
-    <div *ngFor='let member of groupDetail?.member_array'>
-      <ion-grid>
-        <ion-row class="ion-align-items-center">
-          <ion-col size="3">
-            <div class="member-profile">
-              <!-- (click)="copyLoggedUserUID({member.userid)" -->
-              <!-- <div class="avatar-container" [tooltip]="useruidTooltip" [options]="tooltipOptions" placement="top"
-                content-type="template" > -->
-              <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
-              <!-- </div> -->
-              <!-- <ng-template #useruidTooltip>
-                <span> {{member.userid}}</span>
-              </ng-template> -->
-
-              <div class="user-online" [ngStyle]="{ 'background-color':(member?.userOnline)?'#24d066':'#db4437' }">
-              </div>
+          <div class="info-profile">
+            <div class="name">
+              <span class="read">{{groupDetail?.name}}</span>
             </div>
-
-
-          </ion-col>
-          <ion-col>
-            <ion-label>
-              {{ member.fullname }}
-            </ion-label>
-
-            <!-- <div class="info-group-member-email">
-              <a [href]="'mailto:' + member.email + '?Subject='">
-                {{member.email}}
-              </a>
-            </div> -->
-
-
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-      <!-- </ion-avatar>
-      </ion-item> -->
-      <!-- {{member | json}}
+          </div>
+        </div>
+  
+      </div>
+    </ion-card>
     
-    >>>  {{member?.avatar}} -->
-    </div>
-  </div>
-
-  <!-- <ion-list> 
-
-
-  </ion-list> -->
-
-  <!-- </div> -->
-
-
-  <!-- <app-advanced-info-accordion 
-  [advancedAttributes]="advancedAttributes"
-  [translationMap]="translationMap">
-
-  </app-advanced-info-accordion> -->
-
-</ion-content>
+    <ion-list id="fake-members-list" *ngIf="displaySkeletonScreen">
+      <ion-item lines="none" *ngFor="let fake of generateFake(membersObjectLength)" style="margin-left:-3px">
+        <ion-avatar slot="start">
+          <ion-skeleton-text animated style="width: 44px; height: 44px;"></ion-skeleton-text>
+        </ion-avatar>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 60%;position: relative;top: 2px;height: 16px;"></ion-skeleton-text>
+          </h3>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  
+    <!-- <pre style="font-size: 8px;"> {{member_array | json }} </pre>  <pre style="font-size: 8px;"> {{displaySkeletonScreen}} </pre> -->
+    <ion-list id="members-list" *ngIf="groupDetail?.member_array?.length > 0 && !displaySkeletonScreen">
+      <ion-item lines="none" *ngFor='let member of groupDetail?.member_array'>
+        <ion-avatar  slot="start" style="margin-right: 12px;"> 
+          <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
+          <div class="status-icon-container" [class.mobile]="isMobile" >
+            <svg xmlns="http://www.w3.org/2000/svg" [class.online]="(member?.userOnline)" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+          </div>
+        </ion-avatar>
+        <ion-label>
+          <h3>
+            {{ member.fullname }}
+          </h3>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  
+  </ion-content>