mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Added ghost panel that shows up empty rows, this panel will show add panel buttons to more quickly/easier get to add a panel, #1635
This commit is contained in:
parent
e6918c4b99
commit
789363b0ad
@ -38,11 +38,6 @@ function (angular, app, _, config) {
|
||||
}
|
||||
};
|
||||
|
||||
// This can be overridden by individual panels
|
||||
$scope.close_edit = function() {
|
||||
$scope.$broadcast('render');
|
||||
};
|
||||
|
||||
$scope.add_panel = function(panel) {
|
||||
$scope.dashboard.add_panel(panel, $scope.row);
|
||||
};
|
||||
@ -92,6 +87,10 @@ function (angular, app, _, config) {
|
||||
});
|
||||
};
|
||||
|
||||
$scope.updatePanelSpan = function(panel, span) {
|
||||
panel.span = Math.min(Math.max(panel.span + span, 1), 12);
|
||||
};
|
||||
|
||||
$scope.replacePanel = function(newPanel, oldPanel) {
|
||||
var row = $scope.row;
|
||||
var index = _.indexOf(row.panels, oldPanel);
|
||||
@ -144,9 +143,11 @@ function (angular, app, _, config) {
|
||||
|
||||
module.directive('panelWidth', function() {
|
||||
return function(scope, element) {
|
||||
scope.$watch('panel.span', function() {
|
||||
function updateWidth() {
|
||||
element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%';
|
||||
});
|
||||
}
|
||||
|
||||
scope.$watch('panel.span', updateWidth);
|
||||
};
|
||||
});
|
||||
|
||||
@ -168,11 +169,21 @@ function (angular, app, _, config) {
|
||||
};
|
||||
});
|
||||
|
||||
module.directive('panelGhostPanel', function() {
|
||||
module.directive('panelGhost', function() {
|
||||
return function(scope, element) {
|
||||
var dropZoneSpan = 12 - scope.dashboard.rowSpan(scope.row);
|
||||
element.find('.panel-container').css('height', scope.row.height);
|
||||
element[0].style.width = ((dropZoneSpan / 1.2) * 10) + '%';
|
||||
function updateWidth() {
|
||||
var spanLeft = 12 - scope.dashboard.rowSpan(scope.row);
|
||||
if (spanLeft > 1) {
|
||||
element.show();
|
||||
element.find('.panel-container').css('height', scope.row.height);
|
||||
element[0].style.width = ((spanLeft / 1.2) * 10) + '%';
|
||||
} else {
|
||||
element.hide();
|
||||
}
|
||||
}
|
||||
|
||||
updateWidth();
|
||||
scope.$on('dashboard-panel-span-updated', updateWidth);
|
||||
};
|
||||
});
|
||||
|
||||
|
@ -20,8 +20,8 @@ function (angular, $, _) {
|
||||
var template = '<div class="panel-menu small">';
|
||||
template += '<div class="panel-menu-inner">';
|
||||
template += '<div class="panel-menu-row">';
|
||||
template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(panel,-1)"><i class="fa fa-minus"></i></a>';
|
||||
template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(panel,1)"><i class="fa fa-plus"></i></a>';
|
||||
template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(-1)"><i class="fa fa-minus"></i></a>';
|
||||
template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(1)"><i class="fa fa-plus"></i></a>';
|
||||
template += '<a class="panel-menu-icon pull-right" ng-click="removePanel(panel)"><i class="fa fa-remove"></i></a>';
|
||||
template += '<div class="clearfix"></div>';
|
||||
template += '</div>';
|
||||
|
@ -40,8 +40,7 @@ function (angular, _, config) {
|
||||
};
|
||||
|
||||
$scope.updateColumnSpan = function(span) {
|
||||
$scope.panel.span = Math.min(Math.max($scope.panel.span + span, 1), 12);
|
||||
$scope.row.updatePanelSpan()
|
||||
$scope.updatePanelSpan($scope.panel, span);
|
||||
|
||||
$timeout(function() {
|
||||
$scope.$broadcast('render');
|
||||
|
@ -86,14 +86,20 @@
|
||||
<panel-loader type="panel.type" class="panel-margin"></panel-loader>
|
||||
</div>
|
||||
|
||||
<div panel-drop-zone class="panel panel-drop-zone"
|
||||
ui-on-drop="onDrop($data, row)"
|
||||
data-drop="true">
|
||||
<div class="panel-container" style="background: transparent">
|
||||
<div style="text-align: center">
|
||||
<em>Drop here</em>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-ghost" ng-if="!row.panels.length">
|
||||
<div class="panel-container panel-margin">
|
||||
<div class="panel-ghost-list" ng-repeat="(key, value) in panels">
|
||||
<button class="btn btn-inverse" ng-click="add_panel_default(key)"><i class="fa fa-plus"></i> {{value.name}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="onDrop($data, row)" data-drop="true">
|
||||
<div class="panel-container" style="background: transparent">
|
||||
<div style="text-align: center">
|
||||
<em>Drop here</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
|
||||
<div ng-repeat="tab in ['General','Panels']" data-title="{{tab}}">
|
||||
<div ng-repeat="tab in ['General']" data-title="{{tab}}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -26,29 +26,5 @@
|
||||
<editor-opt-bool text="Editable" model="row.editable"></editor-opt-bool>
|
||||
<editor-opt-bool text="Show title" model="row.showTitle"></editor-opt-bool>
|
||||
</div>
|
||||
<div class="row-fluid" ng-if="editor.index == 1">
|
||||
<div class="span12">
|
||||
<table class="grafana-options-table" style="max-width: 400px; width: auto">
|
||||
<thead>
|
||||
<th>Title</th>
|
||||
<th>Type</th>
|
||||
<th>Span</span></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</thead>
|
||||
<tr ng-repeat="panel in row.panels">
|
||||
<td style="width: 95%">{{panel.title}}</td>
|
||||
<td>{{panel.type}}</td>
|
||||
<td><select ng-hide="panel.sizeable == false" class="input-mini" style="margin-bottom: 0;" ng-model="panel.span" ng-options="size for size in [1,2,3,4,5,6,7,8,9,10,11,12]"></select></td>
|
||||
<td><i ng-click="_.move(row.panels,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
|
||||
<td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
|
||||
<td>
|
||||
<a ng-click="row.panels = _.without(row.panels,panel)" class="btn btn-danger btn-small">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
@ -169,15 +169,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ghost-panel {
|
||||
&:hover {
|
||||
.panel-container {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.panel-ghost{
|
||||
width: 100%;
|
||||
.panel-container {
|
||||
visibility: hidden;
|
||||
border: 1px solid @grayDark;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
.panel-ghost-list {
|
||||
margin: 10px 0 10px 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
text-align: left;
|
||||
min-width: 135px;
|
||||
.fa {
|
||||
position: relative;
|
||||
left: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user