Skip to content

Commit 7cc76b1

Browse files
ChronosSFChronosSF
authored
Merge pull request #3526 from IgniteUI/simeonoff/chat-sample
refactor(chat-sample): update sample and fix styling
2 parents cb5150b + 6fda025 commit 7cc76b1

File tree

3 files changed

+198
-226
lines changed

3 files changed

+198
-226
lines changed

‎src/app/lists/list/list-chat-sample/list-chat-sample.component.html

Lines changed: 90 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,99 @@
1-
<div class="chat-sample-wrapper">
2-
<form class="chat-sample__form">
3-
<igx-list #list>
4-
<ng-template #othersMessage let-message="message" let-contact="contact" let-messageIndex="index">
5-
<igx-list-item class="contact" *ngIf="isFirstMessage(messageIndex)">
6-
<div class="contact__panel">
7-
<igx-avatar [src]="contact.photo" shape="circle"></igx-avatar>
8-
<span class="message__info">
9-
{{ contact.name }}, {{ message.timestamp | date: 'shortTime'}}
1+
<form #form class="sample-form">
2+
<igx-list #list>
3+
<ng-template
4+
#othersMessage
5+
let-message="message"
6+
let-contact="contact"
7+
let-messageIndex="index"
8+
>
9+
<igx-list-item class="contact" *ngIf="isFirstMessage(messageIndex)">
10+
<section class="contact__panel">
11+
<igx-avatar
12+
[src]="contact.photo"
13+
shape="circle"
14+
></igx-avatar>
15+
<header class="message__info">
16+
<h6>{{ contact.name }}</h6>
17+
<span>
18+
{{ message.timestamp | date: "shortTime" }}
1019
</span>
11-
</div>
12-
</igx-list-item>
13-
<igx-list-item [ngClass]="{
14-
'others-message': true,
15-
'others-message--first': isFirstMessage(messageIndex)}">
16-
<span>
17-
{{ message.message }}
18-
</span>
19-
</igx-list-item>
20-
</ng-template>
21-
<ng-template #myMessage let-message="message" let-messageIndex="index">
22-
<igx-list-item class="contact" *ngIf="isFirstMessage(messageIndex)">
23-
<span class="my-message__info">
24-
{{ message.timestamp | date: 'shortTime'}}
20+
</header>
21+
</section>
22+
</igx-list-item>
23+
<igx-list-item>
24+
<div
25+
[ngClass]="{
26+
message: true,
27+
'other-message': true,
28+
'other-message--first': isFirstMessage(messageIndex)
29+
}"
30+
>
31+
<span>{{ message.message }}</span>
32+
</div>
33+
</igx-list-item>
34+
</ng-template>
35+
<ng-template #myMessage let-message="message" let-messageIndex="index">
36+
<igx-list-item class="contact" *ngIf="isFirstMessage(messageIndex)">
37+
<header class="own-message message__info">
38+
<h6>You</h6>
39+
<span class="message__info">
40+
{{ message.timestamp | date: "shortTime" }}
2541
</span>
26-
</igx-list-item>
27-
<igx-list-item class="my-message" [ngClass]="{
28-
'my-message': true,
29-
'my-message--first': isFirstMessage(messageIndex)}">
42+
</header>
43+
</igx-list-item>
44+
<igx-list-item>
45+
<div
46+
[ngClass]="{
47+
message: true,
48+
'own-message': true,
49+
'own-message--first': isFirstMessage(messageIndex)
50+
}"
51+
>
3052
<span>
3153
{{ message.message }}
3254
</span>
33-
</igx-list-item>
34-
</ng-template>
55+
</div>
56+
</igx-list-item>
57+
</ng-template>
3558

36-
<ng-container *ngFor="let message of messagesService.getMessages(); index as i">
37-
<ng-container *ngTemplateOutlet="getMessageTemplate(message); context: {message: message, contact: contactsService.getContact(message.authorId), index: i}">
38-
</ng-container>
59+
<ng-container
60+
*ngFor="let message of messagesService.getMessages(); index as i"
61+
>
62+
<ng-container
63+
*ngTemplateOutlet="
64+
getMessageTemplate(message);
65+
context: {
66+
message: message,
67+
contact: contactsService.getContact(message.authorId),
68+
index: i
69+
}
70+
"
71+
>
3972
</ng-container>
40-
</igx-list>
73+
</ng-container>
74+
</igx-list>
75+
76+
<div class="overflow-anchor"></div>
77+
78+
<div class="massage-field">
79+
<igx-input-group type="box">
80+
<input
81+
#newMessage
82+
igxInput
83+
name="newMessage"
84+
placeholder="Send message"
85+
autocomplete="off"
86+
[(ngModel)]="message"
87+
(keypress)="onMessageKeypress($event)"
88+
/>
4189

42-
<div class="chat-massage-field">
43-
<igx-input-group class="chat-input-group" type="box">
44-
<input class="input-round-box" placeholder="Send message" autocomplete="off" igxInput #newMessage name="newMessage"
45-
[(ngModel)]="message" (keypress)="onMessageKeypress($event)" />
46-
</igx-input-group>
47-
<button class="send-message-button" igxIconButton="flat"
48-
igxRipple="#09f" [igxRippleCentered]="true" (click)="onSendButtonClick()">
49-
<igx-icon family="material">send</igx-icon>
90+
<button
91+
igxSuffix
92+
igxIconButton="flat"
93+
(click)="onSendButtonClick()"
94+
>
95+
<igx-icon name="send" family="material"></igx-icon>
5096
</button>
51-
</div>
52-
</form>
53-
</div>
97+
</igx-input-group>
98+
</div>
99+
</form>

0 commit comments

Comments
 (0)