diff --git a/awx/ui/client/src/configuration/configuration.block.less b/awx/ui/client/src/configuration/configuration.block.less index b5a7d203cf..2ce7d4e4b9 100644 --- a/awx/ui/client/src/configuration/configuration.block.less +++ b/awx/ui/client/src/configuration/configuration.block.less @@ -147,6 +147,8 @@ textarea[disabled="disabled"] + div[id*="-container"]{ //Needed to show the not-allowed cursor over a Codemirror instance .Form-formGroup--disabled { cursor: not-allowed; + position: relative; + display: inline-block; // Filepicker and toggle disabling .Form-filePicker--pickerButton, .Form-filePicker--textBox, @@ -155,4 +157,46 @@ textarea[disabled="disabled"] + div[id*="-container"]{ cursor: not-allowed; } + // Adding explanatory tooltips for disabled fields + // Borrows styling from .popover + .Form-tooltip--disabled { + visibility: hidden; + background-color: @default-interface-txt; + color: @default-bg; + text-align: center; + border-radius: 6px; + + position: absolute; + z-index: 1; + width: 200px; + bottom: 110%; + left: 50%; + margin-left: -100px; + + background-clip: padding-box; + border: 1px solid rgba(0,0,0,.2); + -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); + box-shadow: 0 5px 10px rgba(0,0,0,.2); + white-space: normal; + + padding: 9px 14px; + font-size: 12px; + font-weight: bold; + } + + &:hover .Form-tooltip--disabled { + visibility: visible; + } + + .Form-tooltip--disabled::after { + content: " "; + position: absolute; + top: 100%; + left: 50%; + margin-left: -11px; + border-width: 11px; + border-style: solid; + border-color: @default-interface-txt transparent transparent transparent; + } + } diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js index 6d2809181e..17592d4f0f 100644 --- a/awx/ui/client/src/shared/form-generator.js +++ b/awx/ui/client/src/shared/form-generator.js @@ -740,6 +740,10 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat html += (field.awFeature) ? "aw-feature=\"" + field.awFeature + "\" " : ""; html += ">\n"; + var definedInFileMessage = i18n._('This setting has been set manually in a settings file and is now disabled.'); + html += (field.definedInFile) ? + `${definedInFileMessage}` : ``; + // toggle switches if(field.type === 'toggleSwitch') { html += label();