Merge pull request #5306 from mabashian/4796-workflow-resize

Workflow editor/details graph responsiveness

awx/ui/client/src/shared/Modal.js

@@ -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,

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

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

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

@@ -6,8 +6,8 @@
 
 import workflowMakerController from './workflow-maker.controller';
 
-export default ['templateUrl', 'CreateDialog', 'Wait', '$state',
+export default ['templateUrl', 'CreateDialog', 'Wait', '$state', '$window',
-    function(templateUrl, CreateDialog, Wait, $state) {
+    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;
+
                 CreateDialog({
                     id: 'workflow-modal-dialog',
                     scope: scope,
-                    width: 1400,
+                    width: availableWidth > minimumWidth ? availableWidth : minimumWidth,
-                    height: 720,
+                    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,24 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state',
 
                     $state.go('^');
                 };
+
+                function onResize(){
+                    availableHeight = $(window).height();
+                    availableWidth = $(window).width();
+                    $('#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);
             }
         };
     }

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

@@ -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>