diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less index a9c4e6fc85..ec58ca474f 100644 --- a/awx/ui/client/legacy-styles/ansible-ui.less +++ b/awx/ui/client/legacy-styles/ansible-ui.less @@ -43,6 +43,7 @@ @import "portal.less"; @import "text-label.less"; @import "./bootstrap-datepicker.less"; +@import "awx/ui/client/src/shared/branding/colors.default.less"; /* Bootstrap fix that's causing a right margin to appear whenver a modal is opened */ @@ -107,7 +108,7 @@ a:focus { } .btn-grey:hover { - background-color: #FFF; + background-color: @default-bg; } #cowsay { @@ -317,7 +318,7 @@ i:active, #home_groups_table .actions .cancel { padding-right: 3px; } .success-badge { - color: #ffffff; + color: @default-bg; background-color: #5cb85c; } @@ -630,6 +631,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: @default-second-border; + box-shadow: none; + } + + .form-control.ng-dirty.ng-pristine:focus { + border-color: @default-link; + } /* For some reason TB 3 RC1 does not provide an input-mini */ .input-mini { @@ -704,7 +713,7 @@ legend { padding-bottom: 0; } .pagination > .active > a { - background-color: #fff; + background-color: @default-bg; color: #428bca; border-color: none; border: 1px solid #428bca; @@ -937,7 +946,7 @@ input[type="checkbox"].checkbox-no-label { .table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th { - background-color: #fff; + background-color: @default-bg; } .table-hover-inverse tbody tr:hover > td, @@ -1161,12 +1170,12 @@ input[type="checkbox"].checkbox-no-label { /* Inventory job status badge */ .failures-true { background-color: @red; - color: #fff; + color: @default-bg; } .failures-false { background-color: @green; - color: #fff; + color: @default-bg; } /* Cloud inventory status. i.e. inventory_source.status values */ @@ -1349,8 +1358,8 @@ input[type="checkbox"].checkbox-no-label { } .free-button { - background-color: #ff5850; - border: 1px solid #ff5850; + background-color: @default-err; + border: 1px solid @default-err; color: @white; } .free-button:hover { @@ -1939,20 +1948,20 @@ button.dropdown-toggle, } .tooltip.bottom .tooltip-arrow { - border-bottom-color: #848992; + border-bottom-color: @default-interface-txt; } .tooltip.top .tooltip-arrow { - border-top-color: #848992; + border-top-color: @default-interface-txt; } .tooltip.left .tooltip-arrow { - border-left-color: #848992; + border-left-color: @default-interface-txt; } .tooltip.right .tooltip-arrow { - border-right-color: #848992; + border-right-color: @default-interface-txt; } .tooltip.Tooltip.fade.bottom.in { @@ -1965,7 +1974,7 @@ button.dropdown-toggle, } .tooltip-inner { - background-color: #848992; + background-color: @default-interface-txt; } .tooltip-inner--logOut { @@ -1986,9 +1995,9 @@ button.dropdown-toggle, } .form-control { - border-color: #e1e1e1; + border-color: @default-second-border; background-color: #f6f6f6; - color: #161b1f; + color: @default-data-txt; transition: border-color 0.3s; box-shadow: none; } @@ -2018,3 +2027,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; +} diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less index 8c3de00020..0556f7e1cd 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: @default-second-border; + color: @default-data-txt; +} + .Form-numberInputButton{ - color: @field-label!important; + color: @default-icon!important; font-size: 14px; } 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..cbf6ec80e0 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) { @@ -994,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); + } }; }]) @@ -1050,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, @@ -1074,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(); }); 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() { diff --git a/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less b/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less index 956ad9e3ce..60051d07ab 100644 --- a/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less +++ b/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less @@ -1,9 +1,11 @@ /** @define RepeatFrequencyOptions */ +@import "awx/ui/client/src/shared/branding/colors.default.less"; + .RepeatFrequencyOptions { width: ~"calc(100% + 21px)"; padding: 20px; - border-left: 5px solid #e8e8e8; + border-left: 5px solid @default-border; margin-left: -20px; padding-left: 17px; padding-right: 0px; @@ -60,10 +62,10 @@ margin-top: -2px; text-transform: uppercase; font-weight: bold; - color: #848992; + color: @default-interface-txt; font-size: 13px; margin-left: -20px; - border-left: 5px solid #e8e8e8; + border-left: 5px solid @default-border; padding-left: 15px; padding-bottom: 15px; } @@ -94,7 +96,7 @@ .RepeatFrequencyOptions-inlineLabel { font-weight: normal; - color: #848992; + color: @default-interface-txt; text-transform: uppercase; flex: initial; width: 54px; @@ -115,14 +117,15 @@ margin-top: 2px; } -.RepeatFrequencyOptions-spacedSelect { +.RepeatFrequencyOptions-spacedSelect, +.RepeatFrequencyOptions-spacedSelect ~ .select2 { margin-bottom: 10px; } .RepeatFrequencyOptions-subFormBorderFixer { height: 25px; width: 5px; - background: #ffffff; + background: @default-bg; margin-left: -20px; margin-top: -25px; margin-right: 50px; @@ -137,3 +140,25 @@ flex: initial; width: 100%; } + +.RepeatFrequencyOptions-nameBorderErrorFix { + border-color: @default-err !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/scheduleToggle.block.less b/awx/ui/client/src/scheduler/scheduleToggle.block.less index f7015f4dc1..d83a7a0569 100644 --- a/awx/ui/client/src/scheduler/scheduleToggle.block.less +++ b/awx/ui/client/src/scheduler/scheduleToggle.block.less @@ -1,19 +1,21 @@ /** @define ScheduleToggle */ +@import "awx/ui/client/src/shared/branding/colors.default.less"; + .ScheduleToggle { border-radius: 5px; - border: 1px solid #b7b7b7; - background-color: #b7b7b7; + border: 1px solid @default-icon; + background-color: @default-icon; width: 40px; margin-top: 2px; cursor: pointer; } .ScheduleToggle-switch { - color: #848992; - background-color: #fff; + color: @default-interface-txt; + background-color: @default-bg; margin-left: 4px; - border-left: 1px solid #b7b7b7; + border-left: 1px solid @default-icon; margin-right: 0px; text-align: center; text-transform: uppercase; @@ -30,8 +32,8 @@ .ScheduleToggle-switch.is-on { margin-right: 5px; margin-left: 0px; - background-color: #1678c4; - color: #fff; + background-color: @default-link; + color: @default-bg; border-left: 0; border-top-right-radius: 0px; border-bottom-right-radius: 0px; @@ -40,13 +42,13 @@ } .ScheduleToggle-switch:hover { - background-color: #fafafa; + background-color: @default-tertiary-bg; } .ScheduleToggle.is-on:hover { - border-color: #4498DA; + border-color: @default-link-hov; } .ScheduleToggle-switch.is-on:hover { - background-color: #4498DA; + background-color: @default-link-hov; } diff --git a/awx/ui/client/src/scheduler/schedulerAdd.controller.js b/awx/ui/client/src/scheduler/schedulerAdd.controller.js index a6eb3e12be..26be29c03a 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,23 @@ export default ['$compile', '$state', '$stateParams', 'AddSchedule', 'Wait', '$s $scope.formCancel = function() { $state.go("^"); - } + }; AddSchedule({ scope: $scope, callback: 'SchedulesRefresh' }); + + var callSelect2 = function() { + CreateSelect2({ + element: '.MakeSelect2', + multiple: false + }); + }; + + $scope.$on("updateSchedulerSelects", function() { + callSelect2(); + }); + + callSelect2(); }]; diff --git a/awx/ui/client/src/scheduler/schedulerEdit.controller.js b/awx/ui/client/src/scheduler/schedulerEdit.controller.js index 82d9fa26e4..fb8d8052b5 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,17 @@ export default ['$compile', '$state', '$stateParams', 'EditSchedule', 'Wait', '$ id: parseInt($stateParams.schedule_id), callback: 'SchedulesRefresh' }); + + var callSelect2 = function() { + CreateSelect2({ + element: '.MakeSelect2', + multiple: false + }); + }; + + $scope.$on("updateSchedulerSelects", function() { + callSelect2(); + }); + + callSelect2(); }]; diff --git a/awx/ui/client/src/scheduler/schedulerForm.block.less b/awx/ui/client/src/scheduler/schedulerForm.block.less index 9cba269e75..d29bae3f4a 100644 --- a/awx/ui/client/src/scheduler/schedulerForm.block.less +++ b/awx/ui/client/src/scheduler/schedulerForm.block.less @@ -1,5 +1,7 @@ /** @define SchedulerForm */ +@import "awx/ui/client/src/shared/branding/colors.default.less"; + .SchedulerForm-formGroup { padding-right: 0px; } diff --git a/awx/ui/client/src/scheduler/schedulerForm.partial.html b/awx/ui/client/src/scheduler/schedulerForm.partial.html index af503a49ce..b849c90e53 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 +319,7 @@
- - - + + + +
@@ -425,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()">
@@ -435,12 +468,13 @@ RepeatFrequencyOptions-formGroup" ng-if="schedulerEnd && schedulerEnd.value == 'after'">
+ ng-if="schedulerEnd && schedulerEnd.value == 'on'"> -
+
+ ng-change="$parent.resetError('scheduler_endDt_error')"> -