Added disabled tooltips in CTinT

This commit is contained in:
Ken Hoes 2017-02-08 15:14:16 -05:00
parent 29869f7093
commit 8aea053d4c
2 changed files with 48 additions and 0 deletions

View File

@ -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;
}
}

View File

@ -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) ?
`<span class="Form-tooltip--disabled">${definedInFileMessage}</span>` : ``;
// toggle switches
if(field.type === 'toggleSwitch') {
html += label();