From 633c63aadbff36ea65de6250d88cba24f95998b7 Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansible.com>
Date: Mon, 17 Mar 2014 18:25:06 -0400
Subject: [PATCH] Fixed inner dialog sizing issues so that resizing inventory
 edit dialog now resizes the schedule widget, keeping the inner widget
 slightly smaller than than dialog and scrolling the content vertically when
 needed.

---
 awx/ui/static/js/helpers/Groups.js         | 26 ++++++++++++++++------
 awx/ui/static/less/angular-scheduler.less  | 25 +++++++++++++--------
 awx/ui/static/partials/inventory-edit.html |  6 ++---
 3 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/awx/ui/static/js/helpers/Groups.js b/awx/ui/static/js/helpers/Groups.js
index ee48df9a2a..00f4cbb577 100644
--- a/awx/ui/static/js/helpers/Groups.js
+++ b/awx/ui/static/js/helpers/Groups.js
@@ -615,13 +615,22 @@ function(ScheduleEdit, SchedulesList, GenerateList, SearchInit, PaginateInit, Re
 }])
 
 
+.factory('SetSchedulesInnerDialogSize', [ function() {
+    return function() {
+        var height = $('#group-modal-dialog').outerHeight() - $('#group_tabs').outerHeight() - 25;
+        height = height - 110 - $('#schedules-buttons').outerHeight();
+        $('#schedules-form-container-body').height(height);
+    };
+}])
+
+
 /**
  *
  * Remove the schedule list, add the schedule widget and populate it with an rrule
  *
  */
