join/src/app/components/contacts/contact-detail/contact-detail.component.html
2024-04-06 10:43:19 +02:00

83 lines
2.4 KiB
HTML

<section>
<div class="header">
<div class="headerline">
<div class="title">Contacts</div>
<div class="blue-bar"></div>
<div class="metrics-txt">Better with a team</div>
</div>
<img
[ngClass]="{ 'd-none': !currentUserId }"
(click)="closeUserDetails()"
src="./../../../../assets/img/arrow-left.svg"
/>
</div>
@if (currentUserId) {
<div
class="contact-details"
[ngClass]="{
'animation-coming-in': currentUserId
}"
>
<div class="content">
<div
class="circle"
[ngStyle]="{
'background-color': firebaseService.getUserDetails(
currentUserId,
'color'
)
}"
>
<div class="initials">
{{ firebaseService.getUserDetails(currentUserId, "initials") }}
</div>
</div>
<div class="word-wrap">
<div class="name">
{{ firebaseService.getUserDetails(currentUserId, "firstName") }}
{{ firebaseService.getUserDetails(currentUserId, "lastName") }}
</div>
<div class="btns">
<div class="btn btn-edit">
<img src="./../../../../assets/img/contact/edit.svg" alt="" />
<p (click)="openEditDialog()">edit</p>
</div>
<div class="btn btn-delete">
<img src="./../../../../assets/img/contact/delete.svg" alt="" />
<p (click)="deleteContact()">delete</p>
</div>
</div>
<div class="btn-mobile" (click)="toggleNav()">
<img src="./../../../assets/img/contact/points.svg" alt="check" />
</div>
</div>
</div>
<div class="contact word-wrap">
<div class="headline">Contact Information</div>
<div class="info">
<p>Email:</p>
<a
[href]="
'mail:' + firebaseService.getUserDetails(currentUserId, 'email')
"
>
{{ firebaseService.getUserDetails(currentUserId, "email") }}
</a>
<p>Phone:</p>
<a
[href]="
'tel:' + firebaseService.getUserDetails(currentUserId, 'phone')
"
>
{{ firebaseService.getUserDetails(currentUserId, "phone") }}
</a>
</div>
</div>
</div>
} @if (isMobileNavbarOpen) {
<app-contact-nav
[deleteContact]="deleteContact"
[openEditDialog]="openEditDialog"
></app-contact-nav>
}
</section>