mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
(Chat Panel) Styling adjustments
This commit is contained in:
Sercan Yemen
parent
595b16275b
commit
49c8e32dce
|
|
@ -199,6 +199,11 @@ export class ChatPanelFakeDb
|
|||
'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
|
||||
'time' : '2017-03-22T08:55:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a6802d10e277a0f35724',
|
||||
'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
|
||||
'time' : '2017-03-22T08:55:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'We are losing money! Quick!',
|
||||
|
|
@ -219,6 +224,16 @@ export class ChatPanelFakeDb
|
|||
'message': 'We are losing money! Quick!',
|
||||
'time' : '2017-03-22T09:15:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'You are the worst!',
|
||||
'time' : '2017-03-22T09:05:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'We are losing money! Quick!',
|
||||
'time' : '2017-03-22T09:15:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a6802d10e277a0f35724',
|
||||
'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
|
||||
|
|
@ -244,6 +259,11 @@ export class ChatPanelFakeDb
|
|||
'message': 'You are the worst!',
|
||||
'time' : '2017-03-22T09:33:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'You are the worst!',
|
||||
'time' : '2017-03-22T09:33:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'We are losing money! Quick!',
|
||||
|
|
@ -265,7 +285,7 @@ export class ChatPanelFakeDb
|
|||
'id' : '2725a680b8d240c011dd2243',
|
||||
'dialog': [
|
||||
{
|
||||
'who' : '5725a680b8d240c011dd224b',
|
||||
'who' : '5725a680606588342058356d',
|
||||
'message': 'Quickly come to the meeting room 1B, we have a big server issue',
|
||||
'time' : '2017-04-22T01:00:00.299Z'
|
||||
},
|
||||
|
|
@ -275,7 +295,7 @@ export class ChatPanelFakeDb
|
|||
'time' : '2017-04-22T01:05:00.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b8d240c011dd224b',
|
||||
'who' : '5725a680606588342058356d',
|
||||
'message': 'We are losing money! Quick!',
|
||||
'time' : '2017-04-22T01:10:00.299Z'
|
||||
}
|
||||
|
|
@ -285,7 +305,7 @@ export class ChatPanelFakeDb
|
|||
'id' : '3725a6809413bf8a0a5272b4',
|
||||
'dialog': [
|
||||
{
|
||||
'who' : '5725a6809413bf8a0a5272b1',
|
||||
'who' : '5725a68009e20d0a9e9acf2a',
|
||||
'message': 'Quickly come to the meeting room 1B, we have a big server issue',
|
||||
'time' : '2017-04-22T02:10:00.299Z'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,18 +60,21 @@
|
|||
|
||||
<div class="messages" fxFlex="1 1 auto" fusePerfectScrollbar>
|
||||
|
||||
<div fxLayout="row" *ngFor="let message of chat.dialog" class="message-row"
|
||||
[ngClass]="{'user': message.who === user.id}">
|
||||
<div *ngFor="let message of chat.dialog; let i = index" class="message-row"
|
||||
[ngClass]="{
|
||||
'me': message.who === user.id,
|
||||
'contact': message.who !== user.id,
|
||||
'first-of-group': isFirstMessageOfGroup(message, i),
|
||||
'last-of-group': isLastMessageOfGroup(message, i)
|
||||
}">
|
||||
|
||||
<img *ngIf="message.who === contact.id"
|
||||
<img *ngIf="shouldShowContactAvatar(message, i)"
|
||||
src="{{contact.avatar}}"
|
||||
class="avatar">
|
||||
|
||||
<img *ngIf="message.who === user.id" class="avatar" src="{{user.avatar}}">
|
||||
|
||||
<div class="bubble">
|
||||
<div class="message">{{message.message}}</div>
|
||||
<div class="time secondary-text">{{message.time | date:'medium'}}</div>
|
||||
<div class="time secondary-text">{{message.time | date:'short'}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -81,8 +84,8 @@
|
|||
<div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
|
||||
|
||||
<form #replyForm="ngForm"
|
||||
(ngSubmit)="reply()"
|
||||
(keyup.enter)="reply()"
|
||||
(ngSubmit)="reply($event)"
|
||||
(keydown.enter)="reply($event)"
|
||||
fxFlex class="reply-form"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -101,54 +101,84 @@ chat-panel {
|
|||
}
|
||||
|
||||
#chat {
|
||||
background-color: mat-color(mat-palette($mat-grey, 200));
|
||||
background-color: mat-color(mat-palette($mat-grey, 300));
|
||||
|
||||
.messages {
|
||||
overflow: auto;
|
||||
padding: 16px 0 40px 40px;
|
||||
|
||||
.message-row {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px 4px 16px;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
padding: 6px 7px 8px 9px;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
|
||||
border-radius: 6px;
|
||||
|
||||
&:before {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADGUExURQAAAP////b29vn5+f///wAAAP///wAAAAAAAP///9ra2v////j4+PHx8fv7++Hh4fHx8f////////////////39/QAAAP////////z8/P////39/f39/fz8/P////////////z8/P////////////z8/P////////////v7+/Hx8f///9bW1vz8/K2trf////39/f39/WJiYgAAAExMTFtbWwAAAN3d3cjIyPr6+vX19QAAAO7u7vz8/NTU1Ofn5zMzM////zGPlXsAAABBdFJOUwAcm/kREh4CCDWL1SneR6TfAQffhMYK/A5nRrLWfRc5DW2ih5f+19Kn+9v4g/1LCJuXHwQUKgahcXS6DNnlDMMKKzPoTgAAAKBJREFUKM+V08USwmAQA+C/0NIWd3d3d8/7vxTMcIPkQK7f7CG7s8bQAOY/SCuwFYQU1P+eiCqIK2gpWCmoCrAgoKQgJ8CHgIqAMjg0MxxSQ3DogEMWFBZtUPAHYGB1CyDQWE6AH7BrfXzlAxGAQhECTGAmwN1Okz0Gb/LW4fEItIfrOfNELMh3tck7u+PhcT2zQ7l77/K8iY8yJwV3BeYFqpc/uSyPGdAAAAAASUVORK5CYII=);
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -11px;
|
||||
bottom: 3px;
|
||||
width: 12px;
|
||||
height: 19px;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
|
||||
.message {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
margin-top: 8px;
|
||||
text-align: right;
|
||||
top: 100%;
|
||||
color: $black-87-opacity;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.contact {
|
||||
|
||||
.avatar {
|
||||
margin: 0 16px 0 0;
|
||||
.bubble {
|
||||
background-color: mat-color(mat-palette($mat-indigo));
|
||||
color: white;
|
||||
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
|
||||
.time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.user {
|
||||
align-items: flex-end;
|
||||
&.first-of-group {
|
||||
|
||||
.bubble {
|
||||
border-top-left-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
|
||||
.bubble {
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.me {
|
||||
padding-left: 40px;
|
||||
|
||||
.avatar {
|
||||
order: 2;
|
||||
|
|
@ -157,13 +187,59 @@ chat-panel {
|
|||
|
||||
.bubble {
|
||||
margin-left: auto;
|
||||
background-color: #E8F5E9;
|
||||
border: 1px solid #DFEBE0;
|
||||
order: 1;
|
||||
&:before {
|
||||
right: -11px;
|
||||
left: auto;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD2UExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRsXAAAANzwzNPmxNrtyau5oIWRedDkwNntyczgwdfpyJ+/n97wzsLWtNjsytvwzczfvtPmxau6nNjqxtrtyio1KtzwzNjryAAAANzwzgAAANzwzK7Aor/Us9Lnw8vevAAAAMzevtbpxrvMrX+IdwAAAEROOi45Lr3MrZGjf9LoxX+MctnqydLkwhgYGMzfv9vuyQAAANzwzNvuy9zxy7vMu7XGqNvtzKKykwAAANruzKq6nLnMriQkGMXXuL3PsNjsySgzKAAAANLkw83fvd3vy9z4xtzwzRpFmIEAAABQdFJOUwAXChEGBAMBAgwhDvJ7k0YqMc0Zmwj6apf2kjU0+dkw/swh/CP9j2Wr2gndvaYeBRoxQg6gUPt/FaHJGdTj9A9k7XQLeE6iFcN12xkSt9r4NKizowAAAMFJREFUKM+V0sdywlAMBVDbMX7PQCihQ+iQ0HsJvfem/P/PwBIzugu0PXNnNNJVyPmhsIPhhoB2COwIGuLdhAcl3AhCBoBoHUC6BCBbA0C/EkBFB5D/FjxQwQYg1RI8UKINgDoSAPUlAPqUAMgfAEBfXsEDBV0+Hogi4Zhg4THj9YwHoqEBYOrgYTI3GVgMNn8r+Qq94k9yZNosW/3Hy9VuTjWfHkOX6367bGZUU7de66ieHZrO1OGg8Z1WTgYAFLgD5S1PCkzo1B0AAAAASUVORK5CYII=);
|
||||
background-color: #FFFFFF;
|
||||
color: $black-87-opacity;
|
||||
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
|
||||
.time {
|
||||
justify-content: flex-end;
|
||||
right: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
|
||||
.bubble {
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
|
||||
.bubble {
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.contact + .me,
|
||||
&.me + .contact {
|
||||
padding-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
|
||||
.bubble {
|
||||
border-top-left-radius: 20px;
|
||||
padding-top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
|
||||
.bubble {
|
||||
border-bottom-left-radius: 20px;
|
||||
padding-bottom: 13px;
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -153,6 +153,45 @@ export class ChatPanelComponent implements OnInit, OnDestroy
|
|||
this._fuseSidebarService.getSidebar('chatPanel').toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Decide whether to show or not the contact's avatar in the message row
|
||||
*
|
||||
* @param message
|
||||
* @param i
|
||||
* @returns {boolean}
|
||||
*/
|
||||
shouldShowContactAvatar(message, i): boolean
|
||||
{
|
||||
return (
|
||||
message.who === this.contact.id &&
|
||||
((this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== this.contact.id) || !this.chat.dialog[i + 1])
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given message is the first message of a group
|
||||
*
|
||||
* @param message
|
||||
* @param i
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isFirstMessageOfGroup(message, i): boolean
|
||||
{
|
||||
return (i === 0 || this.chat.dialog[i - 1] && this.chat.dialog[i - 1].who !== message.who);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given message is the last message of a group
|
||||
*
|
||||
* @param message
|
||||
* @param i
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isLastMessageOfGroup(message, i): boolean
|
||||
{
|
||||
return (i === this.chat.dialog.length - 1 || this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== message.who);
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to chat with the contact
|
||||
*
|
||||
|
|
@ -195,8 +234,15 @@ export class ChatPanelComponent implements OnInit, OnDestroy
|
|||
/**
|
||||
* Reply
|
||||
*/
|
||||
reply(): void
|
||||
reply(event): void
|
||||
{
|
||||
event.preventDefault();
|
||||
|
||||
if ( !this._replyForm.form.value.message )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Message
|
||||
const message = {
|
||||
who : this.user.id,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user