Prepare for chat icons.

src/styles/components/_chat.scss

@@ -77,8 +77,6 @@ bottom:0px;
 right:0px;
 left:0px;
 background: #e7e7e7;
-border-top: 1px solid $bordercolor;
-border-right:1px solid $bordercolor;
 overflow:hidden;
 display:none;
 }
@@ -93,21 +91,41 @@ bottom:0px;
 left:0px;
 right:0px;
 top: 30px;
+border-right:1px solid $bordercolor;
 }
 .chat.active .chatbody {
 }
 .chat .chatheader {
-position:relative;
+position:absolute;
+left:0px;
+right:0px;
+top:0px;
 background: $componentbg;
 padding:8px 4px 0px 8px;
+border-top: 1px solid $bordercolor;
 border-bottom: 1px solid $bordercolor;
-border-left: 1px solid $bordercolor;
+border-right: 1px solid $bordercolor;
 font-size:0.8em;
 font-weight:bold;
 height:30px;
 }
 .chat.active .chatheader {
 }
+.chat .chatheader .chatstatusicon {
+position:absolute;
+left:0px;
+top:0px;
+font-size:2.1em;
+line-height:30px;
+width:30px;
+height:30px;
+display:block;
+text-align:center;
+}
+.chat .chatheader .chatheadertitle {
+padding-left:20px;
+display:inline;
+}
 .chat .chatheader .ctrl {
 position:absolute;
 top:4px;
@@ -367,18 +385,18 @@ margin-bottom: 4px;
 }
 
 @keyframes newmessage {
-	0% {background-color: rgba(132,184,25,1.0);}
+	0% {color: rgba(132,184,25,1.0);}
-	50% {background-color: $componentbg;}
+	50% {color: $componentbg;}
-	100% {background-color: rgba(132,184,25,1.0);}
+	100% {color: rgba(132,184,25,1.0);}
 }
 
 @-webkit-keyframes newmessage {
-	0% {background-color: rgba(132,184,25,1.0);}
+	0% {color: rgba(132,184,25,1.0);}
-	50% {background-color: $componentbg;}
+	50% {color: $componentbg;}
-	100% {background-color: rgba(132,184,25,1.0);}
+	100% {color: rgba(132,184,25,1.0);}
 }
 
-.chat.newmessage .chatheader {
+.chat.newmessage .chatstatusicon, .chatstatusicon.newmessage {
 animation: newmessage 1s ease -0.3s infinite;
 -webkit-animation: newmessage 1s ease -0.3s infinite;
 }

static/partials/chatroom.html

@@ -1,5 +1,5 @@
 <div ng-controller="ChatroomController" class="chat room-{{index}}" ng-class="{'newmessage': newmessage, 'visible': visible, 'chat-p2p': 'p2pstate', 'with_pictures': isgroupchat, 'active': active}">
-    <div class="chatheader"><span ng-show="p2pstate" class="fa fa-exchange" title="{{_('Peer to peer')}}"/><span>{{settings.title}} {{id|displayName}}</span> <div class="ctrl"><i ng-hide="layout.chatMaximized" ng-click="toggleMax()" class="fa fa-expand"></i><i ng-show="layout.chatMaximized" ng-click="toggleMax()" class="fa fa-compress"></i><i title="{{_('Close chat')}}" ng-click="hide()" class="fa fa-times"></i></div></div>
+    <div class="chatheader"><div class="chatstatusicon"><i class="fa fa fa-comments-o"></i></div><div class="chatheadertitle"><span ng-show="p2pstate" class="fa fa-exchange" title="{{_('Peer to peer')}}"/><span>{{settings.title}} {{id|displayName}}</span></div> <div class="ctrl"><i ng-hide="layout.chatMaximized" ng-click="toggleMax()" class="fa fa-expand"></i><i ng-show="layout.chatMaximized" ng-click="toggleMax()" class="fa fa-compress"></i><i title="{{_('Close chat')}}" ng-click="hide()" class="fa fa-times"></i></div></div>
     <div class="chatbody">
         <div class="outputbox">
             <div class="output nicescroll"></div>