mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
(Chat Panel) Removed mat-list, moved mat-tooltip to the avatar due to mobile scrolling issues
This commit is contained in:
Sercan Yemen
parent
b099022f5a
commit
f395046945
|
|
@ -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"
|
||||
[ngClass]="contact.status"
|
||||
[class.active]="contact.id === selectedContact?.id"
|
||||
(click)="goToChat(contact)"
|
||||
[matTooltip]="contact.name"
|
||||
matTooltipPosition="left"
|
||||
matRipple>
|
||||
<div *ngFor="let contact of contacts"
|
||||
class="contacts-list-item"
|
||||
[ngClass]="contact.status"
|
||||
[class.active]="contact.id === selectedContact?.id"
|
||||
(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 -->
|
||||
|
|
|
|||
|
|
@ -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,50 +74,51 @@ chat-panel {
|
|||
}
|
||||
}
|
||||
|
||||
.mat-list-item-content {
|
||||
.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);
|
||||
.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;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
bottom: 3px;
|
||||
left: 44px;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
&.do-not-disturb {
|
||||
background-color: #F44336;
|
||||
}
|
||||
|
||||
&.online {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
&.away {
|
||||
background-color: #FFC107;
|
||||
}
|
||||
|
||||
&.do-not-disturb {
|
||||
background-color: #F44336;
|
||||
}
|
||||
|
||||
&.away {
|
||||
background-color: #FFC107;
|
||||
}
|
||||
|
||||
&.offline {
|
||||
background-color: #646464;
|
||||
}
|
||||
&.offline {
|
||||
background-color: #646464;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
||||
|
|
|
|||
|
|
@ -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 )
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user