Merge pull request #1059 from BeatC/toolbar-animation

Change main toolbar animation; optimize mousemove handler

css/_animations.scss

@@ -3,7 +3,7 @@
 **/
 
 /**
- * START of slide in animation for extended toolbar.
+ *   Slide in animation for extended toolbar.
  */
 @include keyframes(slideInX) {
     0% { transform: translateX(-100%); }
@@ -26,12 +26,9 @@
 }
 
 /**
- * END of slide out animation for extended toolbar.
+ *   Slide in / out animation for main toolbar.
  */
 
-/**
- * START of slide in / out animation for main toolbar.
- */
 @include keyframes(slideInY) {
     100% { transform: translateY(0%); }
 }
@@ -42,11 +39,7 @@
 }
 
 /**
- * END of slide in / out animation for main toolbar.
- */
-
-/**
- * START of slide in animation for extended toolbar (inner) panel.
+ *   Slide in animation for extended toolbar (inner) panel.
  */
 
 // FIX: Can't use percentage because of breaking animation when width is changed
@@ -62,11 +55,7 @@
 }
 
 /**
- * END of slide in animation for extended toolbar (inner) panel.
- */
-
-/**
-* START of slide in animation for extended toolbar container
+*   Slide in animation for extended toolbar container
 **/
 
 @include keyframes(slideOutExtContainer) {
@@ -80,5 +69,15 @@
 }
 
 /**
-* END of slide in animation for extended toolbar container
+*   Fade in / out animations
 **/
+
+@include keyframes(fadeIn) {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@include keyframes(fadeOut) {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}

css/_toolbars.scss

@@ -16,8 +16,7 @@
     z-index: $toolbarZ;
     pointer-events: none;
     min-height: 100px;
-    transform: translateY(-100%);
-    -webkit-transform: translateY(-100%);
+    opacity: 0;
 }
 
 #subject {
@@ -273,5 +272,13 @@ a.button>#avatar {
 }
 
 /**
- * END of slide in animation for extended toolbar panel.
+ * START of fade in animation for main toolbar
  */
+
+.fadeIn {
+    @include animation('fadeIn .3s forwards');
+}
+
+.fadeOut {
+    @include animation('fadeOut .3s forwards');
+}

modules/UI/UI.js

@@ -23,6 +23,7 @@ import Settings from "./../settings/Settings";
 import RingOverlay from "./ring_overlay/RingOverlay";
 import RandomUtil from "../util/RandomUtil";
 import UIErrors from './UIErrors';
+import { debounce } from "../util/helpers";
 
 var EventEmitter = require("events");
 UI.messageHandler = require("./util/MessageHandler");
@@ -433,9 +434,10 @@ UI.start = function () {
     bindEvents();
     sharedVideoManager = new SharedVideoManager(eventEmitter);
     if (!interfaceConfig.filmStripOnly) {
-        $("#videoconference_page").mousemove(function () {
-            return UI.showToolbar();
-        });
+        let debouncedShowToolbar = debounce(() => {
+            UI.showToolbar();
+        }, 100, { leading: true, trailing: false });
+        $("#videoconference_page").mousemove(debouncedShowToolbar);
         setupToolbars();
         setupChat();
 

modules/UI/toolbars/Toolbar.js

@@ -608,7 +608,7 @@ Toolbar = {
      * @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise
      */
     isVisible() {
-        return this.toolbarSelector.hasClass("slideInY");
+        return this.toolbarSelector.hasClass("fadeIn");
     },
 
     /**
@@ -616,7 +616,9 @@ Toolbar = {
      * parameter.
      */
     hide() {
-        this.toolbarSelector.toggleClass("slideInY").toggleClass("slideOutY");
+        this.toolbarSelector
+            .removeClass("fadeIn")
+            .addClass("fadeOut");
 
         let slideInAnimation = (SideContainerToggler.isVisible)
                                     ? "slideInExtX"
@@ -634,8 +636,9 @@ Toolbar = {
      * parameter.
      */
     show() {
-        if (this.toolbarSelector.hasClass("slideOutY"))
-            this.toolbarSelector.toggleClass("slideOutY");
+        if (this.toolbarSelector.hasClass("fadeOut")) {
+            this.toolbarSelector.removeClass("fadeOut");
+        }
 
         let slideInAnimation = (SideContainerToggler.isVisible)
                                 ? "slideInExtX"
@@ -644,10 +647,11 @@ Toolbar = {
                                 ? "slideOutExtX"
                                 : "slideOutX";
 
-        if (this.extendedToolbarSelector.hasClass(slideOutAnimation))
+        if (this.extendedToolbarSelector.hasClass(slideOutAnimation)) {
             this.extendedToolbarSelector.toggleClass(slideOutAnimation);
+        }
 
-        this.toolbarSelector.toggleClass("slideInY");
+        this.toolbarSelector.addClass("fadeIn");
         this.extendedToolbarSelector.toggleClass(slideInAnimation);
     },
 

modules/util/helpers.js

@@ -40,3 +40,39 @@ export function reportError (e, msg = "") {
         window.onerror(msg, null, null,
             null, e);
 }
+
+/**
+ * Creates a debounced function that delays invoking func until after wait
+ * milliseconds have elapsed since the last time the debounced
+ * function was invoked
+ * @param fn
+ * @param wait
+ * @param options
+ * @returns {function(...[*])}
+ */
+export function debounce(fn, wait = 0, options = {}) {
+    let leading = options.leading || false;
+    let trailing = true;
+    let isCalled = false;
+
+    if (typeof options.trailing !== 'undefined') {
+        trailing = options.trailing;
+    }
+
+    return (...args) => {
+        if(!isCalled) {
+            if (leading) {
+                fn(...args);
+            }
+
+            setTimeout(() => {
+                isCalled = false;
+                if (trailing) {
+                    fn(...args);
+                }
+            }, wait);
+
+            isCalled = true;
+        }
+    };
+}