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

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

@ -31,23 +31,23 @@
<div>
<!-- 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"
class="contacts-list-item"
[ngClass]="contact.status"
[class.active]="contact.id === selectedContact?.id"
(click)="goToChat(contact)"
[matTooltip]="contact.name"
matTooltipPosition="left"
matRipple>
(click)="goToChat(contact)">
<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="status-icon" [ngClass]="contact.status"></div>
</mat-list-item>
</div>
</mat-list>
</div>
<!-- / Contacts -->
<!-- Chat -->

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

@ -34,6 +34,7 @@ chat-panel {
width: 72px;
min-width: 72px;
max-width: 72px;
-webkit-overflow-scrolling: touch;
// Perfect scrollbar
.ps__rail-y {
@ -44,9 +45,14 @@ chat-panel {
}
}
.mat-list-item {
cursor: pointer;
.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));
@ -68,7 +74,9 @@ chat-panel {
}
}
.mat-list-item-content {
.avatar {
margin: 0;
}
.unread-count {
position: absolute;
@ -115,7 +123,6 @@ chat-panel {
}
}
}
}
#chat {
background-color: mat-color(mat-palette($mat-grey, 300));
@ -337,6 +344,12 @@ fuse-sidebar {
min-width: 360px;
max-width: 360px;
@include media-breakpoint-down('xs') {
min-width: 0 !important;
max-width: 100vw !important;
width: 100vw !important;
}
// 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();
// Focus to the reply input
this._replyInput.nativeElement.focus();
// this._replyInput.nativeElement.focus();
// Scroll to the bottom of the messages list
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 { 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';
@ -18,7 +18,6 @@ import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.se
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatListModule,
MatTabsModule,
MatTooltipModule,
MatRippleModule,