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) {
}
};
// 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);
};
});
......
src/app/features/panel/panelMenu.js
......@@ -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>';
......
src/app/features/panel/panelSrv.js
......@@ -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');
......
src/app/partials/dashboard.html
......@@ -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>
......
src/app/partials/roweditor.html
......@@ -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>
src/css/less/panel.less
......@@ -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;
}
}
}
......
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