Merge pull request #401 from Ketteiteki/add_showing_full_size_avatar_frontend

Add showing full size avatar frontend

Author: kolosovpetro

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

@@ -1,5 +1,18 @@
 <div class="d-flex">
   <div class="menu" id="menu">
+    <div
+      *ngIf="_modalWindowStateService.isModalWindowShowing"
+      class="black-cover"
+      (click)="closeModalWindowrClick()"
+    >
+      <img
+        *ngIf="_modalWindowStateService.picture"
+        src="{{ _modalWindowStateService.picture }}"
+        class="profile-avatar"
+        alt=""
+        (click)="$event.stopPropagation()"
+      />
+    </div>
     <app-navbar [activeComponent]="'chats'"></app-navbar>
     <aside class="sidebar">
       <header class="sidebar-header p-3">
@@ -45,9 +58,9 @@ <h5>Chats</h5>
             (click)="loadChat(chat.chatId)"
             *ngIf="activeChatId === chat.chatId; else chatElse"
           >
-          <div class="last-message-time" *ngIf="chatContainsMessages(chat)">
-            {{ toShortTimeString(chat.lastMessageTime) }}
-          </div>
+            <div class="last-message-time" *ngIf="chatContainsMessages(chat)">
+              {{ toShortTimeString(chat.lastMessageTime) }}
+            </div>
             <img alt="Chat avatar" class="avatar" src="{{ chat.chatLogoImageUrl }}" />
             <div class="content">
               <div class="title" *ngIf="chat.communityType === 2; else elseBlock">
@@ -206,12 +219,18 @@ <h5>Chats</h5>
                 <img
                   alt="User Avatar"
                   class="user-avatar"
+                  (click)="onOpenImageClick(message.messageAuthorPictureUrl)"
                   src="{{ message.messageAuthorPictureUrl }}"
                 />
                 <div class="message-wrapper">
                   <div class="message-content">
-                    <span *ngIf="message.messageAttachmentUrl"><img class="message-image"
-                        (click)="onImageClick(message.messageAttachmentUrl)" src="{{message.messageAttachmentUrl}}" alt=""></span>
+                    <span *ngIf="message.messageAttachmentUrl"
+                      ><img
+                        class="message-image"
+                        (click)="onOpenImageClick(message.messageAttachmentUrl)"
+                        src="{{ message.messageAttachmentUrl }}"
+                        alt=""
+                    /></span>
                     <span>{{ message.messageText }}</span>
                   </div>
                   <div class="message-options gap-fix">
@@ -271,17 +290,26 @@ <h5>Chats</h5>
                   <img
                     alt="User Avatar"
                     class="user-avatar"
+                    (click)="onOpenImageClick(message.messageAuthorPictureUrl)"
                     src="{{ message.messageAuthorPictureUrl }}"
                   />
                   <div class="message-wrapper">
                     <div class="message-content">
                       <div
+                        *ngIf="!message.messageAttachmentUrl"
                         class="display-name {{
                           getDisplayNameColour(message.userDisplayNameColour)
                         }}"
                       >
                         {{ message.userDisplayName }}
                       </div>
+                      <span *ngIf="message.messageAttachmentUrl"
+                        ><img
+                          class="message-image"
+                          (click)="onOpenImageClick(message.messageAttachmentUrl)"
+                          src="{{ message.messageAttachmentUrl }}"
+                          alt=""
+                      /></span>
                       <span>{{ message.messageText }}</span>
                     </div>
                     <div class="message-options gap-fix">
@@ -307,7 +335,12 @@ <h5>Chats</h5>
           </button>
           <div class="dropdown-menu">
             <div class="dropdown-item">
-              <input id="attachment" accept="image/png, image/gif, image/jpeg" (change)="imageSelected($event)" type="file" />
+              <input
+                id="attachment"
+                accept="image/png, image/gif, image/jpeg"
+                (change)="imageSelected($event)"
+                type="file"
+              />
             </div>
           </div>
         </div>

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

@@ -1,3 +1,4 @@
+import { ModalWindowStateService } from './../../services/states/modalWindowState.service';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { TokensService } from '../../services/messenger/tokens.service';
 import { Chat } from '../../types/models/Chat';
@@ -33,12 +34,12 @@ export class ChatsComponent implements OnInit, OnDestroy {
     private _communitiesService: CommunitiesService,
     private _userChatsService: UserChatsService,
     private _messagesService: MessagesService,
-    private _usersService: UsersService,
     private _errorNotificationService: ErrorNotificationService,
     private _router: Router,
     private _validationService: ValidationService,
     private _documentsService: DocumentsService,
-    private _apiBaseService: ApiBaseService
+    private _apiBaseService: ApiBaseService,
+    public _modalWindowStateService: ModalWindowStateService
   ) {}
 
   private connectionBuilder: signalR.HubConnectionBuilder = new signalR.HubConnectionBuilder();
@@ -150,8 +151,14 @@ export class ChatsComponent implements OnInit, OnDestroy {
     this.messageAttachment = event.target.files[0];
   }
 
