From 2c432ee974a4b6433e967dbce5bbaade9705e443 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 12 Feb 2016 11:55:26 -0500 Subject: [PATCH 1/8] fix scheduler name border color issues --- awx/ui/client/legacy-styles/ansible-ui.less | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less index a9c4e6fc85..47eacf7f81 100644 --- a/awx/ui/client/legacy-styles/ansible-ui.less +++ b/awx/ui/client/legacy-styles/ansible-ui.less @@ -630,6 +630,14 @@ dd { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(255, 88, 80, 0.6); } + .form-control.ng-dirty.ng-pristine { + border-color: #e1e1e1; + box-shadow: none; + } + + .form-control.ng-dirty.ng-pristine:focus { + border-color: #1678c4; + } /* For some reason TB 3 RC1 does not provide an input-mini */ .input-mini { @@ -2018,3 +2026,11 @@ button.dropdown-toggle, .list-actions button, .list-actions .checkbox-inline { margin-top: 10px; } + +.select2-container--disabled,.select2-container--disabled .select2-selection--single{ + cursor: not-allowed !important; +} + +.select2-container--disabled { + opacity: .35; +} From 6283f8715d1674afb177a1299c4d144476ec20f2 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 12 Feb 2016 11:56:12 -0500 Subject: [PATCH 2/8] fixed icon colors for form elements with buttons --- awx/ui/client/legacy-styles/forms.less | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less index 8c3de00020..bc2c6fe284 100644 --- a/awx/ui/client/legacy-styles/forms.less +++ b/awx/ui/client/legacy-styles/forms.less @@ -191,8 +191,13 @@ cursor: pointer!important; } +.Form-inputButton { + border-color: #e1e1e1; + color: #b7b7b7; +} + .Form-numberInputButton{ - color: @field-label!important; + color: @default-icon!important; font-size: 14px; } From e7cf1ce0212930a45c655883cb141f34ab3bc2c0 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 12 Feb 2016 11:57:40 -0500 Subject: [PATCH 3/8] add support for select2 in scheduler form --- .../lib/angular-scheduler.js | 2 + .../repeatFrequencyOptions.block.less | 25 +++++++- .../src/scheduler/schedulerAdd.controller.js | 63 ++++++++++++++++++- .../src/scheduler/schedulerEdit.controller.js | 61 +++++++++++++++++- 4 files changed, 147 insertions(+), 4 deletions(-) diff --git a/awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js b/awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js index 7ed581a09f..4f4d49e358 100644 --- a/awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js +++ b/awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js @@ -108,6 +108,8 @@ angular.module('AngularScheduler', ['underscore']) scope.schedulerEnd = scope.endOptions[0]; } scope.sheduler_frequency_error = false; + + scope.$emit("updateSchedulerSelects"); }; scope.showCalendar = function(fld) { diff --git a/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less b/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less index 956ad9e3ce..703b1d719d 100644 --- a/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less +++ b/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less @@ -115,7 +115,8 @@ margin-top: 2px; } -.RepeatFrequencyOptions-spacedSelect { +.RepeatFrequencyOptions-spacedSelect, +.RepeatFrequencyOptions-spacedSelect ~ .select2 { margin-bottom: 10px; } @@ -137,3 +138,25 @@ flex: initial; width: 100%; } + +.RepeatFrequencyOptions-nameBorderErrorFix { + border-color: #ff5850 !important; +} + +.RepeatFrequencyOptions-inputGroup { + display: flex; + justify-content: space-between; +} + +.RepeatFrequencyOptions-inputGroup--thirds > .select2 { + width: ~"calc(33% - 3px)" !important; +} + +.RepeatFrequencyOptions-inputGroup--halves > .select2 { + width: ~"calc(50% - 3px)" !important; +} + +.RepeatFrequencyOptions-inputGroup--halvesWithNumber > .select2 { + width: ~"calc(50% - 3px)" !important; + margin-right: 7px; +} diff --git a/awx/ui/client/src/scheduler/schedulerAdd.controller.js b/awx/ui/client/src/scheduler/schedulerAdd.controller.js index a6eb3e12be..a37362b6b4 100644 --- a/awx/ui/client/src/scheduler/schedulerAdd.controller.js +++ b/awx/ui/client/src/scheduler/schedulerAdd.controller.js @@ -1,4 +1,4 @@ -export default ['$compile', '$state', '$stateParams', 'AddSchedule', 'Wait', '$scope', '$rootScope', function($compile, $state, $stateParams, AddSchedule, Wait, $scope, $rootScope) { +export default ['$compile', '$state', '$stateParams', 'AddSchedule', 'Wait', '$scope', '$rootScope', 'CreateSelect2', function($compile, $state, $stateParams, AddSchedule, Wait, $scope, $rootScope, CreateSelect2) { $scope.$on("ScheduleFormCreated", function(e, scope) { $scope.hideForm = false; $scope = angular.extend($scope, scope); @@ -43,10 +43,69 @@ export default ['$compile', '$state', '$stateParams', 'AddSchedule', 'Wait', '$s $scope.formCancel = function() { $state.go("^"); - } + }; AddSchedule({ scope: $scope, callback: 'SchedulesRefresh' }); + + var callSelect2 = function() { + CreateSelect2({ + element: '#schedulerTimeZone', + multiple: false + }); + + CreateSelect2({ + element: '#schedulerFrequency', + multiple: false + }); + + CreateSelect2({ + element: '#monthlyWeekDay', + multiple: false + }); + + CreateSelect2({ + element: '#monthlyOccurrence', + multiple: false + }); + + CreateSelect2({ + element: '#monthlyOccurrence', + multiple: false + }); + + CreateSelect2({ + element: '#yearlyMonth', + multiple: false + }); + + CreateSelect2({ + element: '#yearlyWeekDay', + multiple: false + }); + + CreateSelect2({ + element: '#yearlyOccurrence', + multiple: false + }); + + CreateSelect2({ + element: '#yearlyOtherMonth', + multiple: false + }); + + CreateSelect2({ + element: '#schedulerEnd', + multiple: false + }); + }; + + $scope.$on("updateSchedulerSelects", function() { + callSelect2(); + console.log("select2 is called"); + }); + + callSelect2(); }]; diff --git a/awx/ui/client/src/scheduler/schedulerEdit.controller.js b/awx/ui/client/src/scheduler/schedulerEdit.controller.js index 82d9fa26e4..96646bfff0 100644 --- a/awx/ui/client/src/scheduler/schedulerEdit.controller.js +++ b/awx/ui/client/src/scheduler/schedulerEdit.controller.js @@ -1,4 +1,4 @@ -export default ['$compile', '$state', '$stateParams', 'EditSchedule', 'Wait', '$scope', '$rootScope', function($compile, $state, $stateParams, EditSchedule, Wait, $scope, $rootScope) { +export default ['$compile', '$state', '$stateParams', 'EditSchedule', 'Wait', '$scope', '$rootScope', 'CreateSelect2', function($compile, $state, $stateParams, EditSchedule, Wait, $scope, $rootScope, CreateSelect2) { $scope.$on("ScheduleFormCreated", function(e, scope) { $scope.hideForm = false; $scope = angular.extend($scope, scope); @@ -53,4 +53,63 @@ export default ['$compile', '$state', '$stateParams', 'EditSchedule', 'Wait', '$ id: parseInt($stateParams.schedule_id), callback: 'SchedulesRefresh' }); + + var callSelect2 = function() { + CreateSelect2({ + element: '#schedulerTimeZone', + multiple: false + }); + + CreateSelect2({ + element: '#schedulerFrequency', + multiple: false + }); + + CreateSelect2({ + element: '#monthlyWeekDay', + multiple: false + }); + + CreateSelect2({ + element: '#monthlyOccurrence', + multiple: false + }); + + CreateSelect2({ + element: '#monthlyOccurrence', + multiple: false + }); + + CreateSelect2({ + element: '#yearlyMonth', + multiple: false + }); + + CreateSelect2({ + element: '#yearlyWeekDay', + multiple: false + }); + + CreateSelect2({ + element: '#yearlyOccurrence', + multiple: false + }); + + CreateSelect2({ + element: '#yearlyOtherMonth', + multiple: false + }); + + CreateSelect2({ + element: '#schedulerEnd', + multiple: false + }); + }; + + $scope.$on("updateSchedulerSelects", function() { + callSelect2(); + console.log("select2 is called"); + }); + + callSelect2(); }]; From 37c97c968dba0afbe0c25a5932c62b799961ba9a Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 12 Feb 2016 11:58:50 -0500 Subject: [PATCH 4/8] fix number spinner input issues with scheduler --- .../lib/angular-scheduler.js | 25 ++++++++++++++++--- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js b/awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js index 4f4d49e358..cbf6ec80e0 100644 --- a/awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js +++ b/awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js @@ -996,7 +996,11 @@ angular.module('AngularScheduler', ['underscore']) .filter('schZeroPad', [ function() { return function (n, pad) { var str = (Math.pow(10,pad) + '').replace(/^1/,'') + (n + '').trim(); - return str.substr(str.length - pad); + if (str.substr(str.length - pad) === 'll') { + return undefined; + } else { + return str.substr(str.length - pad); + } }; }]) @@ -1052,6 +1056,10 @@ angular.module('AngularScheduler', ['underscore']) return { require: 'ngModel', link: function(scope, element, attr, ctrl) { + if (element.attr("ng-model").indexOf("$parent") > -1) { + scope = scope.$parent; + attr.ngModel = attr.ngModel.split("$parent.")[1]; + } // Add jquerui spinner to 'spinner' type input var form = attr.schSpinner, zeroPad = attr.zeroPad, @@ -1076,16 +1084,25 @@ angular.module('AngularScheduler', ['underscore']) }); }, 100); }, + icons: { + down: "Form-numberInputButton fa fa-angle-down", + up: "Form-numberInputButton fa fa-angle-up" + }, spin: function() { - scope[form].$setDirty(); - ctrl.$dirty = true; - ctrl.$pristine = false; + if (scope[form][attr.ngModel]) { + scope[form][attr.ngModel].$setDirty(); + scope[form][attr.ngModel].$dirty = true; + scope[form][attr.ngModel].$pristine = false; + } if (!scope.$$phase) { scope.$digest(); } } }); + $('.ui-icon').text(''); + $(".ui-icon").removeClass('ui-icon ui-icon-triangle-1-n ui-icon-triangle-1-s'); + $(element).on("click", function () { $(element).select(); }); From f8550a478b1d7ab0571e904849dd219f7254e16a Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 12 Feb 2016 11:59:39 -0500 Subject: [PATCH 5/8] make saving a schedule send you back to the list route --- awx/ui/client/src/helpers/Schedules.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/awx/ui/client/src/helpers/Schedules.js b/awx/ui/client/src/helpers/Schedules.js index f73a7ee042..0924170311 100644 --- a/awx/ui/client/src/helpers/Schedules.js +++ b/awx/ui/client/src/helpers/Schedules.js @@ -55,9 +55,9 @@ export default }]) .factory('EditSchedule', ['SchedulerInit', 'ShowSchedulerModal', 'Wait', - 'Rest', 'ProcessErrors', 'GetBasePath', 'SchedulePost', + 'Rest', 'ProcessErrors', 'GetBasePath', 'SchedulePost', '$state', function(SchedulerInit, ShowSchedulerModal, Wait, Rest, ProcessErrors, - GetBasePath, SchedulePost) { + GetBasePath, SchedulePost, $state) { return function(params) { var scope = params.scope, id = params.id, @@ -171,6 +171,7 @@ export default if (callback) { scope.$emit(callback, data); } + $state.go("^"); }); scope.saveSchedule = function() { @@ -208,8 +209,8 @@ export default }]) .factory('AddSchedule', ['$location', '$stateParams', 'SchedulerInit', 'ShowSchedulerModal', 'Wait', 'GetBasePath', 'Empty', - 'SchedulePost', - function($location, $stateParams, SchedulerInit, ShowSchedulerModal, Wait, GetBasePath, Empty, SchedulePost) { + 'SchedulePost', '$state', + function($location, $stateParams, SchedulerInit, ShowSchedulerModal, Wait, GetBasePath, Empty, SchedulePost, $state) { return function(params) { var scope = params.scope, callback= params.callback, @@ -280,6 +281,7 @@ export default if (callback) { scope.$emit(callback, data); } + $state.go("^"); }); scope.saveSchedule = function() { From 8ad62b666978c1735f8196c7ffc6c8ae1aff569a Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 12 Feb 2016 12:00:26 -0500 Subject: [PATCH 6/8] fixed layout issues with form scheduler --- .../src/scheduler/schedulerForm.partial.html | 187 ++++++++++-------- .../src/scheduler/schedulertime.block.less | 2 +- 2 files changed, 109 insertions(+), 80 deletions(-) diff --git a/awx/ui/client/src/scheduler/schedulerForm.partial.html b/awx/ui/client/src/scheduler/schedulerForm.partial.html index af503a49ce..29ce37a2f5 100644 --- a/awx/ui/client/src/scheduler/schedulerForm.partial.html +++ b/awx/ui/client/src/scheduler/schedulerForm.partial.html @@ -12,7 +12,7 @@
@@ -22,13 +22,15 @@
+ ng-show="scheduler_form_new.$dirty && scheduler_form_new.schedulerName.$error.required"> A schedule name is required.
@@ -40,9 +42,10 @@ (mm/dd/yyyy) -
+
+ *
- - +
+ + +
The day must be between 1 and 31. @@ -300,6 +316,7 @@
- - - + + + +
@@ -435,12 +461,13 @@ RepeatFrequencyOptions-formGroup" ng-if="schedulerEnd && schedulerEnd.value == 'after'">
+ ng-if="schedulerEnd && schedulerEnd.value == 'on'"> -
+
+ ng-change="$parent.resetError('scheduler_endDt_error')"> -
@@ -291,7 +294,7 @@ ng-model="$parent.yearlyMonth" ng-options="m.name for m in months" ng-disabled="yearlyRepeatOption != 'month'" - class="form-control input-sm + class="MakeSelect2 form-control input-sm RepeatFrequencyOptions-spacedSelect" > @@ -335,7 +338,8 @@ ng-model="$parent.yearlyOccurrence" ng-options="o.name for o in occurrences" ng-disabled="yearlyRepeatOption != 'other'" - class="form-control input-sm + class="MakeSelect2 + form-control input-sm RepeatFrequencyOptions-spacedSelect RepeatFrequencyOptions-yearlyOccurence RepeatFrequencyOptions-thirdSelect" @@ -346,7 +350,8 @@ ng-model="$parent.yearlyWeekDay" ng-options="w.name for w in weekdays" ng-disabled="yearlyRepeatOption != 'other'" - class="form-control input-sm + class="MakeSelect2 + form-control input-sm RepeatFrequencyOptions-spacedSelect RepeatFrequencyOptions-thirdSelect" > @@ -356,7 +361,8 @@ ng-model="$parent.yearlyOtherMonth" ng-options="m.name for m in months" ng-disabled="yearlyRepeatOption != 'other'" - class="form-control input-sm + class="MakeSelect2 + form-control input-sm RepeatFrequencyOptions-thirdSelect">
@@ -451,7 +457,8 @@ ng-model="$parent.schedulerEnd" ng-options="e.name for e in endOptions" required - class="form-control input-sm" + class="MakeSelect2 + form-control input-sm" ng-change="schedulerEndChange()">