mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
fix change folder path
This commit is contained in:
Peter Maquiran
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { GroupContactsPage } from './group-contacts.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: GroupContactsPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class GroupContactsPageRoutingModule {}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { GroupContactsPageRoutingModule } from './group-contacts-routing.module';
|
||||
|
||||
import { GroupContactsPage } from './group-contacts.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
import { PipesModule } from 'src/app/pipes/pipes.module';
|
||||
|
||||
import { BtnSeguintePageModule } from 'src/app/shared/btn-seguinte/btn-seguinte.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
|
||||
PipesModule,
|
||||
GroupContactsPageRoutingModule,
|
||||
BtnSeguintePageModule,
|
||||
],
|
||||
declarations: [GroupContactsPage]
|
||||
})
|
||||
export class GroupContactsPageModule {}
|
||||
@@ -0,0 +1,65 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content width-100">
|
||||
<div class="back-icon">
|
||||
<button class="btn-no-color cursor-pointer" (click)="close()">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Contactos</ion-label>
|
||||
</div>
|
||||
<app-btn-seguinte (click)="updateGroup()"></app-btn-seguinte>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar class="toolbar-search">
|
||||
<div class="search">
|
||||
<ion-searchbar search-icon="undefined" debounce="500" (ionChange)="onChange($event)" placeholder="Pesquisar por contacto" ></ion-searchbar>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</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">
|
||||
<div *ngIf="members">
|
||||
<ion-label class="members-label">Contactos selecção:</ion-label>
|
||||
<div class="members-list" *ngFor="let user of members">
|
||||
<ion-item-sliding [class.inactive]="sessionStore.user.UserName == user.username">
|
||||
<ion-item lines="none" class="members-checkbox ion-no-border ion-no-padding">
|
||||
<ion-checkbox checked disabled color="primary"></ion-checkbox>
|
||||
<p>{{user.name}}</p>
|
||||
<ion-icon class="{{user.status}}" name="ellipse"></ion-icon>
|
||||
</ion-item>
|
||||
<ion-item-options (click)="deleteMember(user)" class="members-options" side="end">
|
||||
<ion-item-option color="danger">Apagar</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div *ngFor="let userContainer of userContainer | keyvalue;" >
|
||||
|
||||
<div class="item-divider">
|
||||
<ion-label>{{ userContainer.key }}</ion-label>
|
||||
</div>
|
||||
|
||||
<div *ngFor="let user of userContainer.value" class="d-flex px-20 align-center">
|
||||
<ion-checkbox [(ngModel)]="user.isChecked" color="primary" (click)="selectedContact(user)"></ion-checkbox>
|
||||
<ion-label class="flex-grow-1 px-10">{{user.name}}</ion-label>
|
||||
<div class="icon"><ion-icon class="{{user.status}}" name="ellipse"></ion-icon></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,173 @@
|
||||
@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);
|
||||
|
||||
.div-icon{
|
||||
width: rem(40);
|
||||
float: right;
|
||||
font-size: rem(35);
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
.div-icon ion-icon{
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.title-content{
|
||||
margin: 0px auto;
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.back-icon{
|
||||
width: 37px;
|
||||
float: left;
|
||||
font-size: rem(35);
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
.div-title{
|
||||
width: 221px;
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
margin: 2.5px 0 0 5px;
|
||||
}
|
||||
.title{
|
||||
font-size: rem(25);
|
||||
}
|
||||
}
|
||||
}
|
||||
.toolbar-search{
|
||||
--padding-top:0 !important;
|
||||
--padding-bottom:0 !important;
|
||||
--padding-start:0 !important;
|
||||
--padding-end:0 !important;
|
||||
|
||||
.search{
|
||||
border: 1px solid #ebebeb;
|
||||
margin: 5px 20px 5px 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.search ion-searchbar{
|
||||
/* border: 1px solid green; */
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
--border-radius: 5px;
|
||||
--box-shadow: none;
|
||||
overflow: auto;
|
||||
--icon-color: var(--font-awesome);
|
||||
}
|
||||
|
||||
}
|
||||
ion-content{
|
||||
--background:transparent;
|
||||
}
|
||||
.main-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 0 0 0 0;
|
||||
|
||||
.members-label{
|
||||
margin: 10px 20px 10px 20px !important;
|
||||
/* font-size: rem(15); */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.members-checkbox{
|
||||
display: flex;
|
||||
margin: 0px 20px 0px 20px !important;
|
||||
overflow: auto;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.members-options{
|
||||
margin: 0px 20px 0px 19px !important;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.item-divider{
|
||||
background: #ebebeb;
|
||||
font-size: rem(15);
|
||||
margin: 10px 0 10px 0;
|
||||
padding:5px 0 5px 20px;
|
||||
|
||||
}
|
||||
|
||||
.item-checkbox{
|
||||
display: flex;
|
||||
margin: 10px 20px 10px 20px !important;
|
||||
overflow: auto;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.members-checkbox ion-checkbox{
|
||||
--border-color: var(--title-text-color);
|
||||
--background-checked:var(--title-text-color);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.item-checkbox ion-checkbox{
|
||||
--border-color: var(--title-text-color);
|
||||
--background-checked:var(--title-text-color);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.item-checkbox p, .members-checkbox p{
|
||||
display: block;
|
||||
margin: 0 !important;
|
||||
|
||||
padding-left: 10px;
|
||||
font-size: rem(15);
|
||||
color: var(--title-text-color);
|
||||
float: left;
|
||||
}
|
||||
.item-checkbox ion-icon, .members-checkbox ion-icon{
|
||||
font-size: rem(10);
|
||||
float: left;
|
||||
color:#99e47b;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.online{
|
||||
color:#99e47b !important;
|
||||
}
|
||||
.offline{
|
||||
color:#cbced1 !important;
|
||||
}
|
||||
.away{
|
||||
color:#ffd21f !important;
|
||||
}
|
||||
.invisible{
|
||||
color:#cbced1 !important;
|
||||
}
|
||||
.busy{
|
||||
color:#f5455c !important;
|
||||
}
|
||||
}
|
||||
|
||||
.inactive {
|
||||
opacity: 0.7;
|
||||
ion-item-options {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { GroupContactsPage } from './group-contacts.page';
|
||||
|
||||
describe('GroupContactsPage', () => {
|
||||
let component: GroupContactsPage;
|
||||
let fixture: ComponentFixture<GroupContactsPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ GroupContactsPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(GroupContactsPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,310 @@
|
||||
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController, NavParams } from '@ionic/angular';
|
||||
import * as _ from 'lodash';
|
||||
import { AuthService } from 'src/app/services/auth.service';
|
||||
import { ChatService } from 'src/app/services/chat.service';
|
||||
import { GroupMessagesPage } from '../group-messages.page';
|
||||
import { ThemeService } from 'src/app/services/theme.service'
|
||||
import { SessionStore } from 'src/app/store/session.service';
|
||||
// import { ChatSystemService } from 'src/app/services/chat/chat-system.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-group-contacts',
|
||||
templateUrl: './group-contacts.page.html',
|
||||
styleUrls: ['./group-contacts.page.scss'],
|
||||
})
|
||||
export class GroupContactsPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
users = [];
|
||||
|
||||
contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
|
||||
|
||||
headers: HttpHeaders;
|
||||
options:any;
|
||||
listContacts: any[];
|
||||
contacts: any;
|
||||
textSearch:string;
|
||||
room:any;
|
||||
members:any;
|
||||
dm:any;
|
||||
isGroupCreated:boolean;
|
||||
groupName:string;
|
||||
selectedUserList:any;
|
||||
sessionStore = SessionStore
|
||||
|
||||
|
||||
objectUserSingleStone = []
|
||||
userContainer = {}
|
||||
|
||||
constructor(
|
||||
private modalController: ModalController,
|
||||
private http: HttpClient,
|
||||
private chatService: ChatService,
|
||||
private authService: AuthService,
|
||||
private navParams: NavParams,
|
||||
public ThemeService: ThemeService,
|
||||
// public ChatSystemService: ChatSystemService,
|
||||
)
|
||||
{
|
||||
|
||||
// this.textSearch="";
|
||||
// this.dm=null;
|
||||
// this.room=null;
|
||||
// this.isGroupCreated = this.navParams.get('isCreated');
|
||||
// this.groupName = this.navParams.get('name');
|
||||
// this.room = this.navParams.get('room');
|
||||
// this.members = this.navParams.get('members');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// this.chatService.refreshtoken();
|
||||
this.loadUsers();
|
||||
// this.getMembers();
|
||||
|
||||
|
||||
}
|
||||
|
||||
loadUsers(){
|
||||
// this.options = {
|
||||
// headers: this.headers,
|
||||
// };
|
||||
// this.chatService.getAllUsers().subscribe((res:any)=>{
|
||||
// if(this.members) {
|
||||
// this.contacts = res.users.filter(f => !this.members.some(item => item._id === f._id));
|
||||
// }
|
||||
// else{
|
||||
// this.contacts = res.users.filter(data => data.username != this.sessionStore.user.UserName);
|
||||
// }
|
||||
// this.users = this.contacts.sort((a,b) => {
|
||||
// if(a.name < b.name){
|
||||
// return -1;
|
||||
// }
|
||||
// if(a.name > b.name){
|
||||
// return 1;
|
||||
// }
|
||||
// return 0;
|
||||
// });
|
||||
|
||||
|
||||
|
||||
|
||||
// for( const user of this.users) {
|
||||
|
||||
// const foundUser = this.objectUserSingleStone.find( e => e.name == user.name)
|
||||
|
||||
// if(!foundUser) {
|
||||
// this.objectUserSingleStone.push(user)
|
||||
// } else {
|
||||
// 'not found'
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
|
||||
// const userContainer = {}
|
||||
// for(const user of this.objectUserSingleStone) {
|
||||
// const firstLetter = user.name.charAt(0)
|
||||
|
||||
// if(!userContainer[firstLetter]) {
|
||||
// userContainer[firstLetter] = [user]
|
||||
// } else {
|
||||
// userContainer[firstLetter].push(user)
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// this.userContainer = userContainer
|
||||
|
||||
|
||||
// this.showLoader = false;
|
||||
// });
|
||||
}
|
||||
|
||||
getMembers(){
|
||||
if(this.room.t == "p"){
|
||||
this.chatService.getGroupMembers(this.room._id).subscribe(res=>{
|
||||
this.members = res['members'];
|
||||
this.loadUsers();
|
||||
});
|
||||
}
|
||||
else if(this.room.t == "c"){
|
||||
this.chatService.getChannelMembers(this.room._id).subscribe(res=>{
|
||||
this.members = res['members'];
|
||||
this.loadUsers();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
separateLetter(record, recordIndex, records){
|
||||
if(recordIndex == 0){
|
||||
return record.name[0];
|
||||
}
|
||||
|
||||
let first_prev = records[recordIndex - 1].name[0];
|
||||
let first_current = record.name[0];
|
||||
|
||||
if(first_prev != first_current){
|
||||
return first_current;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
deleteMember(data:any){
|
||||
let body = {
|
||||
"roomId": this.room._id,
|
||||
"userId": data._id,
|
||||
}
|
||||
|
||||
if(this.room.t == "p"){
|
||||
this.chatService.removeGroupMember(body).subscribe(res=>{
|
||||
|
||||
this.getMembers();
|
||||
});
|
||||
}
|
||||
else if(this.room.t == "c"){
|
||||
this.chatService.removeChannelMember(body).subscribe(res=>{
|
||||
|
||||
this.getMembers();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
doRefresh(ev){
|
||||
this.loadUsers();
|
||||
//this.getMembers();
|
||||
ev.target.complete();
|
||||
}
|
||||
|
||||
async close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
|
||||
onChange(event) {
|
||||
this.textSearch = event.detail.value;
|
||||
|
||||
const users = this.contacts.filter( e => e.name.toLowerCase().includes(this.textSearch.toLowerCase())).sort((a,b) => {
|
||||
if(a.name < b.name) {
|
||||
return -1;
|
||||
}
|
||||
if(a.name > b.name) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
const selectedUsers = this.users.filter( e => e?.isChecked == true)
|
||||
|
||||
users.forEach( (user, index) => {
|
||||
if(user[index]) {
|
||||
console.log({user, index})
|
||||
const isCheck = selectedUsers.find( e => e._id == user._id)?.isChecked
|
||||
if(isCheck) {
|
||||
user[index].isChecked = isCheck
|
||||
}
|
||||
|
||||
// if(user[index].isChecked) {
|
||||
// console.log('user[index].isChecked', user[index].isChecked)
|
||||
// }
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
let a = this.objectUserSingleStone.filter( e => e.name.toLowerCase().includes(this.textSearch.toLowerCase()))
|
||||
|
||||
let b = {}
|
||||
for(const user of a) {
|
||||
const firstLetter = user.name.charAt(0)
|
||||
|
||||
if(!b[firstLetter]) {
|
||||
b[firstLetter] = [user]
|
||||
} else {
|
||||
b[firstLetter].push(user)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
this.userContainer = b
|
||||
|
||||
|
||||
}
|
||||
clicked(){
|
||||
|
||||
|
||||
}
|
||||
selectedContact(user:any) {
|
||||
/* this.groupName = this.room.name; */
|
||||
if(user.isChecked != true ) {
|
||||
user.isChecked = false
|
||||
} else {
|
||||
user.isChecked = true
|
||||
}
|
||||
|
||||
const userIndex = this.objectUserSingleStone.findIndex((e) => e._id == user._id)
|
||||
this.objectUserSingleStone[userIndex].isChecked = user.isChecked
|
||||
|
||||
|
||||
}
|
||||
addContacts(room:any){
|
||||
|
||||
this.selectedUserList = this.users.filter(function(contact) {
|
||||
return contact.isChecked == true;
|
||||
});
|
||||
|
||||
this.selectedUserList.forEach(user=>{
|
||||
let body ={
|
||||
"roomId":room._id,
|
||||
"userId":user._id,
|
||||
|
||||
}
|
||||
this.chatService.addUserToGroup(body).subscribe(res=>{
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
loading = false
|
||||
updateGroup(){
|
||||
if(this.loading) {
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
console.log('this.room', this.room)
|
||||
|
||||
this.chatService.getRoomInfo(this.room._id).subscribe(room=>{
|
||||
this.room = room['room'];
|
||||
this.addContacts(this.room);
|
||||
this.openGroupMessages(room['room']._id);
|
||||
this.loading = false
|
||||
}, ()=> {
|
||||
this.loading = false
|
||||
});
|
||||
}
|
||||
|
||||
async openGroupMessages(roomId:any){
|
||||
|
||||
|
||||
const modal = await this.modalController.create({
|
||||
component: GroupMessagesPage,
|
||||
componentProps: {
|
||||
roomId: roomId,
|
||||
},
|
||||
cssClass: 'group-messages',
|
||||
backdropDismiss: false
|
||||
});
|
||||
|
||||
|
||||
modal.onDidDismiss().then(() => {
|
||||
this.close();
|
||||
});
|
||||
await modal.present();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { GroupMessagesPage } from './group-messages.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: GroupMessagesPage
|
||||
},
|
||||
{
|
||||
path: 'group-contacts',
|
||||
loadChildren: () => import('./group-contacts/group-contacts.module').then( m => m.GroupContactsPageModule)
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
@@ -0,0 +1,36 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { GroupMessagesPageRoutingModule } from './group-messages-routing.module';
|
||||
|
||||
import { GroupMessagesPage } from './group-messages.page';
|
||||
|
||||
import { ChatPopoverPageModule } from 'src/app/shared/popover/chat-popover/chat-popover.module';
|
||||
import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
|
||||
|
||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||
import { LettersAvatarModule } from "ngx-letters-avatar";
|
||||
import { PipesModule } from 'src/app/pipes/pipes.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
FontAwesomeModule,
|
||||
IonicModule,
|
||||
GroupMessagesPageRoutingModule,
|
||||
ChatPopoverPageModule,
|
||||
BtnModalDismissPageModule,
|
||||
LettersAvatarModule,
|
||||
PipesModule,
|
||||
/* ImageCropperModule,
|
||||
AngularCropperjsModule */
|
||||
|
||||
],
|
||||
declarations: [GroupMessagesPage]
|
||||
})
|
||||
export class GroupMessagesPageModule {}
|
||||
@@ -0,0 +1,441 @@
|
||||
@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 {
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
background: #fff;
|
||||
|
||||
.left {
|
||||
width: fit-content;
|
||||
float: left;
|
||||
//font-size: rem(35);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.middle-container {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
width: calc(100% - 47px);
|
||||
float: left;
|
||||
|
||||
/* white-space: nowrap;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important; */
|
||||
|
||||
.middle {
|
||||
width: 100%;
|
||||
padding: 0 !important;
|
||||
margin: 0 0 0 10px;
|
||||
font-size: rem(25);
|
||||
}
|
||||
}
|
||||
|
||||
.middle-container-options {
|
||||
padding: 0 !important;
|
||||
float: left;
|
||||
width: calc(100% - 67px);
|
||||
text-align: right;
|
||||
|
||||
.middle-container-options-icons {
|
||||
color: #0782c9;
|
||||
font-size: rem(23);
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 0 !important;
|
||||
float: right;
|
||||
font-size: rem(25);
|
||||
color: #0782c9;
|
||||
}
|
||||
|
||||
.header-top-btn {
|
||||
background: transparent;
|
||||
font-size: rem(25) !important;
|
||||
font-weight: 100 !important;
|
||||
/* color: #0782c9; */
|
||||
color: #42b9fe;
|
||||
padding: 0 5px 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-bottom {
|
||||
padding-left: 10px;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
|
||||
.header-bottom-icon {
|
||||
width: rem(30);
|
||||
font-size: rem(25);
|
||||
float: left;
|
||||
padding: 2px;
|
||||
|
||||
}
|
||||
|
||||
.header-bottom-contacts {
|
||||
width: calc(100% - 40px);
|
||||
font-size: rem(15);
|
||||
color: #797979;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
margin: 1px;
|
||||
|
||||
.contacts-list {
|
||||
white-space: nowrap;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.div-icon {
|
||||
width: rem(40);
|
||||
float: right;
|
||||
font-size: rem(35);
|
||||
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: rem(13);
|
||||
color: #797979;
|
||||
padding: 10px;
|
||||
margin: 0 auto !important;
|
||||
line-height: 1.2rem;
|
||||
// margin: 20px 39px 25px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
height: auto;
|
||||
background: var(--chat-alert-msg-color);
|
||||
text-align: center;
|
||||
font-size: rem(13);
|
||||
color: #262420;
|
||||
padding: 10px;
|
||||
margin: 10px auto;
|
||||
line-height: 1.2rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.info-text-leave {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
padding: 10px;
|
||||
background: #e0e9ee;
|
||||
border-radius: 8px;
|
||||
margin: 10px auto;
|
||||
color: #797979 !important;
|
||||
font-size: rem(13) !important;
|
||||
/* margin: 15px 0px 15px 0px; */
|
||||
|
||||
.info-text-leave ion-label {
|
||||
font-size: rem(13) !important;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.messages {
|
||||
font-size: rem(13);
|
||||
font-family: Roboto;
|
||||
overflow: auto;
|
||||
|
||||
//set scroll do bottom
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
word-wrap: break-word;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.messages-list-item-wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.messages-list-item-wrapper-active {
|
||||
background: #e6f6ff75 !important;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
//border: 1px solid red;
|
||||
}
|
||||
|
||||
|
||||
.incoming-true,
|
||||
.incoming-false {
|
||||
width: 305px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.incoming-true {
|
||||
margin: 10px 35px 10px 20px;
|
||||
background: #ebebeb;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.incoming-false {
|
||||
margin: 10px 20px 10px 35px;
|
||||
background: var(--chat-incoming-msg-color);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--title-text-color);
|
||||
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.time {
|
||||
color: #797979;
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.online {
|
||||
color: #99e47b !important;
|
||||
}
|
||||
|
||||
.offline {
|
||||
color: #cbced1 !important;
|
||||
}
|
||||
|
||||
.away {
|
||||
color: #ffd21f !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
color: #cbced1 !important;
|
||||
}
|
||||
|
||||
.busy {
|
||||
color: #f5455c !important;
|
||||
}
|
||||
}
|
||||
|
||||
.info-meeting {
|
||||
/* width: 322px; */
|
||||
width: em(422);
|
||||
background: var(--chat-alert-msg-color);
|
||||
text-align: center;
|
||||
font-size: rem(13);
|
||||
color: #262420;
|
||||
padding: 10px;
|
||||
margin: 10px auto;
|
||||
line-height: 1.2rem;
|
||||
/* margin: 15px 0px 15px 0px; */
|
||||
border-radius: 8px;
|
||||
|
||||
.info-meeting-small {
|
||||
font-size: rem(10);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.info-meeting-medium {
|
||||
font-size: rem(12);
|
||||
}
|
||||
|
||||
.info-meeting-normal {
|
||||
color: #0782c9;
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info-meeting-normal:hover {
|
||||
text-decoration: underline;
|
||||
color: #0782c9;
|
||||
}
|
||||
}
|
||||
|
||||
ion-footer {
|
||||
padding-top: 7.5px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.container {
|
||||
justify-content: center;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
.message-box {
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.chat-icon-options {
|
||||
display: block !important;
|
||||
font-size: rem(35);
|
||||
float: right !important;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.chat-icon-send {
|
||||
font-size: rem(40);
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.type-message {
|
||||
display: flex;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 25px;
|
||||
padding-left: 15px;
|
||||
align-items: center;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
ion-textarea {
|
||||
margin: 0 !important;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.preview-slides {
|
||||
margin-top: 20%;
|
||||
background: #e6e6e6;
|
||||
|
||||
img {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.transparent-modal {
|
||||
.modal-wrapper {
|
||||
--background: rgba(44, 39, 45, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.image-slide,
|
||||
.image-card {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.image-card {
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
height: 200%;
|
||||
width: 100%;
|
||||
background: black;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
.typing {
|
||||
position: relative;
|
||||
top: -25px;
|
||||
height: 0px;
|
||||
left: 0px;
|
||||
margin-left: 22px;
|
||||
display: flex;
|
||||
font-size: rem(12);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.typing ngx-letters-avatar {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
.float-status {
|
||||
position: relative !important;
|
||||
float: right;
|
||||
display: flex;
|
||||
align-items: self-end;
|
||||
}
|
||||
|
||||
.float-status-image {
|
||||
position: relative !important;
|
||||
float: right;
|
||||
display: flex;
|
||||
align-items: self-end;
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
.float-status-webtrix {
|
||||
position: relative !important;
|
||||
top: 0px !important;
|
||||
float: right;
|
||||
display: flex;
|
||||
align-items: self-end;
|
||||
}
|
||||
|
||||
.float-status-all {
|
||||
font-size: rem(13) !important;
|
||||
}
|
||||
|
||||
.try {
|
||||
color: red;
|
||||
background: #f3414159;
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.font-40-rem {
|
||||
font-size: 2.5rem !important;
|
||||
}
|
||||
|
||||
|
||||
.dateLabel {
|
||||
background: #ebebeb !important;
|
||||
float: unset !important;
|
||||
margin: 0px auto !important;
|
||||
width: 111px;
|
||||
text-align: center;
|
||||
margin-top: 10px !important;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@@ -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<GroupMessagesPage>;
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user