mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-28 02:53:11 +00:00
119 lines
4.2 KiB
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> |