Skip to content

N
nexpie-grafana-theme
Commit 789363b0 by Torkel Ödegaard
Options

Added ghost panel that shows up empty rows, this panel will show add panel… 

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
parent e6918c4b
Showing with 57 additions and 57 deletions
src/app/features/dashboard/rowCtrl.js
...@@ -38,11 +38,6 @@ function (angular, app, _, config) { ...@@ -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.add_panel = function(panel) {
$scope.dashboard.add_panel(panel, $scope.row); $scope.dashboard.add_panel(panel, $scope.row);
}; };
...@@ -92,6 +87,10 @@ function (angular, app, _, config) { ...@@ -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) { $scope.replacePanel = function(newPanel, oldPanel) {
var row = $scope.row; var row = $scope.row;
var index = _.indexOf(row.panels, oldPanel); var index = _.indexOf(row.panels, oldPanel);
...@@ -144,9 +143,11 @@ function (angular, app, _, config) { ...@@ -144,9 +143,11 @@ function (angular, app, _, config) {
module.directive('panelWidth', function() { module.directive('panelWidth', function() {
return function(scope, element) { return function(scope, element) {
scope.$watch('panel.span', function() { function updateWidth() {
element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%'; element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%';
}); }
scope.$watch('panel.span', updateWidth);
}; };
}); });
...@@ -168,11 +169,21 @@ function (angular, app, _, config) { ...@@ -168,11 +169,21 @@ function (angular, app, _, config) {
}; };
}); });
module.directive('panelGhostPanel', function() { module.directive('panelGhost', function() {
return function(scope, element) { return function(scope, element) {
var dropZoneSpan = 12 - scope.dashboard.rowSpan(scope.row); function updateWidth() {
element.find('.panel-container').css('height', scope.row.height); var spanLeft = 12 - scope.dashboard.rowSpan(scope.row);
element[0].style.width = ((dropZoneSpan / 1.2) * 10) + '%'; 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);
}; };
}); });
......
src/app/features/panel/panelMenu.js
...@@ -20,8 +20,8 @@ function (angular, $, _) { ...@@ -20,8 +20,8 @@ function (angular, $, _) {
var template = '<div class="panel-menu small">'; var template = '<div class="panel-menu small">';
template += '<div class="panel-menu-inner">'; template += '<div class="panel-menu-inner">';
template += '<div class="panel-menu-row">'; 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(-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-plus"></i></a>';
template += '<a class="panel-menu-icon pull-right" ng-click="removePanel(panel)"><i class="fa fa-remove"></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 class="clearfix"></div>';
template += '</div>'; template += '</div>';
......
src/app/features/panel/panelSrv.js
...@@ -40,8 +40,7 @@ function (angular, _, config) { ...@@ -40,8 +40,7 @@ function (angular, _, config) {
}; };
$scope.updateColumnSpan = function(span) { $scope.updateColumnSpan = function(span) {
$scope.panel.span = Math.min(Math.max($scope.panel.span + span, 1), 12); $scope.updatePanelSpan($scope.panel, span);
$scope.row.updatePanelSpan()
$timeout(function() { $timeout(function() {
$scope.$broadcast('render'); $scope.$broadcast('render');
......
src/app/partials/dashboard.html
...@@ -86,14 +86,20 @@ ...@@ -86,14 +86,20 @@
<panel-loader type="panel.type" class="panel-margin"></panel-loader> <panel-loader type="panel.type" class="panel-margin"></panel-loader>
</div> </div>
<div panel-drop-zone class="panel panel-drop-zone" <div class="panel panel-ghost" ng-if="!row.panels.length">
ui-on-drop="onDrop($data, row)" <div class="panel-container panel-margin">
data-drop="true"> <div class="panel-ghost-list" ng-repeat="(key, value) in panels">
<div class="panel-container" style="background: transparent"> <button class="btn btn-inverse" ng-click="add_panel_default(key)"><i class="fa fa-plus"></i> {{value.name}}</button>
<div style="text-align: center"> </div>
<em>Drop here</em> </div>
</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>
<div class="clearfix"></div> <div class="clearfix"></div>
......
src/app/partials/roweditor.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
</div> </div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;"> <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>
</div> </div>
...@@ -26,29 +26,5 @@ ...@@ -26,29 +26,5 @@
<editor-opt-bool text="Editable" model="row.editable"></editor-opt-bool> <editor-opt-bool text="Editable" model="row.editable"></editor-opt-bool>
<editor-opt-bool text="Show title" model="row.showTitle"></editor-opt-bool> <editor-opt-bool text="Show title" model="row.showTitle"></editor-opt-bool>
</div> </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> </div>
src/css/less/panel.less
...@@ -169,15 +169,23 @@ ...@@ -169,15 +169,23 @@
} }
} }
.ghost-panel { .panel-ghost{
&:hover { width: 100%;
.panel-container {
visibility: visible;
}
}
.panel-container { .panel-container {
visibility: hidden; border: none;
border: 1px solid @grayDark; background: transparent;
}
.panel-ghost-list {
margin: 10px 0 10px 20px;
}
button {
text-align: left;
min-width: 135px;
.fa {
position: relative;
left: -5px;
}
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment