From df696b0199c63d58db953c20d82fb997843441c2 Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Thu, 13 Mar 2014 16:49:23 -0400 Subject: [PATCH] Latest inventory group dialog changes. Finished styling schedule widget slide-in. --- awx/ui/static/js/helpers/Groups.js | 40 +++++++++++-------- awx/ui/static/js/helpers/Schedules.js | 7 ++-- awx/ui/static/js/lists/Schedules.js | 2 +- awx/ui/static/less/angular-scheduler.less | 34 ++++++++++++---- awx/ui/static/less/ansible-ui.less | 2 +- .../lib/angular-scheduler.js | 27 +++++++++---- awx/ui/static/partials/inventory-edit.html | 15 ++++++- 7 files changed, 90 insertions(+), 37 deletions(-) diff --git a/awx/ui/static/js/helpers/Groups.js b/awx/ui/static/js/helpers/Groups.js index de325c82ab..5007a0a07f 100644 --- a/awx/ui/static/js/helpers/Groups.js +++ b/awx/ui/static/js/helpers/Groups.js @@ -544,7 +544,8 @@ function(ScheduleEdit, SchedulesList, GenerateList, SearchInit, PaginateInit, Re // Clean up $('#schedules-list').hide().empty(); - $('#schedules-form').hide().empty(); + $('#schedules-form-container').hide(); + $('#schedules-form').empty(); $('.tooltip').each(function () { $(this).remove(); }); @@ -556,11 +557,12 @@ function(ScheduleEdit, SchedulesList, GenerateList, SearchInit, PaginateInit, Re list = angular.copy(SchedulesList); delete list.fields.dtend; delete list.actions.stream; + list.well = false; scope = GenerateList.inject(list, { mode: 'edit', id: 'schedules-list', breadCrumbs: false, - searchSize: 'col-lg-5 col-md-5 col-sm-6 col-xs-6' + searchSize: 'col-lg-6 col-md-5 col-sm-5 col-xs-5' }); $('#schedules-list').show(); @@ -627,13 +629,18 @@ function(SchedulerInit, Rest, Wait) { scheduler, target, callback, - restore; + list, + restore, + container; Wait('start'); + list = $('#schedules-list'); target = $('#schedules-form'); + container = $('#schedules-form-container'); // Clean up any lingering stuff - target.empty().hide(); + container.hide(); + target.empty(); $('.tooltip').each(function () { $(this).remove(); }); @@ -642,29 +649,31 @@ function(SchedulerInit, Rest, Wait) { }); // Insert the scheduler widget into the hidden div - scheduler = SchedulerInit({ scope: scope }); - scheduler.inject('schedules-form', true); + scheduler = SchedulerInit({ scope: scope, requireFutureStartTime: false }); + scheduler.inject('schedules-form', false); + scheduler.clear(); scope.showRRuleDetail = false; + parent_scope.schedulesTitle = 'Edit Schedule'; // display the scheduler widget callback = function() { Wait('stop'); - target.show('slide', { direction: 'left' }, 500); + container.show('slide', { direction: 'left' }, 500); $('#group-save-button').prop('disabled', true); scope.$apply(function() { scheduler.setRRule(schedule.rrule); scheduler.setName(schedule.name); }); }; - $('#schedules-list').hide({ complete: callback, duration: 300 }); + list.hide({ complete: callback, duration: 300 }); restore = function() { $('#group-save-button').prop('disabled', false); - $('#schedules-list').show('slide', { direction: 'right' }, 500); + list.show('slide', { direction: 'right' }, 500); //refresh the list }; - scope.saveForm = function() { + parent_scope.saveScheduleForm = function() { var newSchedule, url = '/static/sample/data/schedules/inventory/data.json'; if (scheduler.isValid()) { @@ -677,11 +686,11 @@ function(SchedulerInit, Rest, Wait) { Rest.post(schedule) .success(function(){ Wait('stop'); - target.hide('slide', { direction: 'right' }, 500, restore); + container.hide('slide', { direction: 'right' }, 500, restore); }) .error(function(){ Wait('stop'); - target.hide('slide', { direction: 'right' }, 500, restore); + container.hide('slide', { direction: 'right' }, 500, restore); }); } else { @@ -689,9 +698,8 @@ function(SchedulerInit, Rest, Wait) { } }; - scope.resetForm = function() { - scheduler.setRRule(schedule.rrule); - scheduler.setName(schedule.name); + parent_scope.cancelScheduleForm = function() { + container.hide('slide', { direction: 'right' }, 500, restore); }; }; }]) @@ -859,7 +867,7 @@ function(SchedulerInit, Rest, Wait) { } } else if ($(e.target).text() === 'Schedule') { - ScheduleList({ scope: modal_scope }); + ScheduleList({ scope: parent_scope }); } }); diff --git a/awx/ui/static/js/helpers/Schedules.js b/awx/ui/static/js/helpers/Schedules.js index 7668f70b35..f77cc19b57 100644 --- a/awx/ui/static/js/helpers/Schedules.js +++ b/awx/ui/static/js/helpers/Schedules.js @@ -22,15 +22,15 @@ angular.module('SchedulesHelper', ['Utilities', 'SchedulesHelper']) if (ww > 1199) { // desktop x = 675; - y = (625 > wh) ? wh - 20 : 625; + y = (675 > wh) ? wh - 20 : 675; maxrows = 20; } else if (ww <= 1199 && ww >= 768) { x = 550; - y = (625 > wh) ? wh - 15 : 625; + y = (675 > wh) ? wh - 15 : 675; maxrows = 15; } else { x = (ww - 20); - y = (625 > wh) ? wh : 625; + y = (675 > wh) ? wh : 675; maxrows = 10; } @@ -206,6 +206,7 @@ angular.module('SchedulesHelper', ['Utilities', 'SchedulesHelper']) $('#form-container').empty(); scheduler = SchedulerInit({ scope: scope }); scheduler.inject('form-container', false); + scheduler.clear(); ShowSchedulerModal({ scope: scope }); scope.showRRuleDetail = false; diff --git a/awx/ui/static/js/lists/Schedules.js b/awx/ui/static/js/lists/Schedules.js index 2e90ea675e..5f490b2070 100644 --- a/awx/ui/static/js/lists/Schedules.js +++ b/awx/ui/static/js/lists/Schedules.js @@ -15,7 +15,7 @@ angular.module('SchedulesListDefinition', []) iterator: 'schedule', selectTitle: '', editTitle: 'Schedules', - well: false, + well: true, index: true, hover: true, diff --git a/awx/ui/static/less/angular-scheduler.less b/awx/ui/static/less/angular-scheduler.less index d03d3f56b8..4d3e41da1e 100644 --- a/awx/ui/static/less/angular-scheduler.less +++ b/awx/ui/static/less/angular-scheduler.less @@ -6,17 +6,38 @@ */ /* - #schedules-form -inventory group add/edit dialog + #schedules-form-container -inventory group add/edit dialog */ -#schedules-form { - border: 1px solid #ddd; +#schedules-form-container { + display: none; + border: 1px solid #e5e5e5; border-radius: 4px; box-shadow: 3px 3px 6px 0 #666; - padding: 8px 10px 15px 8px; + padding: 0 10px 15px 8px; } -#scheduler-modal-dialog, #schedules-form { +#schedules-title { + border-bottom: 1px solid #e5e5e5; + padding-bottom: 8px; + margin-bottom: 20px; + margin-top: 0; + + h4 { + display: inline-block; + margin: 0; + } + button { + display: inline-block; + /*margin-top: -10px;*/ + } +} + +#schedules-buttons { + text-align: right; +} + +#scheduler-modal-dialog, #schedules-form-container { display: none; overflow-x: hidden; overflow-y: auto; @@ -97,8 +118,7 @@ .error-pull-up { position: relative; - top: -15px; - margin-bottom: 15px; + top: -23px; } .red-text { diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less index 36855f89aa..b8a55d9ad9 100644 --- a/awx/ui/static/less/ansible-ui.less +++ b/awx/ui/static/less/ansible-ui.less @@ -203,7 +203,7 @@ textarea { left: 0; z-index: 1999; background-color: @black; - opacity: .4; + opacity: 0; } /* TB tooltip overrides */ diff --git a/awx/ui/static/lib/angular-scheduler/lib/angular-scheduler.js b/awx/ui/static/lib/angular-scheduler/lib/angular-scheduler.js index 42da67847e..abe6291803 100644 --- a/awx/ui/static/lib/angular-scheduler/lib/angular-scheduler.js +++ b/awx/ui/static/lib/angular-scheduler/lib/angular-scheduler.js @@ -35,7 +35,8 @@ angular.module('AngularScheduler', ['underscore']) function($log, $filter, $timezones, LoadLookupValues, SetDefaults, CreateObject, _, useTimezone, showUTCField) { return function(params) { - var scope = params.scope; + var scope = params.scope, + requireFutureStartTime = params.requireFutureStartTime || false; scope.schedulerShowTimeZone = useTimezone; scope.schedulerShowUTCStartTime = showUTCField; @@ -167,7 +168,7 @@ angular.module('AngularScheduler', ['underscore']) scope.setDefaults(); } - return CreateObject(scope); + return CreateObject(scope, requireFutureStartTime); }; }]) @@ -179,11 +180,12 @@ angular.module('AngularScheduler', ['underscore']) */ .factory('CreateObject', ['AngularScheduler.useTimezone', '$filter', 'GetRule', 'Inject', 'SetDefaults', '$timezones', 'SetRule', function(useTimezone, $filter, GetRule, Inject, SetDefaults, $timezones, SetRule) { - return function(scope) { + return function(scope, requireFutureST) { var fn = function() { this.scope = scope; this.useTimezone = useTimezone; + this.requireFutureStartTime = requireFutureST; // Evaluate user intput and build options for passing to rrule this.getOptions = function() { @@ -280,23 +282,23 @@ angular.module('AngularScheduler', ['underscore']) else { timeNow = now.getTime(); } - if (timeNow >= timeFuture) { - this.scope.startDateError("Start date and time must be in the future"); + if (this.requireFutureStartTime && timeNow >= timeFuture) { + this.scope.startDateError("Start time must be in the future"); validity = false; } } else { - this.scope.startDateError("Invalid start date and time"); + this.scope.startDateError("Invalid start time"); validity = false; } } catch(e) { - this.scope.startDateError("Invalid start date and time"); + this.scope.startDateError("Invalid start time"); validity = false; } } else { - this.scope.startDateError("Provide a valid start date and time"); + this.scope.startDateError("Provide a start time"); validity = false; } return validity; @@ -349,6 +351,15 @@ angular.module('AngularScheduler', ['underscore']) this.getUserTimezone = function() { return $timezones.getLocal(); }; + + // futureStartTime setter/getter + this.setRequireFutureStartTime = function(opt) { + this.requireFutureStartTime = opt; + }; + + this.getRequireFutureStartTime = function() { + return this.requireFutureStartTime; + }; }; return new fn(); }; diff --git a/awx/ui/static/partials/inventory-edit.html b/awx/ui/static/partials/inventory-edit.html index 8137991f11..9d61b35c39 100644 --- a/awx/ui/static/partials/inventory-edit.html +++ b/awx/ui/static/partials/inventory-edit.html @@ -27,7 +27,20 @@
-
+
+
+

+ +
+
+
+ + +
+
+
+ +