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

wip: trying to align react & angular edit modes

Browse Source
This commit is contained in:
Torkel Ödegaard
2018-08-24 18:46:17 +02:00
parent 0b794ff685
commit 1c97816275
5 changed files with 51 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/core/directives/dash_class.ts
View File

@@ -5,7 +5,9 @@ coreModule.directive('dashClass', function($timeout) {
return { return {
link: function($scope, elem) { link: function($scope, elem) {
$scope.ctrl.dashboard.events.on('view-mode-changed', function(panel) { $scope.ctrl.dashboard.events.on('view-mode-changed', function(panel) {
elem.toggleClass('panel-in-fullscreen', panel.fullscreen === true); $timeout(() => {
elem.toggleClass('panel-in-fullscreen', panel.fullscreen === true);
}, 10);
}); });
elem.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true); elem.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true);

2
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
View File

@@ -165,7 +165,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
componentDidMount() { componentDidMount() {
setTimeout(() => { setTimeout(() => {
this.setState({ animated: true }); this.setState({ animated: false });
}); });
} }

2
public/app/features/dashboard/dashgrid/PanelHeader.tsx
View File

@@ -26,7 +26,7 @@ export class PanelHeader extends React.Component<PanelHeaderProps, any> {
{ {
panelId: this.props.panel.id, panelId: this.props.panel.id,
fullscreen: true, fullscreen: true,
edit: null, edit: false,
}, },
false false
); );

82
public/app/features/panel/panel_directive.ts
View File

@@ -6,48 +6,53 @@ import baron from 'baron';
var module = angular.module('grafana.directives'); var module = angular.module('grafana.directives');
var panelTemplate = ` var panelTemplate = `
<div class="panel-container" ng-class="{'panel-container--is-editing': ctrl.panel.isEditing}"> <div ng-class="{'panel-editor-container': ctrl.panel.isEditing, 'panel-height-helper': !ctrl.panel.isEditing}">
<div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.panel.fullscreen}"> <div ng-class="{'panel-editor-container__panel': ctrl.panel.isEditing, 'panel-height-helper': !ctrl.panel.isEditing}">
<span class="panel-info-corner"> <div class="panel-container">
<i class="fa"></i> <div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.panel.fullscreen}">
<span class="panel-info-corner-inner"></span> <span class="panel-info-corner">
</span> <i class="fa"></i>
<span class="panel-info-corner-inner"></span>
</span>
<span class="panel-loading" ng-show="ctrl.loading"> <span class="panel-loading" ng-show="ctrl.loading">
<i class="fa fa-spinner fa-spin"></i> <i class="fa fa-spinner fa-spin"></i>
</span> </span>
<panel-header class="panel-title-container" panel-ctrl="ctrl"></panel-header> <panel-header class="panel-title-container" panel-ctrl="ctrl"></panel-header>
</div> </div>
<div class="panel-content"> <div class="panel-content">
<ng-transclude class="panel-height-helper"></ng-transclude> <ng-transclude class="panel-height-helper"></ng-transclude>
</div> </div>
</div>
<div class="panel-full-edit" ng-if="ctrl.panel.isEditing">
<div class="tabbed-view">
<div class="tabbed-view-header">
<h3 class="tabbed-view-panel-title">
{{ctrl.pluginName}}
</h3>
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in ::ctrl.editorTabs">
<a class="gf-tabs-link" ng-click="ctrl.changeTab($index)" ng-class="{active: ctrl.editorTabIndex === $index}">
{{::tab.title}}
</a>
</li>
</ul>
<button class="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
<i class="fa fa-remove"></i>
</button>
</div> </div>
</div>
<div class="tabbed-view-body"> <div ng-if="ctrl.panel.isEditing" ng-class="{'panel-editor-container__editor': ctrl.panel.isEditing,
<div ng-repeat="tab in ctrl.editorTabs" ng-if="ctrl.editorTabIndex === $index"> 'panel-height-helper': !ctrl.panel.isEditing}">
<panel-editor-tab editor-tab="tab" ctrl="ctrl" index="$index"></panel-editor-tab> <div class="tabbed-view tabbed-view--new">
<div class="tabbed-view-header">
<h3 class="tabbed-view-panel-title">
{{ctrl.pluginName}}
</h3>
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in ::ctrl.editorTabs">
<a class="gf-tabs-link" ng-click="ctrl.changeTab($index)" ng-class="{active: ctrl.editorTabIndex === $index}">
{{::tab.title}}
</a>
</li>
</ul>
<button class="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="tabbed-view-body">
<div ng-repeat="tab in ctrl.editorTabs" ng-if="ctrl.editorTabIndex === $index">
<panel-editor-tab editor-tab="tab" ctrl="ctrl" index="$index"></panel-editor-tab>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -86,7 +91,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
} }
function panelHeightUpdated() { function panelHeightUpdated() {
panelContent.css({ height: ctrl.height + 'px' }); // panelContent.css({ height: ctrl.height + 'px' });
} }
function resizeScrollableContent() { function resizeScrollableContent() {
@@ -135,6 +140,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
ctrl.calculatePanelHeight(); ctrl.calculatePanelHeight();
panelHeightUpdated(); panelHeightUpdated();
$timeout(() => { $timeout(() => {
console.log('panel directive panel size changed, render');
resizeScrollableContent(); resizeScrollableContent();
ctrl.render(); ctrl.render();
}); });

2
public/app/stores/ViewStore/ViewStore.ts
View File

@@ -30,6 +30,8 @@ export const ViewStore = types
for (let key of Object.keys(query)) { for (let key of Object.keys(query)) {
if (query[key]) { if (query[key]) {
self.query.set(key, query[key]); self.query.set(key, query[key]);
} else {
self.query.delete(key);
} }
} }
} }