IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 16:15:42 -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
Show Stats 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 {
link: function($scope, elem) {
$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);

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

@ -165,7 +165,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
componentDidMount() {
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,
fullscreen: true,
edit: null,
edit: 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 panelTemplate = `
<div class="panel-container" ng-class="{'panel-container--is-editing': ctrl.panel.isEditing}">
<div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.panel.fullscreen}">
<span class="panel-info-corner">
<i class="fa"></i>
<span class="panel-info-corner-inner"></span>
</span>
<div ng-class="{'panel-editor-container': ctrl.panel.isEditing, 'panel-height-helper': !ctrl.panel.isEditing}">
<div ng-class="{'panel-editor-container__panel': ctrl.panel.isEditing, 'panel-height-helper': !ctrl.panel.isEditing}">
<div class="panel-container">
<div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.panel.fullscreen}">
<span class="panel-info-corner">
<i class="fa"></i>
<span class="panel-info-corner-inner"></span>
</span>
<span class="panel-loading" ng-show="ctrl.loading">
<i class="fa fa-spinner fa-spin"></i>
</span>
<span class="panel-loading" ng-show="ctrl.loading">
<i class="fa fa-spinner fa-spin"></i>
</span>
<panel-header class="panel-title-container" panel-ctrl="ctrl"></panel-header>
</div>
<panel-header class="panel-title-container" panel-ctrl="ctrl"></panel-header>
</div>
<div class="panel-content">
<ng-transclude class="panel-height-helper"></ng-transclude>
</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 class="panel-content">
<ng-transclude class="panel-height-helper"></ng-transclude>
</div>
</div>
</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 ng-if="ctrl.panel.isEditing" ng-class="{'panel-editor-container__editor': ctrl.panel.isEditing,
'panel-height-helper': !ctrl.panel.isEditing}">
<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>
@ -86,7 +91,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
}
function panelHeightUpdated() {
panelContent.css({ height: ctrl.height + 'px' });
// panelContent.css({ height: ctrl.height + 'px' });
}
function resizeScrollableContent() {
@ -135,6 +140,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
ctrl.calculatePanelHeight();
panelHeightUpdated();
$timeout(() => {
console.log('panel directive panel size changed, render');
resizeScrollableContent();
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)) {
if (query[key]) {
self.query.set(key, query[key]);
} else {
self.query.delete(key);
}
}
}