mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-12 03:21:37 +00:00
192 lines
10 KiB
HTML
192 lines
10 KiB
HTML
<div class="relative flex flex-auto w-full bg-card dark:bg-transparent">
|
|
|
|
<mat-drawer-container
|
|
class="flex-auto h-full"
|
|
[hasBackdrop]="false">
|
|
|
|
<!-- Drawer -->
|
|
<mat-drawer
|
|
class="w-full sm:w-100 lg:border-r lg:shadow-none dark:bg-gray-900"
|
|
[autoFocus]="false"
|
|
[(opened)]="drawerOpened"
|
|
#drawer>
|
|
|
|
<!-- New chat -->
|
|
<ng-container *ngIf="drawerComponent === 'new-chat'">
|
|
<chat-new-chat [drawer]="drawer"></chat-new-chat>
|
|
</ng-container>
|
|
|
|
<!-- Profile -->
|
|
<ng-container *ngIf="drawerComponent === 'profile'">
|
|
<chat-profile [drawer]="drawer"></chat-profile>
|
|
</ng-container>
|
|
|
|
</mat-drawer>
|
|
|
|
<!-- Drawer content -->
|
|
<mat-drawer-content class="flex overflow-hidden">
|
|
|
|
<!-- Chats list -->
|
|
<ng-container *ngIf="chats && chats.length > 0; else noChats">
|
|
<div class="relative flex flex-auto flex-col w-full min-w-0 lg:min-w-100 lg:max-w-100 bg-card dark:bg-transparent">
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col flex-0 py-4 px-8 border-b bg-gray-50 dark:bg-transparent">
|
|
<div class="flex items-center">
|
|
<div
|
|
class="flex items-center mr-1 cursor-pointer"
|
|
(click)="openProfile()">
|
|
<div class="w-10 h-10">
|
|
<ng-container *ngIf="profile.avatar">
|
|
<img
|
|
class="object-cover w-full h-full rounded-full object-cover"
|
|
[src]="profile.avatar"
|
|
alt="Profile avatar"/>
|
|
</ng-container>
|
|
<ng-container *ngIf="!profile.avatar">
|
|
<div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
|
|
{{profile.name.charAt(0)}}
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
<div class="ml-4 font-medium truncate">{{profile.name}}</div>
|
|
</div>
|
|
<button
|
|
class="ml-auto"
|
|
mat-icon-button
|
|
(click)="openNewChat()">
|
|
<mat-icon [svgIcon]="'heroicons_outline:plus-circle'"></mat-icon>
|
|
</button>
|
|
<button
|
|
class="ml-1 -mr-4"
|
|
mat-icon-button
|
|
[matMenuTriggerFor]="chatsHeaderMenu">
|
|
<mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
|
|
<mat-menu #chatsHeaderMenu>
|
|
<button mat-menu-item>
|
|
<mat-icon [svgIcon]="'heroicons_outline:user-group'"></mat-icon>
|
|
New group
|
|
</button>
|
|
<button mat-menu-item>
|
|
<mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
|
|
Create a room
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
(click)="openProfile()">
|
|
<mat-icon [svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
|
|
Profile
|
|
</button>
|
|
<button mat-menu-item>
|
|
<mat-icon [svgIcon]="'heroicons_outline:archive'"></mat-icon>
|
|
Archived
|
|
</button>
|
|
<button mat-menu-item>
|
|
<mat-icon [svgIcon]="'heroicons_outline:star'"></mat-icon>
|
|
Starred
|
|
</button>
|
|
<button mat-menu-item>
|
|
<mat-icon [svgIcon]="'heroicons_outline:cog'"></mat-icon>
|
|
Settings
|
|
</button>
|
|
</mat-menu>
|
|
</button>
|
|
</div>
|
|
<!-- Search -->
|
|
<div class="mt-4">
|
|
<mat-form-field
|
|
class="fuse-mat-rounded fuse-mat-dense w-full"
|
|
[subscriptSizing]="'dynamic'">
|
|
<mat-icon
|
|
matPrefix
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:search'"></mat-icon>
|
|
<input
|
|
matInput
|
|
[autocomplete]="'off'"
|
|
[placeholder]="'Search or start new chat'"
|
|
(input)="filterChats(searchField.value)"
|
|
#searchField>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chats -->
|
|
<div class="flex-auto overflow-y-auto">
|
|
<ng-container *ngIf="filteredChats.length > 0; else noChats">
|
|
<ng-container *ngFor="let chat of filteredChats; trackBy: trackByFn">
|
|
<a
|
|
class="z-20 flex items-center py-5 px-8 cursor-pointer border-b"
|
|
[ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedChat || selectedChat.id !== chat.id,
|
|
'bg-primary-50 dark:bg-hover': selectedChat && selectedChat.id === chat.id}"
|
|
[routerLink]="[chat.id]">
|
|
<div class="relative flex flex-0 items-center justify-center w-10 h-10">
|
|
<ng-container *ngIf="chat.unreadCount > 0">
|
|
<div
|
|
class="absolute bottom-0 right-0 flex-0 w-2 h-2 -ml-0.5 rounded-full ring-2 ring-bg-card dark:ring-gray-900 bg-primary dark:bg-primary-500 text-on-primary"
|
|
[class.ring-primary-50]="selectedChat && selectedChat.id === chat.id"></div>
|
|
</ng-container>
|
|
<ng-container *ngIf="chat.contact.avatar">
|
|
<img
|
|
class="w-full h-full rounded-full object-cover"
|
|
[src]="chat.contact.avatar"
|
|
alt="Contact avatar"/>
|
|
</ng-container>
|
|
<ng-container *ngIf="!chat.contact.avatar">
|
|
<div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
|
|
{{chat.contact.name.charAt(0)}}
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
<div class="min-w-0 ml-4">
|
|
<div class="font-medium leading-5 truncate">{{chat.contact.name}}</div>
|
|
<div
|
|
class="leading-5 truncate text-secondary"
|
|
[class.text-primary]="chat.unreadCount > 0"
|
|
[class.dark:text-primary-500]="chat.unreadCount > 0">
|
|
{{chat.lastMessage}}
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-end self-start ml-auto pl-2">
|
|
<div class="text-sm leading-5 text-secondary">{{chat.lastMessageAt}}</div>
|
|
<ng-container *ngIf="chat.muted">
|
|
<mat-icon
|
|
class="icon-size-5 text-hint"
|
|
[svgIcon]="'heroicons_solid:volume-off'"></mat-icon>
|
|
</ng-container>
|
|
</div>
|
|
</a>
|
|
</ng-container>
|
|
</ng-container>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ng-container>
|
|
|
|
<!-- No chats template -->
|
|
<ng-template #noChats>
|
|
<div class="flex flex-auto flex-col items-center justify-center h-full">
|
|
<mat-icon
|
|
class="icon-size-24"
|
|
[svgIcon]="'heroicons_outline:chat'"></mat-icon>
|
|
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">No chats</div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<!-- Conversation -->
|
|
<ng-container *ngIf="chats && chats.length > 0">
|
|
<div
|
|
class="flex-auto border-l"
|
|
[ngClass]="{'z-20 absolute inset-0 lg:static lg:inset-auto flex': selectedChat && selectedChat.id,
|
|
'hidden lg:flex': !selectedChat || !selectedChat.id}">
|
|
<router-outlet></router-outlet>
|
|
</div>
|
|
</ng-container>
|
|
|
|
</mat-drawer-content>
|
|
|
|
</mat-drawer-container>
|
|
|
|
</div>
|