diff --git a/src/app/shared/chat/group-messages/group-messages.page.ts b/src/app/shared/chat/group-messages/group-messages.page.ts
index 9e57e30e8..aed1437d7 100644
--- a/src/app/shared/chat/group-messages/group-messages.page.ts
+++ b/src/app/shared/chat/group-messages/group-messages.page.ts
@@ -1,5 +1,5 @@
-import { Component, OnChanges, OnInit, Input, SimpleChanges, Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked, AfterViewInit, OnDestroy} from '@angular/core';
-import { ActionSheetController, AnimationController, MenuController, ModalController, PopoverController } from '@ionic/angular';
+import { Component, OnChanges, OnInit, Input, SimpleChanges,ChangeDetectorRef,Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked, AfterViewInit, OnDestroy} from '@angular/core';
+import { ActionSheetController, AnimationController, IonSlides, MenuController, ModalController, 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';
@@ -19,6 +19,7 @@ import { ProcessesService } from 'src/app/services/processes.service';
import { FileService } from 'src/app/services/functions/file.service';
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';
/*
import * as pdfjsLib from 'pdfjs-dist';
@@ -86,7 +87,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
private fileToBase64Service: FileToBase64Service,
private processesService: ProcessesService,
private fileService: FileService,
- public ThemeService: ThemeService
+ public ThemeService: ThemeService,
+ private changeDetectorRef: ChangeDetectorRef
) {
this.loggedUserChat = authService.ValidatedUserChat['data'];
this.isGroupCreated = true;
@@ -767,7 +769,61 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
}
}
+
+ 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();
+ }
}
diff --git a/src/app/shared/chat/messages/messages.page.html b/src/app/shared/chat/messages/messages.page.html
index 53f592363..8f1fe149b 100644
--- a/src/app/shared/chat/messages/messages.page.html
+++ b/src/app/shared/chat/messages/messages.page.html
@@ -37,7 +37,7 @@
-
+
diff --git a/src/app/shared/chat/messages/messages.page.ts b/src/app/shared/chat/messages/messages.page.ts
index 8f11f9533..b3eec13c2 100644
--- a/src/app/shared/chat/messages/messages.page.ts
+++ b/src/app/shared/chat/messages/messages.page.ts
@@ -1,5 +1,5 @@
-import { AfterViewChecked, AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { AnimationController, GestureController, ModalController, PopoverController } from '@ionic/angular';
+import { AfterViewChecked, AfterViewInit, Component, ElementRef,ChangeDetectorRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AnimationController, GestureController, IonSlides, ModalController, 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';
@@ -16,6 +16,7 @@ import { FileService } from 'src/app/services/functions/file.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';
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-messages',
@@ -71,7 +72,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
private fileService: FileService,
private gestureController: GestureController,
private http:HttpClient,
- public ThemeService: ThemeService
+ public ThemeService: ThemeService,
+ private changeDetectorRef: ChangeDetectorRef
) {
this.loggedUser = authService.ValidatedUserChat['data'];
@@ -553,7 +555,61 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
this.serverLongPull();
});
+ }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();
+ }
+}
+
+
+
diff --git a/src/global.scss b/src/global.scss
index 23b37489d..b12d9d99f 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -1339,7 +1339,7 @@ ngx-mat-datetime-content{
--background: #0000005c;
ion-content {
- --background:transparent;
+ --background:#2e2121e7;
}
}
+