From 3c9f31a0bb502d8c2f6ad85a85cb9b39d88c54e4 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 7 Mar 2018 13:10:44 +0100 Subject: [PATCH 1/4] added media breakpoint to legend-right --- public/sass/components/_panel_graph.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 716778096d6..c00af05140a 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -4,7 +4,9 @@ height: 100%; &--legend-right { - flex-direction: row; + @include media-breakpoint-up(sm) { + flex-direction: row; + } .graph-legend { flex: 0 1 10px; From f2f709989fae4920deeb1006526cec1172db98d9 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 22 Mar 2018 09:41:05 +0100 Subject: [PATCH 2/4] fixed so legend right works like legend under on small screens --- public/app/plugins/panel/graph/legend.ts | 4 +++- public/sass/components/_panel_graph.scss | 8 ++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index 0c8852bf55a..7a9c75d4f1d 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -227,6 +227,8 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { } function renderLegendElement(tableHeaderElem) { + let legendWidth = elem.width(); + var seriesElements = renderSeriesLegendElements(); if (panel.legend.alignAsTable) { @@ -238,7 +240,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { elem.append(seriesElements); } - if (!panel.legend.rightSide) { + if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== 10)) { addScrollbar(); } else { destroyScrollbar(); diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index c00af05140a..48d88872074 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -6,11 +6,11 @@ &--legend-right { @include media-breakpoint-up(sm) { flex-direction: row; - } - .graph-legend { - flex: 0 1 10px; - max-height: 100%; + .graph-legend { + flex: 0 1 10px; + max-height: 100%; + } } .graph-legend-series { From 4916826364691ac5bd8332651c22c2f1d069e96c Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 22 Mar 2018 14:39:13 +0100 Subject: [PATCH 3/4] small screen legend right also work like legend under in render + set scrollbar to undefined in destroyScrollbar so it doesnt become disabled when toggeling between right and under --- public/app/plugins/panel/graph/legend.ts | 4 +++- public/sass/components/_panel_graph.scss | 20 ++++++++++---------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index 7a9c75d4f1d..8a7248fea7f 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -111,6 +111,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { } function render() { + let legendWidth = elem.width(); if (!ctrl.panel.legend.show) { elem.empty(); firstRender = true; @@ -163,7 +164,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { } // render first time for getting proper legend height - if (!panel.legend.rightSide) { + if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== 10)) { renderLegendElement(tableHeaderElem); elem.empty(); } @@ -265,6 +266,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { function destroyScrollbar() { if (legendScrollbar) { legendScrollbar.destroy(); + legendScrollbar = undefined; } } }, diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 48d88872074..e15cd576367 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -11,19 +11,19 @@ flex: 0 1 10px; max-height: 100%; } - } - .graph-legend-series { - display: block; - padding-left: 0px; - } + .graph-legend-series { + display: block; + padding-left: 0px; + } - .graph-legend-table { - width: auto; - } + .graph-legend-table { + width: auto; + } - .graph-legend-table .graph-legend-series { - display: table-row; + .graph-legend-table .graph-legend-series { + display: table-row; + } } } } From 4f38d237cb05b697c9231b501354e5c6c2fde151 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Fri, 23 Mar 2018 11:08:24 +0100 Subject: [PATCH 4/4] legend: small refactoring --- public/app/plugins/panel/graph/legend.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index 8a7248fea7f..d1186ae0b1e 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -15,6 +15,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { var seriesList; var i; var legendScrollbar; + const legendRightDefaultWidth = 10; scope.$on('$destroy', function() { if (legendScrollbar) { @@ -164,7 +165,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { } // render first time for getting proper legend height - if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== 10)) { + if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) { renderLegendElement(tableHeaderElem); elem.empty(); } @@ -241,7 +242,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { elem.append(seriesElements); } - if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== 10)) { + if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) { addScrollbar(); } else { destroyScrollbar();