diff --git a/awx/ui/client/lib/components/_index.less b/awx/ui/client/lib/components/_index.less index a0be9a31a7..81dc40c580 100644 --- a/awx/ui/client/lib/components/_index.less +++ b/awx/ui/client/lib/components/_index.less @@ -15,3 +15,4 @@ @import 'utility/_index'; @import 'code-mirror/_index'; @import 'cards/_index'; +@import 'switch/_index'; diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js index f6ae129858..8080175627 100644 --- a/awx/ui/client/lib/components/index.js +++ b/awx/ui/client/lib/components/index.js @@ -44,6 +44,7 @@ import truncate from '~components/truncate/truncate.directive'; import atCodeMirror from '~components/code-mirror'; import card from '~components/cards/card.directive'; import cardGroup from '~components/cards/group.directive'; +import atSwitch from '~components/switch/switch.directive'; import BaseInputController from '~components/input/base.controller'; import ComponentsStrings from '~components/components.strings'; @@ -98,6 +99,7 @@ angular .directive('atTruncate', truncate) .directive('atCard', card) .directive('atCardGroup', cardGroup) + .directive('atSwitch', atSwitch) .service('BaseInputController', BaseInputController) .service('ComponentsStrings', ComponentsStrings); diff --git a/awx/ui/client/lib/components/switch/_index.less b/awx/ui/client/lib/components/switch/_index.less new file mode 100644 index 0000000000..f1fa1197c5 --- /dev/null +++ b/awx/ui/client/lib/components/switch/_index.less @@ -0,0 +1,85 @@ +.atSwitch-listTableCell { + display: flex; + align-items: center; + height: 100%; + justify-content: flex-end; + padding-right: 0px; +} + +.atSwitch-outer { + position: relative; + display: inline-block; + width: 40px; + height: 26px; + cursor: pointer; + + .fa { + display: none; + } +} + +.atSwitch-on { + .atSwitch-slider { + background-color: @default-link; + } + + .atSwitch-slider:before { + -webkit-transform: translateX(16px); + -ms-transform: translateX(16px); + transform: translateX(16px); + } + + .fa { + display: block; + position: absolute; + top: 7px; + left: 4px; + color: @default-bg; + font-size: 12px; + } +} + +.atSwitch-disabled { + cursor: not-allowed; + + .atSwitch-inner { + pointer-events: none; + } + + .atSwitch-slider { + background-color: @default-icon; + } + + .atSwitch-slider:before { + background-color: @d2grey; + } + + .fa { + color: @d2grey; + } +} + +.atSwitch-slider { + position: absolute; + border-radius: 34px; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: @d2grey; + -webkit-transition: .4s; + transition: .4s; +} + +.atSwitch-slider:before { + position: absolute; + content: ""; + height: 16px; + width: 16px; + left: 4px; + bottom: 5px; + background-color: @default-bg; + -webkit-transition: .4s; + transition: .4s; + border-radius: 50%; +} diff --git a/awx/ui/client/lib/components/switch/switch.directive.js b/awx/ui/client/lib/components/switch/switch.directive.js new file mode 100644 index 0000000000..cf33d29f55 --- /dev/null +++ b/awx/ui/client/lib/components/switch/switch.directive.js @@ -0,0 +1,22 @@ +const templateUrl = require('~components/switch/switch.partial.html'); + +function atSwitch () { + return { + restrict: 'E', + replace: true, + templateUrl, + scope: { + hide: '=', + onToggle: '&', + switchOn: '=', + switchDisabled: '=', + tooltip: '=', + tooltipString: '@', + tooltipPlacement: '@', + tooltipContainer: '@', + tooltipWatch: '=' + }, + }; +} + +export default atSwitch; diff --git a/awx/ui/client/lib/components/switch/switch.partial.html b/awx/ui/client/lib/components/switch/switch.partial.html new file mode 100644 index 0000000000..78b2d50a5a --- /dev/null +++ b/awx/ui/client/lib/components/switch/switch.partial.html @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/awx/ui/client/lib/theme/index.less b/awx/ui/client/lib/theme/index.less index b8fba77f2a..a9f9d2bdde 100644 --- a/awx/ui/client/lib/theme/index.less +++ b/awx/ui/client/lib/theme/index.less @@ -79,7 +79,6 @@ @import '../../src/inventories-hosts/inventories/inventories.block.less'; @import '../../src/inventories-hosts/shared/associate-groups/associate-groups.block.less'; @import '../../src/inventories-hosts/shared/associate-hosts/associate-hosts.block.less'; -@import '../../src/job-submission/job-submission.block.less'; @import '../../src/license/license.block.less'; @import '../../src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less'; @import '../../src/login/loginModal/loginModal.block.less'; @@ -93,7 +92,6 @@ @import '../../src/scheduler/schedulerDatePicker.block.less'; @import '../../src/scheduler/schedulerFormDetail.block.less'; @import '../../src/scheduler/schedulertime.block.less'; -@import '../../src/scheduler/scheduleToggle.block.less'; @import '../../src/scheduler/spinnerInput.block.less'; @import '../../src/shared/container/container.block.less'; @import '../../src/shared/detail-nav/detail-nav.block.less'; diff --git a/awx/ui/client/src/configuration/forms/system-form/configuration-system.partial.html b/awx/ui/client/src/configuration/forms/system-form/configuration-system.partial.html index 2d918a55d9..0a32b40b95 100644 --- a/awx/ui/client/src/configuration/forms/system-form/configuration-system.partial.html +++ b/awx/ui/client/src/configuration/forms/system-form/configuration-system.partial.html @@ -28,17 +28,14 @@