Update v0.9

app/app.js

@@ -8,7 +8,7 @@ if (!window.indexedDB) {
 }
 
 var contacts = [];
-var receiverID,senderID;
+var receiverID,senderID,recStat;
 var selfwebsocket,receiverWebSocket;
 var privKey;
 
@@ -211,6 +211,14 @@ function convertStringToInt(string){
 
 function userDataStartUp(){
     console.log("StartUp");
+
+    document.getElementById("sendMsgInput").addEventListener("keyup",function(event){
+      if(event.keyCode === 13){
+        event.preventDefault();
+        sendMsg();
+      }
+    });
+
     getDatafromAPI().then(function (result) {
       console.log(result);
       getDatafromIDB().then(function(result){
@@ -238,6 +246,7 @@ function userDataStartUp(){
     }).catch(function (error) {
         console.log(error.message);
     });
+
 }
     function arrayToObject(array){
       obj = {};
@@ -610,9 +619,10 @@ function changeReceiver(param){
 
 function receiverStatus(status){
   if(status)
-    document.getElementById('recipient-floID').style.backgroundColor = "#00b300";
+    document.getElementById('recipient-status').style.color = "#4CC94C";
   else
-    document.getElementById('recipient-floID').style.backgroundColor = "#ff4d4d";
+    document.getElementById('recipient-status').style.color = "#CD5C5C";
+  recStat = status;
 }
 
 function getTime(time){
@@ -633,7 +643,7 @@ function sendMsg(){
     alert("Select a contact and send message");
     return;
   }
-  if(receiverWebSocket.readyState !== WebSocket.OPEN){
+  if(!recStat){
     alert("Recipient is offline! Try again later")
     return
   }

app/index.html

@@ -23,16 +23,20 @@
         <div class="side-one">
           <!-- Heading -->
           <div class="row heading">
+            <h5><b>FLO Whatsapp </b></h5><h6><i>created by Ranchimall</i></h6>
+            <!--
             <div class="col-sm-1 col-xs-1  heading-dot  pull-right">
               <i class="fa fa-ellipsis-v fa-2x  pull-right" aria-hidden="true" onclick="min();"></i>
             </div>
             <div class="col-sm-2 col-xs-2 heading-compose  pull-right">
               <i class="fa fa-comments fa-2x  pull-right" aria-hidden="true"></i>
             </div>
+          -->
           </div>
           <!-- Heading End -->
 
           <!-- SearchBox -->
+          <!--
           <div class="row searchBox">
             <div class="col-sm-12 searchBox-inner">
               <div class="form-group has-feedback">
@@ -41,6 +45,7 @@
               </div>
             </div>
           </div>
+          -->
 
           <!-- Search Box End -->
           <!-- sideBar -->
@@ -57,12 +62,14 @@
         <!-- Heading -->
         <div class="row heading">
           <div class="col-sm-8 col-xs-8 heading-name">
-            <span class="heading-name-meta" id="recipient-floID">Select Contact
+            <span class="heading-name-meta"><span id="recipient-status">O</span> &nbsp;&nbsp;<span id="recipient-floID">Select Contact</span>
             </span>
           </div>
+          <!--
           <div class="col-sm-1 col-xs-1  heading-dot pull-right">
             <i class="fa fa-ellipsis-v fa-2x  pull-right" aria-hidden="true"></i>
           </div>
+        -->
         </div>
         <!-- Heading End -->
 
@@ -73,15 +80,19 @@
 
         <!-- Reply Box -->
         <div class="row reply">
+          <!--
           <div class="col-sm-1 col-xs-1 reply-emojis">
             <i class="fa fa-smile-o fa-2x"></i>
           </div>
+        -->
           <div class="col-sm-9 col-xs-9 reply-main">
-            <input class="form-control" rows="1" id="sendMsgInput" placeholder="Type message" autocomplete="off"></input>
+            <input class="form-control" rows="1" id="sendMsgInput" placeholder="Type message" autocomplete="off" ></input>
           </div>
+          <!--
           <div class="col-sm-1 col-xs-1 reply-recording">
             <i class="fa fa-microphone fa-2x" aria-hidden="true"></i>
           </div>
+        -->
           <div class="col-sm-1 col-xs-1 reply-send" onclick = "sendMsg()">
             <i class="fa fa-send fa-2x" aria-hidden="true"></i>
           </div>

app/styles.css

@@ -106,6 +106,14 @@ body {
   color: #000;
   display: block;
 }
+
+#recipient-status{
+  border-radius: 50%;
+  background: none; 
+  height: 25px;
+  width: 25px;
+  color:white;
+}
 .heading-online {
   display: none;
   padding: 0 5px;
@@ -388,7 +396,6 @@ body {
   border-radius: 10px 10px 10px 0;
   background: #ffffff;
   font-size: 12px;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
   word-wrap: break-word;
   display: inline-block;
   height: auto;
@@ -399,11 +406,10 @@ body {
   float: right;
   width: auto !important;
   height: auto;
-  background: gray;
+  background: #dcf8c6;
   border-radius: 10px 10px 0 10px;
   padding: 4px 10px 7px !important;
   font-size: 12px;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
   display: inline-block;
   word-wrap: break-word;
 }
@@ -457,7 +463,7 @@ body {
   padding: 2px 5px !important;
 }
 
-.reply-main textarea {
+.reply-main input {
   width: 100%;
   resize: none;
   overflow: hidden;
@@ -470,7 +476,7 @@ body {
   font-size: 16px;
 }
 
-.reply-main textarea:focus {
+.reply-main input:focus {
   outline: none;
   border: none;
   text-indent: 5px;
@@ -574,7 +580,7 @@ body {
   .reply-main {
     padding: 2px 8px !important;
   }
-  .reply-main textarea {
+  .reply-main input {
     padding: 8px !important;
     font-size: 18px;
   }