255 lines
11 KiB
HTML
255 lines
11 KiB
HTML
<div class="app-content content" >
|
|
<div class="sidebar-left" id="sidebar-left">
|
|
<div class="sidebar"><!-- app chat user profile left sidebar start -->
|
|
<div class="chat-user-profile" id="user-profile" >
|
|
<header class="chat-user-profile-header text-center border-bottom">
|
|
<span class="chat-profile-close" (click)="showProfile($event)" >
|
|
<i class="ficon feather ft-x" ></i>
|
|
</span>
|
|
<div class="my-2">
|
|
<img *ngIf="loggedInUser.photoURL" src="{{loggedInUser.photoURL}}" class="round mb-1" alt="user_avatar" height="100" width="100" >
|
|
<img *ngIf="!loggedInUser.photoURL" src="../../../../assets/images/portrait/small/avatar-s-19.png" class="round mb-1" alt="user_avatar"
|
|
alt="avatar" height="100" width="100" >
|
|
<!-- <img src="../../../assets/images/portrait/small/avatar-s-16.png" class="round mb-1" alt="user_avatar"
|
|
height="100" width="100" > -->
|
|
|
|
<h5 class="mb-0">{{loggedInUser.displayName}}</h5>
|
|
<span>Designer</span>
|
|
</div>
|
|
</header>
|
|
<div class="chat-user-profile-content">
|
|
<div class="chat-user-profile-scroll" fxFlex="auto" [perfectScrollbar]="config">
|
|
<h6 class="text-uppercase mb-1">ABOUT</h6>
|
|
<p class="mb-2">It is a long established fact that a reader will be distracted by the readable content .</p>
|
|
<h6>PERSONAL INFORAMTION</h6>
|
|
<ul class="list-unstyled mb-2">
|
|
<li class="mb-25">email@gmail.com</li>
|
|
<li>+1(789) 950 -7654</li>
|
|
</ul>
|
|
<h6 class="text-uppercase mb-1">CHANNELS</h6>
|
|
<ul class="list-unstyled mb-2">
|
|
<li><a href=""># Devlopers</a></li>
|
|
<li><a href=""># Designers</a></li>
|
|
</ul>
|
|
<h6 class="text-uppercase mb-1">SETTINGS</h6>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-50 "><a href="" class="d-flex align-items-center"><i class="ficon feather ft-tag mr-50"></i>
|
|
Add
|
|
Tag</a></li>
|
|
<li class="mb-50 "><a href="" class="d-flex align-items-center"><i class="ficon feather ft-star mr-50"></i>
|
|
Important Contact</a>
|
|
</li>
|
|
<li class="mb-50 "><a href="" class="d-flex align-items-center"><i
|
|
class="ficon feather ft-image mr-50"></i>
|
|
Shared
|
|
Documents</a></li>
|
|
<li class="mb-50 "><a href="" class="d-flex align-items-center"><i
|
|
class="ficon feather ft-trash-2 mr-50"></i>
|
|
Deleted
|
|
Documents</a></li>
|
|
<li><a href="" class="d-flex align-items-center"><i class="ficon feather ft-x-circle mr-50"></i> Blocked
|
|
Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- app chat user profile left sidebar ends -->
|
|
<!-- app chat sidebar start -->
|
|
<div class="chat-sidebar card" id="sidebar-card">
|
|
<span class="chat-sidebar-close" (click) = "Sidebar($event)">
|
|
<i class="ficon feather ft-x" ></i>
|
|
</span>
|
|
<div class="chat-sidebar-search">
|
|
<div class="d-flex align-items-center">
|
|
<div class="chat-sidebar-profile-toggle" (click)="showProfile($event)">
|
|
<div class="avatar">
|
|
<img *ngIf="loggedInUser.photoURL" src="{{loggedInUser.photoURL}}" class="cursor-pointer" alt="user_avatar" height="36" width="36">
|
|
<img *ngIf="!loggedInUser.photoURL" src="../../../../assets/images/portrait/small/avatar-s-19.png"
|
|
alt="avatar" height="36" width="36">
|
|
<!-- <img src="../../../assets/images/portrait/small/avatar-s-16.png" class="cursor-pointer" alt="user_avatar"
|
|
height="36" width="36"> -->
|
|
</div>
|
|
</div>
|
|
<fieldset class="form-group position-relative has-icon-left mx-75 mb-0">
|
|
<input type="text" class="form-control round" id="chat-search" (keyup)="searchContact($event)" placeholder="Search">
|
|
<div class="form-control-position">
|
|
<i class="ficon feather ft-search text-dark"></i>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="chat-sidebar-list-wrapper pt-2 " fxFlex="auto" [perfectScrollbar]="config" >
|
|
<h6 class="px-2 pb-25 mb-0">CHANNELS<i class="ficon feather ft-plus float-right cursor-pointer"></i></h6>
|
|
<ul class="chat-sidebar-list">
|
|
<li>
|
|
<h6 class="mb-0"># Devlopers</h6>
|
|
</li>
|
|
<li>
|
|
<h6 class="mb-0"># Designers</h6>
|
|
</li>
|
|
</ul>
|
|
<h6 class="px-2 pt-2 pb-25 mb-0">CHATS</h6>
|
|
<ul class="chat-sidebar-list" >
|
|
<li class = "chatSidebar" *ngFor="let chat of chatList" id="users-list" (click)="loadMyChatRoom(chat)" (click)="contentOverlay($event)"
|
|
id="_media" [ngClass]="(chat.uid === clickedUser) ? 'active': ''">
|
|
<div class="d-flex align-items-center" >
|
|
<div class="avatar m-0 mr-50" ><img [src]="chat.image" height="36"
|
|
width="36" >
|
|
<span class="avatar-status-busy"></span>
|
|
</div>
|
|
<div class="chat-sidebar-name">
|
|
<span class="mb-0">{{chat.name}}</span>
|
|
<span class="badge badge-pill float-right badge-danger mr-2">{{chat.unreadMessageCount ? chat.unreadMessageCount : ''}}</span>
|
|
<span class="text-muted"></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<h6 class="px-2 pt-2 pb-25 mb-0">CONTACTS<i class="ficon feather ft-plus float-right cursor-pointer"></i></h6>
|
|
<ul class="chat-sidebar-list" >
|
|
<li class = "chatSidebar" *ngFor="let contact of contactList" (click)="showChat(contact)" (click)="contentOverlay($event)"
|
|
id="_media" [ngClass]="(contact.uid === clickedUser) ? 'active': ''">
|
|
<div class="d-flex align-items-center">
|
|
<div class="avatar m-0 mr-50"><img [src]="contact.image" height="36"
|
|
width="36" >
|
|
<span class="avatar-status-away"></span>
|
|
</div>
|
|
<div class="chat-sidebar-name">
|
|
<h6 class="mb-0">{{contact.name}}</h6><span class="text-muted"> {{contact.showMessage}}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- app chat sidebar ends -->
|
|
|
|
</div>
|
|
</div>
|
|
<div class="content-right ">
|
|
|
|
<div class="content-overlay" ></div>
|
|
<div class="content-wrapper">
|
|
<div class="content-header row">
|
|
</div>
|
|
<div class="content-body"><!-- app chat overlay -->
|
|
<div class="chat-overlay " id="overlayChat" (click) = "Sidebar($event)"></div>
|
|
<!-- app chat window start -->
|
|
<section class="chat-window-wrapper">
|
|
<div class="chat-start" id='chat-overlay1'>
|
|
<span class="ficon feather ft-message-square chat-sidebar-toggle chat-start-icon font-large-3 p-3 mb-1" (click)="showSidebar($event)" ></span>
|
|
<h4 class="d-none d-lg-block py-50 text-bold-500">Select a contact to start a chat!</h4>
|
|
<button class="btn btn-light-primary chat-start-text chat-sidebar-toggle d-block d-lg-none py-50 px-1" (click)="showSidebar($event)" >Start
|
|
Conversation!</button>
|
|
</div>
|
|
<div class="chat-area d-none" id = "chat-area d-none">
|
|
<div class="chat-header">
|
|
<header class="d-flex justify-content-between align-items-center px-1 py-75">
|
|
<div class="d-flex align-items-center" >
|
|
<div class="chat-sidebar-toggle d-block d-lg-none mr-1" id="chat-sidebar"><i
|
|
class="ficon feather ft-align-justify font-large-1 cursor-pointer" (click)="showSidebar($event)"></i>
|
|
</div>
|
|
<div class="avatar chat-profile-toggle m-0 mr-1" (click)="ShowChatProfile($event)">
|
|
<span >
|
|
<img [src]="headerImage" class="cursor-pointer" alt="avatar"/>
|
|
</span>
|
|
<span class="avatar-status-busy"></span>
|
|
</div>
|
|
<h6 class="mb-0">{{headerName}}</h6>
|
|
</div>
|
|
<div class="chat-header-icons">
|
|
|
|
<span class="chat-icon-favorite" id='chat-icon'(click)="chatFavorite($event)" >
|
|
<i class="ficon feather ft-star font-medium-5 cursor-pointer"></i>
|
|
</span>
|
|
<span class="dropdown">
|
|
|
|
<span ngbDropdown [open]="false" [autoClose]="true" class="d-inline-block">
|
|
<i class="ficon feather ft-more-vertical font-medium-4 ml-25 cursor-pointer dropdown-toggle nav-hide-arrow cursor-pointer"
|
|
id="dropdownMenuButton" dropdown-menu dropdown-menu-left show data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="menu" ngbDropdownToggle>
|
|
</i>
|
|
<div ngbDropdownMenu ="dropdownMenuButton">
|
|
<a class="dropdown-item">Pin to top</a>
|
|
<a class="dropdown-item">Delete chat</a>
|
|
<a class="dropdown-item ">Block</a>
|
|
</div>
|
|
</span>
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
</header>
|
|
</div>
|
|
<!-- chat card start -->
|
|
<div class="card chat-wrapper shadow-none mb-0">
|
|
<div class="card-content">
|
|
<div class="card-body chat-container" id="componentRef">
|
|
<perfect-scrollbar [config]="config" #chatPS>
|
|
<div class="chat-content" #content>
|
|
<div id="chatWindow" class="chat" [ngClass]="(currentUserUid === messages.uid)?'chat-right':'chat-left'"
|
|
*ngFor="let messages of displayChat">
|
|
<div class="chat-avatar">
|
|
<a [routerLink]="" class="avatar m-0">
|
|
<img [src]="messages.userImage" *ngIf="messages.userImage"/>
|
|
</a>
|
|
</div>
|
|
<div class="chat-body">
|
|
<div class="chat-message">
|
|
<p>{{messages.message}}</p>
|
|
<span class="chat-time" title="{{messages.date | date}}">{{messages.date| date: 'HH:mm a'}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</perfect-scrollbar>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer chat-footer px-2 py-1 pb-0">
|
|
<form class="d-flex align-items-center">
|
|
<i class="ficon feather ft-user cursor-pointer"></i>
|
|
<i class="ficon feather ft-paperclip ml-1 cursor-pointer"></i>
|
|
<input type="text" class="form-control chat-message-send mx-1" [(ngModel)]="newMessage" name="newmessage" id="iconLeft4"
|
|
placeholder="Type your message here...." #box (keyup.enter)="onEnter(box.value)">
|
|
<button type="submit" class="btn btn-primary glow send d-lg-flex" (click)="sendMessage()"><i class="ficon feather ft-play"></i>
|
|
<span class="d-none d-lg-block mx-50">Send</span></button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- chat card ends -->
|
|
</div>
|
|
</section>
|
|
<section class="chat-profile " id="chat-profile">
|
|
<header class="chat-profile-header text-center border-bottom">
|
|
<span class="chat-profile-close" (click)="ChatProfile($event)">
|
|
<i class="ficon feather ft-x"></i>
|
|
</span>
|
|
<div class="my-2">
|
|
|
|
<img [src]="headerImage" class="round mb-1" alt="chat avatar"
|
|
height="100" width="100">
|
|
|
|
<h5 class="app-chat-user-name mb-0">{{headerName}}</h5>
|
|
<span>Devloper</span>
|
|
</div>
|
|
</header>
|
|
<div class="chat-profile-content p-2">
|
|
<h6 class="mt-1">ABOUT</h6>
|
|
<p>It is a long established fact that a reader will be distracted by the readable content.</p>
|
|
<h6 class="mt-2">PERSONAL INFORMATION</h6>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-25">email@gmail.com</li>
|
|
<li>+1(789) 950-7654</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<!-- app chat window ends -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- END: Content-->
|
|
|
|
<!-- app chat profile right sidebar ends -->
|