diff --git a/src/app/fake-db/chat-panel.ts b/src/app/fake-db/chat-panel.ts index 878c69a1..ec738bef 100644 --- a/src/app/fake-db/chat-panel.ts +++ b/src/app/fake-db/chat-panel.ts @@ -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' } diff --git a/src/app/layout/components/chat-panel/chat-panel.component.html b/src/app/layout/components/chat-panel/chat-panel.component.html index 5bc074af..fae3c12b 100644 --- a/src/app/layout/components/chat-panel/chat-panel.component.html +++ b/src/app/layout/components/chat-panel/chat-panel.component.html @@ -60,18 +60,21 @@
-
+
- - -
{{message.message}}
-
{{message.time | date:'medium'}}
+
{{message.time | date:'short'}}
@@ -81,8 +84,8 @@
diff --git a/src/app/layout/components/chat-panel/chat-panel.component.scss b/src/app/layout/components/chat-panel/chat-panel.component.scss index 51f951c2..ab6237f2 100644 --- a/src/app/layout/components/chat-panel/chat-panel.component.scss +++ b/src/app/layout/components/chat-panel/chat-panel.component.scss @@ -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; + } + } + + &.first-of-group { + + .bubble { + border-top-left-radius: 20px; + } + } + + &.last-of-group { + + .bubble { + border-bottom-left-radius: 20px; + } } } - &.user { - align-items: flex-end; + &.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; } } } diff --git a/src/app/layout/components/chat-panel/chat-panel.component.ts b/src/app/layout/components/chat-panel/chat-panel.component.ts index e3a6cfe8..2eba8086 100644 --- a/src/app/layout/components/chat-panel/chat-panel.component.ts +++ b/src/app/layout/components/chat-panel/chat-panel.component.ts @@ -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,