Skip to content

N
nexpie-grafana-theme
Commit 86f4907c by Torkel Ödegaard
Options

feat(panel fullscreen): completly changed how the fullscreen view/edit works, no… 

feat(panel fullscreen): completly changed how the fullscreen view/edit works, no longer uses css fixed position, yay, closes #2779
parent bffb795d
Showing with 38 additions and 69 deletions
public/app/core/directives/body_class.js
...@@ -17,14 +17,6 @@ function (_, $, coreModule) { ...@@ -17,14 +17,6 @@ function (_, $, coreModule) {
$("#tooltip, .tooltip").remove(); $("#tooltip, .tooltip").remove();
}); });
$scope.$watch('submenuEnabled', function() {
if (!$scope.dashboard) {
return;
}
elem.toggleClass('submenu-controls-visible', $scope.submenuEnabled);
});
$scope.$watch('dashboard.hideControls', function() { $scope.$watch('dashboard.hideControls', function() {
if (!$scope.dashboard) { if (!$scope.dashboard) {
return; return;
......
public/app/core/directives/dash_edit_link.js
...@@ -54,8 +54,6 @@ function ($, coreModule) { ...@@ -54,8 +54,6 @@ function ($, coreModule) {
hideEditorPane(); hideEditorPane();
scope.exitFullscreen();
lastEditor = payload.src; lastEditor = payload.src;
editorScope = payload.scope ? payload.scope.$new() : scope.$new(); editorScope = payload.scope ? payload.scope.$new() : scope.$new();
......
public/app/features/dashboard/rowCtrl.js
...@@ -122,6 +122,17 @@ function (angular, _, config) { ...@@ -122,6 +122,17 @@ function (angular, _, config) {
scope.$watchGroup(['row.collapse', 'row.height'], function() { scope.$watchGroup(['row.collapse', 'row.height'], function() {
element.css({ minHeight: scope.row.collapse ? '5px' : scope.row.height }); element.css({ minHeight: scope.row.collapse ? '5px' : scope.row.height });
}); });
scope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
var hasPanel = _.findWhere(scope.row.panels, {id: info.panelId});
if (!hasPanel) {
element.hide();
}
});
scope.onAppEvent('panel-fullscreen-exit', function() {
element.show();
});
}; };
}); });
...@@ -131,6 +142,22 @@ function (angular, _, config) { ...@@ -131,6 +142,22 @@ function (angular, _, config) {
element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%'; element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%';
} }
scope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
if (scope.panel.id !== info.panelId) {
element.hide();
} else {
element[0].style.width = '100%';
}
});
scope.onAppEvent('panel-fullscreen-exit', function(evt, info) {
if (scope.panel.id !== info.panelId) {
element.show();
} else {
updateWidth();
}
});
scope.$watch('panel.span', updateWidth); scope.$watch('panel.span', updateWidth);
}; };
}); });
......
public/app/features/dashboard/viewStateSrv.js
...@@ -111,6 +111,8 @@ function (angular, _, $) { ...@@ -111,6 +111,8 @@ function (angular, _, $) {
self.fullscreenPanel.fullscreen = false; self.fullscreenPanel.fullscreen = false;
delete self.fullscreenPanel.height; delete self.fullscreenPanel.height;
this.$scope.appEvent('panel-fullscreen-exit', {panelId: this.fullscreenPanel.panel.id});
if (!render) { return false;} if (!render) { return false;}
$timeout(function() { $timeout(function() {
...@@ -125,8 +127,6 @@ function (angular, _, $) { ...@@ -125,8 +127,6 @@ function (angular, _, $) {
}; };
DashboardViewState.prototype.enterFullscreen = function(panelScope) { DashboardViewState.prototype.enterFullscreen = function(panelScope) {
this.$scope.appEvent('hide-dash-editor');
var docHeight = $(window).height(); var docHeight = $(window).height();
var editHeight = Math.floor(docHeight * 0.3); var editHeight = Math.floor(docHeight * 0.3);
var fullscreenHeight = Math.floor(docHeight * 0.7); var fullscreenHeight = Math.floor(docHeight * 0.7);
...@@ -140,6 +140,7 @@ function (angular, _, $) { ...@@ -140,6 +140,7 @@ function (angular, _, $) {
$(window).scrollTop(0); $(window).scrollTop(0);
panelScope.fullscreen = true; panelScope.fullscreen = true;
this.$scope.appEvent('panel-fullscreen-enter', {panelId: panelScope.panel.id});
$timeout(function() { $timeout(function() {
panelScope.$broadcast('render'); panelScope.$broadcast('render');
......
public/app/features/panel/panelMenu.js
...@@ -155,9 +155,6 @@ function (angular, $, _) { ...@@ -155,9 +155,6 @@ function (angular, $, _) {
if (panelLeftPos + menuLeftPos < 0) { if (panelLeftPos + menuLeftPos < 0) {
menuLeftPos = 0; menuLeftPos = 0;
} }
if ($scope.fullscreen) {
menuHeight = -(menuHeight/2);
}
$menu.css({'left': menuLeftPos, top: -menuHeight}); $menu.css({'left': menuLeftPos, top: -menuHeight});
}); });
......
public/app/partials/dashboard.html
<div body-class class="dashboard" ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}"> <div body-class class="dashboard">
<div ng-include src="topNavPartial"> <div ng-include src="topNavPartial">
</div> </div>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<div class="row-text pointer" ng-click="toggle_row(row)" ng-bind="row.title | interpolateTemplateVars:this"></div> <div class="row-text pointer" ng-click="toggle_row(row)" ng-bind="row.title | interpolateTemplateVars:this"></div>
</div> </div>
<div class="row-open" ng-show="!row.collapse"> <div class="row-open" ng-show="!row.collapse">
<div class='row-tab bgSuccess dropdown' ng-show="dashboardMeta.canEdit"> <div class='row-tab bgSuccess dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboardViewState.fullscreen">
<span class="row-tab-button dropdown-toggle" data-toggle="dropdown"> <span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i> <i class="fa fa-bars"></i>
</span> </span>
...@@ -79,11 +79,8 @@ ...@@ -79,11 +79,8 @@
<div class="row-text pointer" ng-click="toggle_row(row)" ng-if="row.showTitle" ng-bind="row.title | interpolateTemplateVars:this"> <div class="row-text pointer" ng-click="toggle_row(row)" ng-if="row.showTitle" ng-bind="row.title | interpolateTemplateVars:this">
</div> </div>
<!-- Panels, draggable needs to be disabled in fullscreen because Firefox bug --> <div ng-repeat="(name, panel) in row.panels track by panel.id" class="panel" ui-draggable="true" drag="panel.id"
<div ng-repeat="(name, panel) in row.panels track by panel.id" class="panel" ui-on-Drop="onDrop($data, row, panel)" drag-handle-class="drag-handle" panel-width>
ui-draggable="{{!dashboardViewState.fullscreen}}" drag="panel.id"
ui-on-Drop="onDrop($data, row, panel)"
drag-handle-class="drag-handle" panel-width>
<panel-loader type="panel.type" class="panel-margin"></panel-loader> <panel-loader type="panel.type" class="panel-margin"></panel-loader>
</div> </div>
...@@ -100,7 +97,7 @@ ...@@ -100,7 +97,7 @@
</div> </div>
</div> </div>
<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint"> <div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboardViewState.fullscreen">
<div class="span12" style="text-align:right;"> <div class="span12" style="text-align:right;">
<span style="margin-right: 10px;" ng-click="add_row_default()" class="pointer btn btn-info btn-small"> <span style="margin-right: 10px;" ng-click="add_row_default()" class="pointer btn btn-info btn-small">
<span><i class="fa fa-plus"></i> ADD ROW</span> <span><i class="fa fa-plus"></i> ADD ROW</span>
......
public/less/grafana.less
...@@ -61,17 +61,6 @@ ...@@ -61,17 +61,6 @@
top: 20%; top: 20%;
} }
.dashboard-fullscreen {
.main-view-container {
overflow: hidden;
height: 0;
padding: 0;
.row-control-inner {
display: none;
}
}
}
.histogram-chart { .histogram-chart {
position:relative; position:relative;
} }
......
public/less/panel.less
...@@ -91,37 +91,15 @@ ...@@ -91,37 +91,15 @@
} }
.panel-fullscreen { .panel-fullscreen {
z-index: 100; margin: 5px 20px;
display: block;
position: fixed;
left: 0px;
right: 0px;
top: 60px;
height: 100%;
padding: 0;
overflow-y: auto;
height: 100%;
.dropdown-menu {
margin-bottom: 70px;
}
.panel-container {
margin: 15px;
}
.panel-menu {
top: 0px;
}
.panel-title-container { .panel-title-container {
padding: 8px; padding: 8px;
} }
} }
.panel-full-edit { .panel-full-edit {
margin-top: 30px; margin-top: 20px;
padding-bottom: 130px; margin-bottom: 20px;
} }
.panel-menu { .panel-menu {
......
public/less/sidemenu.less
...@@ -30,10 +30,6 @@ ...@@ -30,10 +30,6 @@
.main-view { .main-view {
padding-left: 200px; padding-left: 200px;
} }
.panel-fullscreen {
left: 200px;
}
} }
.sidemenu { .sidemenu {
......
public/less/submenu.less
.submenu-controls-visible {
.panel-fullscreen {
top: 105px;
}
}
.submenu-controls { .submenu-controls {
margin: 15px 10px 8px 14px; margin: 15px 10px 8px 14px;
font-size: 16px; font-size: 16px;
......
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