mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Removed chat panel from Skeleton since its more like an app and won't be required by everyone
This commit is contained in:
Sercan Yemen
parent
2f0d1e406f
commit
cef9e8a9c0
|
|
@ -1,119 +0,0 @@
|
||||||
<div class="header mat-elevation-z4 mat-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
|
|
||||||
|
|
||||||
<ng-container *ngIf="selectedContact === null">
|
|
||||||
|
|
||||||
<div class="title ml-16" fxLayout="row" fxLayoutAlign="start center">
|
|
||||||
<mat-icon class="s-32 white-fg">chat</mat-icon>
|
|
||||||
<h3 class="ml-12">Team Chat</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container *ngIf="selectedContact !== null">
|
|
||||||
|
|
||||||
<div class="title" fxLayout="row" fxLayoutAlign="start center">
|
|
||||||
<img [src]="selectedContact.avatar" class="avatar mx-16">
|
|
||||||
<h3 class="text-truncate">{{selectedContact.name}}</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily()" fxHide fxShow.gt-md>
|
|
||||||
<mat-icon class="secondary-text s-20">arrow_forward</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>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<!-- Contacts -->
|
|
||||||
<div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
|
||||||
|
|
||||||
<div *ngFor="let contact of contacts"
|
|
||||||
class="contacts-list-item"
|
|
||||||
[ngClass]="contact.status"
|
|
||||||
[class.active]="contact.id === selectedContact?.id"
|
|
||||||
(click)="goToChat(contact)">
|
|
||||||
|
|
||||||
<img class="avatar" [src]="contact.avatar"
|
|
||||||
[matTooltip]="contact.name"
|
|
||||||
matTooltipPosition="left">
|
|
||||||
<div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
|
|
||||||
<div class="status-icon" [ngClass]="contact.status"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- / Contacts -->
|
|
||||||
|
|
||||||
<!-- Chat -->
|
|
||||||
<div id="chat" fxLayout="column" fxFlex="1 1 auto">
|
|
||||||
|
|
||||||
<div id="messages" class="messages" fxFlex="1 1 auto" fusePerfectScrollbar>
|
|
||||||
|
|
||||||
<ng-container *ngIf="chat && chat.dialog && chat.dialog.length > 0">
|
|
||||||
|
|
||||||
<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="{{selectedContact.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>
|
|
||||||
|
|
||||||
<ng-container *ngIf="chat && chat.dialog && 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>
|
|
||||||
<!-- / Chat -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,387 +0,0 @@
|
||||||
@import "src/@fuse/scss/fuse";
|
|
||||||
|
|
||||||
chat-panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 360px;
|
|
||||||
min-width: 360px;
|
|
||||||
max-width: 360px;
|
|
||||||
z-index: 99;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
height: 64px;
|
|
||||||
max-height: 64px;
|
|
||||||
min-height: 64px;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
|
|
||||||
mat-icon {
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
max-width: 120px;
|
|
||||||
transition: opacity 300ms ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#contacts-list {
|
|
||||||
padding: 8px 0;
|
|
||||||
overflow: auto;
|
|
||||||
width: 72px;
|
|
||||||
min-width: 72px;
|
|
||||||
max-width: 72px;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
// Perfect scrollbar
|
|
||||||
.ps__rail-y {
|
|
||||||
width: 3px !important;
|
|
||||||
|
|
||||||
.ps__thumb-y {
|
|
||||||
width: 3px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.contacts-list-item {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 16px;
|
|
||||||
height: 56px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: mat-color(mat-palette($mat-grey, 300));
|
|
||||||
@include mat-elevation(2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.offline {
|
|
||||||
|
|
||||||
.mat-list-item-content {
|
|
||||||
|
|
||||||
img {
|
|
||||||
filter: grayscale(100%);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unread-count {
|
|
||||||
position: absolute;
|
|
||||||
min-width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
top: 4px;
|
|
||||||
left: 10px;
|
|
||||||
border-radius: 9px;
|
|
||||||
padding: 0 5px;
|
|
||||||
font-size: 11px;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: mat-color(mat-palette($mat-indigo));
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-icon {
|
|
||||||
position: absolute;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
bottom: 3px;
|
|
||||||
left: 44px;
|
|
||||||
border: 2px solid white;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
&.online {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.do-not-disturb {
|
|
||||||
background-color: #F44336;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.away {
|
|
||||||
background-color: #FFC107;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.offline {
|
|
||||||
background-color: #646464;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#chat {
|
|
||||||
background-color: mat-color(mat-palette($mat-grey, 300));
|
|
||||||
|
|
||||||
.messages {
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
padding: 16px 0 40px 40px;
|
|
||||||
|
|
||||||
.message-row {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding: 0 16px 4px 16px;
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
position: absolute;
|
|
||||||
left: -32px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 12px;
|
|
||||||
|
|
||||||
.message {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time {
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 11px;
|
|
||||||
margin-top: 8px;
|
|
||||||
top: 100%;
|
|
||||||
color: $black-87-opacity;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.contact {
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
background-color: mat-color(mat-palette($mat-indigo));
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
|
|
||||||
border-top-right-radius: 20px;
|
|
||||||
border-bottom-right-radius: 20px;
|
|
||||||
|
|
||||||
.time {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.first-of-group {
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
border-top-left-radius: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.last-of-group {
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
border-bottom-left-radius: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.me {
|
|
||||||
padding-left: 40px;
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
order: 2;
|
|
||||||
margin: 0 0 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
margin-left: auto;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
color: $black-87-opacity;
|
|
||||||
|
|
||||||
border-top-left-radius: 20px;
|
|
||||||
border-bottom-left-radius: 20px;
|
|
||||||
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
border-bottom-right-radius: 5px;
|
|
||||||
|
|
||||||
.time {
|
|
||||||
justify-content: flex-end;
|
|
||||||
right: 0;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.first-of-group {
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
border-top-right-radius: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.last-of-group {
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
border-bottom-right-radius: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.contact + .me,
|
|
||||||
&.me + .contact {
|
|
||||||
padding-top: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.first-of-group {
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
border-top-left-radius: 20px;
|
|
||||||
padding-top: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.last-of-group {
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
border-bottom-left-radius: 20px;
|
|
||||||
padding-bottom: 13px;
|
|
||||||
|
|
||||||
.time {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-messages-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
padding: 0 24px;
|
|
||||||
margin-top: -64px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
mat-icon {
|
|
||||||
color: rgba(0, 0, 0, 0.06);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-messages {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
padding: 0 16px 24px 16px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-form {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.message-text {
|
|
||||||
padding: 16px 8px;
|
|
||||||
|
|
||||||
.mat-form-field-wrapper {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.mat-form-field-flex {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.mat-form-field-infix {
|
|
||||||
padding: 0;
|
|
||||||
border: none;
|
|
||||||
background: white;
|
|
||||||
border-radius: 20px;
|
|
||||||
@include mat-elevation(2);
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 16px 48px 16px 16px;
|
|
||||||
width: calc(100% - 64px);
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-form-field-underline {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.send-message-button {
|
|
||||||
position: absolute;
|
|
||||||
right: 16px;
|
|
||||||
bottom: 21px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fuse-sidebar {
|
|
||||||
|
|
||||||
&.chat-panel {
|
|
||||||
width: 360px;
|
|
||||||
min-width: 360px;
|
|
||||||
max-width: 360px;
|
|
||||||
|
|
||||||
@include media-breakpoint-down('xs') {
|
|
||||||
min-width: 0 !important;
|
|
||||||
max-width: 100vw !important;
|
|
||||||
width: 100vw !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Folded
|
|
||||||
&.folded {
|
|
||||||
|
|
||||||
chat-panel {
|
|
||||||
|
|
||||||
.header {
|
|
||||||
|
|
||||||
.title {
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Folded unfolded
|
|
||||||
&.unfolded {
|
|
||||||
|
|
||||||
chat-panel {
|
|
||||||
|
|
||||||
.header {
|
|
||||||
|
|
||||||
.title {
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,269 +0,0 @@
|
||||||
import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
|
|
||||||
import { NgForm } from '@angular/forms';
|
|
||||||
import { HttpClient } from '@angular/common/http';
|
|
||||||
|
|
||||||
import { Subject } from 'rxjs';
|
|
||||||
import { takeUntil } from 'rxjs/operators';
|
|
||||||
|
|
||||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
|
||||||
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
|
||||||
import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector : 'chat-panel',
|
|
||||||
templateUrl : './chat-panel.component.html',
|
|
||||||
styleUrls : ['./chat-panel.component.scss'],
|
|
||||||
encapsulation: ViewEncapsulation.None
|
|
||||||
})
|
|
||||||
export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
|
|
||||||
{
|
|
||||||
contacts: any[];
|
|
||||||
chat: any;
|
|
||||||
selectedContact: any;
|
|
||||||
sidebarFolded: boolean;
|
|
||||||
user: any;
|
|
||||||
|
|
||||||
@ViewChild('replyForm')
|
|
||||||
set replyForm(content: NgForm)
|
|
||||||
{
|
|
||||||
this._replyForm = content;
|
|
||||||
}
|
|
||||||
|
|
||||||
@ViewChild('replyInput')
|
|
||||||
set replyInput(content: ElementRef)
|
|
||||||
{
|
|
||||||
this._replyInput = content;
|
|
||||||
}
|
|
||||||
|
|
||||||
@ViewChildren(FusePerfectScrollbarDirective)
|
|
||||||
private _fusePerfectScrollbarDirectives: QueryList<FusePerfectScrollbarDirective>;
|
|
||||||
|
|
||||||
// Private
|
|
||||||
private _chatViewScrollbar: FusePerfectScrollbarDirective;
|
|
||||||
private _replyForm: NgForm;
|
|
||||||
private _replyInput: ElementRef;
|
|
||||||
private _unsubscribeAll: Subject<any>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constructor
|
|
||||||
*
|
|
||||||
* @param {ChatPanelService} _chatPanelService
|
|
||||||
* @param {HttpClient} _httpClient
|
|
||||||
* @param {FuseSidebarService} _fuseSidebarService
|
|
||||||
*/
|
|
||||||
constructor(
|
|
||||||
private _chatPanelService: ChatPanelService,
|
|
||||||
private _httpClient: HttpClient,
|
|
||||||
private _fuseSidebarService: FuseSidebarService
|
|
||||||
)
|
|
||||||
{
|
|
||||||
// Set the defaults
|
|
||||||
this.selectedContact = null;
|
|
||||||
this.sidebarFolded = true;
|
|
||||||
|
|
||||||
// Set the private defaults
|
|
||||||
this._unsubscribeAll = new Subject();
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
// @ Lifecycle hooks
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/**
|
|
||||||
* On init
|
|
||||||
*/
|
|
||||||
ngOnInit(): void
|
|
||||||
{
|
|
||||||
// Load the contacts
|
|
||||||
this._chatPanelService.loadContacts().then(() => {
|
|
||||||
|
|
||||||
this.contacts = this._chatPanelService.contacts;
|
|
||||||
this.user = this._chatPanelService.user;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Subscribe to the foldedChanged observable
|
|
||||||
this._fuseSidebarService.getSidebar('chatPanel').foldedChanged
|
|
||||||
.pipe(takeUntil(this._unsubscribeAll))
|
|
||||||
.subscribe((folded) => {
|
|
||||||
this.sidebarFolded = folded;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* After view init
|
|
||||||
*/
|
|
||||||
ngAfterViewInit(): void
|
|
||||||
{
|
|
||||||
this._chatViewScrollbar = this._fusePerfectScrollbarDirectives.find((directive) => {
|
|
||||||
return directive.elementRef.nativeElement.id === 'messages';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* On destroy
|
|
||||||
*/
|
|
||||||
ngOnDestroy(): void
|
|
||||||
{
|
|
||||||
// Unsubscribe from all subscriptions
|
|
||||||
this._unsubscribeAll.next();
|
|
||||||
this._unsubscribeAll.complete();
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
// @ Private methods
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prepare the chat for the replies
|
|
||||||
*/
|
|
||||||
private _prepareChatForReplies(): void
|
|
||||||
{
|
|
||||||
setTimeout(() => {
|
|
||||||
|
|
||||||
// Reset the reply form
|
|
||||||
this._replyForm.reset();
|
|
||||||
|
|
||||||
// Focus to the reply input
|
|
||||||
// this._replyInput.nativeElement.focus();
|
|
||||||
|
|
||||||
// Scroll to the bottom of the messages list
|
|
||||||
if ( this._chatViewScrollbar )
|
|
||||||
{
|
|
||||||
this._chatViewScrollbar.update();
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this._chatViewScrollbar.scrollToBottom(0);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
// @ Public methods
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Toggle sidebar folded status
|
|
||||||
*/
|
|
||||||
toggleSidebarFolded(): void
|
|
||||||
{
|
|
||||||
this._fuseSidebarService.getSidebar('chatPanel').toggleFold();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fold the temporarily unfolded sidebar back
|
|
||||||
*/
|
|
||||||
foldSidebarTemporarily(): void
|
|
||||||
{
|
|
||||||
this._fuseSidebarService.getSidebar('chatPanel').foldTemporarily();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Unfold the sidebar temporarily
|
|
||||||
*/
|
|
||||||
unfoldSidebarTemporarily(): void
|
|
||||||
{
|
|
||||||
this._fuseSidebarService.getSidebar('chatPanel').unfoldTemporarily();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Toggle sidebar opened status
|
|
||||||
*/
|
|
||||||
toggleSidebarOpen(): void
|
|
||||||
{
|
|
||||||
this._fuseSidebarService.getSidebar('chatPanel').toggleOpen();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Decide whether to show or not the contact's avatar in the message row
|
|
||||||
*
|
|
||||||
* @param message
|
|
||||||
* @param i
|
|
||||||
* @returns {boolean}
|
|
||||||
*/
|
|
||||||
shouldShowContactAvatar(message, i): boolean
|
|
||||||
{
|
|
||||||
return (
|
|
||||||
message.who === this.selectedContact.id &&
|
|
||||||
((this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== this.selectedContact.id) || !this.chat.dialog[i + 1])
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Check if the given message is the first message of a group
|
|
||||||
*
|
|
||||||
* @param message
|
|
||||||
* @param i
|
|
||||||
* @returns {boolean}
|
|
||||||
*/
|
|
||||||
isFirstMessageOfGroup(message, i): boolean
|
|
||||||
{
|
|
||||||
return (i === 0 || this.chat.dialog[i - 1] && this.chat.dialog[i - 1].who !== message.who);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Check if the given message is the last message of a group
|
|
||||||
*
|
|
||||||
* @param message
|
|
||||||
* @param i
|
|
||||||
* @returns {boolean}
|
|
||||||
*/
|
|
||||||
isLastMessageOfGroup(message, i): boolean
|
|
||||||
{
|
|
||||||
return (i === this.chat.dialog.length - 1 || this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== message.who);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Go to chat with the contact
|
|
||||||
*
|
|
||||||
* @param contact
|
|
||||||
*/
|
|
||||||
goToChat(contact): void
|
|
||||||
{
|
|
||||||
// Unfold the sidebar temporarily
|
|
||||||
this.unfoldSidebarTemporarily();
|
|
||||||
|
|
||||||
// Set the selected contact
|
|
||||||
this.selectedContact = contact;
|
|
||||||
|
|
||||||
// Load the chat
|
|
||||||
this._chatPanelService.getChat(contact.id).then((chat) => {
|
|
||||||
|
|
||||||
// Set the chat
|
|
||||||
this.chat = chat;
|
|
||||||
|
|
||||||
// Prepare the chat for the replies
|
|
||||||
this._prepareChatForReplies();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reply
|
|
||||||
*/
|
|
||||||
reply(event): void
|
|
||||||
{
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
if ( !this._replyForm.form.value.message )
|
|
||||||
{
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Message
|
|
||||||
const message = {
|
|
||||||
who : this.user.id,
|
|
||||||
message: this._replyForm.form.value.message,
|
|
||||||
time : new Date().toISOString()
|
|
||||||
};
|
|
||||||
|
|
||||||
// Add the message to the chat
|
|
||||||
this.chat.dialog.push(message);
|
|
||||||
|
|
||||||
// Update the server
|
|
||||||
this._chatPanelService.updateChat(this.chat.id, this.chat.dialog).then(response => {
|
|
||||||
|
|
||||||
// Prepare the chat for the replies
|
|
||||||
this._prepareChatForReplies();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
import { NgModule } from '@angular/core';
|
|
||||||
import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
|
|
||||||
|
|
||||||
import { FuseSharedModule } from '@fuse/shared.module';
|
|
||||||
|
|
||||||
import { ChatPanelComponent } from 'app/layout/components/chat-panel/chat-panel.component';
|
|
||||||
import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
declarations: [
|
|
||||||
ChatPanelComponent
|
|
||||||
],
|
|
||||||
providers : [
|
|
||||||
ChatPanelService
|
|
||||||
],
|
|
||||||
imports : [
|
|
||||||
MatButtonModule,
|
|
||||||
MatFormFieldModule,
|
|
||||||
MatIconModule,
|
|
||||||
MatInputModule,
|
|
||||||
MatTabsModule,
|
|
||||||
MatTooltipModule,
|
|
||||||
MatRippleModule,
|
|
||||||
|
|
||||||
FuseSharedModule
|
|
||||||
],
|
|
||||||
exports : [
|
|
||||||
ChatPanelComponent
|
|
||||||
]
|
|
||||||
})
|
|
||||||
export class ChatPanelModule
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
@ -1,182 +0,0 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { HttpClient } from '@angular/common/http';
|
|
||||||
|
|
||||||
import { FuseUtils } from '@fuse/utils';
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class ChatPanelService
|
|
||||||
{
|
|
||||||
contacts: any[];
|
|
||||||
chats: any[];
|
|
||||||
user: any;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constructor
|
|
||||||
*
|
|
||||||
* @param {HttpClient} _httpClient
|
|
||||||
*/
|
|
||||||
constructor(
|
|
||||||
private _httpClient: HttpClient
|
|
||||||
)
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Loader
|
|
||||||
*
|
|
||||||
* @returns {Promise<any> | any}
|
|
||||||
*/
|
|
||||||
loadContacts(): Promise<any> | any
|
|
||||||
{
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
Promise.all([
|
|
||||||
this.getContacts(),
|
|
||||||
this.getUser()
|
|
||||||
]).then(
|
|
||||||
([contacts, user]) => {
|
|
||||||
this.contacts = contacts;
|
|
||||||
this.user = user;
|
|
||||||
resolve();
|
|
||||||
},
|
|
||||||
reject
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get chat
|
|
||||||
*
|
|
||||||
* @param contactId
|
|
||||||
* @returns {Promise<any>}
|
|
||||||
*/
|
|
||||||
getChat(contactId): Promise<any>
|
|
||||||
{
|
|
||||||
const chatItem = this.user.chatList.find((item) => {
|
|
||||||
return item.contactId === contactId;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Get the chat
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
|
|
||||||
// If there is a chat with this user, return that.
|
|
||||||
if ( chatItem )
|
|
||||||
{
|
|
||||||
this._httpClient.get('api/chat-panel-chats/' + chatItem.chatId)
|
|
||||||
.subscribe((chat) => {
|
|
||||||
|
|
||||||
// Resolve the promise
|
|
||||||
resolve(chat);
|
|
||||||
|
|
||||||
}, reject);
|
|
||||||
}
|
|
||||||
// If there is no chat with this user, create one...
|
|
||||||
else
|
|
||||||
{
|
|
||||||
this.createNewChat(contactId).then(() => {
|
|
||||||
|
|
||||||
// and then recall the getChat method
|
|
||||||
this.getChat(contactId).then((chat) => {
|
|
||||||
resolve(chat);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create new chat
|
|
||||||
*
|
|
||||||
* @param contactId
|
|
||||||
* @returns {Promise<any>}
|
|
||||||
*/
|
|
||||||
createNewChat(contactId): Promise<any>
|
|
||||||
{
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
|
|
||||||
// Generate a new id
|
|
||||||
const chatId = FuseUtils.generateGUID();
|
|
||||||
|
|
||||||
// Prepare the chat object
|
|
||||||
const chat = {
|
|
||||||
id : chatId,
|
|
||||||
dialog: []
|
|
||||||
};
|
|
||||||
|
|
||||||
// Prepare the chat list entry
|
|
||||||
const chatListItem = {
|
|
||||||
chatId : chatId,
|
|
||||||
contactId : contactId,
|
|
||||||
lastMessageTime: '2017-02-18T10:30:18.931Z'
|
|
||||||
};
|
|
||||||
|
|
||||||
// Add new chat list item to the user's chat list
|
|
||||||
this.user.chatList.push(chatListItem);
|
|
||||||
|
|
||||||
// Post the created chat to the server
|
|
||||||
this._httpClient.post('api/chat-panel-chats', {...chat})
|
|
||||||
.subscribe(() => {
|
|
||||||
|
|
||||||
// Post the updated user data to the server
|
|
||||||
this._httpClient.post('api/chat-panel-user/' + this.user.id, this.user)
|
|
||||||
.subscribe(() => {
|
|
||||||
|
|
||||||
// Resolve the promise
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
}, reject);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Update the chat
|
|
||||||
*
|
|
||||||
* @param chatId
|
|
||||||
* @param dialog
|
|
||||||
* @returns {Promise<any>}
|
|
||||||
*/
|
|
||||||
updateChat(chatId, dialog): Promise<any>
|
|
||||||
{
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
|
|
||||||
const newData = {
|
|
||||||
id : chatId,
|
|
||||||
dialog: dialog
|
|
||||||
};
|
|
||||||
|
|
||||||
this._httpClient.post('api/chat-panel-chats/' + chatId, newData)
|
|
||||||
.subscribe(updatedChat => {
|
|
||||||
resolve(updatedChat);
|
|
||||||
}, reject);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get contacts
|
|
||||||
*
|
|
||||||
* @returns {Promise<any>}
|
|
||||||
*/
|
|
||||||
getContacts(): Promise<any>
|
|
||||||
{
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
this._httpClient.get('api/chat-panel-contacts')
|
|
||||||
.subscribe((response: any) => {
|
|
||||||
resolve(response);
|
|
||||||
}, reject);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get user
|
|
||||||
*
|
|
||||||
* @returns {Promise<any>}
|
|
||||||
*/
|
|
||||||
getUser(): Promise<any>
|
|
||||||
{
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
this._httpClient.get('api/chat-panel-user')
|
|
||||||
.subscribe((response: any) => {
|
|
||||||
resolve(response[0]);
|
|
||||||
}, reject);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -83,15 +83,6 @@
|
||||||
|
|
||||||
<div class="toolbar-separator" fxHide fxShow.gt-xs></div>
|
<div class="toolbar-separator" fxHide fxShow.gt-xs></div>
|
||||||
|
|
||||||
<button mat-icon-button fxHide.gt-md
|
|
||||||
class="chat-panel-toggle-button"
|
|
||||||
(click)="toggleSidebarOpen('chatPanel')"
|
|
||||||
aria-label="Toggle chat panel">
|
|
||||||
<mat-icon class="icon">chat</mat-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="toolbar-separator" fxHide.gt-md></div>
|
|
||||||
|
|
||||||
<button mat-icon-button
|
<button mat-icon-button
|
||||||
class="quick-panel-toggle-button"
|
class="quick-panel-toggle-button"
|
||||||
(click)="toggleSidebarOpen('quickPanel')"
|
(click)="toggleSidebarOpen('quickPanel')"
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,6 @@ export class ToolbarComponent implements OnInit, OnDestroy
|
||||||
selectedLanguage: any;
|
selectedLanguage: any;
|
||||||
showLoadingBar: boolean;
|
showLoadingBar: boolean;
|
||||||
userStatusOptions: any[];
|
userStatusOptions: any[];
|
||||||
chatPanelLockedOpen: string;
|
|
||||||
|
|
||||||
// Private
|
// Private
|
||||||
private _unsubscribeAll: Subject<any>;
|
private _unsubscribeAll: Subject<any>;
|
||||||
|
|
@ -147,28 +146,6 @@ export class ToolbarComponent implements OnInit, OnDestroy
|
||||||
this._fuseSidebarService.getSidebar(key).toggleOpen();
|
this._fuseSidebarService.getSidebar(key).toggleOpen();
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleChatPanel(): void
|
|
||||||
{
|
|
||||||
// Get the chat panel sidebar
|
|
||||||
const chatPanelSidebar = this._fuseSidebarService.getSidebar('chatPanel');
|
|
||||||
|
|
||||||
// Store the original value
|
|
||||||
if ( chatPanelSidebar.lockedOpen !== '' )
|
|
||||||
{
|
|
||||||
this.chatPanelLockedOpen = chatPanelSidebar.lockedOpen;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle
|
|
||||||
if ( chatPanelSidebar.lockedOpen === this.chatPanelLockedOpen )
|
|
||||||
{
|
|
||||||
chatPanelSidebar.lockedOpen = '';
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
chatPanelSidebar.lockedOpen = this.chatPanelLockedOpen;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Search
|
* Search
|
||||||
*
|
*
|
||||||
|
|
|
||||||
|
|
@ -55,14 +55,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- CHAT PANEL -->
|
|
||||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
|
||||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
|
||||||
lockedOpen="gt-md">
|
|
||||||
<chat-panel></chat-panel>
|
|
||||||
</fuse-sidebar>
|
|
||||||
<!-- / CHAT PANEL -->
|
|
||||||
|
|
||||||
<!-- QUICK PANEL -->
|
<!-- QUICK PANEL -->
|
||||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||||
<quick-panel></quick-panel>
|
<quick-panel></quick-panel>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@ import { MatSidenavModule } from '@angular/material';
|
||||||
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
|
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
|
||||||
import { FuseSharedModule } from '@fuse/shared.module';
|
import { FuseSharedModule } from '@fuse/shared.module';
|
||||||
|
|
||||||
import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
|
|
||||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||||
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||||
|
|
@ -24,7 +23,6 @@ import { HorizontalLayout1Component } from 'app/layout/horizontal/layout-1/layou
|
||||||
FuseSidebarModule,
|
FuseSidebarModule,
|
||||||
FuseThemeOptionsModule,
|
FuseThemeOptionsModule,
|
||||||
|
|
||||||
ChatPanelModule,
|
|
||||||
ContentModule,
|
ContentModule,
|
||||||
FooterModule,
|
FooterModule,
|
||||||
NavbarModule,
|
NavbarModule,
|
||||||
|
|
|
||||||
|
|
@ -67,14 +67,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- CHAT PANEL -->
|
|
||||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
|
||||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
|
||||||
lockedOpen="gt-md">
|
|
||||||
<chat-panel></chat-panel>
|
|
||||||
</fuse-sidebar>
|
|
||||||
<!-- / CHAT PANEL -->
|
|
||||||
|
|
||||||
<!-- QUICK PANEL -->
|
<!-- QUICK PANEL -->
|
||||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||||
<quick-panel></quick-panel>
|
<quick-panel></quick-panel>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router';
|
||||||
import { FuseSidebarModule } from '@fuse/components';
|
import { FuseSidebarModule } from '@fuse/components';
|
||||||
import { FuseSharedModule } from '@fuse/shared.module';
|
import { FuseSharedModule } from '@fuse/shared.module';
|
||||||
|
|
||||||
import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
|
|
||||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||||
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||||
|
|
@ -23,7 +22,6 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.
|
||||||
FuseSharedModule,
|
FuseSharedModule,
|
||||||
FuseSidebarModule,
|
FuseSidebarModule,
|
||||||
|
|
||||||
ChatPanelModule,
|
|
||||||
ContentModule,
|
ContentModule,
|
||||||
FooterModule,
|
FooterModule,
|
||||||
NavbarModule,
|
NavbarModule,
|
||||||
|
|
|
||||||
|
|
@ -67,14 +67,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- CHAT PANEL -->
|
|
||||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
|
||||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
|
||||||
lockedOpen="gt-md">
|
|
||||||
<chat-panel></chat-panel>
|
|
||||||
</fuse-sidebar>
|
|
||||||
<!-- / CHAT PANEL -->
|
|
||||||
|
|
||||||
<!-- QUICK PANEL -->
|
<!-- QUICK PANEL -->
|
||||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||||
<quick-panel></quick-panel>
|
<quick-panel></quick-panel>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router';
|
||||||
import { FuseSidebarModule } from '@fuse/components';
|
import { FuseSidebarModule } from '@fuse/components';
|
||||||
import { FuseSharedModule } from '@fuse/shared.module';
|
import { FuseSharedModule } from '@fuse/shared.module';
|
||||||
|
|
||||||
import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
|
|
||||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||||
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||||
|
|
@ -23,7 +22,6 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2.
|
||||||
FuseSharedModule,
|
FuseSharedModule,
|
||||||
FuseSidebarModule,
|
FuseSidebarModule,
|
||||||
|
|
||||||
ChatPanelModule,
|
|
||||||
ContentModule,
|
ContentModule,
|
||||||
FooterModule,
|
FooterModule,
|
||||||
NavbarModule,
|
NavbarModule,
|
||||||
|
|
|
||||||
|
|
@ -53,14 +53,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- CHAT PANEL -->
|
|
||||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
|
||||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
|
||||||
lockedOpen="gt-md">
|
|
||||||
<chat-panel></chat-panel>
|
|
||||||
</fuse-sidebar>
|
|
||||||
<!-- / CHAT PANEL -->
|
|
||||||
|
|
||||||
<!-- QUICK PANEL -->
|
<!-- QUICK PANEL -->
|
||||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||||
<quick-panel></quick-panel>
|
<quick-panel></quick-panel>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router';
|
||||||
import { FuseSidebarModule } from '@fuse/components/index';
|
import { FuseSidebarModule } from '@fuse/components/index';
|
||||||
import { FuseSharedModule } from '@fuse/shared.module';
|
import { FuseSharedModule } from '@fuse/shared.module';
|
||||||
|
|
||||||
import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
|
|
||||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||||
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||||
|
|
@ -23,7 +22,6 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.
|
||||||
FuseSharedModule,
|
FuseSharedModule,
|
||||||
FuseSidebarModule,
|
FuseSidebarModule,
|
||||||
|
|
||||||
ChatPanelModule,
|
|
||||||
ContentModule,
|
ContentModule,
|
||||||
FooterModule,
|
FooterModule,
|
||||||
NavbarModule,
|
NavbarModule,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user