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

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

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-03-24 21:10:44 +01:00
parent e6918c4b99
commit 789363b0ad
6 changed files with 57 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/features/dashboard/rowCtrl.js
View File

@ -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);
};
});

4
src/app/features/panel/panelMenu.js
View File

@ -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>';

3
src/app/features/panel/panelSrv.js
View File

@ -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');

22
src/app/partials/dashboard.html
View File

@ -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>

28
src/app/partials/roweditor.html
View File

@ -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>

24
src/css/less/panel.less
View File

@ -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;
}
}
}