diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a85a10ecd..fe5ac4924 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,83 +1,87 @@ -import { NgModule } from '@angular/core'; -import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; - -const routes: Routes = [ - { - path: '', - loadChildren: () => import('./index/index.module').then(m => m.IndexPageModule) - }, - { - path: '', - loadChildren: () => import('./home/home.module').then( m => m.HomePageModule) - }, - { - path: 'events', - loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule) - }, - { - path: 'chat', - loadChildren: () => import('./pages/chat/chat.module').then( m => m.ChatPageModule) - }, - { - path: 'publications', - loadChildren: () => import('./pages/publications/publications.module').then( m => m.PublicationsPageModule) - }, - { - path: 'header', - loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule) - }, - { - path: 'header', - loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule) - }, - { - path: 'header-pr', - loadChildren: () => import('./shared/header-pr/header-pr.module').then( m => m.HeaderPrPageModule) - }, - { - path: 'btn-seguinte', - loadChildren: () => import('./shared/btn-seguinte/btn-seguinte.module').then( m => m.BtnSeguintePageModule) - }, - { - 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) - }, - { - path: 'chat-options-popover', - loadChildren: () => import('./shared/popover/chat-options-popover/chat-options-popover.module').then( m => m.ChatOptionsPopoverPageModule) +import { NgModule } from '@angular/core'; +import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; + +const routes: Routes = [ + { + path: '', + loadChildren: () => import('./index/index.module').then(m => m.IndexPageModule) + }, + { + path: '', + loadChildren: () => import('./home/home.module').then( m => m.HomePageModule) + }, + { + path: 'events', + loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule) + }, + { + path: 'chat', + loadChildren: () => import('./pages/chat/chat.module').then( m => m.ChatPageModule) + }, + { + path: 'publications', + loadChildren: () => import('./pages/publications/publications.module').then( m => m.PublicationsPageModule) + }, + { + path: 'header', + loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule) + }, + { + path: 'header', + loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule) + }, + { + path: 'header-pr', + loadChildren: () => import('./shared/header-pr/header-pr.module').then( m => m.HeaderPrPageModule) + }, + { + path: 'btn-seguinte', + loadChildren: () => import('./shared/btn-seguinte/btn-seguinte.module').then( m => m.BtnSeguintePageModule) + }, + { + 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) + }, + { + path: 'chat-options-popover', + loadChildren: () => import('./shared/popover/chat-options-popover/chat-options-popover.module').then( m => m.ChatOptionsPopoverPageModule) + }, { + path: 'messages-options', + loadChildren: () => import('./shared/popover/messages-options/messages-options.module').then( m => m.MessagesOptionsPageModule) }, - - /* { - path: 'cal-modal', - loadChildren: () => import('./pages/cal-modal/cal-modal.module').then( m => m.CalModalPageModule) - }, */ - /* { - path: 'events', - loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule) - }, */ - - /* - { - path: 'gabinete-digital-menu', - loadChildren: () => import('./pages/gabinete-digital-menu/gabinete-digital-menu.module').then( m => m.GabineteDigitalMenuPageModule) - }, - - - { - path: 'view-event', - loadChildren: () => import('./pages/view-event/view-event.module').then( m => m.ViewEventPageModule) - }, */ - -]; -@NgModule({ - imports: [ - RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) - ], - exports: [RouterModule] -}) -export class AppRoutingModule {} + + + /* { + path: 'cal-modal', + loadChildren: () => import('./pages/cal-modal/cal-modal.module').then( m => m.CalModalPageModule) + }, */ + /* { + path: 'events', + loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule) + }, */ + + /* + { + path: 'gabinete-digital-menu', + loadChildren: () => import('./pages/gabinete-digital-menu/gabinete-digital-menu.module').then( m => m.GabineteDigitalMenuPageModule) + }, + + + { + path: 'view-event', + loadChildren: () => import('./pages/view-event/view-event.module').then( m => m.ViewEventPageModule) + }, */ + +]; +@NgModule({ + imports: [ + RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) + ], + exports: [RouterModule] +}) +export class AppRoutingModule {} diff --git a/src/app/pages/chat/chat-routing.module.ts b/src/app/pages/chat/chat-routing.module.ts index 566514901..dd3a97dfb 100644 --- a/src/app/pages/chat/chat-routing.module.ts +++ b/src/app/pages/chat/chat-routing.module.ts @@ -22,6 +22,10 @@ const routes: Routes = [ { path: 'group-messages', loadChildren: () => import('./group-messages/group-messages.module').then( m => m.GroupMessagesPageModule) + }, + { + path: 'messages', + loadChildren: () => import('./messages/messages.module').then( m => m.MessagesPageModule) } ]; diff --git a/src/app/pages/chat/chat.page.html b/src/app/pages/chat/chat.page.html index 397f20f6a..12eec3a52 100644 --- a/src/app/pages/chat/chat.page.html +++ b/src/app/pages/chat/chat.page.html @@ -37,7 +37,7 @@ - +

