mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2024-10-30 01:08:47 +00:00
(apps/chat) Adjustments and optimizations for smaller devices
This commit is contained in:
parent
5dd60c816c
commit
b05763135e
|
@ -6,7 +6,7 @@
|
|||
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="w-100 border-r shadow-none dark:bg-gray-900"
|
||||
class="w-full sm:w-100 lg:border-r lg:shadow-none dark:bg-gray-900"
|
||||
[autoFocus]="false"
|
||||
[(opened)]="drawerOpened"
|
||||
#drawer>
|
||||
|
@ -28,7 +28,7 @@
|
|||
|
||||
<!-- 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 border-r bg-card dark:bg-transparent">
|
||||
<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">
|
||||
|
@ -176,9 +176,9 @@
|
|||
<!-- Conversation -->
|
||||
<ng-container *ngIf="chats && chats.length > 0">
|
||||
<div
|
||||
class="flex-auto"
|
||||
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}">
|
||||
'hidden lg:flex': !selectedChat || !selectedChat.id}">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
@ -8,9 +8,9 @@
|
|||
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="w-100 border-r shadow-none dark:bg-gray-900"
|
||||
class="w-full sm:w-100 lg:border-l lg:shadow-none dark:bg-gray-900"
|
||||
[autoFocus]="false"
|
||||
[mode]="'side'"
|
||||
[mode]="drawerMode"
|
||||
[position]="'end'"
|
||||
[(opened)]="drawerOpened"
|
||||
#drawer>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { Chat } from 'app/modules/admin/apps/chat/chat.types';
|
||||
import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
|
||||
|
||||
|
@ -14,6 +15,7 @@ export class ConversationComponent implements OnInit, OnDestroy
|
|||
{
|
||||
@ViewChild('messageInput') messageInput: ElementRef;
|
||||
chat: Chat;
|
||||
drawerMode: 'over' | 'side' = 'side';
|
||||
drawerOpened: boolean = false;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
|
@ -23,6 +25,7 @@ export class ConversationComponent implements OnInit, OnDestroy
|
|||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _chatService: ChatService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _ngZone: NgZone
|
||||
)
|
||||
{
|
||||
|
@ -43,6 +46,25 @@ export class ConversationComponent implements OnInit, OnDestroy
|
|||
.subscribe((chat: Chat) => {
|
||||
this.chat = chat;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Set the drawerMode if the given breakpoint is active
|
||||
if ( matchingAliases.includes('lg') )
|
||||
{
|
||||
this.drawerMode = 'side';
|
||||
}
|
||||
else
|
||||
{
|
||||
this.drawerMode = 'over';
|
||||
}
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
@ -81,6 +103,9 @@ export class ConversationComponent implements OnInit, OnDestroy
|
|||
{
|
||||
this._chatService.resetChat();
|
||||
|
||||
// Close the contact info in case it's opened
|
||||
this.drawerOpened = false;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user