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

(Chat Panel) Removed mat-list, moved mat-tooltip to the avatar due to mobile scrolling issues

Browse Source
This commit is contained in:
Sercan Yemen 2018-07-12 10:48:31 +03:00
parent b099022f5a
commit f395046945
4 changed files with 67 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/layout/components/chat-panel/chat-panel.component.html
View File

@ -31,23 +31,23 @@
<div> <div>
<!-- Contacts --> <!-- Contacts -->
<mat-list id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}"> <div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<mat-list-item *ngFor="let contact of contacts" <div *ngFor="let contact of contacts"
[ngClass]="contact.status" class="contacts-list-item"
[class.active]="contact.id === selectedContact?.id" [ngClass]="contact.status"
(click)="goToChat(contact)" [class.active]="contact.id === selectedContact?.id"
[matTooltip]="contact.name" (click)="goToChat(contact)">
matTooltipPosition="left"
matRipple>
<img matListAvatar [src]="contact.avatar"> <img class="avatar" [src]="contact.avatar"
[matTooltip]="contact.name"
matTooltipPosition="left">
<div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div> <div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
<div class="status-icon" [ngClass]="contact.status"></div> <div class="status-icon" [ngClass]="contact.status"></div>
</mat-list-item> </div>
</mat-list> </div>
<!-- / Contacts --> <!-- / Contacts -->
<!-- Chat --> <!-- Chat -->

95
src/app/layout/components/chat-panel/chat-panel.component.scss
View File

@ -34,6 +34,7 @@ chat-panel {
width: 72px; width: 72px;
min-width: 72px; min-width: 72px;
max-width: 72px; max-width: 72px;
-webkit-overflow-scrolling: touch;
// Perfect scrollbar // Perfect scrollbar
.ps__rail-y { .ps__rail-y {
@ -44,9 +45,14 @@ chat-panel {
} }
} }
.mat-list-item { .contacts-list-item {
cursor: pointer;
position: relative; position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
height: 56px;
cursor: pointer;
&.active { &.active {
background-color: mat-color(mat-palette($mat-grey, 300)); background-color: mat-color(mat-palette($mat-grey, 300));
@ -68,50 +74,51 @@ chat-panel {
} }
} }
.mat-list-item-content { .avatar {
margin: 0;
}
.unread-count { .unread-count {
position: absolute; position: absolute;
min-width: 18px; min-width: 18px;
height: 18px; height: 18px;
top: 4px; top: 4px;
left: 10px; left: 10px;
border-radius: 9px; border-radius: 9px;
padding: 0 5px; padding: 0 5px;
font-size: 11px; font-size: 11px;
text-align: center; text-align: center;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: mat-color(mat-palette($mat-indigo)); background-color: mat-color(mat-palette($mat-indigo));
color: white; color: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35); 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;
} }
.status-icon { &.do-not-disturb {
position: absolute; background-color: #F44336;
width: 12px; }
height: 12px;
bottom: 3px;
left: 44px;
border: 2px solid white;
border-radius: 50%;
&.online { &.away {
background-color: #4CAF50; background-color: #FFC107;
} }
&.do-not-disturb { &.offline {
background-color: #F44336; background-color: #646464;
}
&.away {
background-color: #FFC107;
}
&.offline {
background-color: #646464;
}
} }
} }
} }
@ -337,6 +344,12 @@ fuse-sidebar {
min-width: 360px; min-width: 360px;
max-width: 360px; max-width: 360px;
@include media-breakpoint-down('xs') {
min-width: 0 !important;
max-width: 100vw !important;
width: 100vw !important;
}
// Folded // Folded
&.folded { &.folded {

2
src/app/layout/components/chat-panel/chat-panel.component.ts
View File

@ -124,7 +124,7 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
this._replyForm.reset(); this._replyForm.reset();
// Focus to the reply input // Focus to the reply input
this._replyInput.nativeElement.focus(); // this._replyInput.nativeElement.focus();
// Scroll to the bottom of the messages list // Scroll to the bottom of the messages list
if ( this._chatViewScrollbar ) if ( this._chatViewScrollbar )

3
src/app/layout/components/chat-panel/chat-panel.module.ts
View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material'; import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
@ -18,7 +18,6 @@ import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.se
MatFormFieldModule, MatFormFieldModule,
MatIconModule, MatIconModule,
MatInputModule, MatInputModule,
MatListModule,
MatTabsModule, MatTabsModule,
MatTooltipModule, MatTooltipModule,
MatRippleModule, MatRippleModule,