Merge pull request #150 from theurere/group-chat-buddyPicture-hover

Add group chat buddyPicture hover functionality

src/styles/components/_chat.scss

@@ -484,6 +484,41 @@
   &.with_name {
     // none
   }
+  &.with_hoverimage {
+    .buddyPicture {
+      overflow: visible;
+      z-index: initial;
+      &:hover .buddyInfoActions {
+        height: 40px;
+        opacity: 1;
+      }
+    }
+    .buddyInfoActions {
+      cursor: default;
+      display: inline-block;
+      height: 0;
+      left: 0;
+      opacity: 0;
+      overflow: hidden;
+      position: absolute;
+      top: 48px;
+      transition: opacity 0.1s .1s linear, height .4s .1s ease-out;
+      white-space: nowrap;
+      z-index: 1;
+      .btn-group {
+        display: block;
+        margin: 0 auto;
+        width: 55px;
+      }
+      .btn-primary {
+        padding: 2px 5px;
+      }
+      .fa {
+        color: #fff;
+        line-height: 24px;
+      }
+    }
+  }
 }
 
 .chat {

static/js/controllers/chatroomcontroller.js

@@ -20,10 +20,10 @@
  */
 
 "use strict";
-define(['jquery', 'underscore', 'moment', 'text!partials/fileinfo.html', 'text!partials/contactrequest.html', 'text!partials/geolocation.html'], function($, _, moment, templateFileInfo, templateContactRequest, templateGeolocation) {
+define(['jquery', 'underscore', 'moment', 'text!partials/fileinfo.html', 'text!partials/contactrequest.html', 'text!partials/geolocation.html', 'text!partials/picturehover.html'], function($, _, moment, templateFileInfo, templateContactRequest, templateGeolocation, templatePictureHover) {
 
 	// ChatroomController
-	return ["$scope", "$element", "$window", "safeMessage", "safeDisplayName", "$compile", "$filter", "translation", function($scope, $element, $window, safeMessage, safeDisplayName, $compile, $filter, translation) {
+	return ["$scope", "$element", "$window", "safeMessage", "safeDisplayName", "$compile", "$filter", "translation", "mediaStream", function($scope, $element, $window, safeMessage, safeDisplayName, $compile, $filter, translation, mediaStream) {
 
 		$scope.outputElement = $element.find(".output");
 		$scope.inputElement = $element.find(".input");
@@ -50,6 +50,7 @@ define(['jquery', 'underscore', 'moment', 'text!partials/fileinfo.html', 'text!p
 		var fileInfo = $compile(templateFileInfo);
 		var contactRequest = $compile(templateContactRequest);
 		var geoLocation = $compile(templateGeolocation);
+		var pictureHover = $compile(templatePictureHover);
 
 		var knowMessage = {
 			r: {},
@@ -101,6 +102,42 @@ define(['jquery', 'underscore', 'moment', 'text!partials/fileinfo.html', 'text!p
 			}
 		};
 
+		var addPictureHover = function(from, msg, is_self) {
+			if (msg.picture && !is_self) {
+				var subscope = $scope.$new();
+				subscope.startChat = function() {
+					$scope.$emit("startchat", from, {
+						autofocus: true,
+						restore: true
+					});
+				};
+				subscope.doCall = function() {
+					mediaStream.webrtc.doCall(from);
+				};
+				pictureHover(subscope, function(clonedElement, scope) {
+					msg.picture.append(clonedElement);
+				});
+			} else {
+				return;
+			}
+			msg.extra_css += "with_hoverimage ";
+		};
+
+		var showTitleAndPicture = function(from, msg, is_self) {
+			if ($scope.isgroupchat) {
+				msg.title = $("<strong>");
+				msg.title.html(displayName(from, true));
+				msg.extra_css += "with_name ";
+				var imgSrc = buddyImageSrc(from);
+				msg.picture = $('<div class="buddyPicture"><i class="fa fa-user fa-3x"/><img/></div>');
+				if (imgSrc) {
+					msg.picture.find("img").attr("src", imgSrc);
+				}
+				addPictureHover(from, msg, is_self);
+			}
+		};
+
+
 		// Make sure that chat links are openend in a new window.
 		$element.on("click", function(event) {
 			var elem = $(event.target);
@@ -302,27 +339,16 @@ define(['jquery', 'underscore', 'moment', 'text!partials/fileinfo.html', 'text!p
 			var is_new_message = lastSender !== from;
 			var is_self = from === sessonid;
 
-			var extra_css = "";
-			var title = null;
-			var picture = null;
-
-			var showTitleAndPicture = function() {
-				if ($scope.isgroupchat) {
-					title = $("<strong>");
-					title.html(displayName(from, true));
-					extra_css += "with_name ";
-					var imgSrc = buddyImageSrc(from);
-					picture = $('<div class="buddyPicture"><i class="fa fa-user fa-3x"/><img/></div>');
-					if (imgSrc) {
-						picture.find("img").attr("src", imgSrc);
-					}
-				}
+			var msg = {
+				extra_css: "",
+				title: null,
+				picture: null
 			};
 
 			if (is_new_message) {
 				lastSender = from;
 				$scope.showdate(timestamp);
-				showTitleAndPicture()
+				showTitleAndPicture(from, msg, is_self);
 			}
 
 			var strMessage = s.join(" ");
@@ -336,9 +362,9 @@ define(['jquery', 'underscore', 'moment', 'text!partials/fileinfo.html', 'text!p
 			}
 
 			if (is_self) {
-				extra_css += "is_self";
+				msg.extra_css += "is_self";
 			} else {
-				extra_css += "is_remote";
+				msg.extra_css += "is_remote";
 			}
 			if (timestamp) {
 				var ts = $('<div class="timestamp"/>');
@@ -349,7 +375,7 @@ define(['jquery', 'underscore', 'moment', 'text!partials/fileinfo.html', 'text!p
 					nodes = ts;
 				}
 			}
-			return $scope.display(strMessage, nodes, extra_css, title, picture);
+			return $scope.display(strMessage, nodes, msg.extra_css, msg.title, msg.picture);
 
 		};
 

static/partials/picturehover.html

@@ -0,0 +1,11 @@
+<div class="buddyInfoActions">
+    <div class="btn-group">
+        <button class="btn btn-lg btn-primary" ng-click="doCall()" title="Start video call">
+            <i class="fa fa-phone"></i>
+        </button>
+        <button class="btn btn-lg btn-primary" ng-click="startChat()" title="Start chat">
+            <i class="fa fa-comments-o"></i>
+        </button>
+    </div>
+</div>
+