Skip to content

Commit ce5a3de

Browse files
ketteitekiketteiteki
committed
add showing full size image for message avatar and message attachment
1 parent 4713933 commit ce5a3de

8 files changed

Lines changed: 76 additions & 35 deletions

File tree

‎MangoAPI.Client/src/app/components/chats/chats.component.html‎

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
<div class="d-flex">
22
<div class="menu" id="menu">
3+
<div
4+
*ngIf="_modalWindowStateService.isModalWindowShowing"
5+
class="black-cover"
6+
(click)="closeModalWindowrClick()"
7+
>
8+
<img
9+
*ngIf="_modalWindowStateService.picture"
10+
src="{{ _modalWindowStateService.picture }}"
11+
class="profile-avatar"
12+
alt=""
13+
(click)="$event.stopPropagation()"
14+
/>
15+
</div>
316
<app-navbar [activeComponent]="'chats'"></app-navbar>
417
<aside class="sidebar">
518
<header class="sidebar-header p-3">
@@ -45,9 +58,9 @@ <h5>Chats</h5>
4558
(click)="loadChat(chat.chatId)"
4659
*ngIf="activeChatId === chat.chatId; else chatElse"
4760
>
48-
<div class="last-message-time" *ngIf="chatContainsMessages(chat)">
49-
{{ toShortTimeString(chat.lastMessageTime) }}
50-
</div>
61+
<div class="last-message-time" *ngIf="chatContainsMessages(chat)">
62+
{{ toShortTimeString(chat.lastMessageTime) }}
63+
</div>
5164
<img alt="Chat avatar" class="avatar" src="{{ chat.chatLogoImageUrl }}" />
5265
<div class="content">
5366
<div class="title" *ngIf="chat.communityType === 2; else elseBlock">
@@ -206,12 +219,18 @@ <h5>Chats</h5>
206219
<img
207220
alt="User Avatar"
208221
class="user-avatar"
222+
(click)="onOpenImageClick(message.messageAuthorPictureUrl)"
209223
src="{{ message.messageAuthorPictureUrl }}"
210224
/>
211225
<div class="message-wrapper">
212226
<div class="message-content">
213-
<span *ngIf="message.messageAttachmentUrl"><img class="message-image"
214-
(click)="onImageClick(message.messageAttachmentUrl)" src="{{message.messageAttachmentUrl}}" alt=""></span>
227+
<span *ngIf="message.messageAttachmentUrl"
228+
><img
229+
class="message-image"
230+
(click)="onOpenImageClick(message.messageAttachmentUrl)"
231+
src="{{ message.messageAttachmentUrl }}"
232+
alt=""
233+
/></span>
215234
<span>{{ message.messageText }}</span>
216235
</div>
217236
<div class="message-options gap-fix">
@@ -271,17 +290,26 @@ <h5>Chats</h5>
271290
<img
272291
alt="User Avatar"
273292
class="user-avatar"
293+
(click)="onOpenImageClick(message.messageAuthorPictureUrl)"
274294
src="{{ message.messageAuthorPictureUrl }}"
275295
/>
276296
<div class="message-wrapper">
277297
<div class="message-content">
278298
<div
299+
*ngIf="!message.messageAttachmentUrl"
279300
class="display-name {{
280301
getDisplayNameColour(message.userDisplayNameColour)
281302
}}"
282303
>
283304
{{ message.userDisplayName }}
284305
</div>
306+
<span *ngIf="message.messageAttachmentUrl"
307+
><img
308+
class="message-image"
309+
(click)="onOpenImageClick(message.messageAttachmentUrl)"
310+
src="{{ message.messageAttachmentUrl }}"
311+
alt=""
312+
/></span>
285313
<span>{{ message.messageText }}</span>
286314
</div>
287315
<div class="message-options gap-fix">
@@ -307,7 +335,12 @@ <h5>Chats</h5>
307335
</button>
308336
<div class="dropdown-menu">
309337
<div class="dropdown-item">
310-
<input id="attachment" accept="image/png, image/gif, image/jpeg" (change)="imageSelected($event)" type="file" />
338+
<input
339+
id="attachment"
340+
accept="image/png, image/gif, image/jpeg"
341+
(change)="imageSelected($event)"
342+
type="file"
343+
/>
311344
</div>
312345
</div>
313346
</div>

