Ionic Chat Bubble - smukov/AvI GitHub Wiki
As I'm slowly getting to a point where I need to implement a chat page in my Ionic2 application, I also realized that I'll need those chat bubbles that you can find in all modern apps. I solved this problem with nine-patch images in my Android Native implementation, but for Ionic2 I'm going to use the pure CSS approach.
I'm basing my implementation off of this great post from Ross Martin on Ionic forum. As you'll see, I'll shamelessly rip off his CSS code, making only minor adjustments for my implementation.
I'll start the implementation by creating a new app/pages/components/chatBubble directory, and I'll add two files to it chatBubble.js and chatBubble.scss. As always, I'm going to import my chatBubble styles to app.core.scss:
@import "../pages/components/chatBubble/chatBubble";
As I already mentioned, I'm going to use the Ross Martin's post, and his CSS code to jump start my Chat Bubble implementation. I haven't taken all of his CSS, only the important bits :) You can check them out below.
.chatBubble{
img.profile-pic {
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
bottom: 10px;
}
img.profile-pic.left {
left: 10px;
}
img.profile-pic.right {
right: 10px;
}
.message {
font-size: medium;
word-wrap: break-word;
white-space: pre-wrap;
}
.message-detail {
white-space: nowrap;
font-size: 14px;
}
.chat-bubble {
border-radius: 5px;
display: inline-block;
padding: 10px 18px;
position: relative;
margin: 10px;
max-width: 80%;
}
.chat-bubble:before {
content: "\00a0";
display: block;
height: 16px;
width: 9px;
position: absolute;
bottom: -7.5px;
}
.chat-bubble.left {
background-color: map-get($chat-bubble, background-left);
float: left;
margin-left: 45px;
}
.chat-bubble.left:before {
background-color: map-get($chat-bubble, background-left);
left: 10px;
-webkit-transform: rotate(70deg) skew(5deg);
}
.chat-bubble.right {
background-color: map-get($chat-bubble, background-right);
color: #000;
float: right;
margin-right: 45px;
}
.chat-bubble.right:before {
background-color: map-get($chat-bubble, background-right);
right: 10px;
-webkit-transform: rotate(118deg) skew(-5deg);
}
.chat-bubble.right a.autolinker {
color: #000;
font-weight: bold;
}
}I made small changes to it by using my custom background-color, and also changed the .message class a little bit.
The logic for this component couldn't be simpler. Basically, I'm just generating a hierarchy of div elements with appropriate css classes applied to them. Then I'm taking in the message model for this component and inserting the provided information inside those divs.
I'm using the msg.position to appropriately render the chat bubble, depending if it's the incoming or outgoing message.
import {Component} from '@angular/core';
@Component({
selector: 'chat-bubble',
inputs: ['msg: message'],
template:
`
<div class="chatBubble">
<img class="profile-pic {{msg.position}}" src="{{msg.img}}">
<div class="chat-bubble {{msg.position}}">
<div class="message">{{msg.content}}</div>
<div class="message-detail">
<span style="font-weight:bold;">{{msg.senderName}} </span>,
<span>{{msg.time}}</span>
</div>
</div>
</div>
`
})
export class ChatBubble {
constructor() {
this.msg = {
content : 'Am I dreaming?',
position : 'left',
time : '12/3/2016',
senderName : 'Gregory'
}
}
}As you can see I'm using the inputs parameter in component's decorator to declare a data-bound input property for this component. This property will take in the model with all the necessary information that gets rendered by my chat-bubble component.
To use this component, you'll need an array of objects similar to this one below, that serve as a model:
{
img: 'build/img/hugh.png',
position: 'left',
content: 'Hello from the other side.',
senderName: 'Gregory',
time: '28-Jun-2016 21:53'
}And then you can use the chat-bubble in a list:
<ion-list no-lines>
<ion-item *ngFor="let msg of messages" >
<chat-bubble [message]="msg"></chat-bubble>
</ion-item>
</ion-list>For the full example on how I'm using the chat-bubble component, checkout my source code in chatPage.js and chatPage.html.
I like the flexibility that I have with ionic2, compared to Native Android. Being a pure software developer, I would have no clue on how to properly design and create the nine-patch images for chat bubbles. Ionic2 allows me to use pure CSS to achieve the same effect.
Below you can see the final look of my Chat Page when I added my chat bubbles to it. I know the styling could use some more love, but I'm happy with what I got so far. Important thing is that it's all HTML5 and CSS, so you have the freedom to improve it.