-  onImageClick(imageUrl: string) {
-    window.open(imageUrl);
+  onOpenImageClick(imageLink: string): void {
+    this._modalWindowStateService.setIsModalWindowShowing(true)
+    this._modalWindowStateService.setPicture(imageLink)
+  }
+
+  closeModalWindowrClick(): void {
+    this._modalWindowStateService.setIsModalWindowShowing(false)
+    this._modalWindowStateService.setPictureNull()
   }
 
   async uploadFile(file: File) {

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

@@ -1,5 +1,14 @@
 <body class="d-flex">
   <div class="menu" id="menu">
+    <div *ngIf="_modalWindowStateService.isModalWindowShowing" class="black-cover" (click)="closeModalWindowrClick()">
+      <img
+        *ngIf="_modalWindowStateService.picture"
+        src="{{ _modalWindowStateService.picture }}"
+        class="profile-avatar"
+        alt=""
+        (click)="$event.stopPropagation()"
+      />
+    </div>
     <app-navbar [activeComponent]="'contacts'"></app-navbar>
     <aside class="sidebar contacts">
       <header class="sidebar-header p-3">
@@ -39,7 +48,7 @@ <h5>Contacts</h5>
             *ngIf="contact.userId === activeUserId; else elseContact"
             (click)="onContactTabClick(contact)"
           >
-            <img alt="Chat avatar" class="avatar" src="{{ contact.pictureUrl }}" />
+            <img alt="Chat avatar" class="avatar" src="{{ contact.pictureUrl }}"/>
             <div class="content">
               <div class="title">
                 <div class="info pl-1">
@@ -90,7 +99,7 @@ <h5>Contacts</h5>
   </div>
   <main class="contact">
     <div class="main-info background-pattern">
-      <img src="{{ activeUser.pictureUrl }}" alt="User Avatar" class="avatar" />
+      <img src="{{ activeUser.pictureUrl }}" alt="User Avatar" class="avatar" (click)="onOpenAvatarClick()"/>
       <div class="d-flex flex-column">
         <p>{{ activeUser.displayName }}</p>
         <p>{{ activeUser.bio }}</p>

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

@@ -11,6 +11,7 @@ import { Router } from '@angular/router';
 import { StartDirectChatQueryObject } from '../../types/query-objects/StartDirectChatQueryObject';
 import { RoutingService } from '../../services/messenger/routing.service';
 import { Subject, takeUntil } from 'rxjs';
+import { ModalWindowStateService } from 'src/app/services/states/modalWindowState.service';
 
 @Component({
   selector: 'app-contacts',
@@ -24,7 +25,8 @@ export class ContactsComponent implements OnInit, OnDestroy {
     private _tokensService: TokensService,
     private _communitiesService: CommunitiesService,
     private _router: Router,
-    private _routingService: RoutingService
+    private _routingService: RoutingService,
+    public _modalWindowStateService: ModalWindowStateService,
   ) {}
 
   public contacts: Contact[] = [];
@@ -88,6 +90,16 @@ export class ContactsComponent implements OnInit, OnDestroy {
       });
   }
 
+  onOpenAvatarClick(): void {
+    this._modalWindowStateService.setIsModalWindowShowing(true)
+    this._modalWindowStateService.setPicture(this.activeUser.pictureUrl)
+  }
+
+  closeModalWindowrClick(): void {
+    this._modalWindowStateService.setIsModalWindowShowing(false)
+    this._modalWindowStateService.setPictureNull()
+  }
+
   getUsersContacts(): void {
     this._contactsService
       .getCurrentUserContacts()

MangoAPI.Client/src/app/components/navbar/navbar.component.html

@@ -5,7 +5,6 @@
   <ul class="text-center menu-buttons">
     <li>
       <a [routerLink]="[routingConstants.Chats]">
-        <!-- <a routerLink="{{ routingConstants.Chats }}"> -->
           <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
             [ngClass]="activeComponent === 'chats' ? 'path active' : 'path'"

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

@@ -1,5 +1,14 @@
 <div class="d-flex">
   <div class="menu" id="menu">
+    <div *ngIf="_modalWindowStateService.isModalWindowShowing" class="black-cover" (click)="closeModalWindowClick()">
+      <img
+        *ngIf="_modalWindowStateService.picture"
+        src="{{ _modalWindowStateService.picture }}"
+        class="profile-avatar"
+        alt=""
+        (click)="$event.stopPropagation()"
+      />
+    </div>
     <app-navbar [activeComponent]="'settings'"></app-navbar>
     <aside class="sidebar">
       <header class="sidebar-header p-3">
@@ -10,7 +19,12 @@ <h5>Profile</h5>
       </header>
       <div class="p-3 overflow height-fix">
         <div class="main-info background-pattern">
-          <img src="{{ currentUser.pictureUrl }}" alt="User Avatar" class="avatar" />
+          <img
+            src="{{ currentUser.pictureUrl }}"
+            alt="User Avatar"
+            class="avatar"
+            (click)="onOpenAvatarClick()"
+          />
           <div class="d-flex flex-column">
             <p>{{ currentUser.displayName }}</p>
           </div>
@@ -92,7 +106,7 @@ <h5>Profile</h5>
           <li>
             <div class="info">
               <p class="title">Api Version</p>
-              <p>{{apiVersion}}</p>
+              <p>{{ apiVersion }}</p>
             </div>
             <img src="./../../../assets/svg/api.svg" alt="Api Icon" />
           </li>
@@ -116,12 +130,13 @@ <h5 class="mb-2">Account</h5>
             <li class="d-flex flex-column w-50 profile-form-group">
               <label for="BirthdayDate">Birthday</label>
               <input
-                class='profile-form-input'
-                type='date'
-                value="{{currentUser.birthdayDate}}"
-                id='BirthdayDate'
-                placeholder='Type your birthday'
-                [(ngModel)]="currentUser.birthdayDate">
+                class="profile-form-input"
+                type="date"
+                value="{{ currentUser.birthdayDate }}"
+                id="BirthdayDate"
+                placeholder="Type your birthday"
+                [(ngModel)]="currentUser.birthdayDate"
+              />
             </li>
 
             <li class="d-flex flex-column w-50 profile-form-group">

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

@@ -10,24 +10,25 @@ import { User } from '../../types/models/User';
 import { ValidationService } from '../../services/messenger/validation.service';
 import { UpdateAccountInformationCommand } from '../../types/requests/UpdateAccountInformationCommand';
 import { SessionService } from '../../services/api/session.service';
-import { Router } from '@angular/router';
+import { Event, Router } from '@angular/router';
 import { Subject, takeUntil } from 'rxjs';
 import { RoutingConstants } from 'src/app/types/constants/RoutingConstants';
 import { AppInfoService } from 'src/app/services/api/app-info.service';
+import { ModalWindowStateService } from 'src/app/services/states/modalWindowState.service';
 
 @Component({
   selector: 'app-settings',
   templateUrl: './settings.component.html'
 })
 export class SettingsComponent implements OnInit, OnDestroy {
   constructor(
-    private _contactsService: ContactsService,
     private _errorNotificationService: ErrorNotificationService,
     private _usersService: UsersService,
     private _appInfoService: AppInfoService,
     private _tokensService: TokensService,
     private _validationService: ValidationService,
     private _sessionService: SessionService,
+    public _modalWindowStateService: ModalWindowStateService,
     private _router: Router
   ) {}
 
@@ -106,6 +107,16 @@ export class SettingsComponent implements OnInit, OnDestroy {
     this.componentDestroyed$.complete();
   }
 
+  onOpenAvatarClick(): void {
+    this._modalWindowStateService.setIsModalWindowShowing(true)
+    this._modalWindowStateService.setPicture(this.currentUser.pictureUrl)
+  }
+
+  closeModalWindowClick(): void {
+    this._modalWindowStateService.setIsModalWindowShowing(false)
+    this._modalWindowStateService.setPictureNull()
+  }
+
   onLogoutClick(): void {
     const refreshToken = this._tokensService.getTokens()?.refreshToken as string;
     this._sessionService

MangoAPI.Client/src/app/services/states/modalWindowState.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModalWindowStateService {
+  public isModalWindowShowing: boolean = false;
+  public picture: string | null = null;
+
+
+  public setIsModalWindowShowing = (value: boolean) => {
+    this.isModalWindowShowing = value;
+  }
+
+  public setPicture = (fileName: string) => {
+    this.picture = fileName;
+  }
+
+  public setPictureNull = () => {
+    this.picture = null;
+  }
+}

MangoAPI.Client/src/styles.scss

@@ -5,6 +5,7 @@ $dark-gray: #505558;
 $orange: #cf7d1f;
 $orange-dark: #c18d1a;
 $red: #ff3333;
+$transparentBlackLight: rgba(0, 0, 0, 0.300);
 
 * {
   box-sizing: border-box;
@@ -127,6 +128,20 @@ i {
   height: 50px;
 }
 
+.black-cover {
+  display: flex;
+  position: absolute;
+  z-index: 3;
+  width: 100vw;
+  height: 100vh;
+  background-color: $transparentBlackLight;
+
+  .profile-avatar {
+    margin: auto;
+    max-height: 80%;
+  }
+}
+
 .contacts {
   .list {
     li {
@@ -207,6 +222,7 @@ i {
     height: 80px;
     margin-bottom: 25px;
     object-fit: cover;
+    cursor: pointer;
   }
   p {
     font-size: 16px;
@@ -489,6 +505,7 @@ i {
           flex-direction: column;
           .message-image {
               max-width: 200px;
+              cursor: pointer;
             }
           .display-name {
             font-weight: bold;
@@ -521,6 +538,7 @@ i {
           border-radius: 50%;
           align-self: flex-end;
           object-fit: cover;
+          cursor: pointer;
         }
       }
     }