style new group view desktop/tablet

src/app/pages/chat/chat.module.ts

@@ -13,6 +13,7 @@ import { GroupMessagesPage } from 'src/app/shared/chat/group-messages/group-mess
 import { MessagesPage } from 'src/app/shared/chat/messages/messages.page';
 import { EmptyChatPage } from 'src/app/shared/chat/empty-chat/empty-chat.page';
 import { ContactsPage } from 'src/app/shared/chat/messages/contacts/contacts.page';
+import { NewGroupPage } from 'src/app/shared/chat/new-group/new-group.page';
 
 @NgModule({
   imports: [
@@ -28,8 +29,14 @@ import { ContactsPage } from 'src/app/shared/chat/messages/contacts/contacts.pag
     MessagesPage,
     ContactsPage,
     GroupMessagesPage,
+    NewGroupPage,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  entryComponents: [MessagesPage,ContactsPage, GroupMessagesPage]
+  entryComponents: [
+    MessagesPage,
+    ContactsPage, 
+    GroupMessagesPage,
+    NewGroupPage,
+  ]
 })
 export class ChatPageModule {}

src/app/pages/chat/chat.page.html

@@ -17,7 +17,7 @@
               <ion-label class="title">Chat</ion-label>
             </div>
             <div class="div-icon">
-              <ion-icon slot="end" (click)="newGroup()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
+              <ion-icon slot="end" (click)="openNewGroupPage()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
               <ion-icon slot="end" (click)="openContactsPage()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
             </div>
           </div>
@@ -93,6 +93,7 @@
         <app-empty-chat class="d-flex height-100" *ngIf="showEmptyComponent"></app-empty-chat>
         <app-messages class="d-flex height-100 flex-column" [roomId]="roomId" *ngIf="showMessages" #messagecontainer></app-messages>
         <app-contacts *ngIf="showContacts" class="d-flex height-100"></app-contacts>
+        <app-new-group *ngIf="showNewGroup" class="d-flex height-100 flex-column"></app-new-group>
         <app-group-messages *ngIf="showGroupMessages" class="d-flex height-100 flex-column" [roomId]="roomId" #messagecontainer></app-group-messages>
       </div>
   </div>

src/app/pages/chat/chat.page.ts

@@ -60,6 +60,7 @@ export class ChatPage implements OnInit {
   showEmptyComponent=true;
   showMessages=false;
   showContacts=false;
+  showNewGroup=false;
   showGroupMessages=false;
 
   @Output() getRoomInfo;
@@ -102,6 +103,7 @@ export class ChatPage implements OnInit {
   closeAllDesktopComponents() {
     this.showMessages=false;
     this.showContacts=false;
+    this.showNewGroup=false;
     this.showGroupMessages=false;
     this.showEmptyComponent=false;
   }
@@ -128,6 +130,15 @@ export class ChatPage implements OnInit {
       this.showContacts=true;
     }
   }
+  openNewGroupPage() {
+    if( window.innerWidth <= 1024){
+      this.newGroup();
+    }
+    else{
+      this.closeAllDesktopComponents();
+      this.showNewGroup=true;
+    }
+  }
   openGroupMessagesPage(rid) {
     if( window.innerWidth <= 1024){
       this.openGroupMessagesModal(rid);