From 995a25ee1581dc4669b1d14608ee6126edc4b17d Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Mon, 14 Aug 2017 11:45:17 -0700
Subject: [PATCH] fix(video-quality-label): adjust z-indexing clashes with
 filmstrip

With AtlasKit InlineDialog, the filmstrip z-index in vertical
filmstrip mode was adjusted as it had to be set to fixed position
for the dialogs to automagically be position fixed. This left
behind a regression where the filmstrip z-index was the same as
the video quality label, but came later in the dom, so the label
was not clickable. This commit modifies the z-index of the
vertical filmstrip to account for clicking of the video quality
label.
---
 css/_filmstrip.scss                    |  4 +++-
 css/_variables.scss                    |  2 +-
 css/_vertical_filmstrip_overrides.scss | 22 +++++++++++++++++++++-
 modules/UI/videolayout/Filmstrip.js    |  3 ++-
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss
index ad6851907..96f4abb17 100644
--- a/css/_filmstrip.scss
+++ b/css/_filmstrip.scss
@@ -157,8 +157,10 @@
 
     .remote-videos-container {
         transition: opacity 1s;
+    }
 
-        &.hide-videos {
+    &.hide-videos {
+        .remote-videos-container {
             opacity: 0;
             pointer-events: none;
         }
diff --git a/css/_variables.scss b/css/_variables.scss
index 479ab9b30..d94762c9a 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -107,7 +107,7 @@ $reloadZ: 20;
 $poweredByZ: 100;
 $ringingZ: 300;
 $sideToolbarContainerZ: 300;
-$toolbarZ: 400;
+$toolbarZ: 350;
 $tooltipsZ: 401;
 $dropdownMaskZ: 900;
 $dropdownZ: 901;
diff --git a/css/_vertical_filmstrip_overrides.scss b/css/_vertical_filmstrip_overrides.scss
index 08aad336d..b3b654b18 100644
--- a/css/_vertical_filmstrip_overrides.scss
+++ b/css/_vertical_filmstrip_overrides.scss
@@ -15,7 +15,18 @@
          * any parent is also fixed.
          */
         position: fixed;
-        z-index: $tooltipsZ;
+
+        /**
+         * z-index adjusting is needed because the video state indicator has to
+         * display over the filmstrip when no videos are displayed but still be
+         * clickable but its inline dialogs must display over the video state
+         * indicator when videos are displayed.
+         */
+        z-index: calc(#{$tooltipsZ} + 1);
+
+        &.hide-videos {
+            z-index: calc(#{$tooltipsZ} - 1);
+        }
 
         /**
          * Hide videos by making them slight to the right.
@@ -28,6 +39,15 @@
                 bottom: auto;
                 right: -196px;
             }
+
+            /**
+             * Remove horizontal filmstrip padding used to prevent videos from
+             * overlapping the left-side toolbar. An id selector is used to
+             * match id specificity with filmstrip styles.
+             */
+            &#remoteVideos {
+                padding-left: 0;
+            }
         }
 
         #filmstripLocalVideo {
diff --git a/modules/UI/videolayout/Filmstrip.js b/modules/UI/videolayout/Filmstrip.js
index d0b8d023b..0ff8345e2 100644
--- a/modules/UI/videolayout/Filmstrip.js
+++ b/modules/UI/videolayout/Filmstrip.js
@@ -46,7 +46,8 @@ const Filmstrip = {
         }
 
         APP.store.dispatch(setFilmstripRemoteVideosVisibility(shouldShow));
-        this.filmstripRemoteVideos.toggleClass('hide-videos', !shouldShow);
+        $(`.${this.filmstripContainerClassName}`)
+            .toggleClass('hide-videos', !shouldShow);
     },
 
     /**