Merge pull request #6169 from stormpython/legend

Design Changes to Visualize Legend

src/plugins/kibana/public/discover/directives/timechart.js

@@ -17,7 +17,7 @@ uiModules
       const init = function () {
         // This elem should already have a height/width
         const myChart = new vislib.Chart(elem[0], {
-
+          addLegend: false
         });
 
         $scope.$watch('data', function (data) {

src/ui/public/vislib/styles/_legend.less

@@ -6,12 +6,19 @@ visualize-legend {
   flex-direction: row;
 }
 
+.legend-icon {
+  color: #BEBEBE;
+  font-size: 1.2em;
+  margin: 1px;
+}
+
 .legend-col-wrapper {
   .flex-parent(0, 0, auto);
-  flex-direction: row;
   z-index: 10;
   min-height: 0;
   overflow: hidden;
+  flex-direction: row;
+  padding-top: 5px;
 
   .header {
     cursor: pointer;
@@ -21,14 +28,10 @@ visualize-legend {
   .legend-toggle {
     &:hover {
       color: @sidebar-hover-color;
-      background-color: @sidebar-hover-bg;
     }
 
-    background-color: @sidebar-bg;
-    font-size: 10px;
-    height: 30px;
-    padding: 8px 3px;
-    border-bottom-left-radius: @border-radius-small;
+    padding-right: 5px;
+    font-size: 14px;
   }
 
   .column-labels {
@@ -36,7 +39,6 @@ visualize-legend {
   }
 
   .legend-ul {
-    border-left: 1px solid @sidebar-bg;
     width: 150px;
     flex: 1 1 auto;
     overflow-x: hidden;
@@ -116,5 +118,3 @@ visualize-legend {
 .legend-value:hover {
   cursor: pointer;
 }
-
-

src/ui/public/visualize/visualize.html

@@ -11,7 +11,7 @@
     ng-style="loadingStyle"
     ng-class="{ loading: vis.type.requiresSearch && searchSource.activeFetchCount > 0 }"
     class="visualize-chart"></div>
-  <visualize-legend></visualize-legend>
+  <visualize-legend ng-show="vis.params.addLegend"></visualize-legend>
 </div>
 <!-- <pre>{{chartData | json}}</pre> -->
 <visualize-spy ng-if="vis.type.requiresSearch && showSpyPanel"></visualize-spy>

src/ui/public/visualize/visualize_legend.html

@@ -1,6 +1,6 @@
 <div class="legend-col-wrapper" ng-if="labels.length">
   <div ng-click="toggleLegend()" class="legend-toggle">
-    <i class="fa" ng-class="open ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
+    <i class="legend-icon fa" ng-class="open ? 'fa-chevron-circle-right' : 'fa-chevron-circle-left'"></i>
   </div>
   <ul class="legend-ul" ng-show="open">
 
@@ -38,4 +38,4 @@
 
     </li>
   </ul>
-</div>
+</div>

test/functional/apps/discover/_collapse_expand.js

@@ -49,43 +49,6 @@ define(function (require) {
         .catch(common.handleError(this));
       });
 
-
-      bdd.describe('legend', function () {
-
-        bdd.it('should initially be collapsed', function () {
-          return discoverPage.getLegendWidth()
-          .then(function (actualwidth) {
-            common.debug('collapsed legend width = ' + actualwidth);
-            expect(actualwidth < 20).to.be(true);
-          })
-          .catch(common.handleError(this));
-        });
-
-        bdd.it('should expand when clicked', function () {
-          return discoverPage.clickLegendExpand()
-          .then(function () {
-            return discoverPage.getLegendWidth();
-          })
-          .then(function (actualwidth) {
-            common.debug('expanded legend width = ' + actualwidth);
-            expect(actualwidth > 140).to.be(true);
-          })
-          .catch(common.handleError(this));
-        });
-
-        bdd.it('should collapse when clicked', function () {
-          return discoverPage.clickLegendCollapse()
-          .then(function () {
-            return discoverPage.getLegendWidth();
-          })
-          .then(function (actualwidth) {
-            expect(actualwidth < 20).to.be(true);
-          })
-          .catch(common.handleError(this));
-        });
-
-      });
-
       bdd.describe('field data', function () {
 
         bdd.it('should initially be expanded', function () {

test/support/pages/discover_page.js

@@ -213,24 +213,6 @@ define(function (require) {
       .getProperty('value');
     },
 
-    clickLegendExpand: function clickLegendExpand() {
-      return thisTime
-      .findByCssSelector('.fa-chevron-left')
-      .click();
-    },
-
-    clickLegendCollapse: function clickLegendCollapse() {
-      return thisTime
-      .findByCssSelector('div.legend-toggle > i.fa-chevron-right')
-      .click();
-    },
-
-    getLegendWidth: function getLegendWidth() {
-      return thisTime
-      .findByCssSelector('.legend-col-wrapper')
-      .getProperty('clientWidth');
-    },
-
     clickSidebarExpand: function clickSidebarExpand() {
       return thisTime
       .findByCssSelector('.chevron-cont')