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

another attempt at improving panel edit menu

Browse Source
This commit is contained in:
Torkel Ödegaard 2014-09-23 10:52:31 +02:00
parent 139791b0d8
commit bd3bae3af0
5 changed files with 120 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
' Normal file
View File

@ -0,0 +1,79 @@
.panel {
display: inline-block;
float: left;
vertical-align: top;
}
.panel-container {
padding: 0px 0px 0px 0px;
background: @grafanaPanelBackground;
margin: 5px;
position: relative;
}
.panel-content {
padding: 0px 10px 5px 10px;
}
.panel-title {
border: 0px;
font-weight: bold;
position: relative;
}
.panel-loading {
position:absolute;
top: 0px;
right: 4px;
z-index: 800;
}
.panel-header {
text-align: center;
}
.panel-error {
color: @white;
position: absolute;
left: 0;
padding: 0px 17px 6px 5px;
top: 0;
i {
position: relative;
top: -2px;
}
}
.panel-error-arrow {
width: 0;
height: 0;
position: absolute;
border-left: 31px solid transparent;
border-right: 30px solid transparent;
border-bottom: 27px solid @grafanaPanelBackground;
left: 0;
bottom: 0;
}
.panel-menu {
display: inline-block;
vertical-align: top;
a {
font-size: 1.2em;
float: left;
padding: 7px 10px;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: @grayDark;
}
a:first-child {
border-left: 1px solid black;
}
}
.panel-highlight {
border: 1px solid @blue;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}

5
src/app/controllers/row.js
View File

@ -22,6 +22,11 @@ function (angular, app, _) {
$scope.reset_panel();
};
$scope.togglePanelMenu = function(posX) {
$scope.showPanelMenu = !$scope.showPanelMenu;
$scope.panelMenuPos = posX;
};
$scope.toggle_row = function(row) {
row.collapse = row.collapse ? false : true;
if (!row.collapse) {

33
src/app/directives/grafanaPanel.js
View File

@ -27,20 +27,31 @@ function (angular, $) {
var $link = $(linkTemplate);
elem.append($link);
$link.click(function() {
var $menu = $(menuTemplate);
var menuScope = $scope.$new();
$link.click(function(e) {
var menuWidth = 452;
var windowWidth = $(window).width();
var maxPos = windowWidth - menuWidth - 20;
var leftPos = e.screenX - (menuWidth / 2);
leftPos = Math.min(leftPos, maxPos);
elem.append($menu);
$compile($menu.contents())(menuScope);
$scope.$apply(function() {
$scope.togglePanelMenu(leftPos);
});
elem.parents(".panel-container").toggleClass('panel-highlight');
console.log(e);
// var $menu = $(menuTemplate);
// var menuScope = $scope.$new();
//
// elem.append($menu);
// $compile($menu.contents())(menuScope);
setTimeout(function() {
$menu.remove();
menuScope.$destroy();
$link.show();
}, 8000);
// setTimeout(function() {
// $menu.remove();
// menuScope.$destroy();
// $link.show();
// }, 8000);
$link.hide();
//$link.hide();
});
$compile(elem.contents())($scope);

9
src/app/partials/dashboard.html
View File

@ -74,6 +74,15 @@
</div>
</div>
<div class="panel-menu small" ng-show="showPanelMenu" ng-style="{'margin-left': panelMenuPos}">
<a class="pointer"><i class="icon-eye-open"></i> <span>view</span></a>
<a class="pointer"><i class="icon-cog"></i> <span>edit</span></a>
<a class="pointer"><i class="icon-resize-horizontal"></i> <span>span</span></a>
<a class="pointer"><i class="icon-copy"></i> <span>duplicate</span></a>
<a class="pointer"><i class="icon-share"></i> <span>share</span></a>
<a class="pointer"><i class="icon-remove"></i> <span>remove</span></a>
</div>
<div style="padding-top:0px" ng-if="!row.collapse">
<div class="row-text pointer" ng-click="toggle_row(row)" ng-if="row.showTitle" ng-bind="row.title">
</div>

6
src/css/less/panel.less
View File

@ -62,7 +62,7 @@
a {
font-size: 1.2em;
float: left;
padding: 2px 10px;
padding: 7px 10px;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
@ -72,3 +72,7 @@
border-left: 1px solid black;
}
}
.panel-highlight {
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236, 0.9)");
}