From b01f14cb330e90a88aeedc810093d61e881e1d0d Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Mon, 17 Nov 2014 12:19:25 +0100 Subject: [PATCH 1/3] Add group chat buddyPicture hover functionality to show call/chat actions. --- src/styles/components/_chat.scss | 36 +++++++++++ static/js/controllers/chatroomcontroller.js | 66 ++++++++++++++------- 2 files changed, 82 insertions(+), 20 deletions(-) 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 = $('
'); + 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 = $(""); - title.html(displayName(from, true)); - extra_css += "with_name "; - var imgSrc = buddyImageSrc(from); - picture = $('
'); - 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 = $('
'); @@ -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); }; From c27aef693aadd43bcd65aaa20e6945b252a06ff6 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Mon, 24 Nov 2014 09:21:38 +0100 Subject: [PATCH 2/3] Move pictureHover dom to a partials template. --- static/js/controllers/chatroomcontroller.js | 4 ++-- static/partials/picturehover.html | 11 +++++++++++ 2 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 static/partials/picturehover.html diff --git a/static/js/controllers/chatroomcontroller.js b/static/js/controllers/chatroomcontroller.js index f82378ef..ca36a3a8 100644 --- a/static/js/controllers/chatroomcontroller.js +++ b/static/js/controllers/chatroomcontroller.js @@ -20,7 +20,7 @@ */ "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", "mediaStream", function($scope, $element, $window, safeMessage, safeDisplayName, $compile, $filter, translation, mediaStream) { @@ -50,7 +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 pictureHover = $compile(templatePictureHover); var knowMessage = { r: {}, diff --git a/static/partials/picturehover.html b/static/partials/picturehover.html new file mode 100644 index 00000000..80abe643 --- /dev/null +++ b/static/partials/picturehover.html @@ -0,0 +1,11 @@ +
+
+ + + + + + +
+
+ From e1fb7ccf3b6d7b7fd7e44871faea8848c8d22099 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Mon, 24 Nov 2014 10:26:04 +0100 Subject: [PATCH 3/3] Remove font size for btn and use bootstrap class. --- src/styles/components/_chat.scss | 3 +-- static/partials/picturehover.html | 8 ++++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/styles/components/_chat.scss b/src/styles/components/_chat.scss index a442d1ce..3c86e432 100644 --- a/src/styles/components/_chat.scss +++ b/src/styles/components/_chat.scss @@ -461,11 +461,10 @@ width: 55px; } .btn-primary { - padding: 2px 4px; + padding: 2px 5px; } .fa { color: #fff; - font-size: 20px; line-height: 24px; } } diff --git a/static/partials/picturehover.html b/static/partials/picturehover.html index 80abe643..03954b49 100644 --- a/static/partials/picturehover.html +++ b/static/partials/picturehover.html @@ -1,11 +1,11 @@
- + +