mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
updates to dashboard edit mode
This commit is contained in:
parent
30789308d7
commit
be99c3e20a
@ -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) {
|
||||||
|
@ -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()">
|
<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 @@
|
|||||||
</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>
|
||||||
|
@ -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) {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
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();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
@ -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();
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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 {
|
|||||||
.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 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
|||||||
.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 {
|
|||||||
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;
|
||||||
|
Loading…
Reference in New Issue
Block a user