IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

scrollbar: fix legend rendering issues

Browse Source
This commit is contained in:
Alexander Zobnin
2018-04-02 20:47:09 +03:00
parent 77d2ee9add
commit efaf267deb
3 changed files with 11 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -238,8 +238,10 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
tbodyElem.append(tableHeaderElem); tbodyElem.append(tableHeaderElem);
tbodyElem.append(seriesElements); tbodyElem.append(seriesElements);
elem.append(tbodyElem); elem.append(tbodyElem);
tbodyElem.wrap('<div class="graph-legend-content"></div>');
} else { } else {
elem.append(seriesElements); elem.append('<div class="graph-legend-content"></div>');
elem.find('.graph-legend-content').append(seriesElements);
} }
if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) { if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
@@ -258,25 +260,16 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
</div> </div>
`; `;
let scrollRoot = elem.parent(); let scrollRoot = elem;
// let scroller = elem.find(':first-child').first(); let scroller = elem.find('.graph-legend-content');
let scroller = elem;
// clear existing scroll bar track to prevent duplication // clear existing scroll bar track to prevent duplication
elem scrollRoot.find('.baron__track').remove();
.parent()
.find('.baron__track')
.remove();
scrollRoot.addClass(scrollRootClass); scrollRoot.addClass(scrollRootClass);
$(scrollBarHTML).appendTo(scrollRoot); $(scrollBarHTML).appendTo(scrollRoot);
scroller.addClass(scrollerClass); scroller.addClass(scrollerClass);
// Fix .graph-legend-content max-height
// Couldn't find how to do it via CSS
const legendHeight = scrollRoot.height();
elem.css('max-height', legendHeight);
let scrollbarParams = { let scrollbarParams = {
root: scrollRoot[0], root: scrollRoot[0],
scroller: scroller[0], scroller: scroller[0],

4
public/app/plugins/panel/graph/template.ts
View File

@@ -3,9 +3,7 @@ var template = `
<div class="graph-panel__chart" grafana-graph ng-dblclick="ctrl.zoomOut()"> <div class="graph-panel__chart" grafana-graph ng-dblclick="ctrl.zoomOut()">
</div> </div>
<div class="graph-legend"> <div class="graph-legend" graph-legend></div>
<div class="graph-legend-content" graph-legend></div>
</div>
</div> </div>
`; `;

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

@@ -53,9 +53,11 @@
max-height: 30%; max-height: 30%;
margin: 0; margin: 0;
text-align: center; text-align: center;
// padding-top: 6px; padding-top: 6px;
position: relative; position: relative;
height: 100%;
.popover-content { .popover-content {
padding: 0; padding: 0;
} }
@@ -63,7 +65,6 @@
.graph-legend-content { .graph-legend-content {
position: relative; position: relative;
padding-top: 6px;
} }
.graph-legend-icon { .graph-legend-icon {
@@ -129,9 +130,9 @@
.graph-legend-table { .graph-legend-table {
tbody { tbody {
display: block; display: block;
position: relative;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
height: 100%;
padding-bottom: 1px; padding-bottom: 1px;
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;