(apps/chat) Adjustments and optimizations for smaller devices

This commit is contained in:
sercan 2021-04-30 19:55:37 +03:00
parent 5dd60c816c
commit b05763135e
3 changed files with 31 additions and 6 deletions

View File

@ -6,7 +6,7 @@
<!-- Drawer --> <!-- Drawer -->
<mat-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" [autoFocus]="false"
[(opened)]="drawerOpened" [(opened)]="drawerOpened"
#drawer> #drawer>
@ -28,7 +28,7 @@
<!-- Chats list --> <!-- Chats list -->
<ng-container *ngIf="chats && chats.length > 0; else noChats"> <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 --> <!-- Header -->
<div class="flex flex-col flex-0 py-4 px-8 border-b bg-gray-50 dark:bg-transparent"> <div class="flex flex-col flex-0 py-4 px-8 border-b bg-gray-50 dark:bg-transparent">
@ -176,7 +176,7 @@
<!-- Conversation --> <!-- Conversation -->
<ng-container *ngIf="chats && chats.length > 0"> <ng-container *ngIf="chats && chats.length > 0">
<div <div
class="flex-auto" class="flex-auto border-l"
[ngClass]="{'z-20 absolute inset-0 lg:static lg:inset-auto flex': selectedChat && selectedChat.id, [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> <router-outlet></router-outlet>

View File

@ -8,9 +8,9 @@
<!-- Drawer --> <!-- Drawer -->
<mat-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" [autoFocus]="false"
[mode]="'side'" [mode]="drawerMode"
[position]="'end'" [position]="'end'"
[(opened)]="drawerOpened" [(opened)]="drawerOpened"
#drawer> #drawer>

View File

@ -1,6 +1,7 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { Chat } from 'app/modules/admin/apps/chat/chat.types'; import { Chat } from 'app/modules/admin/apps/chat/chat.types';
import { ChatService } from 'app/modules/admin/apps/chat/chat.service'; import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
@ -14,6 +15,7 @@ export class ConversationComponent implements OnInit, OnDestroy
{ {
@ViewChild('messageInput') messageInput: ElementRef; @ViewChild('messageInput') messageInput: ElementRef;
chat: Chat; chat: Chat;
drawerMode: 'over' | 'side' = 'side';
drawerOpened: boolean = false; drawerOpened: boolean = false;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -23,6 +25,7 @@ export class ConversationComponent implements OnInit, OnDestroy
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _chatService: ChatService, private _chatService: ChatService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _ngZone: NgZone private _ngZone: NgZone
) )
{ {
@ -43,6 +46,25 @@ export class ConversationComponent implements OnInit, OnDestroy
.subscribe((chat: Chat) => { .subscribe((chat: Chat) => {
this.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 // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
}); });
@ -81,6 +103,9 @@ export class ConversationComponent implements OnInit, OnDestroy
{ {
this._chatService.resetChat(); this._chatService.resetChat();
// Close the contact info in case it's opened
this.drawerOpened = false;
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
} }