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))) { image 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