add showing full size avatar

ketteiteki · ketteiteki · commit 2f68d8c7b16b · 2023-03-10T21:15:41.000+04:00
diff --git a/MangoAPI.Client/src/app/components/contacts/contacts.component.html b/MangoAPI.Client/src/app/components/contacts/contacts.component.html
@@ -1,5 +1,14 @@
 <body class="d-flex">
   <div class="menu" id="menu">
+    <div *ngIf="_blackCoverStateService.isBlackCoverShowing" class="black-cover" (click)="closeBlackCoverClick()">
+      <img
+        *ngIf="_blackCoverStateService.picture"
+        src="{{ _blackCoverStateService.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>
diff --git a/MangoAPI.Client/src/app/components/contacts/contacts.component.ts b/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 { BlackCoverStateService } from 'src/app/services/states/blackCoverState.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 _blackCoverStateService: BlackCoverStateService,
   ) {}
 
   public contacts: Contact[] = [];
@@ -88,6 +90,17 @@ export class ContactsComponent implements OnInit, OnDestroy {
       });
   }
 
+  onOpenAvatarClick(): void {
+    console.log(1);
+    this._blackCoverStateService.setIsBlackCoverShowing(true)
+    this._blackCoverStateService.setPicture(this.activeUser.pictureUrl)
+  }
+
+  closeBlackCoverClick(): void {
+    this._blackCoverStateService.setIsBlackCoverShowing(false)
+    this._blackCoverStateService.setPictureNull()
+  }
+
   getUsersContacts(): void {
     this._contactsService
       .getCurrentUserContacts()
diff --git a/MangoAPI.Client/src/app/components/navbar/navbar.component.html b/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'"
diff --git a/MangoAPI.Client/src/app/components/settings/settings.component.html b/MangoAPI.Client/src/app/components/settings/settings.component.html
@@ -1,5 +1,14 @@
 <div class="d-flex">
   <div class="menu" id="menu">
+    <div *ngIf="_blackCoverStateService.isBlackCoverShowing" class="black-cover" (click)="closeBlackCoverClick()">
+      <img
+        *ngIf="_blackCoverStateService.picture"
+        src="{{ _blackCoverStateService.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">
diff --git a/MangoAPI.Client/src/app/components/settings/settings.component.ts b/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 { BlackCoverStateService } from 'src/app/services/states/blackCoverState.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 _blackCoverStateService: BlackCoverStateService,
     private _router: Router
   ) {}
 
@@ -106,6 +107,16 @@ export class SettingsComponent implements OnInit, OnDestroy {
     this.componentDestroyed$.complete();
   }
 
+  onOpenAvatarClick(): void {
+    this._blackCoverStateService.setIsBlackCoverShowing(true)
+    this._blackCoverStateService.setPicture(this.currentUser.pictureUrl)
+  }
+
+  closeBlackCoverClick(): void {
+    this._blackCoverStateService.setIsBlackCoverShowing(false)
+    this._blackCoverStateService.setPictureNull()
+  }
+
   onLogoutClick(): void {
     const refreshToken = this._tokensService.getTokens()?.refreshToken as string;
     this._sessionService
diff --git a/MangoAPI.Client/src/styles.scss b/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-width: 100%;
+  }
+}
+
 .contacts {
   .list {
     li {
