'Add panel' hinting in empty spaces

This commit is contained in:
Rashid Khan 2013-09-20 14:26:06 -07:00
parent d071f3cb4d
commit 79aa7e87bd
10 changed files with 60 additions and 27 deletions

View File

@ -20,7 +20,6 @@ function (angular, app, _) {
_.defaults($scope.row,_d);
$scope.init = function() {
$scope.querySrv = querySrv;
$scope.reset_panel();
@ -38,6 +37,12 @@ function (angular, app, _) {
}
};
$scope.rowSpan = function(row) {
return _.reduce(_.pluck(row.panels,'span'), function(p,v) {
return p+v;
},0);
};
// This can be overridden by individual panels
$scope.close_edit = function() {
$scope.$broadcast('render');
@ -48,9 +53,13 @@ function (angular, app, _) {
};
$scope.reset_panel = function(type) {
var
defaultSpan = 4,
_as = 12-$scope.rowSpan($scope.row);
$scope.panel = {
error : false,
span : 3,
span : _as < defaultSpan && _as > 0 ? _as : defaultSpan,
editable: true,
type : type
};

View File

@ -28,8 +28,8 @@ function (angular) {
'<span class="small strong">{{panel.type}}</span> ' +
'</span>' +
'<h4 ng-show="panel.title">' +
'{{panel.title}}' +
'<h4 ng-show="panel.title" style="margin:0px;">' +
'{{panel.title}}&nbsp' +
'<i class="icon-spinner smaller icon-spin icon-large"' +
'ng-show="panelMeta.loading == true && panel.title"></i>' +
'</h4>';

View File

@ -1,12 +1,32 @@
<div class="row-fluid container" style="margin-top:10px">
<style>
.row-panel-filler {
opacity: 0;
}
.row-panel-filler:hover {
opacity: 0.3;
}
.row-name {
}
</style>
<!-- Rows -->
<div class="row-fluid kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)">
<div class="row-control">
<div class="row-fluid row-header" style="padding:0px;margin:0px;height:0px">
<div ng-class="{'row-open': !row.collapse, 'row-close': row.collapse}" style="position:absolute;margin-left:-60px;">
<span ng-class='{pointer:row.collapsable}' ng-click="toggle_row(row)">{{row.title}}</span>
<i ng-show="row.editable" class="icon-cog pointer editlink" bs-modal="'app/partials/roweditor.html'"></i>
<div class="row-fluid" style="padding:0px;margin:0px;position:relative;">
<div class="row-close" ng-show="row.collapse">
<span bs-tooltip="'Show row'" data-placement="right" ng-class='{pointer:row.collapsable}' class="row-name label label-inverse" ng-click="toggle_row(row)">{{row.title || 'Row '+$index}}</span>
<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer editlink" bs-modal="'app/partials/roweditor.html'"></i>
<div class="clear"></div>
</div>
<div class="row-open" ng-show="!row.collapse">
<i bs-tooltip="'Hide row'" data-placement="right" ng-class='{pointer:row.collapsable}' class="icon-chevron-up" ng-click="toggle_row(row)"></i><br>
<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer editlink" bs-modal="'app/partials/roweditor.html'"></i>
</div>
</div>
<div class="row-fluid" style="padding-top:0px" ng-hide="row.collapse">
<!-- Panels -->
@ -23,6 +43,12 @@
<kibana-panel type="panel.type" ng-cloak></kibana-panel>
</div>
</div>
<div ng-hide="(12-rowSpan(row)) < 1 || !dashboard.current.panel_hints" ng-class="'span'+(12-rowSpan(row))" class="bordered row-panel-filler" style="height:{{row.height}}; position:relative; border: 1px dashed; border-radius: 10px;text-align:center;vertical-align:middle;">
<span class="pointer addLink" ng-click="editor.index=2" bs-modal="'app/partials/roweditor.html'">
Add a panel here<br>
<i style="font-size:20px" class="icon-plus-sign" ></i>
</span>
</div>
</div>
</div>
</div>

View File

@ -14,6 +14,9 @@
<div class="span1">
<label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable" ng-checked="dashboard.current.editable" />
</div>
<div class="span1">
<label class="small"> Hints <tip>Show 'Add panel' hints in empty spaces</tip></label><input type="checkbox" ng-model="dashboard.current.panel_hints" ng-checked="dashboard.current.panel_hints" />
</div>
<div class="span3">
<label class="small">Style</label><select class="input-small" ng-model="dashboard.current.style" ng-options="f for f in ['dark','light']"></select>
</div>

View File

@ -27,7 +27,7 @@
<thead>
<th>Title</th>
<th>Type</th>
<th>Span</th>
<th>Span <span class="small">({{rowSpan(row)}}/12)</span></th>
<th>Delete</th>
<th>Move</th>
<th></th>
@ -47,9 +47,12 @@
</div>
<div class="row-fluid" ng-show="editor.index == 2">
<h4>Select Panel Type</h4>
<form class="input-append">
<select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.panel_names|stringSort"></select>
<small ng-show="!panel.type">Select Type</small></form>
<form class="form-inline">
<select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.panel_names|stringSort"></select>
<small ng-show="rowSpan(row) > 11">
Note: This row is full, new panels will wrap to a new line. You should add another row.
</small>
</form>
<div ng-show="!(_.isUndefined(panel.type))">
<div add-panel="{{panel.type}}"></div>

View File

@ -23,6 +23,7 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
style: "dark",
editable: true,
failover: false,
panel_hints: true,
rows: [],
services: {},
loader: {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -43,12 +43,12 @@
.kibana-row {
margin-left: 15px;
margin-bottom: 15px;
margin-bottom: 10px;
}
.row-close {
color: #bbb;
position: absolute;
margin-left: -35px;
font-size: 9pt;
font-weight: 200;
padding-left: 35px;
@ -58,19 +58,10 @@
.row-open {
text-align: right;
color: #bbb;
margin-top:30px;
left:-30px;
position: absolute;
font-size: 13pt;
font-weight: 200;
-moz-transform-origin: 40px;
-ms-transform-origin: 40px;
-o-transform-origin: 40px;
-webkit-transform-origin: 40px;
transform-origin: 40px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.row-open i {

View File

@ -39,7 +39,7 @@
// Links
// -------------------------
@linkColor: #08c;
@linkColorHover: darken(@linkColor, 15%);
@linkColorHover: lighten(@linkColor, 15%);
// Typography