‎MangoAPI.Client/src/app/components/chats/chats.component.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ModalWindowStateService } from './../../services/states/modalWindowState.service';
12
import { Component, OnDestroy, OnInit } from '@angular/core';
23
import { TokensService } from '../../services/messenger/tokens.service';
34
import { Chat } from '../../types/models/Chat';
@@ -33,12 +34,12 @@ export class ChatsComponent implements OnInit, OnDestroy {
3334
private _communitiesService: CommunitiesService,
3435
private _userChatsService: UserChatsService,
3536
private _messagesService: MessagesService,
36-
private _usersService: UsersService,
3737
private _errorNotificationService: ErrorNotificationService,
3838
private _router: Router,
3939
private _validationService: ValidationService,
4040
private _documentsService: DocumentsService,
41-
private _apiBaseService: ApiBaseService
41+
private _apiBaseService: ApiBaseService,
42+
public _modalWindowStateService: ModalWindowStateService
4243
) {}
4344

4445
private connectionBuilder: signalR.HubConnectionBuilder = new signalR.HubConnectionBuilder();
@@ -150,8 +151,14 @@ export class ChatsComponent implements OnInit, OnDestroy {
150151
this.messageAttachment = event.target.files[0];
151152
}
152153

153-
onImageClick(imageUrl: string) {
154-
window.open(imageUrl);
154+
onOpenImageClick(imageLink: string): void {
155+
this._modalWindowStateService.setIsModalWindowShowing(true)
156+
this._modalWindowStateService.setPicture(imageLink)
157+
}
158+
159+
closeModalWindowrClick(): void {
160+
this._modalWindowStateService.setIsModalWindowShowing(false)
161+
this._modalWindowStateService.setPictureNull()
155162
}
156163

157164
async uploadFile(file: File) {

‎MangoAPI.Client/src/app/components/contacts/contacts.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<body class="d-flex">
22
<div class="menu" id="menu">
3-
<div *ngIf="_blackCoverStateService.isBlackCoverShowing" class="black-cover" (click)="closeBlackCoverClick()">
3+
<div *ngIf="_modalWindowStateService.isModalWindowShowing" class="black-cover" (click)="closeModalWindowrClick()">
44
<img
5-
*ngIf="_blackCoverStateService.picture"
6-
src="{{ _blackCoverStateService.picture }}"
5+
*ngIf="_modalWindowStateService.picture"
6+
src="{{ _modalWindowStateService.picture }}"
77
class="profile-avatar"
88
alt=""
99
(click)="$event.stopPropagation()"

‎MangoAPI.Client/src/app/components/contacts/contacts.component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Router } from '@angular/router';
1111
import { StartDirectChatQueryObject } from '../../types/query-objects/StartDirectChatQueryObject';
1212
import { RoutingService } from '../../services/messenger/routing.service';
1313
import { Subject, takeUntil } from 'rxjs';
14-
import { BlackCoverStateService } from 'src/app/services/states/blackCoverState.service';
14+
import { ModalWindowStateService } from 'src/app/services/states/modalWindowState.service';
1515

1616
@Component({
1717
selector: 'app-contacts',
@@ -26,7 +26,7 @@ export class ContactsComponent implements OnInit, OnDestroy {
2626
private _communitiesService: CommunitiesService,
2727
private _router: Router,
2828
private _routingService: RoutingService,
29-
public _blackCoverStateService: BlackCoverStateService,
29+
public _modalWindowStateService: ModalWindowStateService,
3030
) {}
3131

3232
public contacts: Contact[] = [];
@@ -91,13 +91,13 @@ export class ContactsComponent implements OnInit, OnDestroy {
9191
}
9292

9393
onOpenAvatarClick(): void {
94-
this._blackCoverStateService.setIsBlackCoverShowing(true)
95-
this._blackCoverStateService.setPicture(this.activeUser.pictureUrl)
94+
this._modalWindowStateService.setIsModalWindowShowing(true)
95+
this._modalWindowStateService.setPicture(this.activeUser.pictureUrl)
9696
}
9797

98-
closeBlackCoverClick(): void {
99-
this._blackCoverStateService.setIsBlackCoverShowing(false)
100-
this._blackCoverStateService.setPictureNull()
98+
closeModalWindowrClick(): void {
99+
this._modalWindowStateService.setIsModalWindowShowing(false)
100+
this._modalWindowStateService.setPictureNull()
101101
}
102102

103103
getUsersContacts(): void {

‎MangoAPI.Client/src/app/components/settings/settings.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<div class="d-flex">
22
<div class="menu" id="menu">
3-
<div *ngIf="_blackCoverStateService.isBlackCoverShowing" class="black-cover" (click)="closeBlackCoverClick()">
3+
<div *ngIf="_modalWindowStateService.isModalWindowShowing" class="black-cover" (click)="closeModalWindowClick()">
44
<img
5-
*ngIf="_blackCoverStateService.picture"
6-
src="{{ _blackCoverStateService.picture }}"
5+
*ngIf="_modalWindowStateService.picture"
6+
src="{{ _modalWindowStateService.picture }}"
77
class="profile-avatar"
88
alt=""
99
(click)="$event.stopPropagation()"

‎MangoAPI.Client/src/app/components/settings/settings.component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { Event, Router } from '@angular/router';
1414
import { Subject, takeUntil } from 'rxjs';
1515
import { RoutingConstants } from 'src/app/types/constants/RoutingConstants';
1616
import { AppInfoService } from 'src/app/services/api/app-info.service';
17-
import { BlackCoverStateService } from 'src/app/services/states/blackCoverState.service';
17+
import { ModalWindowStateService } from 'src/app/services/states/modalWindowState.service';
1818

1919
@Component({
2020
selector: 'app-settings',
@@ -28,7 +28,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
2828
private _tokensService: TokensService,
2929
private _validationService: ValidationService,
3030
private _sessionService: SessionService,
31-
public _blackCoverStateService: BlackCoverStateService,
31+
public _modalWindowStateService: ModalWindowStateService,
3232
private _router: Router
3333
) {}
3434

@@ -108,13 +108,13 @@ export class SettingsComponent implements OnInit, OnDestroy {
108108
}
109109

110110
onOpenAvatarClick(): void {
111-
this._blackCoverStateService.setIsBlackCoverShowing(true)
112-
this._blackCoverStateService.setPicture(this.currentUser.pictureUrl)
111+
this._modalWindowStateService.setIsModalWindowShowing(true)
112+
this._modalWindowStateService.setPicture(this.currentUser.pictureUrl)
113113
}
114114

115-
closeBlackCoverClick(): void {
116-
this._blackCoverStateService.setIsBlackCoverShowing(false)
117-
this._blackCoverStateService.setPictureNull()
115+
closeModalWindowClick(): void {
116+
this._modalWindowStateService.setIsModalWindowShowing(false)
117+
this._modalWindowStateService.setPictureNull()
118118
}
119119

120120
onLogoutClick(): void {

MangoAPI.Client/src/app/services/states/blackCoverState.service.ts renamed to MangoAPI.Client/src/app/services/states/modalWindowState.service.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { Injectable } from '@angular/core';
44
@Injectable({
55
providedIn: 'root'
66
})
7-
export class BlackCoverStateService {
8-
public isBlackCoverShowing: boolean = false;
7+
export class ModalWindowStateService {
8+
public isModalWindowShowing: boolean = false;
99
public picture: string | null = null;
1010

1111

12-
public setIsBlackCoverShowing = (value: boolean) => {
13-
this.isBlackCoverShowing = value;
12+
public setIsModalWindowShowing = (value: boolean) => {
13+
this.isModalWindowShowing = value;
1414
}
1515

1616
public setPicture = (fileName: string) => {

‎MangoAPI.Client/src/styles.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ i {
138138

139139
.profile-avatar {
140140
margin: auto;
141-
max-width: 100%;
141+
max-height: 80%;
142142
}
143143
}
144144

@@ -505,6 +505,7 @@ i {
505505
flex-direction: column;
506506
.message-image {
507507
max-width: 200px;
508+
cursor: pointer;
508509
}
509510
.display-name {
510511
font-weight: bold;

0 commit comments

Comments
 (0)