mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-11-04 13:03:33 +00:00
(Chat Panel) Style and logic tweaks
This commit is contained in:
Sercan Yemen
parent
b6ebd2b839
commit
ffbd000fe2
@ -2,7 +2,8 @@
|
||||
|
||||
<ng-container *ngIf="selectedContact === null">
|
||||
|
||||
<div class="title ml-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<div class="title ml-16" fxLayout="row" fxLayoutAlign="start center"
|
||||
(click)="unfoldSidebarTemporarily()">
|
||||
<mat-icon class="s-32 white-fg">chat</mat-icon>
|
||||
<h3 class="ml-12">Team Chat</h3>
|
||||
</div>
|
||||
@ -18,12 +19,14 @@
|
||||
|
||||
</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 mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily();resetChat();"
|
||||
fxHide fxShow.gt-md>
|
||||
<mat-icon class="secondary-text s-20">close</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen()" fxHide.gt-md>
|
||||
<mat-icon class="secondary-text">arrow_forward</mat-icon>
|
||||
<button mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen();resetChat();"
|
||||
fxHide.gt-md>
|
||||
<mat-icon class="secondary-text">close</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
@ -37,7 +40,7 @@
|
||||
class="contacts-list-item"
|
||||
[ngClass]="contact.status"
|
||||
[class.active]="contact.id === selectedContact?.id"
|
||||
(click)="goToChat(contact)">
|
||||
(click)="toggleChat(contact)">
|
||||
|
||||
<img class="avatar" [src]="contact.avatar"
|
||||
[matTooltip]="contact.name"
|
||||
@ -78,7 +81,7 @@
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="chat && chat.dialog && chat.dialog.length === 0">
|
||||
<ng-container *ngIf="selectedContact && chat && chat.dialog && chat.dialog.length === 0">
|
||||
|
||||
<div class="no-messages-icon">
|
||||
<mat-icon class="s-128">chat</mat-icon>
|
||||
@ -87,11 +90,29 @@
|
||||
<div class="no-messages secondary-text">
|
||||
Start a conversation by typing your message below.
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!selectedContact">
|
||||
|
||||
<div class="no-contact-selected">
|
||||
|
||||
<div class="no-contact-icon">
|
||||
<mat-icon class="s-128">chat</mat-icon>
|
||||
</div>
|
||||
|
||||
<div class="no-contact secondary-text">
|
||||
Select a contact to start a conversation.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
|
||||
<div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center"
|
||||
*ngIf="selectedContact">
|
||||
|
||||
<form #replyForm="ngForm"
|
||||
(ngSubmit)="reply($event)"
|
||||
|
||||
@ -16,11 +16,14 @@ chat-panel {
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
height: 64px;
|
||||
max-height: 64px;
|
||||
min-height: 64px;
|
||||
z-index: 10;
|
||||
|
||||
.title {
|
||||
cursor: pointer;
|
||||
|
||||
mat-icon {
|
||||
margin-left: 4px;
|
||||
@ -40,11 +43,14 @@ chat-panel {
|
||||
}
|
||||
|
||||
#contacts-list {
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
padding: 16px 0;
|
||||
overflow: auto;
|
||||
width: 72px;
|
||||
min-width: 72px;
|
||||
max-width: 72px;
|
||||
background-color: #F9F9F9;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Perfect scrollbar
|
||||
@ -66,8 +72,24 @@ chat-panel {
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: mat-color(mat-palette($mat-grey, 300));
|
||||
@include mat-elevation(2);
|
||||
position: relative;
|
||||
background-color: mat-color(mat-palette($mat-indigo, 50));
|
||||
|
||||
.status-icon {
|
||||
border-color: mat-color(mat-palette($mat-indigo, 50));
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 0;
|
||||
bottom: 8px;
|
||||
content: "";
|
||||
width: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: mat-color(mat-palette($mat-indigo));
|
||||
}
|
||||
}
|
||||
|
||||
&.offline {
|
||||
@ -87,14 +109,17 @@ chat-panel {
|
||||
|
||||
.avatar {
|
||||
margin: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.unread-count {
|
||||
position: absolute;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
top: 4px;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
border-radius: 9px;
|
||||
padding: 0 5px;
|
||||
font-size: 11px;
|
||||
@ -111,9 +136,9 @@ chat-panel {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
bottom: 3px;
|
||||
bottom: 10px;
|
||||
left: 44px;
|
||||
border: 2px solid white;
|
||||
border: 2px solid #F9F9F9;
|
||||
border-radius: 50%;
|
||||
|
||||
&.online {
|
||||
@ -136,7 +161,11 @@ chat-panel {
|
||||
}
|
||||
|
||||
#chat {
|
||||
background-color: mat-color(mat-palette($mat-grey, 300));
|
||||
position: relative;
|
||||
z-index: 7;
|
||||
flex: 1 1 100%;
|
||||
background-color: white;
|
||||
box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.25);
|
||||
|
||||
.messages {
|
||||
position: relative;
|
||||
@ -177,6 +206,7 @@ chat-panel {
|
||||
font-size: 11px;
|
||||
margin-top: 8px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
color: $black-87-opacity;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -224,7 +254,7 @@ chat-panel {
|
||||
|
||||
.bubble {
|
||||
margin-left: auto;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #E0E0E0;
|
||||
color: $black-87-opacity;
|
||||
|
||||
border-top-left-radius: 20px;
|
||||
@ -304,12 +334,34 @@ chat-panel {
|
||||
padding: 0 16px 24px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-contact-selected {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
padding: 0 24px;
|
||||
text-align: center;
|
||||
|
||||
.no-contact-icon {
|
||||
|
||||
mat-icon {
|
||||
color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.no-contact {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply-form {
|
||||
position: relative;
|
||||
|
||||
.message-text {
|
||||
background-color: #E0E0E0;
|
||||
padding: 16px 8px;
|
||||
|
||||
.mat-form-field-wrapper {
|
||||
|
||||
@ -206,27 +206,52 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to chat with the contact
|
||||
* Toggle chat with the contact
|
||||
*
|
||||
* @param contact
|
||||
*/
|
||||
goToChat(contact): void
|
||||
toggleChat(contact): void
|
||||
{
|
||||
// Unfold the sidebar temporarily
|
||||
this.unfoldSidebarTemporarily();
|
||||
// If the contact equals to the selectedContact,
|
||||
// that means we will deselect the contact and
|
||||
// unload the chat
|
||||
if ( this.selectedContact && contact.id === this.selectedContact.id )
|
||||
{
|
||||
// Reset
|
||||
this.resetChat();
|
||||
}
|
||||
// Otherwise, we will select the contact, open
|
||||
// the sidebar and start the chat
|
||||
else
|
||||
{
|
||||
// Unfold the sidebar temporarily
|
||||
this.unfoldSidebarTemporarily();
|
||||
|
||||
// Set the selected contact
|
||||
this.selectedContact = contact;
|
||||
// Set the selected contact
|
||||
this.selectedContact = contact;
|
||||
|
||||
// Load the chat
|
||||
this._chatPanelService.getChat(contact.id).then((chat) => {
|
||||
// Load the chat
|
||||
this._chatPanelService.getChat(contact.id).then((chat) => {
|
||||
|
||||
// Set the chat
|
||||
this.chat = chat;
|
||||
// Set the chat
|
||||
this.chat = chat;
|
||||
|
||||
// Prepare the chat for the replies
|
||||
this._prepareChatForReplies();
|
||||
});
|
||||
// Prepare the chat for the replies
|
||||
this._prepareChatForReplies();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the selected contact and unload the chat
|
||||
*/
|
||||
resetChat(): void
|
||||
{
|
||||
// Set the selected contact as null
|
||||
this.selectedContact = null;
|
||||
|
||||
// Set the chat as null
|
||||
this.chat = null;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user