-.factory('ScheduleEdit', ['SchedulerInit', 'Rest', 'Wait',
-function(SchedulerInit, Rest, Wait) {
+.factory('ScheduleEdit', ['SchedulerInit', 'Rest', 'Wait', 'SetSchedulesInnerDialogSize',
+function(SchedulerInit, Rest, Wait, SetSchedulesInnerDialogSize) {
     return function(params) {
         var parent_scope = params.scope,
             schedule = params.schedule,
@@ -661,7 +670,10 @@ function(SchedulerInit, Rest, Wait) {
         // display the scheduler widget
         showForm = function() {
             Wait('stop');
-            $('#schedules-overlay').width($('#schedules-tab').width()).height($('#schedules-tab').height()).show();
+            $('#schedules-overlay').width($('#schedules-tab')
+                .width()).height($('#schedules-tab').height()).show();
+            container.width($('#schedules-tab').width() - 18);
+            SetSchedulesInnerDialogSize();
             container.show('slide', { direction: 'left' }, 300);
             $('#group-save-button').prop('disabled', true);
             target.show();
@@ -670,7 +682,6 @@ function(SchedulerInit, Rest, Wait) {
                 scheduler.setName(schedule.name);
             });
         };
-        //list.hide({ complete: callback, duration: 300 });
         setTimeout(function() { showForm(); }, 1000);
 
         restoreList = function() {
@@ -731,11 +742,11 @@ function(SchedulerInit, Rest, Wait) {
 .factory('GroupsEdit', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupForm', 'GenerateForm',
     'Prompt', 'ProcessErrors', 'GetBasePath', 'SetNodeName', 'ParseTypeChange', 'GetSourceTypeOptions', 'InventoryUpdate',
     'LookUpInit', 'Empty', 'Wait', 'GetChoices', 'UpdateGroup', 'SourceChange', 'Find','WatchInventoryWindowResize',
-    'ParseVariableString', 'ToJSON', 'ScheduleList', 'SourceForm',
+    'ParseVariableString', 'ToJSON', 'ScheduleList', 'SourceForm', 'SetSchedulesInnerDialogSize',
     function ($rootScope, $location, $log, $routeParams, Rest, Alert, GroupForm, GenerateForm, Prompt, ProcessErrors,
         GetBasePath, SetNodeName, ParseTypeChange, GetSourceTypeOptions, InventoryUpdate, LookUpInit, Empty, Wait,
         GetChoices, UpdateGroup, SourceChange, Find, WatchInventoryWindowResize, ParseVariableString, ToJSON, ScheduleList,
-        SourceForm) {
+        SourceForm, SetSchedulesInnerDialogSize) {
         return function (params) {
 
             var parent_scope = params.scope,
@@ -857,9 +868,10 @@ function(SchedulerInit, Rest, Wait) {
                         textareaResize('group_variables', properties_scope);
                     }
                     else if ($('#group_tabs .active a').text() === 'Schedule') {
-                        w = $('#group_tabs').width() - 15;
+                        w = $('#group_tabs').width() - 18;
                         $('#schedules-overlay').width(w);
                         $('#schedules-form-container').width(w);
+                        SetSchedulesInnerDialogSize();
                     }
                 },
                 close: function () {
diff --git a/awx/ui/static/less/angular-scheduler.less b/awx/ui/static/less/angular-scheduler.less
index ec66a77603..4c37c331fb 100644
--- a/awx/ui/static/less/angular-scheduler.less
+++ b/awx/ui/static/less/angular-scheduler.less
@@ -25,6 +25,11 @@
     opacity: 0;  
 }
 
+#schedules-list {
+    overflow-x: hidden;
+    overflow-y: auto;    
+}
+
 #schedules-form-container {
     position: absolute; 
     top: 0;
@@ -41,28 +46,32 @@
 #schedules-title {
     border-bottom: 1px solid #e5e5e5;
     padding-bottom: 8px;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     margin-top: 0;
-
     h4 {
         display: inline-block;
         margin: 0;
     }
     button {
         display: inline-block;
-        /*margin-top: -10px;*/
     }
 }
 
 #schedules-form-container-body {
-    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+#schedules-form .form-group {
+    margin-bottom: 15px;
 }
 
 #schedules-buttons {
-    height: 45px;
-    padding-top: 15px;
+    height: 46px;
+    padding-top: 10px;
     text-align: right;
     border-top: 1px solid #A6C9E2;
+    margin-top: 5px;
     a {
         margin-right: 8px;
         font-size: 12px;
@@ -160,12 +169,10 @@
         margin-top: 0;
         padding-top: 3px;
     }
-
     .error-pull-up {
         position: relative;
-        top: -23px;
+        top: -20px;
     }
-    
     .red-text {
         color: #dd1b16;
     }
diff --git a/awx/ui/static/partials/inventory-edit.html b/awx/ui/static/partials/inventory-edit.html
index 420b06b1c3..621541a55b 100644
--- a/awx/ui/static/partials/inventory-edit.html
+++ b/awx/ui/static/partials/inventory-edit.html
@@ -38,14 +38,14 @@
                             <div id="schedules-detail"></div>
                         </div>
                         <div id="schedules-buttons">
-                            <a id="schedules-flip-link" ng-show="formShowing" ng-click="showScheduleDetail()" href=""><i class="fa fa-list-ul"> Show Details</i></a>
-                            <a id="schedules-flip-link" ng-show="!formShowing" ng-click="showScheduleDetail()" href=""><i class="fa fa-list-ul"> Show Options</i></a>
+                            <a id="schedules-flip-link" ng-show="formShowing" ng-click="showScheduleDetail()" href=""><i class="fa fa-search-plus"></i> View Details</a>
+                            <a id="schedules-flip-link" ng-show="!formShowing" ng-click="showScheduleDetail()" href=""><i class="fa fa-list-ul"></i> Options</a>
                             <button type="button" class="btn btn-default btn-sm" id="reset-button" ng-click="cancelScheduleForm()"><i class="fa fa-times"></i> Cancel</button>
                             <button type="button" class="btn btn-primary btn-sm" id="save-button" ng-click="saveScheduleForm()"><i class="fa fa-check"></i> Save</button>
                         </div>
                     </div>
                 </div>
-           </div>    
+            </div>    
         </div>
     
     </div>