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

updates to dashboard edit mode

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-10-28 16:26:53 +02:00
parent 30789308d7
commit be99c3e20a
6 changed files with 59 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/features/dashboard/model.ts
View File

@ -187,11 +187,11 @@ export class DashboardModel {
return;
}
var visableTemplates = _.filter(this.templating.list, function(template) {
return template.hideVariable === undefined || template.hideVariable === false;
var visibleVars = _.filter(this.templating.list, function(template) {
return template.hide !== 2;
});
this.meta.submenuEnabled = visableTemplates.length > 0 || this.annotations.list.length > 0 || this.links.length > 0;
this.meta.submenuEnabled = visibleVars.length > 0 || this.annotations.list.length > 0 || this.links.length > 0;
}
getPanelInfoById(panelId) {

15
public/app/features/dashboard/row/row.html
View File

@ -1,4 +1,4 @@
<div class="dash-row-header" ng-if="ctrl.dashboard.editMode || ctrl.row.showTitle">
<div class="dash-row-header">
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
<span class="dash-row-collapse-toggle pointer">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
@ -11,12 +11,19 @@
</div>
<div class="dash-row-header-actions">
<a class="pointer" ng-click="ctrl.showAddPanel()">Add Panel <i class="fa fa-plus"></i></a>
<a class="pointer" ng-click="ctrl.showRowOptions()">Row Options <i class="fa fa-cog"></i></a>
<a class="pointer dash-row-header-action-add-panel" ng-click="ctrl.showAddPanel()">
Add Panel
<i class="fa fa-plus" ng-hide="ctrl.dropView===1"></i>
<i class="fa fa-remove" ng-show="ctrl.dropView===1"></i>
</a>
<a class="pointer dash-row-header-action-show-options" ng-click="ctrl.showRowOptions()">
Row Options
<i class="fa fa-cog" ng-hide="ctrl.dropView===2"></i>
<i class="fa fa-remove" ng-show="ctrl.dropView===2"></i>
</a>
</div>
</div>
<div ng-if="ctrl.dropView === 1">
<dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel>
</div>

23
public/app/features/dashboard/row/row.ts
View File

@ -104,8 +104,11 @@ export function rowDirective($rootScope) {
row: "=",
},
link: function(scope, element) {
scope.$watchGroup(['ctrl.row.collapse', 'ctrl.row.height'], function() {
scope.$watchGroup(['ctrl.row.collapse', 'ctrl.row.height', 'ctrl.row.showTitle', 'ctrl.dropView'], function() {
element.css({minHeight: scope.ctrl.row.collapse ? '5px' : scope.ctrl.row.height});
element.toggleClass('dash-row-show-title', scope.ctrl.row.showTitle === true);
element.toggleClass('dash-row-show-options', scope.ctrl.dropView === 2);
element.toggleClass('dash-row-show-add-panel', scope.ctrl.dropView === 1);
});
$rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
@ -184,21 +187,3 @@ coreModule.directive('panelDropZone', function($timeout) {
};
});
coreModule.directive('rowHeight', function() {
return function(scope, element) {
scope.$watchGroup(['row.collapse', 'row.height'], function() {
element.css({ minHeight: scope.row.collapse ? '5px' : scope.row.height });
});
scope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
var hasPanel = _.find(scope.row.panels, {id: info.panelId});
if (!hasPanel) {
element.hide();
}
});
scope.onAppEvent('panel-fullscreen-exit', function() {
element.show();
});
};
});

2
public/app/features/templating/editor_ctrl.ts
View File

@ -146,7 +146,7 @@ export class VariableEditorCtrl {
$scope.removeVariable = function(variable) {
var index = _.indexOf($scope.variables, variable);
$scope.variables.splice(index, 1);
$scope.updateSubmenuVisibility();
$scope.dashboard.updateSubmenuVisibility();
};
}
}

4
public/app/partials/dashboard.html
View File

@ -10,11 +10,11 @@
<div class="clearfix"></div>
<dash-row class="dash-row" ng-repeat="row in dashboard.rows" row="row" dashboard="dashboard" row-height>
<dash-row class="dash-row" ng-repeat="row in dashboard.rows" row="row" dashboard="dashboard">
</dash-row>
</div>
<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboard.meta.fullscreen">
<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint">
<div class="span12" style="text-align:right;">
<span style="margin-right: 10px;" ng-click="addRowDefault()" class="pointer btn btn-secondary btn-small">
<span><i class="fa fa-plus"></i> ADD ROW</span>

48
public/sass/pages/_dashboard.scss
View File

@ -57,6 +57,10 @@ div.flot-text {
}
}
.add-row-panel-hint {
display: none;
}
.panel-content {
padding: 0px 10px 5px 10px;
}
@ -212,6 +216,7 @@ div.flot-text {
.dash-row-header {
position: relative;
display: flex;
display: none;
flex-direction: row;
margin-right: $panel-margin;
margin-left: 0;
@ -222,9 +227,9 @@ div.flot-text {
}
}
.h1 { font-size: 3rem; font-style: normal; }
.h2 { font-size: 2.5rem; }
.h3 { font-size: 2rem; }
.h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem }
.h2 { font-size: 2.4rem; line-height: 3.5rem; }
.h3 { font-size: 2.0rem; line-height: 3rem;}
.h4 { font-size: 1.7rem; }
.h5 { font-size: 1.4rem; }
.h6 { font-size: 1rem }
@ -265,6 +270,30 @@ div.flot-text {
}
}
.dash-row-show-options {
.dash-row-header-actions {
display: block;
}
.dash-row-header-action-show-options {
color: $link-color;
}
}
.dash-row-show-add-panel {
.dash-row-header-actions {
display: block;
}
.dash-row-header-action--add-panel {
color: $link-color;
}
}
.dash-row-show-title {
.dash-row-header {
display: block;
}
}
.dash-row-header-add-panel {
padding: 0.7rem;
i {
@ -281,6 +310,9 @@ div.flot-text {
}
.dash-edit-mode {
.dash-row-header {
display: block;
}
.dash-row {
border-left: 1px solid $dark-4;
}
@ -290,6 +322,9 @@ div.flot-text {
.panels-wrapper {
margin-left: $panel-margin;
}
.add-row-panel-hint {
display: block;
}
}
.dash-row-options-close-btn {
@ -323,13 +358,6 @@ div.flot-text {
position: relative;
}
.dash-row-add-panel-form {
position: absolute;
width: 200px;
top: -34px;
left: 5px;
}
.add-panel-panels-scroll {
width: 100%;
overflow: hidden;