Amazingly improve NestedContent non-support of some editors

src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less

@@ -1,9 +1,25 @@
-.nested-content 
+.nested-content
 {
     text-align: center;
 }
 
-.nested-content__item 
+.nested-content--not-supported
+{
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+.nested-content-overlay
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+}
+
+.nested-content__item
 {
     position: relative;
     text-align: left;
@@ -18,7 +34,7 @@
     background: #f8f8f8;
 }
 
-.nested-content__item.ui-sortable-placeholder 
+.nested-content__item.ui-sortable-placeholder
 {
     background: #f8f8f8;
     border: 1px dashed #d9d9d9;
@@ -37,18 +53,18 @@
     margin: 0;
 }
 
-.nested-content__header-bar 
+.nested-content__header-bar
 {
-    padding: 15px 20px; 
+    padding: 15px 20px;
     border-bottom: 1px dashed #e0e0e0;
     text-align: right;
     cursor: pointer;
     background-color: white;
 
-    -moz-user-select: none; 
-    -khtml-user-select: none; 
-    -webkit-user-select: none; 
-    -o-user-select: none; 
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -o-user-select: none;
 }
 
 .nested-content__heading
@@ -57,14 +73,14 @@
     line-height: 20px;
 }
 
-.nested-content__heading i 
+.nested-content__heading i
 {
     vertical-align: text-top;
     color: #999; /* same icon color as the icons in the item type picker */
     margin-right: 10px;
 }
 
-.nested-content__icons 
+.nested-content__icons
 {
     margin: -6px 0;
     opacity: 0;
@@ -116,19 +132,19 @@
     color: white;
 }
 
-.nested-content__icon--disabled 
+.nested-content__icon--disabled
 {
     opacity: 0.3;
 }
 
 
-.nested-content__footer-bar 
+.nested-content__footer-bar
 {
     text-align: center;
     padding-top: 20px;
 }
 
-.nested-content__content 
+.nested-content__content
 {
     border-bottom: 1px dashed #e0e0e0;
 }
@@ -142,7 +158,7 @@
     display: none !important;
 }
 
-.nested-content__help-text 
+.nested-content__help-text
 {
     display: inline-block;
     padding: 10px 20px 10px 20px;
@@ -171,7 +187,7 @@
     margin-left: 10px;
 }
 
-.form-horizontal .nested-content--narrow .controls-row 
+.form-horizontal .nested-content--narrow .controls-row
 {
     margin-left: 40% !important;
 }

src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js

@@ -265,6 +265,17 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
             });
         }
 
+        var notSupported = [
+          "Umbraco.CheckBoxList",
+          "Umbraco.DropDownMultiple",
+          "Umbraco.MacroContainer",
+          "Umbraco.RadioButtonList",
+          "Umbraco.MultipleTextstring",
+          "Umbraco.Tags",
+          "Umbraco.UploadField",
+          "Umbraco.ImageCropper"
+        ];
+
         // Initialize
         var scaffoldsLoaded = 0;
         $scope.scaffolds = [];
@@ -276,7 +287,15 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
                 });
                 scaffold.tabs = [];
                 if (tab) {
-                    scaffold.tabs.push(tab);
+                  scaffold.tabs.push(tab);
+
+                  angular.forEach(tab.properties,
+                    function(property) {
+                      if (_.find(notSupported, function (x) { return x === property.editor; })) {
+                        property.notSupported = true;
+                        property.notSupportedMessage = "Property " + property.label + " uses editor " + property.editor + " which is not supported by NestedContent.";
+                      }
+                    });
                 }
 
                 // Store the scaffold object

src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.editor.html

@@ -1,9 +1,13 @@
 <div class="umb-pane">
+  <div ng-repeat="property in tab.properties" style="position: relative;">
 
-    <umb-property 
-        property="property"
-        ng-repeat="property in tab.properties">
-        <umb-editor model="property"></umb-editor>
+    <umb-property property="property" ng-class="{'nested-content--not-supported': property.notSupported}">
+      <umb-editor model="property"></umb-editor>
     </umb-property>
 
+    <div ng-if="property.notSupported" class="nested-content-overlay"></div>
+
+    <p ng-if="property.notSupported">{{property.notSupportedMessage}}</p>
+
+  </div>
 </div>