From ada183f97944947c62a468d23f212b0ad73a8904 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Mon, 8 Feb 2016 12:55:00 -0500 Subject: [PATCH] update to scheduler form styling --- awx/ui/client/legacy-styles/forms.less | 1 + .../repeatFrequencyOptions.block.less | 134 ++++ .../src/scheduler/schedulerEdit.controller.js | 2 + .../src/scheduler/schedulerForm.block.less | 44 ++ .../src/scheduler/schedulerForm.partial.html | 710 ++++++++++++------ .../src/scheduler/schedulertime.block.less | 37 + .../src/scheduler/spinnerInput.block.less | 5 + 7 files changed, 712 insertions(+), 221 deletions(-) create mode 100644 awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less create mode 100644 awx/ui/client/src/scheduler/schedulerForm.block.less create mode 100644 awx/ui/client/src/scheduler/schedulertime.block.less create mode 100644 awx/ui/client/src/scheduler/spinnerInput.block.less diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less index c8f034cc32..1f643a2226 100644 --- a/awx/ui/client/legacy-styles/forms.less +++ b/awx/ui/client/legacy-styles/forms.less @@ -206,6 +206,7 @@ input[type='radio']:checked:before { font-weight: normal; font-size: small; padding-right:5px; + width: 100%; } .Form-buttons{ diff --git a/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less b/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less new file mode 100644 index 0000000000..6b046d8a42 --- /dev/null +++ b/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less @@ -0,0 +1,134 @@ +/** @define RepeatFrequencyOptions */ + +.RepeatFrequencyOptions { + width: ~"calc(100% + 21px)"; + padding: 20px; + border-left: 5px solid #e8e8e8; + margin-left: -20px; + padding-left: 17px; + padding-right: 0px; + padding-top: 0px; + padding-bottom: 0px; + align-items: flex-start; +} + +.RepeatFrequencyOptions-formGroup { + padding-right: 0px; +} + +@media (min-width: 901px) { + .RepeatFrequencyOptions-formGroup { + flex: 0 0 auto; + margin-bottom: 25px; + width: ~"calc(33% - 32px)"; + margin-right: 50px; + } + + .RepeatFrequencyOptions-formGroup:nth-child(3n+3) { + flex: 0 0 auto; + margin-bottom: 25px; + margin-right: 0px; + } +} + +@media (min-width: 651px) and (max-width: 900px) { + .RepeatFrequencyOptions-formGroup { + flex: 0 0 auto; + margin-bottom: 25px; + width: ~"calc(50% - 25px)"; + margin-right: 50px; + } + + .RepeatFrequencyOptions-formGroup:nth-child(2n+2) { + flex: 0 0 auto; + margin-bottom: 25px; + margin-right: 0px; + } +} + +@media (max-width: 650px) { + .RepeatFrequencyOptions-formGroup { + flex: 0 0 auto; + margin-bottom: 25px; + width: 100%; + margin-right: 0px; + } +} + +.RepeatFrequencyOptions-label { + width: 100%; + margin-top: -2px; + text-transform: uppercase; + font-weight: bold; + color: #848992; + font-size: 13px; + margin-left: -20px; + border-left: 5px solid #e8e8e8; + padding-left: 15px; + padding-bottom: 15px; +} + +.RepeatFrequencyOptions-weekButtonContainer { + width: 100%; +} + +.RepeatFrequencyOptions-weekButtonGroup { + height: 27px; + width: 100%; + display: flex; +} + +.RepeatFrequencyOptions-weekButton { + height: 27px; + padding-top: 2px; + padding-right: 4px; + padding-left: 4px; + flex: 1; +} + +.RepeatFrequencyOptions-everyGroup { + display: flex; + flex-wrap: wrap; + align-items: baseline; +} + +.RepeatFrequencyOptions-inlineLabel { + font-weight: normal; + color: #848992; + text-transform: uppercase; + flex: initial; + width: 54px; + margin-left: 10px; + font-size: 13px; +} + +.RepeatFrequencyOptions-occurencesGroup { + width: 100%; +} + +.RepeatFrequencyOptions-radioLabel { + margin-top: 0px; + margin-bottom: 5px; +} + +.RepeatFrequencyOptions-everyLabel { + margin-top: 2px; +} + +.RepeatFrequencyOptions-spacedSelect { + margin-bottom: 10px; +} + +.RepeatFrequencyOptions-subFormBorderFixer { + height: 25px; + width: 5px; + background: #ffffff; + margin-left: -20px; + margin-top: -25px; + margin-right: 50px; +} + +.RepeatFrequencyOptions-monthlyOccurence, +.RepeatFrequencyOptions-yearlyOccurence { + text-transform: capitalize; +} diff --git a/awx/ui/client/src/scheduler/schedulerEdit.controller.js b/awx/ui/client/src/scheduler/schedulerEdit.controller.js index b23836f98a..4dcdf4ccf5 100644 --- a/awx/ui/client/src/scheduler/schedulerEdit.controller.js +++ b/awx/ui/client/src/scheduler/schedulerEdit.controller.js @@ -19,6 +19,8 @@ export default ['$compile', '$state', '$stateParams', 'EditSchedule', 'Wait', '$ Wait('stop'); }); + $scope.isEdit = true; + $scope.hideForm = true; $scope.formCancel = function() { diff --git a/awx/ui/client/src/scheduler/schedulerForm.block.less b/awx/ui/client/src/scheduler/schedulerForm.block.less new file mode 100644 index 0000000000..9cba269e75 --- /dev/null +++ b/awx/ui/client/src/scheduler/schedulerForm.block.less @@ -0,0 +1,44 @@ +/** @define SchedulerForm */ + +.SchedulerForm-formGroup { + padding-right: 0px; +} + +@media (min-width: 901px) { + .SchedulerForm-formGroup { + flex: 0 0 auto; + margin-bottom: 25px; + width: ~"calc(33% - 32px)"; + margin-right: 50px; + } + + .SchedulerForm-formGroup:nth-child(3n+3) { + flex: 0 0 auto; + margin-bottom: 25px; + margin-right: 0px; + } +} + +@media (min-width: 651px) and (max-width: 900px) { + .SchedulerForm-formGroup { + flex: 0 0 auto; + margin-bottom: 25px; + width: ~"calc(50% - 25px)"; + margin-right: 50px; + } + + .SchedulerForm-formGroup:nth-child(2n+2) { + flex: 0 0 auto; + margin-bottom: 25px; + margin-right: 0px; + } +} + +@media (max-width: 650px) { + .SchedulerForm-formGroup { + flex: 0 0 auto; + margin-bottom: 25px; + width: 100%; + margin-right: 0px; + } +} diff --git a/awx/ui/client/src/scheduler/schedulerForm.partial.html b/awx/ui/client/src/scheduler/schedulerForm.partial.html index 6c545ab941..038192c675 100644 --- a/awx/ui/client/src/scheduler/schedulerForm.partial.html +++ b/awx/ui/client/src/scheduler/schedulerForm.partial.html @@ -1,6 +1,7 @@
-
{{ schedulerName || "Add Schedule"}}
+
{{ schedulerName || "Add Schedule"}}
+
{{ schedulerName || "Edit Schedule"}}
-
-
-
+ -
- - -
A schedule name is required.
+
+ + +
+ A schedule name is required. +
+
+ +
+ + + + +
+
+
+ +
+ + + : + + + + : + + + +
+
+
+
+
+ + +
+ The time must be in HH24:MM:SS format. +
+
+
+ + +
+
+
+
+ Frequency Details
+
+
+ + + +
+ Please provide a value between 1 and 999. +
+
+
+
+ +
+ +
+ The day must be between 1 and 31. +
+
+
+
+ +
+ + +
+
+
+ +
+ + +
+ The day must be between 1 and 31. +
+
+
+
+ +
+ + + +
+
+ +
+
+ + + + + + + +
+
+
+ Please select one or more days. +
+
+
+ +
+ +
+
+
+ + +
+ Please provide a value between 1 and 999. +
+
+
+ +
+ + + + +
+
+ Please provide a valid date. +
+
+
+
+
+ -
Note: For facts collected older than the time period specified, save one fact scan (snapshot) per time window (frequency). For example, facts older than 30 days are purged, while one weekly fact scan is kept. - Caution: Setting both numerical variables to "0" will delete all facts.
- -
- + -
+
@@ -265,11 +536,11 @@
- +
- +
@@ -300,8 +571,5 @@ id="project_cancel_btn" ng-click="formCancel()">Cancel
- -
-
diff --git a/awx/ui/client/src/scheduler/schedulertime.block.less b/awx/ui/client/src/scheduler/schedulertime.block.less new file mode 100644 index 0000000000..981641003e --- /dev/null +++ b/awx/ui/client/src/scheduler/schedulertime.block.less @@ -0,0 +1,37 @@ +/** @define SchedulerTime */ + +.SchedulerTime { + display: flex; + flex-wrap: wrap; + align-items: flex-start; +} + +span.ui-spinner.ui-widget.ui-widget-content.ui-corner-all { + flex: 1; + width: 100%; +} + +.SchedulerTime-separator { + margin-left: 3px; + margin-right: 3px; + margin-top: 2px; +} + +.SchedulerTime-utc { + flex: 1; + display: flex; + flex-direction: column; + margin-left: 20px; + margin-top: -2px; + font-size: 12px; +} + +.SchedulerTime-utcLabel { + flex: 1; + font-weight: normal; + margin-bottom: 0; +} + +.SchedulerTime-utcTime { + flex: 1; +} diff --git a/awx/ui/client/src/scheduler/spinnerInput.block.less b/awx/ui/client/src/scheduler/spinnerInput.block.less new file mode 100644 index 0000000000..1f9a44437c --- /dev/null +++ b/awx/ui/client/src/scheduler/spinnerInput.block.less @@ -0,0 +1,5 @@ +/** @define SpinnerInput */ + +.SpinnerInput { + width: ~"calc(100% - 26px)"; +}