External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-16 20:30:46 -03:30
Code Issues Packages Projects Releases Wiki Activity

Workflow editor/details graph responsiveness

Browse Source
This commit is contained in:
Michael Abashian 2017-02-10 13:26:36 -05:00
parent fe29446298
commit 9c686f680d
5 changed files with 680 additions and 559 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/client/src/shared/Modal.js
View File

@ -46,7 +46,7 @@ angular.module('ModalDialog', ['Utilities', 'ParseHelper'])
return function(params) {
var scope = params.scope,
let scope = params.scope,
buttonSet = params.buttons,
width = params.width || 500,
height = params.height || 600,

1194
awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js
View File

File diff suppressed because it is too large Load Diff

4
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js
View File

@ -888,6 +888,10 @@ export default ['$scope', 'WorkflowService', 'generateList', 'TemplateList', 'Pr
});
};
$scope.$on('WorkflowDialogReady', function(){
$scope.modalOpen = true;
});
init();
}

37
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.directive.js
View File

@ -6,8 +6,8 @@
import workflowMakerController from './workflow-maker.controller';
export default ['templateUrl', 'CreateDialog', 'Wait', '$state',
function(templateUrl, CreateDialog, Wait, $state) {
export default ['templateUrl', 'CreateDialog', 'Wait', '$state', '$window',
function(templateUrl, CreateDialog, Wait, $state, $window) {
return {
scope: {
workflowJobTemplateObj: '=',
@ -17,11 +17,17 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state',
templateUrl: templateUrl('templates/workflows/workflow-maker/workflow-maker'),
controller: workflowMakerController,
link: function(scope) {
let availableHeight = $(window).height(),
availableWidth = $(window).width(),
minimumWidth = 1300,
minimumHeight = 550;console.log(availableHeight, availableWidth);
CreateDialog({
id: 'workflow-modal-dialog',
scope: scope,
width: 1400,
height: 720,
width: availableWidth > minimumWidth ? availableWidth : minimumWidth,
height: availableHeight > minimumHeight ? availableHeight : minimumHeight,
draggable: false,
dialogClass: 'SurveyMaker-dialog',
position: ['center', 20],
@ -34,6 +40,10 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state',
// Let the modal height be variable based on the content
// and set a uniform padding
$('#workflow-modal-dialog').css({ 'padding': '20px' });
$('#workflow-modal-dialog').parent('.ui-dialog').height(availableHeight > minimumHeight ? availableHeight : minimumHeight);
$('#workflow-modal-dialog').parent('.ui-dialog').width(availableWidth > minimumWidth ? availableWidth : minimumWidth);
$('#workflow-modal-dialog').outerHeight(availableHeight > minimumHeight ? availableHeight : minimumHeight);
$('#workflow-modal-dialog').outerWidth(availableWidth > minimumWidth ? availableWidth : minimumWidth);
},
_allowInteraction: function(e) {
@ -55,6 +65,25 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state',
$state.go('^');
};
function onResize(){
availableHeight = $(window).height();
availableWidth = $(window).width();
console.log(availableHeight, availableWidth);
$('#workflow-modal-dialog').parent('.ui-dialog').height(availableHeight > minimumHeight ? availableHeight : minimumHeight);
$('#workflow-modal-dialog').parent('.ui-dialog').width(availableWidth > minimumWidth ? availableWidth : minimumWidth);
$('#workflow-modal-dialog').outerHeight(availableHeight > minimumHeight ? availableHeight : minimumHeight);
$('#workflow-modal-dialog').outerWidth(availableWidth > minimumWidth ? availableWidth : minimumWidth);
scope.$broadcast('workflowMakerModalResized');
}
function cleanUpResize() {
angular.element($window).off('resize', onResize);
}
angular.element($window).on('resize', onResize);
scope.$on('$destroy', cleanUpResize);
}
};
}

2
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html
View File

@ -64,7 +64,7 @@
</div>
</div>
</div>
<workflow-chart tree-data="treeData.data" add-node="startAddNode(parent, betweenTwoNodes)" edit-node="startEditNode(nodeToEdit)" delete-node="startDeleteNode(nodeToDelete)" workflow-zoomed="workflowZoomed(zoom)" can-add-workflow-job-template="canAddWorkflowJobTemplate" mode="edit" class="WorkflowMaker-chart"></workflow-chart>
<workflow-chart ng-if="modalOpen" tree-data="treeData.data" add-node="startAddNode(parent, betweenTwoNodes)" edit-node="startEditNode(nodeToEdit)" delete-node="startDeleteNode(nodeToDelete)" workflow-zoomed="workflowZoomed(zoom)" can-add-workflow-job-template="canAddWorkflowJobTemplate" mode="edit" class="WorkflowMaker-chart"></workflow-chart>
</div>
<div class="WorkflowMaker-contentRight">
<div class="WorkflowMaker-formTitle">{{(workflowMakerFormConfig.nodeMode === 'edit' && nodeBeingEdited) ? ((nodeBeingEdited.unifiedJobTemplate && nodeBeingEdited.unifiedJobTemplate.name) ? nodeBeingEdited.unifiedJobTemplate.name : "EDIT TEMPLATE") : "ADD A TEMPLATE"}}</div>