{{user.name}}

@@ -48,10 +48,10 @@
-
+
- Secretário Assuntos Sociais + Secretário para o sector Produtivo
15:00
@@ -64,15 +64,31 @@
-
+
- Secretário para o Sector Produtivo + Secretário para o sector Produtivo
-
Ontem
+
15:00
-

Viva!

+

Podemos marcar reunião para amanha

+
+
+
+
+
+ +
+
+
+
+ Secretário para o sector Produtivo +
+
15:00
+
+
+

Podemos marcar reunião para amanha

diff --git a/src/app/pages/chat/chat.page.ts b/src/app/pages/chat/chat.page.ts index e075abaa5..76a4edeba 100644 --- a/src/app/pages/chat/chat.page.ts +++ b/src/app/pages/chat/chat.page.ts @@ -4,6 +4,7 @@ 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 { MessagesPage } from './messages/messages.page'; import { NewGroupPage } from './new-group/new-group.page'; import { NewchatPage } from './newchat/newchat.page'; @@ -87,6 +88,15 @@ export class ChatPage implements OnInit { await modal.present(); modal.onDidDismiss(); } + async openMessages(){ + const modal = await this.modalController.create({ + component: MessagesPage, + cssClass: 'group-messages', + backdropDismiss: false, + }); + await modal.present(); + modal.onDidDismiss(); + } async openGroupMessages(){ const modal = await this.modalController.create({ component: GroupMessagesPage, diff --git a/src/app/pages/chat/messages/messages-routing.module.ts b/src/app/pages/chat/messages/messages-routing.module.ts new file mode 100644 index 000000000..b7675fe7c --- /dev/null +++ b/src/app/pages/chat/messages/messages-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { MessagesPage } from './messages.page'; + +const routes: Routes = [ + { + path: '', + component: MessagesPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class MessagesPageRoutingModule {} diff --git a/src/app/pages/chat/messages/messages.module.ts b/src/app/pages/chat/messages/messages.module.ts new file mode 100644 index 000000000..c933f79fe --- /dev/null +++ b/src/app/pages/chat/messages/messages.module.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 { MessagesPageRoutingModule } from './messages-routing.module'; + +import { MessagesPage } from './messages.page'; +import { SharedModule } from 'src/app/shared/shared.module'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + SharedModule, + MessagesPageRoutingModule + ], + declarations: [MessagesPage] +}) +export class MessagesPageModule {} diff --git a/src/app/pages/chat/messages/messages.page.html b/src/app/pages/chat/messages/messages.page.html new file mode 100644 index 000000000..f41c4a77e --- /dev/null +++ b/src/app/pages/chat/messages/messages.page.html @@ -0,0 +1,108 @@ + + +
+
+ +
+ Bruno Faria + +
+
+ +
+
+
+
+ +
+
+ Adicionar contacto +
+
+
+
+
+ + +
+
+
+ Secretário Assuntos sociais + 14:23 +
+
+ + +
+
+
+
+ Secretário Assuntos sociais + 14:23 +
+
+ Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república +
+
+
+
+ Presidente da República + 14:23 +
+
+ Pois é, momentos históricos +
+
+
+
+ Ministro do interior + 16:23 +
+
+ Grande momento +
+
+
+
+ Secretário Assuntos sociais + 14:23 +
+
+ Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república +
+
+
+
+ Secretário Assuntos sociais + 14:23 +
+
+ Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/pages/chat/messages/messages.page.scss b/src/app/pages/chat/messages/messages.page.scss new file mode 100644 index 000000000..b68dcf139 --- /dev/null +++ b/src/app/pages/chat/messages/messages.page.scss @@ -0,0 +1,166 @@ +@import '~src/function.scss'; +.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); + + .header-top{ + 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; + } + } + .header-bottom{ + width: 310px; + overflow: auto; + margin: 0 auto; + + .header-bottom-icon{ + width: 30px; + font-size: 25px; + float: left; + padding: 2px; + + } + .header-bottom-contacts{ + width: 275px; + font-size: 15px; + color: #797979; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + float: left; + padding: 5px; + margin: 1px; + } + } + + .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; + } + } + } + ion-content{ + .welcome-text{ + /* width: 322px; */ + width: em(422px); + background: #ebebeb; + text-align: center; + font-size: 13px; + color: #797979; + padding: 10px; + margin: 0 auto; + line-height: 1.2rem; + margin: 20px 39px 25px; + border-radius: 8px; + } + .messages{ + font-size: 13px; + font-family: Roboto; + overflow: auto; + + .incoming, .outgoing{ + width: 305px; + padding: 15px 20px; + border-radius: 10px; + } + + .incoming{ + margin: 10px 75px 10px 20px; + background: #ebebeb; + float: left; + + } + } + .outgoing{ + margin: 10px 20px 10px 75px; + background: #e4f4fe; + float: right; + } + .title{ + display: inline; + color: #0782c9; + font-weight: bold; + margin-bottom: 5px; + + .time{ + color: #797979; + text-align: right; + float: right; + } + } + } + + ion-footer{ + .row{ + width: 380px; + margin: 0 auto; + } + + .chat-icon-options{ + display:block !important; + font-size: 25px; + float: right !important; + margin-top: 10px; + } + + .chat-icon-send{ + font-size: 45px; + margin: 0 auto; + margin-top: 4px; + } + + ion-col .type-message{ + border: 1px solid #ebebeb; + border-radius: 25px; + padding-left: 15px; + } + } + + .text-color-blue{ + font-size: 15px; + color: #0782c9; + font-weight: 500; + letter-spacing: normal; + } + .user-status-online{ + display: block; + float: left; + color:#99e47b; + } \ No newline at end of file diff --git a/src/app/pages/chat/messages/messages.page.spec.ts b/src/app/pages/chat/messages/messages.page.spec.ts new file mode 100644 index 000000000..826962a23 --- /dev/null +++ b/src/app/pages/chat/messages/messages.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { MessagesPage } from './messages.page'; + +describe('MessagesPage', () => { + let component: MessagesPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MessagesPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(MessagesPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/chat/messages/messages.page.ts b/src/app/pages/chat/messages/messages.page.ts new file mode 100644 index 000000000..42ca79a57 --- /dev/null +++ b/src/app/pages/chat/messages/messages.page.ts @@ -0,0 +1,55 @@ +import { Component, OnInit } from '@angular/core'; +import { ModalController, PopoverController } from '@ionic/angular'; +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 { ContactsPage } from '../new-group/contacts/contacts.page'; + +@Component({ + selector: 'app-messages', + templateUrl: './messages.page.html', + styleUrls: ['./messages.page.scss'], +}) +export class MessagesPage implements OnInit { + + constructor( + public popoverController: PopoverController, + private modalController: ModalController, + ) { } + + ngOnInit() { + } + + async openMessagesOptions(ev: any) { + const popover = await this.popoverController.create({ + component: MessagesOptionsPage, + cssClass: 'messages-options', + event: ev, + translucent: true + }); + return await popover.present(); + } + + async addContacts(){ + const modal = await this.modalController.create({ + component: ContactsPage, + componentProps: {}, + cssClass: 'contacts', + backdropDismiss: false + }); + + await modal.present(); + + modal.onDidDismiss(); + } + + async openChatOptions(ev: any) { + const popover = await this.popoverController.create({ + component: ChatOptionsPopoverPage, + cssClass: 'chat-options-popover', + event: ev, + translucent: true + }); + return await popover.present(); + } + +} diff --git a/src/app/shared/popover/messages-options/messages-options-routing.module.ts b/src/app/shared/popover/messages-options/messages-options-routing.module.ts new file mode 100644 index 000000000..1ae2ef283 --- /dev/null +++ b/src/app/shared/popover/messages-options/messages-options-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { MessagesOptionsPage } from './messages-options.page'; + +const routes: Routes = [ + { + path: '', + component: MessagesOptionsPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class MessagesOptionsPageRoutingModule {} diff --git a/src/app/shared/popover/messages-options/messages-options.module.ts b/src/app/shared/popover/messages-options/messages-options.module.ts new file mode 100644 index 000000000..da09a957d --- /dev/null +++ b/src/app/shared/popover/messages-options/messages-options.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 { MessagesOptionsPageRoutingModule } from './messages-options-routing.module'; + +import { MessagesOptionsPage } from './messages-options.page'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + MessagesOptionsPageRoutingModule + ], + declarations: [MessagesOptionsPage] +}) +export class MessagesOptionsPageModule {} diff --git a/src/app/shared/popover/messages-options/messages-options.page.html b/src/app/shared/popover/messages-options/messages-options.page.html new file mode 100644 index 000000000..ac7568e36 --- /dev/null +++ b/src/app/shared/popover/messages-options/messages-options.page.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/app/shared/popover/messages-options/messages-options.page.scss b/src/app/shared/popover/messages-options/messages-options.page.scss new file mode 100644 index 000000000..63122bda8 --- /dev/null +++ b/src/app/shared/popover/messages-options/messages-options.page.scss @@ -0,0 +1,3 @@ +ion-row{ + padding: 10px 10px 5px 10px; +} \ No newline at end of file diff --git a/src/app/shared/popover/messages-options/messages-options.page.spec.ts b/src/app/shared/popover/messages-options/messages-options.page.spec.ts new file mode 100644 index 000000000..f81205230 --- /dev/null +++ b/src/app/shared/popover/messages-options/messages-options.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { MessagesOptionsPage } from './messages-options.page'; + +describe('MessagesOptionsPage', () => { + let component: MessagesOptionsPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MessagesOptionsPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(MessagesOptionsPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/popover/messages-options/messages-options.page.ts b/src/app/shared/popover/messages-options/messages-options.page.ts new file mode 100644 index 000000000..584398659 --- /dev/null +++ b/src/app/shared/popover/messages-options/messages-options.page.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; +import { PopoverController } from '@ionic/angular'; + +@Component({ + selector: 'app-messages-options', + templateUrl: './messages-options.page.html', + styleUrls: ['./messages-options.page.scss'], +}) +export class MessagesOptionsPage implements OnInit { + + constructor( + private popoverController: PopoverController + ) { } + + ngOnInit() { + } + + close(){ + this.popoverController.dismiss(); + } + +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 981845628..5af0817a6 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -19,14 +19,12 @@ import { ChatPopoverPage } from './popover/chat-popover/chat-popover.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/theme/variables.scss b/src/theme/variables.scss index d668e1cf4..ab3f10b64 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -281,6 +281,15 @@ max-height: 160px; min-height: 160px; } +.messages-options .popover-content{ + width: 100% !important; + left: 0 !important; + bottom: 0 !important; + right: 0 !important; + top: calc(100% - 90px) !important; + max-height: 90px; + min-height: 90px; +} .chat-options-popover .popover-content{ width: 100% !important; left: 0 !important;