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

-style approve entents for desktop finished

Browse Source 
-style expedient  for desktop ongoing
This commit is contained in:
tiago.kayaya
2021-03-18 16:30:03 +01:00
parent c16fc7197a
commit 2c766015e7
31 changed files with 685 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/chat/empty-chat/empty-chat.page.html
+1 -1
View File
@@ -1,5 +1,5 @@
<ion-content>
<div class="center height-100">
<p>Sem conversa selecionada</p>
<p>{{texto}}</p>
</div>
</ion-content>
src/app/shared/chat/empty-chat/empty-chat.page.ts
+2 -1
View File
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-empty-chat',
@@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./empty-chat.page.scss'],
})
export class EmptyChatPage implements OnInit {
@Input() texto:string;
constructor() { }
src/app/shared/chat/group-messages/group-messages.page.html
+1 -1
View File
@@ -55,7 +55,7 @@
<ion-footer>
<div class="container width-100 d-flex">
<div>
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
<ion-icon (click)="openSendGroupMessageOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
</div>
<div class="width-80">
<ion-item class="ion-no-padding type-message" lines="none">
src/app/shared/chat/group-messages/group-messages.page.ts
+52 -7
View File
@@ -187,8 +187,19 @@ export class GroupMessagesPage implements OnInit, OnChanges {
return await modal.present();
}
openSendGroupMessageOptions(ev: any){
if(window.innerWidth <= 1024){
console.log('mobile');
this.openChatOptions(ev);
}
else{
console.log('desktop');
this._openChatOptions();
}
}
/* async openOptions(ev: any) {
async openOptions(ev: any) {
const popover = await this.popoverController.create({
component: ChatPopoverPage,
cssClass: 'chat-popover',
@@ -202,10 +213,7 @@ export class GroupMessagesPage implements OnInit, OnChanges {
popover.onDidDismiss().then(res=>{
console.log(res);
if(res.data){
this.roomName = res.data.name.split('-').join(' ');
console.log(this.roomName);
this.load();
this.getRoomInfo();
//this.modalController.dismiss();
};
@@ -241,10 +249,10 @@ export class GroupMessagesPage implements OnInit, OnChanges {
await modal.present();
modal.onDidDismiss().then(()=>{
this.load();
this.getRoomInfo();
});
}
*/
/* async actionSheet() {
const actionSheet = await this.actionSheetController.create({
cssClass: 'my-custom-class',
@@ -271,5 +279,42 @@ export class GroupMessagesPage implements OnInit, OnChanges {
}
*/
async _openChatOptions() {
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 modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: ChatOptionsPopoverPage,
cssClass: 'model profile-modal search-submodal',
componentProps: {
roomId: this.roomId,
}
});
return await modal.present();
}
}
src/app/shared/chat/messages/messages.page.html
+2 -2
View File
@@ -10,7 +10,7 @@
<ion-icon (click)="_openMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
</div>
</div>
<div class="header-bottom" (click)="addContacts()">
<div hidden class="header-bottom" (click)="addContacts()">
<div class="header-bottom-icon">
<ion-icon src="assets/icon/icons-user.svg"></ion-icon>
</div>
@@ -48,7 +48,7 @@
<ion-footer>
<div class="container width-100 d-flex">
<div>
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
<ion-icon (click)="openSendMessageOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
</div>
<div class="width-80">
<ion-item class="ion-no-padding type-message" lines="none">
src/app/shared/chat/messages/messages.page.ts
+63
View File
@@ -147,6 +147,17 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
modal.onDidDismiss();
}
openSendMessageOptions(ev:any){
if(window.innerWidth <= 1024){
console.log('mobile');
this.openChatOptions(ev);
}
else{
console.log('desktop');
this._openChatOptions();
}
}
async openChatOptions(ev: any) {
const popover = await this.popoverController.create({
component: ChatOptionsPopoverPage,
@@ -208,5 +219,57 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
return await modal.present();
}
async _openChatOptions() {
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: ChatOptionsPopoverPage,
cssClass: 'model profile-modal search-submodal',
componentProps: {
roomId: this.roomId,
}
});
return await modal.present();
}
}