purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +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> <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"
class="contacts-list-item"
[ngClass]="contact.status" [ngClass]="contact.status"
[class.active]="contact.id === selectedContact?.id" [class.active]="contact.id === selectedContact?.id"
(click)="goToChat(contact)" (click)="goToChat(contact)">
[matTooltip]="contact.name"
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 -->

21
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,7 +74,9 @@ chat-panel {
} }
} }
.mat-list-item-content { .avatar {
margin: 0;
}
.unread-count { .unread-count {
position: absolute; position: absolute;
@ -115,7 +123,6 @@ chat-panel {
} }
} }
} }
}
#chat { #chat {
background-color: mat-color(mat-palette($mat-grey, 300)); background-color: mat-color(mat-palette($mat-grey, 300));
@ -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,