update scheduler list styling

awx/ui/client/legacy-styles/lists.less

@@ -285,6 +285,15 @@ table, tbody {
     padding-right: 0px!important;
 }
 
+.List-staticColumn--toggle {
+    width: 55px;
+    padding-right: 0px !important;
+}
+
+.List-staticColumn--schedulerTime {
+    max-width: 164px;
+}
+
 .List-staticColumnAdjacent {
     padding-left: 10px!important;
 }

awx/ui/client/src/lists/Schedules.js

@@ -18,29 +18,40 @@ export default
         hover: true,
 
         fields: {
+            toggleSchedule: {
+                label: '',
+                columnClass: 'List-staticColumn--toggle',
+                type: "toggle",
+                ngClick: "toggleSchedule($event, schedule.id)",
+                awToolTip: "{{ schedule.play_tip }}",
+                dataTipWatch: "schedule.play_tip",
+                dataPlacement: "right",
+                searchable: false,
+                nosort: true,
+            },
             name: {
                 key: true,
                 label: 'Name',
                 ngClick: "editSchedule(schedule.id)",
-                columnClass: "col-md-3 col-sm-3 col-xs-3"
+                columnClass: "col-md-3 col-sm-3 col-xs-6"
             },
             dtstart: {
                 label: 'First Run',
                 filter: "longDate",
                 searchable: false,
-                columnClass: "col-md-2 col-sm-3 hidden-xs"
+                columnClass: "List-staticColumn--schedulerTime hidden-sm hidden-xs"
             },
             next_run: {
                 label: 'Next Run',
                 filter: "longDate",
                 searchable: false,
-                columnClass: "col-md-2 col-sm-3 col-xs-3"
+                columnClass: "List-staticColumn--schedulerTime hidden-xs"
             },
             dtend: {
                 label: 'Final Run',
                 filter: "longDate",
                 searchable: false,
-                columnClass: "col-md-2 col-sm-3 hidden-xs"
+                columnClass: "List-staticColumn--schedulerTime hidden-xs"
             }
         },
 
@@ -63,14 +74,6 @@ export default
         },
 
         fieldActions: {
-            "play": {
-                mode: "all",
-                ngClick: "toggleSchedule($event, schedule.id)",
-                awToolTip: "{{ schedule.play_tip }}",
-                dataTipWatch: "schedule.play_tip",
-                iconClass: "{{ 'fa icon-schedule-enabled-' + schedule.enabled }}",
-                dataPlacement: "top"
-            },
             edit: {
                 label: 'Edit',
                 ngClick: "editSchedule(schedule.id)",

awx/ui/client/src/scheduler/scheduleToggle.block.less

@@ -0,0 +1,52 @@
+/** @define ScheduleToggle */
+
+.ScheduleToggle {
+    border-radius: 5px;
+    border: 1px solid #b7b7b7;
+    background-color: #b7b7b7;
+    width: 40px;
+    margin-top: 2px;
+    cursor: pointer;
+}
+
+.ScheduleToggle-switch {
+    color: #848992;
+    background-color: #fff;
+    margin-left: 4px;
+    border-left: 1px solid #b7b7b7;
+    margin-right: 0px;
+    text-align: center;
+    text-transform: uppercase;
+    font-size: 11px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.ScheduleToggle.is-on {
+    border-color: #1678c4;
+    background-color: #fff;
+}
+
+.ScheduleToggle-switch.is-on {
+    margin-right: 5px;
+    margin-left: 0px;
+    background-color: #1678c4;
+    color: #fff;
+    border-left: 0;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.ScheduleToggle-switch:hover {
+    background-color: #fafafa;
+}
+
+.ScheduleToggle.is-on:hover {
+    border-color: #4498DA;
+}
+
+.ScheduleToggle-switch.is-on:hover {
+    background-color: #4498DA;
+}

awx/ui/client/src/shared/generator-helpers.js

@@ -458,6 +458,12 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                 html = Badge(field);
             } else if (field.type === 'template') {
                 html = Template(field);
+            } else if (field.type === 'toggle') {
+                html += "<td class=\"List-tableCell " + fld + "-column";
+                html += (field['class']) ? " " + field['class'] : "";
+                html += " " + field.columnClass;
+                html += "\"><div class='ScheduleToggle' ng-class='{\"is-on\": " + list.iterator + ".enabled\}' aw-tool-tip='" + field.awToolTip + "' data-placement='" + field.dataPlacement + "' data-tip-watch='" + field.dataTipWatch + "'><div ng-show='" + list.iterator + ".enabled' class='ScheduleToggle-switch is-on' ng-click='" + field.ngClick + "'>ON</div><div ng-show='!" + list.iterator + ".enabled' class='ScheduleToggle-switch' ng-click='" + field.ngClick + "'>OFF</div></div></td>";
+                console.log(html);
             } else {
                 html += "<td class=\"List-tableCell " + fld + "-column";
                 html += (field['class']) ? " " + field['class'] : "";