opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-03 03:13:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11140 from grafana/11131_right_legend_responsive

Browse Source 
added media breakpoint to legend-right
This commit is contained in:
Daniel Lee
2018-03-23 12:49:35 +01:00
committed by GitHub
parent 09df38d9f4 4f38d237cb
commit 78d314a9c1
2 changed files with 23 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/plugins/panel/graph/legend.ts
View File

@ -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) {
@ -111,6 +112,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
}
function render() {
let legendWidth = elem.width();
if (!ctrl.panel.legend.show) {
elem.empty();
firstRender = true;
@ -163,7 +165,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 !== legendRightDefaultWidth)) {
renderLegendElement(tableHeaderElem);
elem.empty();
}
@ -227,6 +229,8 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
}
function renderLegendElement(tableHeaderElem) {
let legendWidth = elem.width();
var seriesElements = renderSeriesLegendElements();
if (panel.legend.alignAsTable) {
@ -238,7 +242,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
elem.append(seriesElements);
}
if (!panel.legend.rightSide) {
if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
addScrollbar();
} else {
destroyScrollbar();
@ -263,6 +267,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
function destroyScrollbar() {
if (legendScrollbar) {
legendScrollbar.destroy();
legendScrollbar = undefined;
}
}
},

30
public/sass/components/_panel_graph.scss
View File

@ -4,24 +4,26 @@
height: 100%;
&--legend-right {
flex-direction: row;
@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 {
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;
}
}
}
}