apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues 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
pull/1636/head
Torkel Ödegaard 10 years ago
parent e6918c4b99
commit 789363b0ad
6 changed files with 57 additions and 57 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 33
      src/app/features/dashboard/rowCtrl.js
  2. 4
      src/app/features/panel/panelMenu.js
  3. 3
      src/app/features/panel/panelSrv.js
  4. 22
      src/app/partials/dashboard.html
  5. 28
      src/app/partials/roweditor.html
  6. 24
      src/css/less/panel.less

33
src/app/features/dashboard/rowCtrl.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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;
}
}
}

Write Preview
Loading…
Cancel
Save