Skip to content

N
nexpie-grafana-theme
Commit 5f6ecac3 by Torkel Ödegaard
Options

poc(editmode): experimental edit mode

parent 49b2743a
Showing with 118 additions and 174 deletions
public/app/core/directives/dash_class.js
...@@ -20,17 +20,13 @@ function (_, $, coreModule) { ...@@ -20,17 +20,13 @@ function (_, $, coreModule) {
elem.toggleClass('panel-in-fullscreen', false); elem.toggleClass('panel-in-fullscreen', false);
}); });
$scope.$watch('dashboard.hideControls', function() { $scope.$watch('dashboard.editMode', function() {
if (!$scope.dashboard) { if (!$scope.dashboard) {
return; return;
} }
var hideControls = $scope.dashboard.hideControls || $scope.playlist_active; var editMode = $scope.dashboard.editMode;
elem.toggleClass('dash-edit-mode', editMode === true);
if (lastHideControlsVal !== hideControls) {
elem.toggleClass('hide-controls', hideControls);
lastHideControlsVal = hideControls;
}
}); });
$scope.$watch('playlistSrv', function(newValue) { $scope.$watch('playlistSrv', function(newValue) {
......
public/app/features/dashboard/keybindings.js
...@@ -43,9 +43,8 @@ function(angular, $) { ...@@ -43,9 +43,8 @@ function(angular, $) {
scope.broadcastRefresh(); scope.broadcastRefresh();
}, { inputDisabled: true }); }, { inputDisabled: true });
keyboardManager.bind('ctrl+h', function() { keyboardManager.bind('ctrl+e', function() {
var current = scope.dashboard.hideControls; scope.dashboard.editMode = !scope.dashboard.editMode;
scope.dashboard.hideControls = !current;
}, { inputDisabled: true }); }, { inputDisabled: true });
keyboardManager.bind('ctrl+s', function(evt) { keyboardManager.bind('ctrl+s', function(evt) {
......
public/app/features/dashboard/partials/settings.html
...@@ -49,9 +49,9 @@ ...@@ -49,9 +49,9 @@
label-class="width-10"> label-class="width-10">
</gf-form-switch> </gf-form-switch>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Hide Controls" label="Edit Mode"
tooltip="Hide row controls. Shortcut: CTRL+H" tooltip="Enable edit mode. Shortcut: CTRL+E"
checked="dashboard.hideControls" checked="dashboard.editMode"
label-class="width-10"> label-class="width-10">
</gf-form-switch> </gf-form-switch>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
......
public/app/partials/dashboard.html
...@@ -11,99 +11,89 @@ ...@@ -11,99 +11,89 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="grafana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height> <div class="dash-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height>
<div class="row-control"> <div class="dash-row-header" ng-if="row.showTitle || dashboard.editMode">
<div class="row-control-inner"> <div class="dash-row-header-title" ng-bind="row.title | interpolateTemplateVars:this"></div>
<div class="row-close" ng-show="row.collapse" data-placement="bottom" > <div class="dash-row-header-settings dropdown">
<div class="row-close-buttons"> <a class="pointer dropdown-toggle" data-toggle="dropdown">
<span class="row-button" ng-click="toggleRow(row)"> <i class="fa fa-cog"></i>
<i bs-tooltip="'Expand row'" data-placement="right" class="fa fa-caret-left pointer" ></i> </a>
</span> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
</div> <li>
<div class="row-text pointer" ng-click="toggleRow(row)" ng-bind="row.title | interpolateTemplateVars:this"></div> <a ng-click="toggleRow(row)">Collapse row</a>
</div> </li>
<div class="row-open" ng-show="!row.collapse"> <li class="dropdown-submenu">
<div class='row-tab dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboard.meta.fullscreen"> <a href="javascript:void(0);">Add Panel</a>
<span class="row-tab-button dropdown-toggle" data-toggle="dropdown"> <ul class="dropdown-menu">
<i class="fa fa-bars"></i> <li bindonce ng-repeat="(key, value) in panels">
</span> <a ng-click="addPanelDefault(key)" bo-text="value.name"></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
<li>
<a ng-click="toggleRow(row)">Collapse row</a>
</li>
<li class="dropdown-submenu">
<a href="javascript:void(0);">Add Panel</a>
<ul class="dropdown-menu">
<li bindonce ng-repeat="(key, value) in panels">
<a ng-click="addPanelDefault(key)" bo-text="value.name"></a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="javascript:void(0);">Set height</a>
<ul class="dropdown-menu">
<li><a ng-click="setHeight('25px')">25 px</a></li>
<li><a ng-click="setHeight('100px')">100 px</a></li>
<li><a ng-click="setHeight('150px')">150 px</a></li>
<li><a ng-click="setHeight('200px')">200 px</a></li>
<li><a ng-click="setHeight('250px')">250 px</a></li>
<li><a ng-click="setHeight('300px')">300 px</a></li>
<li><a ng-click="setHeight('350px')">350 px</a></li>
<li><a ng-click="setHeight('450px')">450 px</a></li>
<li><a ng-click="setHeight('500px')">500 px</a></li>
<li><a ng-click="setHeight('600px')">600 px</a></li>
<li><a ng-click="setHeight('700px')">700 px</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="javascript:void(0);">Move</a>
<ul class="dropdown-menu">
<li><a ng-click="moveRow('up')">Up</a></li>
<li><a ng-click="moveRow('down')">Down</a></li>
<li><a ng-click="moveRow('top')">To top</a></li>
<li><a ng-click="moveRow('bottom')">To Bottom</a></li>
</ul>
</li>
<li>
<a ng-click="editRow()">Row editor</a>
</li>
<li>
<a ng-click="deleteRow()">Delete row</a>
</li> </li>
</ul> </ul>
</div> </li>
</div> <li class="dropdown-submenu">
<a href="javascript:void(0);">Set height</a>
<ul class="dropdown-menu">
<li><a ng-click="setHeight('25px')">25 px</a></li>
<li><a ng-click="setHeight('100px')">100 px</a></li>
<li><a ng-click="setHeight('150px')">150 px</a></li>
<li><a ng-click="setHeight('200px')">200 px</a></li>
<li><a ng-click="setHeight('250px')">250 px</a></li>
<li><a ng-click="setHeight('300px')">300 px</a></li>
<li><a ng-click="setHeight('350px')">350 px</a></li>
<li><a ng-click="setHeight('450px')">450 px</a></li>
<li><a ng-click="setHeight('500px')">500 px</a></li>
<li><a ng-click="setHeight('600px')">600 px</a></li>
<li><a ng-click="setHeight('700px')">700 px</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="javascript:void(0);">Move</a>
<ul class="dropdown-menu">
<li><a ng-click="moveRow('up')">Up</a></li>
<li><a ng-click="moveRow('down')">Down</a></li>
<li><a ng-click="moveRow('top')">To top</a></li>
<li><a ng-click="moveRow('bottom')">To Bottom</a></li>
</ul>
</li>
<li>
<a ng-click="editRow()">Row editor</a>
</li>
<li>
<a ng-click="deleteRow()">Delete row</a>
</li>
</ul>
</div> </div>
<div class="dash-row-header-collapse-toggle">
<a class="pointer" ng-click="row.collapse = !row.collapse">
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
<div class="panels-wrapper" ng-if="!row.collapse"> <div class="panels-wrapper" ng-if="!row.collapse">
<div class="row-text pointer" ng-click="toggleRow(row)" ng-if="row.showTitle" ng-bind="row.title | interpolateTemplateVars:this"> <div ng-repeat="panel in row.panels track by panel.id" class="panel" ui-draggable="!dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="onDrop($data, row, panel)" drag-handle-class="drag-handle" panel-width>
</div> <plugin-component type="panel" class="panel-margin">
</plugin-component>
<div ng-repeat="panel in row.panels track by panel.id" class="panel" ui-draggable="!dashboard.meta.fullscreen" drag="panel.id" </div>
ui-on-drop="onDrop($data, row, panel)" drag-handle-class="drag-handle" panel-width>
<plugin-component type="panel" class="panel-margin">
</plugin-component>
</div>
<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="onDrop($data, row)" data-drop="true"> <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 class="panel-container" style="background: transparent">
<div style="text-align: center"> <div style="text-align: center">
<em>Drop here</em> <em>Drop here</em>
</div>
</div> </div>
</div> </div>
<div class="clearfix"></div>
</div> </div>
<div class="clearfix"></div>
</div> </div>
</div> </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" ng-hide="dashboard.meta.fullscreen">
<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>
</span> </span>
</div>
</div> </div>
</div> </div>
</div> </div>
public/sass/pages/_dashboard.scss
...@@ -13,85 +13,6 @@ ...@@ -13,85 +13,6 @@
color: $variable; color: $variable;
} }
.row-tab {
.dropdown-menu-right {
top: 0;
left: 33px;
}
}
.row-tab-button {
padding: 0px;
cursor: pointer;
vertical-align: middle;
width: 30px;
height: 30px;
text-align: center;
display: inline-block;
line-height: 30px;
background: $btn-success-bg;
color: rgba(255,255,255,.90);
}
.row-button {
width: 24px;
float: left;
cursor: pointer;
line-height: 31px;
background-color: $blue-dark;
}
.row-text {
white-space: nowrap;
text-transform: uppercase;
font-weight: bold;
font-size: 0.9em;
text-align: center;
line-height: 31px;
height: 31px;
}
.row-close {
padding: 0px;
margin: 0px;
background: $panel-bg;
text-align: center;
}
.row-close-buttons {
position: absolute;
left: 0;
}
.row-open {
margin-top: 5px;
left: -30px;
position: absolute;
z-index: 100;
transition: .10s left;
transition-delay: .10s;
&:hover {
left: -12px;
}
}
.row-control-inner {
padding:0px;
margin:0px;
position:relative;
}
.hide-controls {
padding: 0;
.row-tab {
display: none;
}
.add-row-panel-hint {
display: none;
}
}
.playlist-active { .playlist-active {
.add-row-panel-hint, .add-row-panel-hint,
.dashnav-refresh-action, .dashnav-refresh-action,
...@@ -287,3 +208,41 @@ div.flot-text { ...@@ -287,3 +208,41 @@ div.flot-text {
padding: 0.5rem .5rem .2rem .5rem; padding: 0.5rem .5rem .2rem .5rem;
} }
} }
//
// Dashboard row header
//
.dash-row-header {
display: flex;
flex-direction: row;
text-align: left;
}
.dash-row-header-title {
font-size: $font-size-h3;
font-family: $headings-font-family;
padding: $spacer $spacer*2;
}
.dash-row-header-settings {
display: none;
}
.dash-row-header-collapse-toggle {
flex-grow: 100;
text-align: right;
display: none;
}
.dash-edit-mode {
.dash-row {
background-color: $dark-5;
padding: 0 $spacer $spacer $spacer;
}
.dash-row-header-collapse-toggle,
.dash-row-header-settings {
display: block;
}
}
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