diff --git a/src/styles/components/_chat.scss b/src/styles/components/_chat.scss index a4cdcbb9..a442d1ce 100644 --- a/src/styles/components/_chat.scss +++ b/src/styles/components/_chat.scss @@ -434,6 +434,42 @@ &.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 4px; + } + .fa { + color: #fff; + font-size: 20px; + line-height: 24px; + } + } + } } .chat { diff --git a/static/js/controllers/chatroomcontroller.js b/static/js/controllers/chatroomcontroller.js index dea0d14b..f82378ef 100644 --- a/static/js/controllers/chatroomcontroller.js +++ b/static/js/controllers/chatroomcontroller.js @@ -23,7 +23,7 @@ define(['jquery', 'underscore', 'moment', 'text!partials/fileinfo.html', 'text!partials/contactrequest.html', 'text!partials/geolocation.html'], function($, _, moment, templateFileInfo, templateContactRequest, templateGeolocation) { // 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('
'); 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 = $(""); + msg.title.html(displayName(from, true)); + msg.extra_css += "with_name "; + var imgSrc = buddyImageSrc(from); + msg.picture = $('