diff --git a/src/app/components/main-chat/single-chat/attachments/attachments.component.html b/src/app/components/main-chat/single-chat/attachments/attachments.component.html
index 20c9356..c0b658e 100644
--- a/src/app/components/main-chat/single-chat/attachments/attachments.component.html
+++ b/src/app/components/main-chat/single-chat/attachments/attachments.component.html
@@ -3,6 +3,7 @@
@if (['png', 'jpg', 'jpeg', 'gif'].includes(getFileType(filePath))) {
= RESPONSIVE_THRESHOLD
@@ -42,6 +45,7 @@
}
+
= RESPONSIVE_THRESHOLD
+ ? '5vw'
+ : '7.5vw'
+ }"
+ />
diff --git a/src/app/components/main-chat/single-chat/attachments/attachments.component.scss b/src/app/components/main-chat/single-chat/attachments/attachments.component.scss
index 7b9ed6e..f842750 100644
--- a/src/app/components/main-chat/single-chat/attachments/attachments.component.scss
+++ b/src/app/components/main-chat/single-chat/attachments/attachments.component.scss
@@ -6,8 +6,10 @@
overflow: auto;
margin-top: 12px;
.filesView {
+ position: relative;
cursor: pointer;
transition: 0.3s ease-in-out;
+ overflow: hidden;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
img,
video {
@@ -22,12 +24,29 @@
width: auto;
border-radius: 12px;
}
+ .loadingImg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ animation: spin 10s linear infinite;
+ }
&:hover {
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.35));
}
}
}
+/*------------- ANIMATION -------------*/
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
/*------------- RESPONSIVE -------------*/
@media screen and (max-width: 510px) {
diff --git a/src/app/components/main-chat/single-chat/attachments/attachments.component.ts b/src/app/components/main-chat/single-chat/attachments/attachments.component.ts
index c69b13a..1bab63c 100644
--- a/src/app/components/main-chat/single-chat/attachments/attachments.component.ts
+++ b/src/app/components/main-chat/single-chat/attachments/attachments.component.ts
@@ -17,7 +17,8 @@ export class AttachmentsComponent {
@Input() filePath: string = '';
@Input() openOnSecondaryChat: boolean = false;
@Input() viewWidth: number = 0;
- loadingUrl: string = './../../../assets/img/loading.svg';
+
+ imgIsLoading = true;
constructor(
public downloadFilesService: DownloadFilesService,
@@ -27,6 +28,10 @@ export class AttachmentsComponent {
RESPONSIVE_THRESHOLD = this.sharedService.RESPONSIVE_THRESHOLD;
+ onImageLoad() {
+ this.imgIsLoading = false;
+ }
+
/**
* Gets the file type from the given file name.
* @param {string} file - The name of the file.
diff --git a/src/app/components/main-chat/single-chat/single-chat.component.ts b/src/app/components/main-chat/single-chat/single-chat.component.ts
index b5833cc..79f2e91 100644
--- a/src/app/components/main-chat/single-chat/single-chat.component.ts
+++ b/src/app/components/main-chat/single-chat/single-chat.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, Input } from '@angular/core';
import { User } from '../../../interface/user.interface';
import { Chat, ChatAnswers } from '../../../interface/chat.interface';
import { ChatContentComponent } from '../chat-content/chat-content.component';
@@ -54,8 +54,6 @@ export class SingleChatComponent {
isMsgEditFormOpen: boolean = false;
firstLoadOptionMenu: boolean = false;
- filePath: string | undefined = '';
-
constructor(
public chatService: ChatService,
public channelService: ChatService,
@@ -156,7 +154,7 @@ export class SingleChatComponent {
);
if (inputDate.toDateString() === currentDate.toDateString()) {
- return this.translateService.instant('months.today');
+ return this.translateService.instant('weekdays.today');
} else {
return `${dayNumber} ${month}`;
}
diff --git a/src/assets/img/loading.svg b/src/assets/img/attachments/loading.svg
similarity index 100%
rename from src/assets/img/loading.svg
rename to src/assets/img/attachments/loading.svg