Merge pull request #576 from jitsi/hide-feedback-with-filmstrip

Hide feedback with filmstrip

css/main.css

@@ -142,15 +142,6 @@ a.bottomToolbarButton:hover {
     color: #636363;
 }
 
-.header_button_separator {
-    display: inline-block;
-    position:relative;
-    top: 5px;
-    width: 1px;
-    height: 20px;
-    background: #373737;
-}
-
 .bottom_button_separator {
     display: inline-block;
     position: relative;
@@ -235,7 +226,7 @@ form {
     color: rgba(255,255,255,.50);
 }
 
-div.feedbackButton {
+#feedbackButtonDiv {
     display: none;
     position: absolute;
     background-color: rgba(0,0,0,.50);
@@ -246,7 +237,11 @@ div.feedbackButton {
     left: -50px;
     z-index: 100;
     overflow: hidden;
-    transition: all .2s ease-in-out;
+    transition: all 2s ease-in-out;
+}
+
+#feedbackButtonDiv.hidden {
+    bottom: -246px;
 }
 
 div.feedbackButton:hover {

css/videolayout_default.css

@@ -506,7 +506,7 @@
     background: rgba(0,0,0,.5);
     color: #FFF;
     z-index: 10000;
-    border-radius: 4px;
+    border-radius: 2px;
     -webkit-transition: all 2s 2s linear;
     transition: all 2s 2s linear;
 }

index.html

@@ -253,7 +253,7 @@
             </div>
             <a id="downloadlog" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]downloadlogs" ><i class="fa fa-cloud-download"></i></a>
         </div>
-        <div class="feedbackButton">
+        <div id="feedbackButtonDiv">
             <a id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]feedback"><i class="fa fa-heart"></i></a>
         </div>
     </div>

modules/UI/Feedback.js

@@ -1,4 +1,5 @@
 /* global $, APP, config, interfaceConfig */
+import UIEvents from "../../service/UI/UIEvents";
 
 /*
  * Created by Yana Stamcheva on 2/10/15.
@@ -60,6 +61,14 @@ var constructDetailedFeedbackHtml = function() {
  */
 var feedbackWindowCallback = null;
 
+/**
+ * Shows / hides the feedback button.
+ * @private
+ */
+function _toggleFeedbackIcon() {
+    $('#feedbackButtonDiv').toggleClass("hidden");
+}
+
 /**
  * Defines all methods in connection to the Feedback window.
  *
@@ -73,17 +82,23 @@ var Feedback = {
     feedbackScore: -1,
     /**
      * Initialise the Feedback functionality.
+     * @param emitter the EventEmitter to associate with the Feedback.
      */
-    init: function () {
+    init: function (emitter) {
         // CallStats is the way we send feedback, so we don't have to initialise
         // if callstats isn't enabled.
         if (!APP.conference.isCallstatsEnabled())
             return;
-
-        $("div.feedbackButton").css("display", "block");
+        $("#feedbackButtonDiv").css("display", "block");
         $("#feedbackButton").click(function (event) {
             Feedback.openFeedbackWindow();
         });
+
+        // Show / hide the feedback button whenever the film strip is
+        // shown / hidden.
+        emitter.addListener(UIEvents.TOGGLE_FILM_STRIP, function () {
+            _toggleFeedbackIcon();
+        });
     },
     /**
      * Indicates if the feedback functionality is enabled.

modules/UI/UI.js

@@ -252,7 +252,7 @@ UI.initConference = function () {
 
     Toolbar.checkAutoEnableDesktopSharing();
     if(!interfaceConfig.filmStripOnly) {
-        Feedback.init();
+        Feedback.init(eventEmitter);
     }
 
     // FollowMe attempts to copy certain aspects of the moderator's UI into the