style new group view desktop/tablet

This commit is contained in:
tiago.kayaya
2021-03-15 18:09:41 +01:00
parent 6fba6c0d64
commit 4c29d70adf
6 changed files with 38 additions and 18 deletions
+8 -1
View File
@@ -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 {}
+2 -1
View File
@@ -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>
+11
View File
@@ -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);
@@ -2,9 +2,6 @@
<ion-toolbar class="header-toolbar">
<div class="main-header">
<div class="title-content">
<div class="left">
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
</div>
<div class="middle">
<ion-label class="title">Novo Grupo</ion-label>
</div>
@@ -15,11 +12,11 @@
</ion-header>
<ion-content>
<div class="main-content">
<div class="main-content width-100">
<div class="item-container">
<ion-input [(ngModel)]="groupName" placeholder="Título"></ion-input>
</div>
<div *ngIf="false" class="item-container-no-border">
<div *ngIf="true" class="item-container-no-border">
<ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
<ion-label>Grupo Ultra-secreto</ion-label>
</div>
@@ -47,7 +47,7 @@ ion-content{
transform: translate3d(0, 1px, 0);
.title-content{
width: 360px;
//width: 360px;
margin: 0px auto;
overflow: auto;
padding: 0 !important;
@@ -63,7 +63,7 @@ ion-content{
padding: 0!important;
float: left;
width: 221px;
margin: 2.5px 0 0 5px;
//margin: 2.5px 0 0 5px;
}
.right{
padding: 0!important;
@@ -101,7 +101,7 @@ ion-content{
padding: 15px 20px 0 20px;
.item-container{
width: 360px;
//width: 360px;
margin: 15px auto;
border: 1px solid #ebebeb;
border-radius: 5px;
@@ -110,7 +110,7 @@ ion-content{
.item-container-no-border{
display: flex;
width: 360px;
//width: 360px;
margin: 25px auto;
border-radius: 5px;
align-items: center;
@@ -124,15 +124,16 @@ ion-content{
}
.container-div{
width: 100%;
margin-bottom: 15px;
overflow: auto;
.ion-item-class-2{
width: 360px;
width: 100%;
margin: 0px auto;
.ion-icon-class{
width: 45px;
width: 5%;
height: 45px;
float: left;
padding: 10px;
@@ -140,12 +141,13 @@ ion-content{
}
}
.ion-input-class{
width: 315px;
width: 93%;
height: 45px;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 5px;
padding-right: 10px;
margin-left: 2%;
float: left;
}
}
@@ -1,5 +1,5 @@
import { analyzeAndValidateNgModules } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { ModalController, NavParams, PickerController, PopoverController } from '@ionic/angular';
import { GroupDurationPage } from 'src/app/shared/popover/group-duration/group-duration.page';
import { GroupContactsPage } from '../group-messages/group-contacts/group-contacts.page';
@@ -15,17 +15,19 @@ export class NewGroupPage implements OnInit {
displayDuration: any;
showDuration: boolean;
selectedDuration = ['','',''];
groupName:string;
//groupName:string;
@Input() groupName:string;
constructor(
private pickerController: PickerController,
private popoverController: PopoverController,
private modalController: ModalController,
private navParams: NavParams,
//private navParams: NavParams,
)
{
this.isGroupCreated = false;
this.groupName = this.navParams.get('name');
//this.groupName = this.navParams.get('name');
}
ngOnInit() {