peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-19 21:06:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

style menus

Browse Source
This commit is contained in:
tiago.kayaya
2021-03-18 09:25:59 +01:00
parent 1b5d98dd2b
commit c16fc7197a
17 changed files with 291 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html
-3
View File
@@ -26,9 +26,6 @@
</ion-refresher-content>
</ion-refresher>
<div class="main-content">
<div *ngIf="members">
<ion-label class="members-label">Contactos selecção:</ion-label>
src/app/shared/chat/group-messages/group-messages.page.html
+1 -1
View File
@@ -6,7 +6,7 @@
<ion-label class="title">{{room.name.split('-').join(' ')}}</ion-label>
</div>
<div class="right">
<ion-icon (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
<ion-icon (click)="openGroupMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
</div>
</div>
<div (click)="openGroupContactsPage()" class="header-bottom">
src/app/shared/chat/group-messages/group-messages.page.ts
+51 -1
View File
@@ -1,5 +1,5 @@
import { Component, OnChanges, OnInit, Input, SimpleChanges, Output, EventEmitter} from '@angular/core';
import { ActionSheetController, MenuController, ModalController, PopoverController } from '@ionic/angular';
import { ActionSheetController, AnimationController, MenuController, ModalController, PopoverController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
@@ -34,6 +34,7 @@ export class GroupMessagesPage implements OnInit, OnChanges {
public popoverController: PopoverController,
private chatService: ChatService,
private authService: AuthService,
private animationController: AnimationController,
) {
this.isGroupCreated = true;
}
@@ -137,6 +138,55 @@ export class GroupMessagesPage implements OnInit, OnChanges {
});
this.message = "";
}
async openGroupMessagesOptions() {
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
const wrapperAnimation = this.animationController.create()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '1', right: '-100%' },
{ offset: 1, opacity: '1', right: '0px' }
]);
return this.animationController.create()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
}
const leaveAnimation = (baseEl: any) => {
return enterAnimation(baseEl).direction('reverse');
}
/* const popover = await this.popoverController.create({
component: MessagesOptionsPage,
componentProps: {
roomId: this.dm._id,
},
cssClass: 'messages-options',
event: ev,
translucent: true,
});
return await popover.present(); */
const modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: ChatPopoverPage,
cssClass: 'model profile-modal search-submodal',
componentProps: {
roomId: this.roomId,
}
});
return await modal.present();
}
/* async openOptions(ev: any) {
const popover = await this.popoverController.create({
src/app/shared/chat/messages/contacts/contacts.page.html
+4 -2
View File
@@ -19,20 +19,22 @@
</ion-header>
<ion-content>
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
<ion-refresher-content>
</ion-refresher-content>
</ion-refresher>
<div class="main-content">
<ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
<ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
<div class="item-divider" *virtualHeader="let header">
<ion-label>{{header}}</ion-label>
</div>
<div (click)="createRoom(user.username)" *virtualItem="let user" class="item-user">
<div (click)="openMessagesPage(user.username)" *virtualItem="let user" class="item-user">
<p>{{user.name}}</p>
<span class="icon">
<ion-icon class="{{user.status}}" slot="end" name="ellipse"></ion-icon>
src/app/shared/chat/messages/contacts/contacts.page.scss
+8 -9
View File
@@ -4,7 +4,7 @@
--opacity: 1;
.main-header{
width: 100%; /* 400px */
width: 100%;
height: 100%;
font-family: Roboto;
border-top-left-radius: 25px;
@@ -27,7 +27,6 @@
padding-left: 20px;
}
.title-content{
width: 360px;
margin: 0px auto;
overflow: auto;
padding: 0 !important;
@@ -80,13 +79,13 @@
--background:transparent;
}
.main-content{
width: 100%;
height: 100%;
font-family: Roboto;
margin: 0 auto;
background-color: #fff;
overflow:auto;
padding: 0 0 0 0;
width: 100%;
height: 100%;
font-family: Roboto;
margin: 0 auto;
background-color: #fff;
padding: 0 0 0 0;
overflow:auto;
.item-divider{
background: #ebebeb;
src/app/shared/chat/messages/contacts/contacts.page.ts
+19 -1
View File
@@ -1,5 +1,5 @@
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
@@ -23,6 +23,8 @@ export class ContactsPage implements OnInit {
room:any;
dm:any;
@Output() openMessage:EventEmitter<any> = new EventEmitter<any>();
constructor(
private modalController: ModalController,
private http: HttpClient,
@@ -46,6 +48,22 @@ export class ContactsPage implements OnInit {
this.textSearch = event.detail.value;
}
openMessagesPage(username:string){
if( window.innerWidth <= 1024){
this.createRoom(username);
}
else{
let body = {
username: username,
}
this.chatService.createRoom(body).subscribe(res => {
console.log(res);
this.room = res['room'];
this.openMessage.emit(this.room._id);
});
}
}
loadUsers(){
this.options = {
headers: this.headers,
src/app/shared/chat/messages/messages.page.html
+1 -1
View File
@@ -7,7 +7,7 @@
<span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
</div>
<div class="right">
<ion-icon (click)="openMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
<ion-icon (click)="_openMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
</div>
</div>
<div class="header-bottom" (click)="addContacts()">
src/app/shared/chat/messages/messages.page.ts
+54 -1
View File
@@ -1,10 +1,11 @@
import { AfterViewChecked, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { ModalController, NavParams, PopoverController } from '@ionic/angular';
import { AnimationController, ModalController, NavParams, PopoverController } from '@ionic/angular';
import { Status } from 'src/app/models/chat/status.model';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
import { ProfileComponent } from '../../headers/header-no-search/profile/profile.component';
import { ContactsPage } from '../new-group/contacts/contacts.page';
@Component({
@@ -33,6 +34,7 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
/* private navParams: NavParams, */
private chatService: ChatService,
private authService: AuthService,
private animationController: AnimationController,
) {
/* this.dm = this.navParams.get('dm'); */
}
@@ -155,5 +157,56 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
return await popover.present();
}
async _openMessagesOptions() {
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
const wrapperAnimation = this.animationController.create()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '1', right: '-100%' },
{ offset: 1, opacity: '1', right: '0px' }
]);
return this.animationController.create()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
}
const leaveAnimation = (baseEl: any) => {
return enterAnimation(baseEl).direction('reverse');
}
/* const popover = await this.popoverController.create({
component: MessagesOptionsPage,
componentProps: {
roomId: this.dm._id,
},
cssClass: 'messages-options',
event: ev,
translucent: true,
});
return await popover.present(); */
const modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: MessagesOptionsPage,
cssClass: 'model profile-modal search-submodal',
componentProps: {
roomId: this.roomId,
}
});
return await modal.present();
}
}