Improved usability of call/chat creation.

src/styles/components/_buddylist.scss

@@ -167,10 +167,10 @@
   }
   .buddyPictureSmall {
     margin:0px;
-    margin-left:-4px;
+    margin-left:0px;
     height:30px;
     width:30px;
-    margin-right:4px;
+    margin-right:0px;
     .#{$fa-css-prefix} {
       line-height: 30px;
       font-size: 2em;
@@ -206,7 +206,10 @@
     text-align:left;
     vertical-align:middle;
     display: inline-block;
-    width: 132px;
+    width: 130px;
+    height: 30px;
+    background: $buddylist-action-background;
+    padding: 6px 6px;
   }
 }
 
@@ -223,12 +226,14 @@
   transition-duration: .3s;
   white-space: nowrap;
   z-index: 5;
-  > .btn {
+  .btn {
     width: 42px;
     height: 40px;
     padding: 0px;
     text-align: center;
-    font-size: 2em;
+    vertical-align: middle;
+    line-height: 40px;
+    font-size: 1.6em;
   }
 }
 
@@ -241,15 +246,23 @@
   transition-delay: .1s;
   ul {
     padding-top: 10px;
-    margin: 0 10px 0 14px;
+    margin: 0 14px;
     padding-left: 0px;
     border-left: 1px dotted $bordercolor;
+    border-right: 1px dotted $bordercolor;
   }
   ul li {
-    margin-bottom: 4px;
+    margin-bottom: 2px;
-    margin-top: 2px;
     margin-left: 0px;
     list-style-type: none;
+    .btn-group {
+      visibility: hidden;
+    }
+    &:hover {
+      .btn-group {
+        visibility: visible;
+      }
+    }
   }
   .currentsession .buddy3 {
     font-weight: bold;

src/styles/components/_chat.scss

@@ -156,13 +156,25 @@
   }
 }
 
+.chatmenu {
+  position: absolute;
+  top: 36px;
+  left: 0px;
+  right: 0px;
+  height: 36px;
+  padding: 2px 4px;
+  @include breakpt($breakpoint-chat-small, max-height) {
+    display: none;
+  }
+}
+
 .chatbody {
   border-right: 1px solid $bordercolor;
   bottom: -1px;
   left: 0;
   position: absolute;
   right: 0;
-  top: 36px;
+  top: 74px;
   @include breakpt($breakpoint-chat-small, max-height) {
     border-top: 1px solid $bordercolor;
     top: 0px;

static/js/controllers/chatroomcontroller.js

@@ -26,6 +26,7 @@ define(['underscore', 'moment', 'text!partials/fileinfo.html', 'text!partials/co
 		$scope.outputElement = $(".output", $element);
 		$scope.inputElement = $(".input", $element);
 		$scope.bodyElement = $(".chatbody", $element);
+		$scope.menuElement = $(".chatmenu", $element);
 		var lastSender = null;
 		var lastDate = null;
 		var lastMessageContainer = null;
@@ -350,9 +351,15 @@ define(['underscore', 'moment', 'text!partials/fileinfo.html', 'text!partials/co
 		};
 
 		$scope.$on("seen", function() {
-
 			knowMessage.seen();
+		});
 
+		$scope.$on("clear", function() {
+			knowMessage.seen();
+			lastSender = null;
+			lastDate = null;
+			lastMessageContainer = null;
+			$scope.outputElement.empty();
 		});
 
 		$scope.$on("p2p", function(event, state) {
@@ -367,9 +374,7 @@ define(['underscore', 'moment', 'text!partials/fileinfo.html', 'text!partials/co
 		});
 
 		$scope.$on("focus", function() {
-
 			$scope.focus();
-
 		});
 
 		$scope.$on("received", function(event, from, data) {

static/js/directives/chat.js

@@ -293,6 +293,16 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
 								subscope.$broadcast("p2p", state);
 							}
 						};
+						subscope.doCall = function() {
+							mediaStream.webrtc.doCall(subscope.id);
+						};
+						subscope.doUpload = function() {
+							// TODO(longsleep): implement me
+							console.log("doUpload not yet implemented.");
+						};
+						subscope.doClear = function() {
+							subscope.$broadcast("clear");
+						};
 						//console.log("Creating new chat room", controller, subscope, index);
 						subscope.$on("submit", function(event, input) {
 							subscope.seen();

static/partials/buddyactions.html

@@ -1,7 +1,9 @@
 <div class="buddyhover">
 	<div class="buddyactions active">
-		<a class="btn btn-info" data-action="call" title="{{_('Start video call')}}"><i class="fa fa-phone"></i></a>
+		<div class="btn-group">
-		<a class="btn btn-info" data-action="chat" title="{{_('Start chat')}}"><i class="fa fa-comments-o"></i></a>
+			<a class="btn btn-primary" data-action="call" title="{{_('Start video call')}}"><i class="fa fa-phone"></i></a>
+			<a class="btn btn-primary" data-action="chat" title="{{_('Start chat')}}"><i class="fa fa-comments-o"></i></a>
+		</div>
 	</div>
 	<div class="buddysessions" ng-if="session.count>1">
 		<ul>
@@ -9,8 +11,10 @@
 				<span>
 					<div class="buddyPicture buddyPictureSmall"><i class="fa fa-user"/><img ng-show="s.Status.buddyPicture" alt ng-src="{{s.Id|buddyImageSrc:s.Status}}"/></div>
 					<div class="buddy3" title="{{s.Status.message}}">{{s.Status.displayName}}<span ng-show="s.Status.message">, {{s.Status.message}}</span></div>
-					<a class="btn btn-sm btn-default" title="{{_('Start video call')}}" ng-click="doCall(s.Id); $event.stopPropagation()"><i class="fa fa-phone"></i></a>
+					<div class="btn-group">
-					<a class="btn btn-sm btn-default" title="{{_('Start chat')}}" ng-click="doChat(s.Id); $event.stopPropagation()"><i class="fa fa-comments-o"></i></a>
+						<a class="btn btn-sm btn-primary" title="{{_('Start video call')}}" ng-click="doCall(s.Id); $event.stopPropagation()"><i class="fa fa-phone"></i></a>
+						<a class="btn btn-sm btn-primary" title="{{_('Start chat')}}" ng-click="doChat(s.Id); $event.stopPropagation()"><i class="fa fa-comments-o"></i></a>
+					</div>
 				</span>
 			</li>
 		</ul>

static/partials/chatroom.html

@@ -1,5 +1,14 @@
 <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"><div class="chatstatusicon" ng-click="deactivateRoom()"><i class="fa fa-angle-left"></i> <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="chatmenu">
+        <div class="btn-group">
+            <button ng-if="!isgroupchat" class="btn btn-sm btn-primary" title="{{_('Start video call')}}" ng-click="doCall()"><i class="fa fa-phone fa-fw"></i></button>
+            <button class="btn btn-sm btn-primary" title="{{_('Upload files')}}" ng-click="doUpload()"><i class="fa fa-upload fa-fw"></i></button>
+        </div>
+        <div class="btn-group pull-right">
+            <button class="btn btn-sm btn-default" title="{{_('Clear chat')}}" ng-click="doClear()"><i class="fa fa-eraser fa-fw"></i></button>
+        </div>
+    </div>
     <div class="chatbody">
         <div class="outputbox">
             <div class="output nicescroll"></div>