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

Style for popover in chat finished

Browse Source
This commit is contained in:
tiago.kayaya
2020-12-29 12:40:19 +01:00
parent 2ea9fc58e5
commit 0b4bef8eca
21 changed files with 374 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/app-routing.module.ts
+4
View File
@@ -41,6 +41,10 @@ const routes: Routes = [
{
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)
},
src/app/home/home.page.html
+1 -1
View File
@@ -26,7 +26,7 @@
<ion-icon name="search"></ion-icon>
<ion-label>Pesquisa</ion-label>
</ion-tab-button> -->
<ion-tab-button hidden tab="chat">
<ion-tab-button tab="chat">
<ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
<ion-label>Chat</ion-label>
</ion-tab-button>
src/app/pages/chat/chat.page.html
+17 -1
View File
@@ -59,7 +59,23 @@
<p>Podemos marcar reunião para amanha</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-icon">
<ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
</div>
<div class="item-content">
<div class="item-title-time">
<div class="item-title">
<ion-label>Secretário para o Sector Produtivo</ion-label>
</div>
<div class="item-date">Ontem</div>
</div>
<div class="item-description">
<p>Viva!</p>
</div>
</div>
</div>
</ion-item-sliding>
</ion-item-group>
</ion-list>
src/app/pages/chat/chat.page.ts
+2 -1
View File
@@ -24,7 +24,8 @@ export class ChatPage implements OnInit {
constructor(
private chatService: ChatService,
private modalController: ModalController,
private authService: AuthService) { }
private authService: AuthService
) { }
ngOnInit() {
this.segment = "Contactos";
src/app/pages/chat/group-messages/group-messages.page.html
+26 -15
View File
@@ -1,7 +1,7 @@
<ion-header class="ion-no-border">
<ion-toolbar class="header-toolbar">
<div class="main-header">
<div class="title-content">
<div class="header-top">
<app-btn-modal-dismiss></app-btn-modal-dismiss>
<div class="middle">
<ion-label class="title">Grupo de Trabalho A</ion-label>
@@ -10,36 +10,47 @@
<ion-icon (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
</div>
</div>
<div class="header-bottom">
<div class="header-bottom-icon">
<ion-icon (click)="addContacts()" src="assets/icon/icons-user.svg"></ion-icon>
</div>
<div class="header-bottom-contacts">
<ion-label *ngFor="let contact of contacts" >
{{contact}}
</ion-label>
</div>
</div>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<p>HHHHH</p>
<!-- <p>HHHHH</p> -->
</ion-content>
<ion-footer class="ion-no-border">
<ion-footer>
<ion-toolbar>
<ion-row align-items-center>
<ion-col>
<ion-item button lines="none">
<img src="assets/images/icons-arrow-arrow-down-25.svg">
</ion-item>
<ion-row align-items-center class="row">
<ion-col size="1">
<ion-label class="ion-no-padding" lines="none">
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
</ion-label>
</ion-col>
<ion-col>
<ion-item lines="none" class="div-message">
<ion-col size="9">
<ion-item class="ion-no-padding type-message" lines="none">
<ion-textarea placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
<ion-icon slot="end" name="mic-outline"></ion-icon>
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
</ion-item>
</ion-col>
<ion-col>
<ion-item button lines="none" [disabled]="message === ''">
<img src="assets/images/icons-chat-send.svg">
</ion-item>
<ion-col size="2">
<!-- [disabled]="message === ''" -->
<ion-label>
<ion-icon class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
</ion-label>
</ion-col>
</ion-row>
</ion-toolbar>
src/app/pages/chat/group-messages/group-messages.page.scss
+53 -1
View File
@@ -14,7 +14,7 @@
color:#000;
transform: translate3d(0, 1px, 0);
.title-content{
.header-top{
width: 360px;
margin: 0px auto;
overflow: auto;
@@ -34,6 +34,30 @@
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;
@@ -50,4 +74,32 @@
padding-left: 20px;
}
}
}
ion-footer{
.row{
width: 380px;
margin: 0 auto;
}
ion-col{
/* border: 1px solid red; */
}
.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;
}
}
src/app/pages/chat/group-messages/group-messages.page.ts
+27 -1
View File
@@ -1,6 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { ActionSheetController, MenuController, PopoverController } from '@ionic/angular';
import { ActionSheetController, MenuController, ModalController, PopoverController } from '@ionic/angular';
import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page';
import { ContactsPage } from '../new-group/contacts/contacts.page';
import { NewGroupPage } from '../new-group/new-group.page';
@Component({
selector: 'app-group-messages',
@@ -10,9 +13,11 @@ import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popove
export class GroupMessagesPage implements OnInit {
message:any;
contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
constructor(
private menu: MenuController,
private modalController: ModalController,
private actionSheetController: ActionSheetController,
public popoverController: PopoverController,
) { }
@@ -53,6 +58,27 @@ export class GroupMessagesPage implements OnInit {
});
return await popover.present();
}
async openChatOptions(ev: any) {
const popover = await this.popoverController.create({
component: ChatOptionsPopoverPage,
cssClass: 'chat-options-popover',
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();
}
}
src/app/shared/popover/chat-options-popover/chat-options-popover-routing.module.ts
+17
View File
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChatOptionsPopoverPage } from './chat-options-popover.page';
const routes: Routes = [
{
path: '',
component: ChatOptionsPopoverPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ChatOptionsPopoverPageRoutingModule {}
src/app/shared/popover/chat-options-popover/chat-options-popover.module.ts
+20
View File
@@ -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 { ChatOptionsPopoverPageRoutingModule } from './chat-options-popover-routing.module';
import { ChatOptionsPopoverPage } from './chat-options-popover.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ChatOptionsPopoverPageRoutingModule
],
declarations: [ChatOptionsPopoverPage]
})
export class ChatOptionsPopoverPageModule {}
src/app/shared/popover/chat-options-popover/chat-options-popover.page.html
+23
View File
@@ -0,0 +1,23 @@
<ion-content>
<ion-row>
<ion-col>
<button full class="btn-ok" shape="round" >Tirar Fotografia</button>
</ion-col>
<ion-col>
<button class="btn-ok" shape="round" >Digitalizar Documento</button>
</ion-col>
<ion-col>
<button full class="btn-ok" shape="round" >Anexar Fotografia</button>
</ion-col>
<ion-col>
<button class="btn-ok" shape="round" >Anexar Documento</button>
</ion-col>
</ion-row>
<ion-row class="border-top">
<ion-col>
<button full class="btn-cancel" shape="round" >Cancelar</button>
</ion-col>
<ion-col>
</ion-col>
</ion-row>
</ion-content>
src/app/shared/popover/chat-options-popover/chat-options-popover.page.scss
+32
View File
@@ -0,0 +1,32 @@
ion-row{
padding: 10px 10px 5px 10px;
}
.border-top{
padding-top: 5px !important;
border-top: 1px solid #ebebeb;
}
/* ion-col{
border: 1px solid red;
} */
.btn-cancel{
display: block;
width: 170px !important;
height: 45px !important;
border-radius: 22.5px;
background-color: #e0e9ee;
--color: #061b52 !important;
--background:transparent;
--box-shadow: none;
margin: 0 auto !important;
}
.btn-ok{
display: block;
width: 170px !important;
height: 45px !important;
border-radius: 22.5px;
--background: #42b9fe;
--color: #ffffff !important;
margin: 0 auto !important;
}
src/app/shared/popover/chat-options-popover/chat-options-popover.page.spec.ts
+24
View File
@@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { ChatOptionsPopoverPage } from './chat-options-popover.page';
describe('ChatOptionsPopoverPage', () => {
let component: ChatOptionsPopoverPage;
let fixture: ComponentFixture<ChatOptionsPopoverPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ChatOptionsPopoverPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(ChatOptionsPopoverPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/shared/popover/chat-options-popover/chat-options-popover.page.ts
+15
View File
@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-chat-options-popover',
templateUrl: './chat-options-popover.page.html',
styleUrls: ['./chat-options-popover.page.scss'],
})
export class ChatOptionsPopoverPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/shared/popover/chat-popover/chat-popover.page.html
+20 -2
View File
@@ -1,4 +1,4 @@
<div>
<!-- <div>
<ion-toolbar>
<div class="buttons">
<div class="btn-item">
@@ -13,4 +13,22 @@
</div>
</div>
</ion-toolbar>
</div>
</div> -->
<ion-content>
<ion-row>
<ion-col>
<button class="btn-cancel" shape="round" >Sair do Grupo</button>
</ion-col>
<ion-col>
<button class="btn-ok" shape="round" >Alterar nome do grupo</button>
</ion-col>
</ion-row>
<ion-row class="border-top">
<ion-col>
<button class="btn-delete" shape="round">Apagar grupo</button>
</ion-col>
<ion-col>
</ion-col>
</ion-row>
</ion-content>
src/app/shared/popover/chat-popover/chat-popover.page.scss
+11 -45
View File
@@ -1,49 +1,15 @@
.buttons{
overflow: auto;
padding-top: 10px;
padding-bottom: 10px;
ion-row{
padding: 10px 10px 5px 10px;
}
.btn-item{
padding: 2px;
margin: 10px 20px 10px 20px !important;
overflow: auto;
.border-top{
padding-top: 5px !important;
border-top: 1px solid #ebebeb;
}
.btn-ok, .btn-cancel, .btn-delete{
/* ion-col{
border: 1px solid red;
} */
/* .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;
}
} */
src/assets/icon/icons-chat-mic.svg
+17
View File
@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g>
<g transform="translate(-285 -696) translate(0 84) translate(0 592) translate(285 20)">
<rect width="7" height="12" x="9" y="4" stroke="#42B9FE" stroke-width="2" rx="3.5"/>
<rect width="3" height="2" x="13" y="7" fill="#42B9FE" rx="1"/>
<path fill="#42B9FE" d="M12 18H13V22H12z"/>
<rect width="7" height="1" x="9" y="22" fill="#42B9FE" rx=".5"/>
<path stroke="#42B9FE" stroke-linecap="round" stroke-linejoin="round" d="M18 11.5c0 3.728-1.358 6.5-5.5 6.5C8.358 18 7 15.228 7 11.5"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 886 B

src/assets/icon/icons-chat-options.svg
+16
View File
@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<g fill="none" fill-rule="evenodd">
<g stroke="#42B9FE" stroke-width="2">
<g>
<g>
<g>
<g transform="translate(-20 -696) translate(0 84) translate(0 592) translate(20 10) translate(0 10)">
<rect width="17" height="14" x="4" y="7" rx="2"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M9 6.684C9 4.228 10.071 3 12.214 3s3.215 1.228 3.215 3.684V13.387C15.476 14.462 15 15 14 15s-1.476-.538-1.429-1.613h0V9.535h0"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 768 B

src/assets/images/icons-chat-send.svg → src/assets/icon/icons-chat-send.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

src/assets/icon/icons-user.svg
+16
View File
@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g>
<g>
<g transform="translate(-56 -149) translate(0 84) translate(0 25) translate(0 35) translate(56 5)">
<circle cx="12.5" cy="12.5" r="12.5" fill="#42B9FE"/>
<path stroke="#FFF" stroke-linejoin="round" stroke-width="2" d="M12.615 6c1.475 0 2.67 1.195 2.67 2.67v.5c0 .825-.372 1.561-.958 2.05 1.7.742 2.904 2.562 2.904 4.689 0 2.788-9.231 2.788-9.231 0 0-2.127 1.202-3.946 2.904-4.69-.586-.488-.959-1.225-.959-2.048v-.5C9.945 7.194 11.141 6 12.615 6z"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 846 B

src/assets/images/icons-chat-contacts-list.svg
+16
View File
@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g>
<g>
<g transform="translate(-56 -149) translate(0 84) translate(0 25) translate(0 35) translate(56 5)">
<circle cx="12.5" cy="12.5" r="12.5" fill="#42B9FE"/>
<path stroke="#FFF" stroke-linejoin="round" stroke-width="2" d="M12.615 6c1.475 0 2.67 1.195 2.67 2.67v.5c0 .825-.372 1.561-.958 2.05 1.7.742 2.904 2.562 2.904 4.689 0 2.788-9.231 2.788-9.231 0 0-2.127 1.202-3.946 2.904-4.69-.586-.488-.959-1.225-.959-2.048v-.5C9.945 7.194 11.141 6 12.615 6z"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 846 B

src/theme/variables.scss
+17 -6
View File
@@ -281,6 +281,15 @@
max-height: 160px;
min-height: 160px;
}
.chat-options-popover .popover-content{
width: 100% !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
top: calc(100% - 210px) !important;
max-height: 210px;
min-height: 210px;
}
/* .event-actions-popover ion-list{
} */
@@ -381,10 +390,10 @@
--background: #fff;
}
.btn-ok{
width: 160px !important;
width: 170px !important;
height: 45px !important;
margin: 0 auto;
padding: 10px 15px;
margin: 0 auto !important;
padding:0 !important;
border-radius: 22.5px;
background-color: #42b9fe;
color: #ffffff !important;
@@ -398,22 +407,24 @@
color: #ffffff !important;
}
.btn-delete{
display: block;
width: 170px !important;
height: 45px !important;
margin: 0 auto;
margin: 0 auto !important;
padding:0 !important;
border-radius: 22.5px;
background-color: #ffe0e0;
color: #d30a0a !important;
}
.btn-cancel{
width: 160px !important;
display: block;
width: 170px !important;
height: 45px !important;
margin: 0 auto;
padding:0 !important;
border-radius: 22.5px;
background-color: #e0e9ee;
color: #061b52 !important;
margin: 0 auto !important;
}
.bg-blue{
--background:#0782c9;