purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2024-10-30 01:08:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

(apps/chat) Adjustments and optimizations for smaller devices

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/modules/admin/apps/chat/chats/chats.component.html
View File

@ -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>

4
src/app/modules/admin/apps/chat/conversation/conversation.component.html
View File

@ -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>

25
src/app/modules/admin/apps/chat/conversation/conversation.component.ts
View File

@ -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();
}