fuse-angular/src/app/layout/components/chat-panel/chat-panel.component.html

119 lines
4.2 KiB
HTML

<div class="header mat-elevation-z4 mat-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
<ng-container *ngIf="view === 'contacts'">
<div class="title ml-16" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="s-32">chat</mat-icon>
<h3 class="ml-12">Team Chat</h3>
</div>
</ng-container>
<ng-container *ngIf="view === 'chat'">
<div class="title" fxLayout="row" fxLayoutAlign="start center">
<button class="mx-8" mat-icon-button (click)="goToContacts()">
<mat-icon>arrow_back</mat-icon>
</button>
<img [src]="contact.avatar" class="avatar mr-0 w-32 h-32">
<h3 class="ml-12 text-truncate">{{contact.name}}</h3>
</div>
</ng-container>
<button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="toggleSidebarFolded()" fxHide fxShow.gt-md>
<mat-icon class="secondary-text s-20" *ngIf="sidebarFolded">lock_open</mat-icon>
<mat-icon class="secondary-text s-20" *ngIf="!sidebarFolded">lock_outline</mat-icon>
</button>
<button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="toggleSidebarOpen()" fxHide.gt-md>
<mat-icon class="secondary-text">arrow_forward</mat-icon>
</button>
</div>
<ng-container *ngIf="view === 'contacts'">
<mat-list id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<mat-list-item *ngFor="let contact of contacts" [ngClass]="contact.status" (click)="goToChat(contact)"
matRipple>
<img matListAvatar [src]="contact.avatar">
<h3 matLine>
{{contact.name}}
</h3>
<div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
<div class="status-icon" [ngClass]="contact.status"></div>
</mat-list-item>
</mat-list>
</ng-container>
<ng-container *ngIf="view === 'chat'">
<div id="chat" fxLayout="column" fxFlex="1 1 auto">
<div class="messages" fxFlex="1 1 auto" fusePerfectScrollbar>
<div *ngFor="let message of chat.dialog; let i = index" class="message-row"
[ngClass]="{
'me': message.who === user.id,
'contact': message.who !== user.id,
'first-of-group': isFirstMessageOfGroup(message, i),
'last-of-group': isLastMessageOfGroup(message, i)
}">
<img *ngIf="shouldShowContactAvatar(message, i)"
src="{{contact.avatar}}"
class="avatar">
<div class="bubble">
<div class="message">{{message.message}}</div>
<div class="time secondary-text">{{message.time | date:'short'}}</div>
</div>
</div>
<ng-container *ngIf="chat.dialog.length === 0">
<div class="no-messages-icon">
<mat-icon class="s-128">chat</mat-icon>
</div>
<div class="no-messages secondary-text">
Start a conversation by typing your message below.
</div>
</ng-container>
</div>
<div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
<form #replyForm="ngForm"
(ngSubmit)="reply($event)"
(keydown.enter)="reply($event)"
fxFlex
fxLayout="row"
fxLayoutAlign="start center">
<mat-form-field class="message-text" fxFlex floatLabel="never" appearance="standard">
<textarea matInput #replyInput ngModel name="message" placeholder="Type your message"
[rows]="1" [matTextareaAutosize]="true"></textarea>
</mat-form-field>
<button class="send-message-button" mat-icon-button type="submit" aria-label="Send message">
<mat-icon class="secondary-text">send</mat-icon>
</button>
</form>
</div>
</div>
</ng-container>