IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-08 23:23:45 -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
Show Stats 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(seriesElements);
elem.append(tbodyElem);
tbodyElem.wrap('<div class="graph-legend-content"></div>');
} 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)) {
@ -258,25 +260,16 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
</div>
`;
let scrollRoot = elem.parent();
// let scroller = elem.find(':first-child').first();
let scroller = elem;
let scrollRoot = elem;
let scroller = elem.find('.graph-legend-content');
// clear existing scroll bar track to prevent duplication
elem
.parent()
.find('.baron__track')
.remove();
scrollRoot.find('.baron__track').remove();
scrollRoot.addClass(scrollRootClass);
$(scrollBarHTML).appendTo(scrollRoot);
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 = {
root: scrollRoot[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>
<div class="graph-legend">
<div class="graph-legend-content" graph-legend></div>
</div>
<div class="graph-legend" graph-legend></div>
</div>
`;

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

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