Fix legend / color picker overflow (elastic#30960)

flash1293 · Feb 19, 2019 · 8ed07a7 · 8ed07a7
1 parent 02d6b59
commit 8ed07a7
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 24 deletions.
diff --git a/src/legacy/ui/public/vis/vis_types/_vislib_vis_legend.scss b/src/legacy/ui/public/vis/vis_types/_vislib_vis_legend.scss
@@ -2,6 +2,10 @@
 
 // NOTE: Some of the styles attempt to align with the TSVB legend
 
+$visLegendWidth: 150px;
+$visColorPickerWidth: $euiSizeM * 10;
+$visLegendLineHeight: $euiSize;
+
 .visLegend__toggle {
   border-radius: $euiBorderRadius;
   position: absolute;
@@ -28,10 +32,9 @@
   display: flex;
   min-height: 0;
   height: 100%;
-  overflow: hidden;
 }
 
-.visLib--legend-left{
+.visLib--legend-left {
   .visLegend__list {
     margin-bottom: $euiSizeL;
   }
@@ -43,21 +46,31 @@
   }
 }
 
+/**
+ * 1. Position the .visLegend__valueDetails absolutely against the legend item
+ * 2. Make sure the .visLegend__valueDetails is visible outside the list bounds
+ * 3. Make sure the currently selected item is top most in z level
+ */
 .visLegend__list {
   @include euiScrollBar;
-  line-height: $euiSize;
-  width: 150px; // Must be a hard-coded width for the chart to get its correct dimensions
+  display: flex;
+  line-height: $visLegendLineHeight;
+  width: $visLegendWidth; // Must be a hard-coded width for the chart to get its correct dimensions
   flex: 1 1 auto;
+  flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
 
   .visLib--legend-top &,
   .visLib--legend-bottom & {
     width: auto;
-    overflow-y: hidden;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow: visible; /* 2 */
 
     .visLegend__value {
-      display: inline-block;
+      flex-grow: 0;
+      max-width: $visLegendWidth;
     }
   }
 
@@ -70,9 +83,11 @@
   cursor: pointer;
   padding: $euiSizeXS;
   display: flex;
+  flex-shrink: 0;
+  position: relative; /* 1 */
 
   > * {
-    max-width: 100%;
+    max-width: 100%; // Needed for truncation (dom element has no class)
   }
 
   &.disabled {
@@ -81,32 +96,54 @@
 }
 
 .visLegend__valueTitle {
+  @include euiTextTruncate; // ALWAYS truncate
   color: $visTextColor;
 
   &:hover {
     text-decoration: underline;
   }
 }
 
-.visLegend__valueTitle--truncate {
-  @include euiTextTruncate;
-}
-
-.visLegend__valueTitle--full {
-  word-break: break-all;
+.visLegend__valueTitle--full ~ .visLegend__valueDetails {
+  z-index: 2; /* 3 */
 }
 
 .visLegend__valueDetails {
-  border-bottom: 1px solid $euiColorLightShade;
-  padding-bottom: $euiSizeXS;
+  background-color: $euiColorEmptyShade;
+
+  .visLib--legend-left &,
+  .visLib--legend-right & {
+    margin-top: $euiSizeXS;
+    border-bottom: $euiBorderThin;
+  }
+
+  .visLib--legend-top &,
+  .visLib--legend-bottom & {
+    @include euiBottomShadowMedium;
+    position: absolute; /* 1 */
+    border-radius: $euiBorderRadius;
+  }
+
+  .visLib--legend-bottom & {
+    bottom: $visLegendLineHeight + 2 * $euiSizeXS;
+  }
+
+  .visLib--legend-top & {
+    margin-top: $euiSizeXS;
+  }
 }
 
 .visLegend__valueColorPicker {
-  width: $euiSizeM * 10;
+  width: $visColorPickerWidth;
   margin: auto;
 
   .visLegend__valueColorPickerDot {
-    margin: $euiSizeXS / 2;
+    $colorPickerDotsPerRow: 8;
+    $colorPickerDotMargin: $euiSizeXS / 2;
+    $colorPickerDotWidth: $visColorPickerWidth / $colorPickerDotsPerRow - 2 * $colorPickerDotMargin;
+
+    margin: $colorPickerDotMargin;
+    width: $colorPickerDotWidth;
 
     &:hover {
       transform: scale(1.4);

diff --git a/src/legacy/ui/public/vis/vis_types/vislib_vis_legend.html b/src/legacy/ui/public/vis/vis_types/vislib_vis_legend.html
@@ -22,14 +22,14 @@
       class="visLegend__value color"
     >
 
-      <div ng-keydown="onLegendEntryKeydown($event, this)">
+      <div ng-keydown="onLegendEntryKeydown($event)">
         <div
           kbn-accessible-click
           data-label="{{legendData.label}}"
           ng-focus="highlight($event)"
           ng-blur="unhighlight($event)"
-          ng-click="showDetails = !showDetails"
-          ng-class="showDetails ? 'visLegend__valueTitle--full' : 'visLegend__valueTitle--truncate'"
+          ng-click="$parent.toggleDetails(legendData.label)"
+          ng-class="$parent.areDetailsVisible(legendData.label) ? 'visLegend__valueTitle--full' : 'visLegend__valueTitle--truncate'"
           class="visLegend__valueTitle"
           title="{{legendData.label}}"
           aria-label="{{::'common.ui.vis.visTypes.legend.toggleOptionsButtonAriaLabel' | i18n: { defaultMessage: '{legendDataLabel}, toggle options', values: { legendDataLabel: legendData.label } } }}"
@@ -43,7 +43,7 @@
           {{legendData.label}}
         </div>
 
-        <div ng-if="showDetails" class="visLegend__valueDetails">
+        <div ng-if="$parent.areDetailsVisible(legendData.label)" class="visLegend__valueDetails">
           <div
             class="kuiButtonGroup kuiButtonGroup--united kuiButtonGroup--fullWidth"
             ng-show="canFilter(legendData)"

diff --git a/src/legacy/ui/public/vis/vis_types/vislib_vis_legend.js b/src/legacy/ui/public/vis/vis_types/vislib_vis_legend.js
@@ -100,14 +100,22 @@ uiModules.get('kibana')
        * Keydown listener for a legend entry.
        * This will close the details panel of this legend entry when pressing Escape.
        */
-        $scope.onLegendEntryKeydown = function (event, scope) {
-          if (event.keyCode === keyCodes.ESCAPE && scope.showDetails) {
+        $scope.onLegendEntryKeydown = function (event) {
+          if (event.keyCode === keyCodes.ESCAPE) {
             event.preventDefault();
             event.stopPropagation();
-            scope.showDetails = false;
+            $scope.shownDetails = undefined;
           }
         };
 
+        $scope.toggleDetails = function (label) {
+          $scope.shownDetails = $scope.shownDetails === label ? undefined : label;
+        };
+
+        $scope.areDetailsVisible = function (label) {
+          return $scope.shownDetails === label;
+        };
+
         $scope.colors = [
           '#3F6833', '#967302', '#2F575E', '#99440A', '#58140C', '#052B51', '#511749', '#3F2B5B', //6
           '#508642', '#CCA300', '#447EBC', '#C15C17', '#890F02', '#0A437C', '#6D1F62', '#584477', //2