Merge pull request #5250 from kensible/4876-disabled-tooltip

Added disabled tooltips in CTinT
This commit is contained in:
kensible 2017-02-13 10:43:09 -05:00 committed by GitHub
commit 0548a2ba75
7 changed files with 58 additions and 6 deletions

View File

@ -245,13 +245,13 @@
.Form-textArea{
border-radius: 5px;
color: @field-input-text;
background-color: @field-secondary-bg!important;
background-color: @field-secondary-bg;
width:100%!important;
}
.Form-textInput{
height: 30px;
background-color: @field-secondary-bg!important;
background-color: @field-secondary-bg;
border-radius: 5px;
border:1px solid @field-border;
color: @field-input-text;

View File

@ -163,7 +163,8 @@ export default [
function addFieldInfo(form, key) {
_.extend(form.fields[key], {
awPopOver: $scope.$parent.configDataResolve[key].help_text,
awPopOver: ($scope.$parent.configDataResolve[key].defined_in_file) ?
null: $scope.$parent.configDataResolve[key].help_text,
label: $scope.$parent.configDataResolve[key].label,
name: key,
toggleSource: key,

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

@ -49,7 +49,8 @@ export default [
function addFieldInfo(form, key) {
_.extend(form.fields[key], {
awPopOver: $scope.$parent.configDataResolve[key].help_text,
awPopOver: ($scope.$parent.configDataResolve[key].defined_in_file) ?
null: $scope.$parent.configDataResolve[key].help_text,
label: $scope.$parent.configDataResolve[key].label,
name: key,
toggleSource: key,

View File

@ -122,7 +122,8 @@ export default [
function addFieldInfo(form, key) {
_.extend(form.fields[key], {
awPopOver: $scope.$parent.configDataResolve[key].help_text,
awPopOver: ($scope.$parent.configDataResolve[key].defined_in_file) ?
null: $scope.$parent.configDataResolve[key].help_text,
label: $scope.$parent.configDataResolve[key].label,
name: key,
toggleSource: key,

View File

@ -52,7 +52,8 @@
function addFieldInfo(form, key) {
_.extend(form.fields[key], {
awPopOver: $scope.$parent.configDataResolve[key].help_text,
awPopOver: ($scope.$parent.configDataResolve[key].defined_in_file) ?
null: $scope.$parent.configDataResolve[key].help_text,
label: $scope.$parent.configDataResolve[key].label,
name: key,
toggleSource: key,

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();