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

previewImages

Browse Source
This commit is contained in:
ivan gomes
2021-11-17 15:34:15 +01:00
parent aadd39229d
commit 4262597360
17 changed files with 506 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/chat/chat.page.html
+1
View File
@@ -125,6 +125,7 @@
</div>
</div>
</ion-item-sliding>
am i here?!
</ion-list>
</div>
<!-- <button (click)="sendMsg()" style="height: 41px;">Send message</button> -->
src/app/pages/chat/group-messages/group-messages.page.html
+3 -2
View File
@@ -57,7 +57,7 @@
<ion-label>A conversa original mantêm-se como chat individual</ion-label>
</div>
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last" [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
<div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
<div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)">
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -66,7 +66,7 @@
<ion-label>{{msg.msg}}</ion-label>
<div *ngIf="msg.attachments" class="message-attachments">
<div *ngFor="let file of msg.attachments">
<img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
<img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" >
<div>
<div>
<div class="file">
@@ -152,4 +152,5 @@
</button>
</div>
</div>
in group!
</ion-footer>
src/app/pages/chat/group-messages/group-messages.page.scss
+33
View File
@@ -278,3 +278,36 @@
}
}
.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;
}
src/app/pages/chat/group-messages/group-messages.page.ts
+62 -3
View File
@@ -1,5 +1,5 @@
import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy, } from '@angular/core';
import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy, ChangeDetectorRef, } from '@angular/core';
import { ActionSheetController, IonSlides, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
import { AlertService } from 'src/app/services/alert.service';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
@@ -20,6 +20,7 @@ import { NewEventPage } from '../../agenda/new-event/new-event.page';
import { EventPerson } from 'src/app/models/eventperson.model';
import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
import { ThemeService } from 'src/app/services/theme.service'
import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
@Component({
selector: 'app-group-messages',
@@ -27,6 +28,8 @@ import { ThemeService } from 'src/app/services/theme.service'
styleUrls: ['./group-messages.page.scss'],
})
export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
showLoader: boolean;
isGroupCreated:boolean;
loggedUser: any;
@@ -75,7 +78,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
private fileToBase64Service: FileToBase64Service,
private fileService: FileService,
private toastService: ToastService,
public ThemeService: ThemeService
public ThemeService: ThemeService,
private changeDetectorRef: ChangeDetectorRef
) {
this.loggedUserChat = authService.ValidatedUserChat['data'];
this.isGroupCreated = true;
@@ -580,4 +584,59 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
});
}
sliderOpts = {
zoom: false,
slidesPerView: 1.5,
spaceBetween: 20,
centeredSlides: true
};
zoomActive = false;
zoomScale = 1;
sliderZoomOpts = {
allowSlidePrev: false,
allowSlideNext: false,
zoom: {
maxRatio: 5
},
on: {
zoomChange: (scale, imageEl, slideEl) => {
this.zoomActive = true;
this.zoomScale = scale/5;
this.changeDetectorRef.detectChanges();
}
}
}
async touchEnd(zoomslides: IonSlides, card) {
// Zoom back to normal
const slider = await zoomslides.getSwiper();
const zoom = slider.zoom;
zoom.out();
// Card back to normal
card.el.style['z-index'] = 9;
this.zoomActive = false;
this.changeDetectorRef.detectChanges();
}
touchStart(card) {
// Make card appear above backdrop
card.el.style['z-index'] = 11;
}
async openPreview(img) {
const modal = await this.modalController.create({
component: PreviewCameraPage,
cssClass: 'transparent-modal',
componentProps: {
image: img.attachments[0].image_url,
username: img.u.username,
_updatedAt: img._updatedAt
}
});
modal.present();
}
}
src/app/pages/chat/messages/messages.page.html
+4 -2
View File
@@ -50,8 +50,8 @@
</ion-refresher> -->
<div (click)="handleClick()" class="messages" #scrollMe>
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last"
[class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
<div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
[class.messages-list-item-wrapper-active]="msg._id == selectedMsgId" >
<div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)">
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -138,6 +138,7 @@
<button (click)="stopRecording()">Stop Recording</button> -->
<div class="container width-100 d-flex">
<div>
aqui
<button class="btn-no-color" (click)="openChatOptions()">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-options" src="assets/images/icons-add.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options" src="assets/images/theme/gov/icons-add.svg"></ion-icon>
@@ -163,4 +164,5 @@
</button>
</div>
</div>
in message!
</ion-footer>
src/app/pages/chat/messages/messages.page.ts
+63 -3
View File
@@ -1,6 +1,6 @@
import { AfterViewChecked, AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'
import { GestureController, Gesture, ModalController, NavParams, PopoverController } from '@ionic/angular';
import { GestureController, Gesture, ModalController, NavParams, PopoverController, IonSlides } from '@ionic/angular';
import { map } from 'rxjs/operators';
import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
import { EventPerson } from 'src/app/models/eventperson.model';
@@ -23,6 +23,7 @@ import { ThemeService } from 'src/app/services/theme.service'
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder';
import { Haptics, ImpactStyle } from '@capacitor/haptics';
import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
@Component({
selector: 'app-messages',
@@ -83,7 +84,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
private fileService: FileService,
private gestureController: GestureController,
private processes: ProcessesService,
public ThemeService: ThemeService
public ThemeService: ThemeService,
private changeDetectorRef: ChangeDetectorRef
) {
this.loggedUser = authService.ValidatedUserChat['data'];
this.roomId = this.navParams.get('roomId');
@@ -583,4 +585,62 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
});
}
sliderOpts = {
zoom: false,
slidesPerView: 1.5,
spaceBetween: 20,
centeredSlides: true
};
zoomActive = false;
zoomScale = 1;
sliderZoomOpts = {
allowSlidePrev: false,
allowSlideNext: false,
zoom: {
maxRatio: 5
},
on: {
zoomChange: (scale, imageEl, slideEl) => {
this.zoomActive = true;
this.zoomScale = scale/5;
this.changeDetectorRef.detectChanges();
}
}
}
async touchEnd(zoomslides: IonSlides, card) {
// Zoom back to normal
const slider = await zoomslides.getSwiper();
const zoom = slider.zoom;
zoom.out();
// Card back to normal
card.el.style['z-index'] = 9;
this.zoomActive = false;
this.changeDetectorRef.detectChanges();
}
touchStart(card) {
// Make card appear above backdrop
card.el.style['z-index'] = 11;
}
async openPreview(msg) {
const modal = await this.modalController.create({
component: PreviewCameraPage,
cssClass: 'transparent-modal',
componentProps: {
image: msg.attachments[0].image_url,
username: msg.u.username,
_updatedAt: msg._updatedAt
}
});
modal.present();
}
}