From cef9e8a9c0ab9a7199f768ff73cf3bc510f82dee Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 12 Jul 2018 11:12:03 +0300 Subject: [PATCH] Removed chat panel from Skeleton since its more like an app and won't be required by everyone --- .../chat-panel/chat-panel.component.html | 119 ------ .../chat-panel/chat-panel.component.scss | 387 ------------------ .../chat-panel/chat-panel.component.ts | 269 ------------ .../chat-panel/chat-panel.module.ts | 33 -- .../chat-panel/chat-panel.service.ts | 182 -------- .../components/toolbar/toolbar.component.html | 9 - .../components/toolbar/toolbar.component.ts | 23 -- .../layout-1/layout-1.component.html | 8 - .../horizontal/layout-1/layout-1.module.ts | 2 - .../vertical/layout-1/layout-1.component.html | 8 - .../vertical/layout-1/layout-1.module.ts | 2 - .../vertical/layout-2/layout-2.component.html | 8 - .../vertical/layout-2/layout-2.module.ts | 2 - .../vertical/layout-3/layout-3.component.html | 8 - .../vertical/layout-3/layout-3.module.ts | 2 - 15 files changed, 1062 deletions(-) delete mode 100644 src/app/layout/components/chat-panel/chat-panel.component.html delete mode 100644 src/app/layout/components/chat-panel/chat-panel.component.scss delete mode 100644 src/app/layout/components/chat-panel/chat-panel.component.ts delete mode 100644 src/app/layout/components/chat-panel/chat-panel.module.ts delete mode 100644 src/app/layout/components/chat-panel/chat-panel.service.ts diff --git a/src/app/layout/components/chat-panel/chat-panel.component.html b/src/app/layout/components/chat-panel/chat-panel.component.html deleted file mode 100644 index 07ebf17a..00000000 --- a/src/app/layout/components/chat-panel/chat-panel.component.html +++ /dev/null @@ -1,119 +0,0 @@ -
- - - -
- chat -

Team Chat

-
- - - - - -
- -

{{selectedContact.name}}

-
- - - - - - - -
- -
- - -
- -
- - -
{{contact.unread}}
-
- -
- -
- - - -
- -
- - - -
- - - -
-
{{message.message}}
-
{{message.time | date:'short'}}
-
- -
- - - - - -
- chat -
- -
- Start a conversation by typing your message below. -
- - -
- -
- -
- - - - - - - -
- -
- -
- - -
\ No newline at end of file diff --git a/src/app/layout/components/chat-panel/chat-panel.component.scss b/src/app/layout/components/chat-panel/chat-panel.component.scss deleted file mode 100644 index ffb556f7..00000000 --- a/src/app/layout/components/chat-panel/chat-panel.component.scss +++ /dev/null @@ -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; - } - } - } - } - } - } - } -} \ No newline at end of file diff --git a/src/app/layout/components/chat-panel/chat-panel.component.ts b/src/app/layout/components/chat-panel/chat-panel.component.ts deleted file mode 100644 index df12d123..00000000 --- a/src/app/layout/components/chat-panel/chat-panel.component.ts +++ /dev/null @@ -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; - - // Private - private _chatViewScrollbar: FusePerfectScrollbarDirective; - private _replyForm: NgForm; - private _replyInput: ElementRef; - private _unsubscribeAll: Subject; - - /** - * 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(); - }); - } -} diff --git a/src/app/layout/components/chat-panel/chat-panel.module.ts b/src/app/layout/components/chat-panel/chat-panel.module.ts deleted file mode 100644 index 103a006e..00000000 --- a/src/app/layout/components/chat-panel/chat-panel.module.ts +++ /dev/null @@ -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 -{ -} diff --git a/src/app/layout/components/chat-panel/chat-panel.service.ts b/src/app/layout/components/chat-panel/chat-panel.service.ts deleted file mode 100644 index 8aa1b952..00000000 --- a/src/app/layout/components/chat-panel/chat-panel.service.ts +++ /dev/null @@ -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} - */ - loadContacts(): Promise | 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} - */ - getChat(contactId): Promise - { - 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} - */ - createNewChat(contactId): Promise - { - 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} - */ - updateChat(chatId, dialog): Promise - { - 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} - */ - getContacts(): Promise - { - return new Promise((resolve, reject) => { - this._httpClient.get('api/chat-panel-contacts') - .subscribe((response: any) => { - resolve(response); - }, reject); - }); - } - - /** - * Get user - * - * @returns {Promise} - */ - getUser(): Promise - { - return new Promise((resolve, reject) => { - this._httpClient.get('api/chat-panel-user') - .subscribe((response: any) => { - resolve(response[0]); - }, reject); - }); - } -} diff --git a/src/app/layout/components/toolbar/toolbar.component.html b/src/app/layout/components/toolbar/toolbar.component.html index 60d0e50f..91bb50f1 100644 --- a/src/app/layout/components/toolbar/toolbar.component.html +++ b/src/app/layout/components/toolbar/toolbar.component.html @@ -83,15 +83,6 @@
- - -
-