From e58e9d3a26100bafb45c279fd07c3b47b2de4346 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 8 Nov 2019 15:31:29 -0800
Subject: [PATCH] Fix Plot Legend placement (#2527)

* Push test

* Enhance plot legend placement for #2486

- Left and right legends now maintain position when expanded;

* Update index.html

- Remove erroneously committed temp change ;
---
 src/styles/_constants.scss    |  2 ++
 src/styles/_legacy-plots.scss | 30 ++++++++++++++++++------------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/styles/_constants.scss b/src/styles/_constants.scss
index d537f50e94..20eec41ea5 100644
--- a/src/styles/_constants.scss
+++ b/src/styles/_constants.scss
@@ -58,6 +58,8 @@ $plotYLabelMinH: 20px;
 $plotYLabelW: 10px;
 $plotXBarH: 35px;
 $plotLegendH: 20px;
+$plotLegendWidthCollapsed: 20%;
+$plotLegendWidthExpanded: 50%;
 $plotSwatchD: 8px;
 $plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
 $plotMinH: 95px;
diff --git a/src/styles/_legacy-plots.scss b/src/styles/_legacy-plots.scss
index e0c7f83d7f..5962b66e76 100644
--- a/src/styles/_legacy-plots.scss
+++ b/src/styles/_legacy-plots.scss
@@ -78,7 +78,6 @@ mct-plot {
 
     /*********************** AXIS AND DISPLAY AREA */
     .plot-wrapper-axis-and-display-area {
-        margin-top: $interiorMargin; // Keep the top tick label from getting clipped
         position: relative;
         flex: 1 1 auto;
 
@@ -460,13 +459,14 @@ mct-plot {
     &.plot-legend-collapsed .icon-cursor-lock::before { padding-right: 5px; }
     &.plot-legend-expanded .icon-cursor-lock::before { padding-right: 5px; }
 
+    &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
+    &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
+    &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
+    &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
+
     /***************** GENERAL STYLES, COLLAPSED */
     &.plot-legend-collapsed {
         // .plot-legend-item is a span of spans.
-        &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
-        &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
-        &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
-        &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
 
         .plot-legend-item {
             display: flex;
@@ -494,7 +494,7 @@ mct-plot {
     /***************** GENERAL STYLES, EXPANDED */
     &.plot-legend-expanded {
         .gl-plot-legend {
-            max-height: 70%;
+            // max-height: 70%;
         }
 
         .plot-wrapper-expanded-legend {
@@ -518,21 +518,27 @@ mct-plot {
         }
     }
 
-    /***************** EITHER SIDE */
+    /***************** LEFT OR RIGHT */
     &.plot-legend-left,
     &.plot-legend-right {
-        // If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
+        // General styles when legend is on left or right
+        .gl-plot-legend {
+            max-height: inherit;
+        }
+
         &.plot-legend-expanded {
             // EXPANDED, ON EITHER SIDE
-            flex-direction: column;
+            .gl-plot-legend {
+                width: $plotLegendWidthExpanded;
+            }
         }
 
         &.plot-legend-collapsed {
             // COLLAPSED, ON EITHER SIDE
             .gl-plot-legend {
-                max-height: inherit;
-                width: 25%;
+                width: $plotLegendWidthCollapsed;
             }
+
             .plot-wrapper-collapsed-legend {
                 display: flex;
                 flex-flow: column nowrap;
@@ -557,7 +563,7 @@ mct-plot {
     }
 
     /***************** ON BOTTOM OR RIGHT */
-    &.plot-legend-right:not(.plot-legend-expanded),
+    &.plot-legend-right,
     &.plot-legend-bottom {
         .gl-plot-legend {
             order: 2;