feat(jitsipopover): convert to InlineDialog (jitsi#1804)

* feat(small-video): use InlineDialog for stats and remote menu - Remove JitsiPopover and use InlineDialog instead. - Bring the remote menu icon into react. - Make vertical filmstrip position:fixed so popper (AtlasKit dependency) sets InlineDialogs and eventually tooltips to position:fixed. * ref(remote-menu): hook KickButton to redux * ref(remote-menu): hook MuteButton to redux * modify padding, toggle dialogs * pixel push margins to align dialogs, adjust padding of dialogs * add comment about margin for dialog, add file I forgot * modify indicator markup so the icon can be moved down while trigger stays at top of toolbar
AndreyMaksimkin · Aug 14, 2017 · 725d39d · 725d39d
1 parent cd910e3
commit 725d39d
Show file tree

Hide file tree

Showing 22 changed files with 613 additions and 627 deletions.
diff --git a/css/_connection-info.scss b/css/_connection-info.scss
@@ -1,8 +1,7 @@
 %connection-info {
-    text-align: left;
     font-size: 12px;
     font-weight: 400;
-    color: $popoverFontColor;
+    color: $modalTextColor;
 
     td {
         padding: 2px 0;
@@ -11,11 +10,14 @@
 
 .connection-info
 {
-    float: left;
-    padding: 5px;
-    padding-left: 0;
     @extend %connection-info;
 
+    /**
+     * Apply negative margin to reduce the appearance of padding in AtlasKit
+     * InlineDialog.
+     */
+    margin: -15px;
+
     > table {
         white-space: nowrap;
         @extend %connection-info;
@@ -40,4 +42,11 @@
         @extend .connection-info__icon;
         color: $uploadConnectionIconColor;
     }
+
+    .showmore {
+        display: block;
+        margin: 10px auto;
+        text-align: center;
+        width: 90px;
+    }
 }
diff --git a/css/_jitsi_popover.scss b/css/_jitsi_popover.scss
diff --git a/css/_popup_menu.scss b/css/_popup_menu.scss
@@ -3,37 +3,31 @@
 **/
 
 .popupmenu {
+    text-align: left;
     padding: 0;
-    margin: 2px 0;
-    bottom: 0;
-    height: auto;
-
-    &:first-child {
-        margin-top: 2px;
-    }
+    white-space: nowrap;
 
     &__item {
         list-style-type: none;
-        text-align: left;
         height: 35px;
 
         &:hover {
-            background-color: $popupMenuSelectedItemBackground;
+            background-color: rgba(9, 30, 66, 0.04);
         }
     }
 
     // Link Appearance
     &__link,
     &__contents {
+        color: $modalTextColor;
         display: block;
         box-sizing: border-box;
         text-decoration: none;
-        color: #fff;
-        padding: 5px;
         height: 100%;
         font-size: 9pt;
         width: 100%;
-        cursor: hand;
+        cursor: pointer;
+        padding: 0 5px;
 
         &.disabled {
             color: gray !important;
@@ -46,6 +40,12 @@
         vertical-align: middle;
     }
 
+    &__link {
+        i {
+            cursor: pointer;
+        }
+    }
+
     &__contents {
         display: flex;
 
@@ -73,7 +73,6 @@
         display: inline-block;
         min-width: 20px;
         height: 100%;
-        text-align: center;
 
         > * {
             @include absoluteAligning();
@@ -85,6 +84,15 @@
     }
 }
 
+/**
+ * Override reset css styling modifying all lists and set negative margin to
+ * reduce the visibility of padding on AtlasKit
+ * InlineDialogs.
+ */
+ul.popupmenu {
+    margin: -15px;
+}
+
 span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
     display:block !important;
 }

diff --git a/css/_variables.scss b/css/_variables.scss
@@ -112,7 +112,6 @@ $tooltipsZ: 401;
 $dropdownMaskZ: 900;
 $dropdownZ: 901;
 $centeredVideoLabelZ: 1010;
-$jitsipopoverZ: 1012;
 $popoverZ: 1015;
 $overlayZ: 1016;
 

diff --git a/css/_vertical_filmstrip_overrides.scss b/css/_vertical_filmstrip_overrides.scss
@@ -8,6 +8,14 @@
         display: flex;
         flex-direction: column-reverse;
         height: 100%;
+        /**
+         * fixed positioning is necessary for remote menus and tooltips to pop
+         * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
+         * a library called popper which will position its elements fixed if
+         * any parent is also fixed.
+         */
+        position: fixed;
+        z-index: $tooltipsZ;
 
         /**
          * Hide videos by making them slight to the right.
@@ -60,13 +68,16 @@
          * Move the remote video menu trigger to the bottom left of the
          * video thumbnail.
          */
-        .remotevideomenu {
+        .remotevideomenu,
+        .remote-video-menu-trigger {
             bottom: 0;
             left: 0;
             top: auto;
             right: auto;
+        }
+
+        .remote-video-menu-trigger {
             margin-bottom: 7px;
-            transform: translate3d(0,0,0);
         }
 
         #remoteVideos {
@@ -75,11 +86,6 @@
         }
 
         .videocontainer {
-            &__toolbar,
-            &__toptoolbar {
-                transform: translate3d(0,0,0);
-            }
-
             /**
              * Move status icons to the bottom right of the thumbnail.
              */
@@ -159,4 +165,17 @@
             transition-delay: 0.1s;
         }
     }
+
+    /**
+     * Apply hardware acceleration to prevent flickering on scroll. The
+     * selectors are specific to icon wrappers to prevent fixed position dialogs
+     * and tooltips from getting a new location context due to translate3d.
+     */
+    .connection-indicator,
+    .remote-video-menu-trigger,
+    .videocontainer__toolbar,
+    .raisehandindicator,
+    #dominantspeakerindicator {
+        transform: translate3d(0, 0, 0);
+    }
 }
diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
@@ -48,15 +48,30 @@
 
     &__toolbar {
         bottom: 0;
-        padding: 0 5px 0 5px;
         height: $thumbnailToolbarHeight;
+        padding: 0 5px 0 5px;
     }
 
     &__toptoolbar {
-        $toolbarPadding: 5px;
+        $toolbarIconMargin: 5px;
         top: 0;
-        padding: $toolbarPadding;
         padding-bottom: 0;
+        /**
+         * Override text-align center as icons need to be left justified.
+         */
+        text-align: left;
+
+        /**
+         * Intentionally use margin on the icon itself as AtlasKit InlineDialog
+         * positioning depends on the trigger (indicator icon).
+         */
+        .indicator {
+            margin-top: $toolbarIconMargin;
+        }
+
+        .indicator:nth-child(1) {
+            margin-left: $toolbarIconMargin;
+        }
 
         .connection-indicator,
         span.indicator {
@@ -71,14 +86,22 @@
             }
         }
 
+        .connection-indicator-container {
+            display: inline-block;
+            vertical-align: top;
+
+            .popover-trigger {
+                display: inline-block;
+            }
+        }
+
         .connection-indicator,
         span.indicator {
             position: relative;
             font-size: 8px;
             text-align: center;
             line-height: $thumbnailIndicatorSize;
             padding: 0;
-            float: left;
             @include circle($thumbnailIndicatorSize);
             box-sizing: border-box;
             z-index: $zindex3;
@@ -124,6 +147,7 @@
 
             .icon-connection,
             .icon-connection-lost {
+                cursor: pointer;
                 font-size: 1em;
             }
         }
@@ -309,13 +333,13 @@
   background: $connectionIndicatorBg;
 }
 
+.remote-video-menu-trigger,
 .remotevideomenu
 {
     display: inline-block;
     position: absolute;
     top: 0px;
     right: 0;
-    margin-top: 7px;
     z-index: $zindex3;
     width: 18px;
     height: 13px;
@@ -326,6 +350,9 @@
         cursor: hand;
     }
 }
+.remote-video-menu-trigger {
+    margin-top: 7px;
+}
 
 /**
  * Audio indicator on video thumbnails.

diff --git a/css/main.scss b/css/main.scss
@@ -50,7 +50,6 @@
 @import 'recording';
 @import 'login_menu';
 @import 'popover';
-@import 'jitsi_popover';
 @import 'contact_list';
 @import 'chat';
 @import 'ringing/ringing';