Skip to content

N
nexpie-grafana-theme
Commit be99c3e2 by Torkel Ödegaard
Options

updates to dashboard edit mode

parent 30789308
Showing with 59 additions and 39 deletions
public/app/features/dashboard/model.ts
...@@ -187,11 +187,11 @@ export class DashboardModel { ...@@ -187,11 +187,11 @@ export class DashboardModel {
return; return;
} }
var visableTemplates = _.filter(this.templating.list, function(template) { var visibleVars = _.filter(this.templating.list, function(template) {
return template.hideVariable === undefined || template.hideVariable === false; 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) { getPanelInfoById(panelId) {
......
public/app/features/dashboard/row/row.html
<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()"> <a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
<span class="dash-row-collapse-toggle pointer"> <span class="dash-row-collapse-toggle pointer">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i> <i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
...@@ -11,12 +11,19 @@ ...@@ -11,12 +11,19 @@
</div> </div>
<div class="dash-row-header-actions"> <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 dash-row-header-action-add-panel" ng-click="ctrl.showAddPanel()">
<a class="pointer" ng-click="ctrl.showRowOptions()">Row Options <i class="fa fa-cog"></i></a> 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> </div>
<div ng-if="ctrl.dropView === 1"> <div ng-if="ctrl.dropView === 1">
<dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel> <dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel>
</div> </div>
......
public/app/features/dashboard/row/row.ts
...@@ -104,8 +104,11 @@ export function rowDirective($rootScope) { ...@@ -104,8 +104,11 @@ export function rowDirective($rootScope) {
row: "=", row: "=",
}, },
link: function(scope, element) { 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.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) { $rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
...@@ -184,21 +187,3 @@ coreModule.directive('panelDropZone', function($timeout) { ...@@ -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();
});
};
});
public/app/features/templating/editor_ctrl.ts
...@@ -146,7 +146,7 @@ export class VariableEditorCtrl { ...@@ -146,7 +146,7 @@ export class VariableEditorCtrl {
$scope.removeVariable = function(variable) { $scope.removeVariable = function(variable) {
var index = _.indexOf($scope.variables, variable); var index = _.indexOf($scope.variables, variable);
$scope.variables.splice(index, 1); $scope.variables.splice(index, 1);
$scope.updateSubmenuVisibility(); $scope.dashboard.updateSubmenuVisibility();
}; };
} }
} }
......
public/app/partials/dashboard.html
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
<div class="clearfix"></div> <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> </dash-row>
</div> </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;"> <div class="span12" style="text-align:right;">
<span style="margin-right: 10px;" ng-click="addRowDefault()" class="pointer btn btn-secondary btn-small"> <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> <span><i class="fa fa-plus"></i> ADD ROW</span>
......
public/sass/pages/_dashboard.scss
...@@ -57,6 +57,10 @@ div.flot-text { ...@@ -57,6 +57,10 @@ div.flot-text {
} }
} }
.add-row-panel-hint {
display: none;
}
.panel-content { .panel-content {
padding: 0px 10px 5px 10px; padding: 0px 10px 5px 10px;
} }
...@@ -212,6 +216,7 @@ div.flot-text { ...@@ -212,6 +216,7 @@ div.flot-text {
.dash-row-header { .dash-row-header {
position: relative; position: relative;
display: flex; display: flex;
display: none;
flex-direction: row; flex-direction: row;
margin-right: $panel-margin; margin-right: $panel-margin;
margin-left: 0; margin-left: 0;
...@@ -222,9 +227,9 @@ div.flot-text { ...@@ -222,9 +227,9 @@ div.flot-text {
} }
} }
.h1 { font-size: 3rem; font-style: normal; } .h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem }
.h2 { font-size: 2.5rem; } .h2 { font-size: 2.4rem; line-height: 3.5rem; }
.h3 { font-size: 2rem; } .h3 { font-size: 2.0rem; line-height: 3rem;}
.h4 { font-size: 1.7rem; } .h4 { font-size: 1.7rem; }
.h5 { font-size: 1.4rem; } .h5 { font-size: 1.4rem; }
.h6 { font-size: 1rem } .h6 { font-size: 1rem }
...@@ -265,6 +270,30 @@ div.flot-text { ...@@ -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 { .dash-row-header-add-panel {
padding: 0.7rem; padding: 0.7rem;
i { i {
...@@ -281,6 +310,9 @@ div.flot-text { ...@@ -281,6 +310,9 @@ div.flot-text {
} }
.dash-edit-mode { .dash-edit-mode {
.dash-row-header {
display: block;
}
.dash-row { .dash-row {
border-left: 1px solid $dark-4; border-left: 1px solid $dark-4;
} }
...@@ -290,6 +322,9 @@ div.flot-text { ...@@ -290,6 +322,9 @@ div.flot-text {
.panels-wrapper { .panels-wrapper {
margin-left: $panel-margin; margin-left: $panel-margin;
} }
.add-row-panel-hint {
display: block;
}
} }
.dash-row-options-close-btn { .dash-row-options-close-btn {
...@@ -323,13 +358,6 @@ div.flot-text { ...@@ -323,13 +358,6 @@ div.flot-text {
position: relative; position: relative;
} }
.dash-row-add-panel-form {
position: absolute;
width: 200px;
top: -34px;
left: 5px;
}
.add-panel-panels-scroll { .add-panel-panels-scroll {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
......
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