Chat Bubble in Nativescript ng2


#1

How can we create a chat bubble same as attached image in Ng2 project.


#2

do you need the chat bubble with the little ‘tail’ like the speech bubble above, or can it be just a rounded rectangle? If the latter there’s an example on the blog


#3

I have implemented which we have in Blog.

But I need to implement all thing together… Name of Contact, message and Date.

I have created CSS but that doesn’t work…

.speech-wrapper{
  padding: 30px 40px;
  .bubble{
    width: 240px;
    height: auto;
    display: block;
    background: #f5f5f5;
    border-radius: 4px;
    box-shadow: 2px 8px 5px #000;
    position: relative;
    margin: 0 0 25px;
    &.alt{
      margin: 0 0 0 60px;
    }
    .txt{
      padding: 8px 55px 8px 14px;
      .name{
        font-weight: 600;
        font-size: 12px;
        margin: 0 0 4px;
        color: #3498db;
        span{
          font-weight: normal;
          color: #b3b3b3;
        }
        &.alt{
          color: #2ecc71;
        }
      }
      .message{
        font-size: 12px;
        margin: 0;
        color: #2b2b2b;
      }
      .timestamp{
        font-size: 11px;
        position: absolute;
        bottom: 8px;
        right: 10px;
        text-transform: uppercase; color: #999
      }
    }
    .bubble-arrow {
      position: absolute;
      width: 0;
      bottom:42px;
      left: -16px;
      height: 0;
      &.alt{
        right: -2px;      
        bottom: 40px;
        left: auto;
      }
    }
    .bubble-arrow:after {
      content: "";
      position: absolute;
      border: 0 solid transparent;
      border-top: 9px solid #f5f5f5;
      border-radius: 0 20px 0;
      width: 15px;
      height: 30px;
      transform: rotate(145deg);
    }
    .bubble-arrow.alt:after {
      transform: rotate(45deg) scaleY(-1);
    }
  }
}

How can we implement this CSS in Nativescript ng2 Project ?
How can I create a Speech Bubble that contains Everything inside the Bubble ?


#4

Hey @pap5508

Let’s start off by what you’ve attempted to do so far in your application. That way it will be a lot easier for us to help you.


#5

@jen.looper @Pete.K

I have created CSS for Chat message Bubble…

.chatBox{
  margin-top: 5;
  margin-bottom: 20;
  background-color: transparent;
  opacity: 1;
  separator-color: transparent; 
}
.chat {
    width: auto;
    height: auto;
    background-color: transparent;
}
.incomingName {
  color:#009688;
  width: auto;
  padding: 1;
  text-align: left;
  font-size: 10;
  margin-left: 6;
  text-decoration: underline;
}
.outgoingName {
   color:#03A9F4;
   width: auto;
   padding: 1;
   text-align: left;
   font-size: 10;
   margin-right: 6;
   text-decoration: underline;
}
.incomingPhoto{
   background-color: #03A9F4;
   width: auto;
   color: white;
   padding: 1;
   text-align: left;
}
.outgoingPhoto {
   background-color: #009688;
   width: auto;
   color: black ;
   padding: 1;
   text-align: left;
}
.bubblePhoto{
    margin-bottom: 5;
    margin-left: 5;
    margin-right: 5;
    margin-top: 2;
    background-color: #F2F2F2;
    border-radius: 5px;
   box-shadow: 8px 8px 4px #888888;
    display: inline-block;
    padding: 2px 4px;
    position: relative;
    vertical-align: top;
} 
.incomingMessage {
   background-color: #03A9F4;
   width: auto;
   color: white;
    padding: 5;
   text-align: left;
   margin-bottom: 5;
   margin-left: 5;
   margin-right: 5;
   margin-top: 2;
}
.outgoingMessage {
   background-color: #009688;
   width: auto;
   color: black ;
   padding: 5;
   text-align: left;
   margin-bottom: 5;
   margin-right: 5;
   margin-top: 2;
}
.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
  box-shadow: 8px 8px 4px #888888;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
}
.dateTime{
   font-size: 8;
   color:#03A9F4;
   margin-bottom: 2;
   margin-top: -4;
   margin-left: 5;
   margin-right: 10;
}

Listview set:

 <ListView #chatBox row="0" [items]="messagesArray" separatorColor="transparent" class="chatBox" (itemTap)="chatMessageSelected($event)"
          (itemLoading)="makeBackgroundTransparent($event)" style="margin-bottom: 40;">
          <ng-template let-item="item">
            <GridLayout columns="auto,*,auto" rows="*,auto" width="100%">
              <!--imcoming message Image-->
              <Image row="0" col="0" [src]="item.incomingMessageDP" class="avatar" stretch="aspectFit" opacity="{{ !item.isIncoming ? 0 : 1 }}">
              </Image>
              <StackLayout row="0" col="1" class="chat">
                <Label text=" {{item.Name}}" textWrap="true" class="{{ item.isIncoming ? 'incomingName' : 'outgoingName' }}" horizontalAlignment="{{ item.isIncoming ? 'left' : 'right' }}"
                  [visibility]="isItemVisible ? 'visible' : 'visible'"></Label>
                <Image #phototaken [src]="item.image" height="250" width="200" stretch="fill" class="{{ item.isIncoming ? 'incomingPhoto bubblePhoto' : 'outgoingPhoto bubblePhoto' }}"
                  horizontalAlignment="{{ item.isIncoming ? 'left' : 'right' }}" [visibility]="item.isImage ? 'visible' : 'collapsed'"></Image>
                <Label text=" {{item.messageText}}" textWrap="true" class="{{ item.isIncoming ? 'incomingMessage bubble' : 'outgoingMessage bubble' }}"
                  horizontalAlignment="{{ item.isIncoming ? 'left' : 'right' }}" [visibility]="item.TextVisible ? 'visible' : 'visible'"></Label>
              </StackLayout>
              <!--outgoing Group Message Image-->
              <Image row="0" col="2" [src]="item.outgoingMessageDP" class="avatar" stretch="aspectFit" opacity="{{ item.isIncoming ? 0 : 1 }}">
              </Image>
              <StackLayout row="1" col="1">
                <Label row="1" column="1" text="{{item.date | date: 'M/d/yy HH:mm'}}" class="dateTime" horizontalAlignment="{{ item.isIncoming ? 'left' : 'right' }}"> </Label>
              </StackLayout>
            </GridLayout>
          </ng-template>
        </ListView>

UI screenshot :

I would like to Implement like this :