From 6fe09821e4681d1f54af3ba506e8bf2b711194c7 Mon Sep 17 00:00:00 2001 From: "tiago.kayaya" Date: Mon, 28 Dec 2020 10:11:00 +0100 Subject: [PATCH] Save --- src/app/app-routing.module.ts | 4 ++ src/app/pages/chat/chat-routing.module.ts | 4 ++ src/app/pages/chat/chat.page.html | 3 +- src/app/pages/chat/chat.page.ts | 10 ++++ .../group-messages-routing.module.ts | 17 ++++++ .../group-messages/group-messages.module.ts | 24 ++++++++ .../group-messages/group-messages.page.html | 46 +++++++++++++++ .../group-messages/group-messages.page.scss | 53 +++++++++++++++++ .../group-messages.page.spec.ts | 24 ++++++++ .../group-messages/group-messages.page.ts | 58 +++++++++++++++++++ .../new-group/contacts/contacts.page.html | 2 +- .../chat/new-group/contacts/contacts.page.ts | 6 +- .../pages/chat/new-group/new-group.page.scss | 2 +- src/app/pages/login/login.page.ts | 2 +- .../btn-modal-dismiss.page.scss | 2 +- .../chat-popover-routing.module.ts | 17 ++++++ .../chat-popover/chat-popover.module.ts | 20 +++++++ .../chat-popover/chat-popover.page.html | 16 +++++ .../chat-popover/chat-popover.page.scss | 49 ++++++++++++++++ .../chat-popover/chat-popover.page.spec.ts | 24 ++++++++ .../popover/chat-popover/chat-popover.page.ts | 15 +++++ .../popover/chat-popover/popover.modules.ts | 22 +++++++ src/app/shared/shared.module.ts | 3 + src/assets/images/icons-menu.svg | 15 +++++ src/theme/variables.scss | 19 ++++-- 25 files changed, 445 insertions(+), 12 deletions(-) create mode 100644 src/app/pages/chat/group-messages/group-messages-routing.module.ts create mode 100644 src/app/pages/chat/group-messages/group-messages.module.ts create mode 100644 src/app/pages/chat/group-messages/group-messages.page.html create mode 100644 src/app/pages/chat/group-messages/group-messages.page.scss create mode 100644 src/app/pages/chat/group-messages/group-messages.page.spec.ts create mode 100644 src/app/pages/chat/group-messages/group-messages.page.ts create mode 100644 src/app/shared/popover/chat-popover/chat-popover-routing.module.ts create mode 100644 src/app/shared/popover/chat-popover/chat-popover.module.ts create mode 100644 src/app/shared/popover/chat-popover/chat-popover.page.html create mode 100644 src/app/shared/popover/chat-popover/chat-popover.page.scss create mode 100644 src/app/shared/popover/chat-popover/chat-popover.page.spec.ts create mode 100644 src/app/shared/popover/chat-popover/chat-popover.page.ts create mode 100644 src/app/shared/popover/chat-popover/popover.modules.ts create mode 100644 src/assets/images/icons-menu.svg diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index e5b626f5d..6e197ae99 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -37,6 +37,10 @@ const routes: Routes = [ path: 'btn-modal-dismiss', loadChildren: () => import('./shared/btn-modal-dismiss/btn-modal-dismiss.module').then( m => m.BtnModalDismissPageModule) }, + { + path: 'chat-popover', + loadChildren: () => import('./shared/popover/chat-popover/chat-popover.module').then( m => m.ChatPopoverPageModule) + }, /* { diff --git a/src/app/pages/chat/chat-routing.module.ts b/src/app/pages/chat/chat-routing.module.ts index 28f7e24ea..566514901 100644 --- a/src/app/pages/chat/chat-routing.module.ts +++ b/src/app/pages/chat/chat-routing.module.ts @@ -18,6 +18,10 @@ const routes: Routes = [ { path: 'new-group', loadChildren: () => import('./new-group/new-group.module').then( m => m.NewGroupPageModule) + }, + { + path: 'group-messages', + loadChildren: () => import('./group-messages/group-messages.module').then( m => m.GroupMessagesPageModule) } ]; diff --git a/src/app/pages/chat/chat.page.html b/src/app/pages/chat/chat.page.html index e56a715c5..849dd49ca 100644 --- a/src/app/pages/chat/chat.page.html +++ b/src/app/pages/chat/chat.page.html @@ -77,7 +77,7 @@
-
+
Secretário para o sector Produtivo @@ -97,3 +97,4 @@
+ diff --git a/src/app/pages/chat/chat.page.ts b/src/app/pages/chat/chat.page.ts index b0d55a178..faa8987b7 100644 --- a/src/app/pages/chat/chat.page.ts +++ b/src/app/pages/chat/chat.page.ts @@ -3,6 +3,7 @@ import { ModalController } from '@ionic/angular'; import { AuthService } from 'src/app/services/auth.service'; import { ChatService } from 'src/app/services/chat.service'; import { ConversationPage } from './conversation/conversation.page'; +import { GroupMessagesPage } from './group-messages/group-messages.page'; import { NewGroupPage } from './new-group/new-group.page'; import { NewchatPage } from './newchat/newchat.page'; @@ -85,4 +86,13 @@ export class ChatPage implements OnInit { await modal.present(); modal.onDidDismiss(); } + async openGroupMessages(){ + const modal = await this.modalController.create({ + component: GroupMessagesPage, + cssClass: 'group-messages', + backdropDismiss: false, + }); + await modal.present(); + modal.onDidDismiss(); + } } diff --git a/src/app/pages/chat/group-messages/group-messages-routing.module.ts b/src/app/pages/chat/group-messages/group-messages-routing.module.ts new file mode 100644 index 000000000..5a4f0ae40 --- /dev/null +++ b/src/app/pages/chat/group-messages/group-messages-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { GroupMessagesPage } from './group-messages.page'; + +const routes: Routes = [ + { + path: '', + component: GroupMessagesPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class GroupMessagesPageRoutingModule {} diff --git a/src/app/pages/chat/group-messages/group-messages.module.ts b/src/app/pages/chat/group-messages/group-messages.module.ts new file mode 100644 index 000000000..204590b92 --- /dev/null +++ b/src/app/pages/chat/group-messages/group-messages.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { GroupMessagesPageRoutingModule } from './group-messages-routing.module'; + +import { GroupMessagesPage } from './group-messages.page'; +import { SharedModule } from 'src/app/shared/shared.module'; +import { PopoverModule } from 'src/app/shared/popover/chat-popover/popover.modules'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + SharedModule, + PopoverModule, + GroupMessagesPageRoutingModule + ], + declarations: [GroupMessagesPage] +}) +export class GroupMessagesPageModule {} diff --git a/src/app/pages/chat/group-messages/group-messages.page.html b/src/app/pages/chat/group-messages/group-messages.page.html new file mode 100644 index 000000000..a999b764c --- /dev/null +++ b/src/app/pages/chat/group-messages/group-messages.page.html @@ -0,0 +1,46 @@ + + +
+
+ +
+ Grupo de Trabalho A +
+
+ +
+
+
+ + + + + +

HHHHH

+ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/pages/chat/group-messages/group-messages.page.scss b/src/app/pages/chat/group-messages/group-messages.page.scss new file mode 100644 index 000000000..f02b586d7 --- /dev/null +++ b/src/app/pages/chat/group-messages/group-messages.page.scss @@ -0,0 +1,53 @@ +.header-toolbar{ + --background:transparent; + --opacity: 1; + + .main-header{ + width: 100%; /* 400px */ + height: 100%; + font-family: Roboto; + border-top-left-radius: 25px; + border-top-right-radius: 25px; + background-color: #fff; + overflow:hidden; + padding: 30px 20px 0px 20px; + color:#000; + transform: translate3d(0, 1px, 0); + + .title-content{ + width: 360px; + margin: 0px auto; + overflow: auto; + padding: 0 !important; + background: #fff; + .middle{ + padding: 0!important; + float: left; + width: 280px; + margin: 2.5px 0 0 5px; + } + .right{ + padding: 0!important; + float: right; + font-size: 25px; + color: #0782c9; + margin: 5px 0 0 0; + } + } + + .title{ + font-size: 25px; + } + .div-icon{ + width: 40px; + float: right; + font-size: 35px; + overflow: auto; + padding: 1px; + } + .div-icon ion-icon{ + float: right; + padding-left: 20px; + } + } + } \ No newline at end of file diff --git a/src/app/pages/chat/group-messages/group-messages.page.spec.ts b/src/app/pages/chat/group-messages/group-messages.page.spec.ts new file mode 100644 index 000000000..62c380096 --- /dev/null +++ b/src/app/pages/chat/group-messages/group-messages.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { GroupMessagesPage } from './group-messages.page'; + +describe('GroupMessagesPage', () => { + let component: GroupMessagesPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GroupMessagesPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(GroupMessagesPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/chat/group-messages/group-messages.page.ts b/src/app/pages/chat/group-messages/group-messages.page.ts new file mode 100644 index 000000000..2cfa68310 --- /dev/null +++ b/src/app/pages/chat/group-messages/group-messages.page.ts @@ -0,0 +1,58 @@ +import { Component, OnInit } from '@angular/core'; +import { ActionSheetController, MenuController, PopoverController } from '@ionic/angular'; +import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page'; + +@Component({ + selector: 'app-group-messages', + templateUrl: './group-messages.page.html', + styleUrls: ['./group-messages.page.scss'], +}) +export class GroupMessagesPage implements OnInit { + + message:any; + + constructor( + private menu: MenuController, + private actionSheetController: ActionSheetController, + public popoverController: PopoverController, + ) { } + + ngOnInit() { + } + + async actionSheet() { + const actionSheet = await this.actionSheetController.create({ + cssClass: 'my-custom-class', + buttons: [{ + text: 'Sair do grupo', + handler: () => { + console.log('Delete clicked'); + } + }, { + text: 'Alterar nome do grupo', + handler: () => { + console.log('Share clicked'); + } + }, { + text: 'Apagar o grupo', + handler: () => { + console.log('Play clicked'); + } + }, + ] + }); + await actionSheet.present(); + } + + async openOptions(ev: any) { + const popover = await this.popoverController.create({ + component: ChatPopoverPage, + cssClass: 'chat-popover', + event: ev, + translucent: true + }); + return await popover.present(); + } + + +} diff --git a/src/app/pages/chat/new-group/contacts/contacts.page.html b/src/app/pages/chat/new-group/contacts/contacts.page.html index 03231b252..ab73e8012 100644 --- a/src/app/pages/chat/new-group/contacts/contacts.page.html +++ b/src/app/pages/chat/new-group/contacts/contacts.page.html @@ -8,7 +8,7 @@
Contactos
- +
diff --git a/src/app/pages/chat/new-group/contacts/contacts.page.ts b/src/app/pages/chat/new-group/contacts/contacts.page.ts index 21c38f71b..82c3b001c 100644 --- a/src/app/pages/chat/new-group/contacts/contacts.page.ts +++ b/src/app/pages/chat/new-group/contacts/contacts.page.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { ModalController } from '@ionic/angular'; -import { GroupChatPage } from '../group-chat/group-chat.page'; +import { GroupMessagesPage } from '../../group-messages/group-messages.page'; @Component({ selector: 'app-contacts', @@ -32,9 +32,9 @@ export class ContactsPage implements OnInit { console.log('clicked'); } - async groupChat(){ + async groupMessages(){ const modal = await this.modalController.create({ - component: GroupChatPage, + component: GroupMessagesPage, componentProps: {}, cssClass: 'contacts', backdropDismiss: false diff --git a/src/app/pages/chat/new-group/new-group.page.scss b/src/app/pages/chat/new-group/new-group.page.scss index 8357148c1..244fbb7bd 100644 --- a/src/app/pages/chat/new-group/new-group.page.scss +++ b/src/app/pages/chat/new-group/new-group.page.scss @@ -89,7 +89,7 @@ ion-content{ padding-left: 20px; } - + } .main-content{ width: 100%; /* 400px */ diff --git a/src/app/pages/login/login.page.ts b/src/app/pages/login/login.page.ts index 6253e3263..0e019fd0a 100644 --- a/src/app/pages/login/login.page.ts +++ b/src/app/pages/login/login.page.ts @@ -83,7 +83,7 @@ export class LoginPage implements OnInit { this.router.navigate(['/home/events']); } else - { + { //this.toastService.presentToast('Não foi possível fazer login"'); this.presentAlert('O nome de utilizador e palavra-passe estão incorretas ou verifique a sua conexão com a internet e volte a tentar.'); } diff --git a/src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page.scss b/src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page.scss index 710f88b66..39e57070e 100644 --- a/src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page.scss +++ b/src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page.scss @@ -2,5 +2,5 @@ width: 37px; float: left; font-size: 35px; - overflow: auto; + overflow: hidden; } \ No newline at end of file diff --git a/src/app/shared/popover/chat-popover/chat-popover-routing.module.ts b/src/app/shared/popover/chat-popover/chat-popover-routing.module.ts new file mode 100644 index 000000000..9fb84d892 --- /dev/null +++ b/src/app/shared/popover/chat-popover/chat-popover-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { ChatPopoverPage } from './chat-popover.page'; + +const routes: Routes = [ + { + path: '', + component: ChatPopoverPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class ChatPopoverPageRoutingModule {} diff --git a/src/app/shared/popover/chat-popover/chat-popover.module.ts b/src/app/shared/popover/chat-popover/chat-popover.module.ts new file mode 100644 index 000000000..7c5def554 --- /dev/null +++ b/src/app/shared/popover/chat-popover/chat-popover.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { ChatPopoverPageRoutingModule } from './chat-popover-routing.module'; + +import { ChatPopoverPage } from './chat-popover.page'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + ChatPopoverPageRoutingModule + ], + declarations: [ChatPopoverPage] +}) +export class ChatPopoverPageModule {} diff --git a/src/app/shared/popover/chat-popover/chat-popover.page.html b/src/app/shared/popover/chat-popover/chat-popover.page.html new file mode 100644 index 000000000..69938a705 --- /dev/null +++ b/src/app/shared/popover/chat-popover/chat-popover.page.html @@ -0,0 +1,16 @@ +
+ +
+
+ Sair do Grupo. + Alterar nome +
+
+
+
+
+ Apagar grupo +
+
+ +
diff --git a/src/app/shared/popover/chat-popover/chat-popover.page.scss b/src/app/shared/popover/chat-popover/chat-popover.page.scss new file mode 100644 index 000000000..cb6972c78 --- /dev/null +++ b/src/app/shared/popover/chat-popover/chat-popover.page.scss @@ -0,0 +1,49 @@ +.buttons{ + overflow: auto; + padding-top: 10px; + padding-bottom: 10px; +} +.btn-item{ + padding: 2px; + margin: 10px 20px 10px 20px !important; + overflow: auto; +} +.btn-ok, .btn-cancel, .btn-delete{ + font-size: 13px; + padding:0 !important; +} +hr.solid { + width: 360px; + border-top: 1px solid #ebebeb; + } +.btn-ok{ + display: block; + width: 170px !important; + height: 45px !important; + border-radius: 22.5px; + /* right: 20px !important; */ + --background: #42b9fe; + --color: #ffffff !important; + float: left; + } + .btn-cancel{ + width: 170px !important; + height: 45px !important; + border-radius: 22.5px; + background-color: #e0e9ee; + --color: #061b52 !important; + --background:transparent; + --box-shadow: none; + float: right; + + } + .btn-delete{ + width: 170px !important; + height: 45px !important;; + border-radius: 22.5px; + --background: #ffe0e0; + --color: #d30a0a !important; + --padding-start:0 !important; + --padding-end:0 !important; + float: left; + } \ No newline at end of file diff --git a/src/app/shared/popover/chat-popover/chat-popover.page.spec.ts b/src/app/shared/popover/chat-popover/chat-popover.page.spec.ts new file mode 100644 index 000000000..8e2c51542 --- /dev/null +++ b/src/app/shared/popover/chat-popover/chat-popover.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { ChatPopoverPage } from './chat-popover.page'; + +describe('ChatPopoverPage', () => { + let component: ChatPopoverPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ChatPopoverPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(ChatPopoverPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/popover/chat-popover/chat-popover.page.ts b/src/app/shared/popover/chat-popover/chat-popover.page.ts new file mode 100644 index 000000000..3e18c59fb --- /dev/null +++ b/src/app/shared/popover/chat-popover/chat-popover.page.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-chat-popover', + templateUrl: './chat-popover.page.html', + styleUrls: ['./chat-popover.page.scss'], +}) +export class ChatPopoverPage implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/shared/popover/chat-popover/popover.modules.ts b/src/app/shared/popover/chat-popover/popover.modules.ts new file mode 100644 index 000000000..6612f7638 --- /dev/null +++ b/src/app/shared/popover/chat-popover/popover.modules.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { IonicModule } from '@ionic/angular'; +import { ChatPopoverPage } from './chat-popover.page'; + + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + ], + exports: [ + ChatPopoverPage, + ], + entryComponents:[], + declarations: [ + ChatPopoverPage, + ] +}) +export class PopoverModule {} \ No newline at end of file diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index dec50e8ce..981845628 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -6,6 +6,7 @@ import { HeaderPage } from './header/header.page'; import { HeaderPrPage } from './header-pr/header-pr.page'; import { BtnSeguintePage } from './btn-seguinte/btn-seguinte.page'; import { BtnModalDismissPage } from './btn-modal-dismiss/btn-modal-dismiss.page'; +import { ChatPopoverPage } from './popover/chat-popover/chat-popover.page'; @NgModule({ imports: [ @@ -18,12 +19,14 @@ import { BtnModalDismissPage } from './btn-modal-dismiss/btn-modal-dismiss.page' HeaderPrPage, BtnSeguintePage, BtnModalDismissPage, + ChatPopoverPage, ], entryComponents:[], declarations: [HeaderPage, HeaderPrPage, BtnSeguintePage, BtnModalDismissPage, + ChatPopoverPage, ] }) export class SharedModule {} \ No newline at end of file diff --git a/src/assets/images/icons-menu.svg b/src/assets/images/icons-menu.svg new file mode 100644 index 000000000..b56583239 --- /dev/null +++ b/src/assets/images/icons-menu.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 2ea173e67..877420d58 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -263,7 +263,7 @@ padding: 25px; background: rgba(51, 51, 51, 0.3); } -.newchat, .new-group, .contacts{ +.newchat, .new-group, .contacts, .group-messages, .custom-modal{ padding-top: 73px; --border-radius: 25px 25px 0 0; --border-width:0px; @@ -271,6 +271,17 @@ .capitalizeText{ text-transform: capitalize; } +//POPOVER +.chat-popover .popover-content { + width: 100% !important; + left: 0 !important; + bottom: 0 !important; + right: 0 !important; + top: calc(100% - 160px) !important; + max-height: 160px; + min-height: 160px; +} + /* .event-actions-popover ion-list{ } */ .Rectangle { @@ -381,7 +392,7 @@ .btn-ok-no-width{ height: 45px !important; margin: 0 auto; - padding: 10px 15px; + padding:0 !important; border-radius: 22.5px; background-color: #42b9fe; color: #ffffff !important; @@ -390,7 +401,7 @@ width: 170px !important; height: 45px !important; margin: 0 auto; - padding: 10px 15px; + padding:0 !important; border-radius: 22.5px; background-color: #ffe0e0; color: #d30a0a !important; @@ -399,7 +410,7 @@ width: 160px !important; height: 45px !important; margin: 0 auto; - padding: 10px 15px; + padding:0 !important; border-radius: 22.5px; background-color: #e0e9ee; color: #061b52 !important;