Merge pull request #1 from cchaos/flash1293-17488/legend-colorpicker-…

…overflow/design Position legend details against legend item
flash1293 · Feb 15, 2019 · 5e43e00 · 5e43e00
2 parents d606ba6 + 6822dbc
commit 5e43e00
Showing 1 changed file with 34 additions and 29 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,8 +2,9 @@
 
 // NOTE: Some of the styles attempt to align with the TSVB legend
 
-$colorPickerWidth: $euiSizeM * 10;
-$legendLineHeight: $euiSize;
+$visLegendWidth: 150px;
+$visColorPickerWidth: $euiSizeM * 10;
+$visLegendLineHeight: $euiSize;
 
 .visLegend__toggle {
   border-radius: $euiBorderRadius;
@@ -31,10 +32,9 @@ $legendLineHeight: $euiSize;
   display: flex;
   min-height: 0;
   height: 100%;
-  overflow: hidden;
 }
 
-.visLib--legend-left{
+.visLib--legend-left {
   .visLegend__list {
     margin-bottom: $euiSizeL;
   }
@@ -46,21 +46,32 @@ $legendLineHeight: $euiSize;
   }
 }
 
+/**
+ * 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: $legendLineHeight;
-  width: 150px; // Must be a hard-coded width for the chart to get its correct dimensions
+  display: flex;
+  line-height: $visvisLegendLineHeight;
+  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;
     }
   }
 
@@ -73,9 +84,11 @@ $legendLineHeight: $euiSize;
   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 {
@@ -84,21 +97,16 @@ $legendLineHeight: $euiSize;
 }
 
 .visLegend__valueTitle {
+  @include euiTextTruncate; // ALWAYS truncate
   color: $visTextColor;
 
   &:hover {
     text-decoration: underline;
   }
 }
 
-.visLegend__valueTitle--truncate {
-  @include euiTextTruncate;
-}
-
-.visLegend__valueTitle--full {
-  word-break: break-all;
-  overflow: hidden;
-  min-width: $colorPickerWidth;
+.visLegend__valueTitle--full ~ .visLegend__valueDetails {
+  z-index: 2; /* 3 */
 }
 
 .visLegend__valueDetails {
@@ -110,29 +118,26 @@ $legendLineHeight: $euiSize;
     border-bottom: 1px solid $euiColorLightShade;
   }
 
-
-  .visLib--legend-top & {
-    position: absolute;
-    margin-top: $euiSizeXS;
+  .visLib--legend-top &,
+  .visLib--legend-bottom & {
+    @include euiBottomShadowMedium;
+    position: absolute; /* 1 */
+    border-radius: $euiBorderRadius;
   }
 
   .visLib--legend-bottom & {
-    position: absolute;
-    margin-bottom: 2 * $euiSizeXS;
-    bottom: $legendLineHeight;
+    bottom: $visLegendLineHeight + $euiSizeXS;
   }
-
 }
 
 .visLegend__valueColorPicker {
-  $colorPickerDotsPerRow: 8;
-
-  width: $colorPickerWidth;
+  width: $visColorPickerWidth;
   margin: auto;
 
   .visLegend__valueColorPickerDot {
+    $colorPickerDotsPerRow: 8;
     $colorPickerDotMargin: $euiSizeXS / 2;
-    $colorPickerDotWidth: $colorPickerWidth / $colorPickerDotsPerRow - 2 * $colorPickerDotMargin;
+    $colorPickerDotWidth: $visColorPickerWidth / $colorPickerDotsPerRow - 2 * $colorPickerDotMargin;
 
     margin: $colorPickerDotMargin;
     width: $colorPickerDotWidth;