set disabled state on compositions in overlay + a little bit of restyling

src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js

@@ -154,8 +154,6 @@
         scope.compositionsDialogModel = {};
         scope.compositionsDialogModel.title = "Compositions";
         scope.compositionsDialogModel.contentType = scope.model;
-        scope.compositionsDialogModel.availableCompositeContentTypes = scope.model.availableCompositeContentTypes;
-        scope.compositionsDialogModel.compositeContentTypes = scope.model.compositeContentTypes;
         scope.compositionsDialogModel.view = "views/common/overlays/contenttypeeditor/compositions/compositions.html";
         scope.compositionsDialogModel.show = true;
 

src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less

@@ -6,20 +6,27 @@
 .umb-checkbox-list__item {
   display: flex;
   align-items: center;
-  margin-bottom: 1px;
-  //border-bottom: 1px solid @grayLight;
+  margin-bottom: 2px;
 }
 
-.umb-checkbox-list__item.-selected {
-  background: @blue;
-  color: white;
+.umb-checkbox-list__item:last-child {
+    border-bottom: none;
+}
+
+.umb-checkbox-list__item:hover {
+    background-color: @grayLighter;
+}
+
+.umb-checkbox-list__item.-selected,
+.umb-checkbox-list__item.-disabled {
+    background-color: fade(@blueDark, 4%);
+    font-weight: bold;
 }
 
 .umb-checkbox-list__item-checkbox {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: @grayLighter;
   flex: 0 0 30px;
   height: 30px;
   margin-right: 10px;
@@ -34,7 +41,22 @@
 }
 
 .umb-checkbox-list__item-text {
-  font-size: 14px;
+  font-size: 13px;
+  margin-bottom: 0;
+  flex: 1 1 auto;
+}
+
+.umb-checkbox-list__item-text.-faded {
+    opacity: 0.5;
+}
+
+.umb-checkbox-list__item.-disabled .umb-checkbox-list__item-text  {
+    cursor: not-allowed;
+}
+
+.umb-checkbox-list__item-caption {
+    font-size: 11px;
+    margin-left: 2px;
 }
 
 .umb-checkbox-list__no-data {

src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.controller.js

@@ -0,0 +1,27 @@
+ (function() {
+	"use strict";
+
+	function CompositionsOverlay($scope) {
+
+        var vm = this;
+
+        vm.isDisabled = isDisabled;
+        vm.isSelected = isSelected;
+
+        function isSelected(alias) {
+            if($scope.model.contentType.compositeContentTypes.indexOf(alias) !== -1) {
+                return true;
+            }
+        }
+
+        function isDisabled(alias) {
+            if($scope.model.contentType.lockedCompositeContentTypes.indexOf(alias) !== -1) {
+                return true;
+            }
+        }
+
+	}
+
+	angular.module("umbraco").controller("Umbraco.Overlays.CompositionsOverlay", CompositionsOverlay);
+
+})();

src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.html

@@ -1,39 +1,49 @@
-<div class="umb-control-group">
-   <div class="form-search">
-      <i class="icon-search"></i>
-      <input type="text"
-         style="width: 100%"
-         ng-model="searchTerm"
-         class="umb-search-field search-query input-block-level"
-         placeholder="Filter..."
-         umb-auto-focus>
-   </div>
+<div ng-controller="Umbraco.Overlays.CompositionsOverlay as vm">
+
+    <div class="umb-control-group">
+       <div class="form-search">
+          <i class="icon-search"></i>
+          <input type="text"
+             style="width: 100%"
+             ng-model="searchTerm"
+             class="umb-search-field search-query input-block-level"
+             placeholder="Filter..."
+             umb-auto-focus>
+       </div>
+    </div>
+
+    <div class="umb-control-group">
+       <small>Inherit tabs and properties from an existing document type. New tabs will be added to the current document type or merged if a tab with an identical name exists.</small>
+    </div>
+
+    <umb-empty-state
+        ng-if="model.contentType.availableCompositeContentTypes.length === 0"
+        position="center">
+        This content type is used in a composition, and therefore cannot be composed itself.
+    </umb-empty-state>
+
+    <ul class="umb-checkbox-list">
+       <li class="umb-checkbox-list__item"
+            ng-repeat="compositeContentType in model.contentType.availableCompositeContentTypes | filter:searchTerm"
+            ng-class="{'-disabled': vm.isDisabled(compositeContentType.alias), '-selected': vm.isSelected(compositeContentType.alias)}">
+
+          <div class="umb-checkbox-list__item-checkbox" ng-class="{ '-disabled': vm.isDisabled(compositeContentType.alias) }">
+             <input type="checkbox"
+                id="umb-overlay-comp-{{compositeContentType.key}}"
+                checklist-model="model.contentType.compositeContentTypes"
+                checklist-value="compositeContentType.alias"
+                ng-change="model.selectCompositeContentType(compositeContentType)"
+                ng-disabled="vm.isDisabled(compositeContentType.alias)" />
+          </div>
+
+          <label for="umb-overlay-comp-{{compositeContentType.key}}" class="umb-checkbox-list__item-text" ng-class="{'-faded': vm.isDisabled(compositeContentType.alias)}">
+              <i class="{{ compositeContentType.icon }} umb-checkbox-list__item-icon"></i>
+              {{ compositeContentType.name }}
+              <span class="umb-checkbox-list__item-caption" ng-if="vm.isDisabled(compositeContentType.alias)">(inherited)</span>
+          </label>
+
+
+       </li>
+    </ul>
+
 </div>
-
-<div class="umb-control-group">
-   <small>Inherit tabs and properties from an existing document type. New tabs will be added to the current document type or merged if a tab with an identical name exists.</small>
-</div>
-
-<umb-empty-state
-    ng-if="model.availableCompositeContentTypes.length === 0"
-    position="center">
-    This content type is used in a composition, and therefore cannot be composed itself.
-</umb-empty-state>
-
-<ul class="umb-checkbox-list">
-   <li class="umb-checkbox-list__item" ng-repeat="compositeContentType in model.availableCompositeContentTypes | filter:searchTerm" ng-class="{ '-selected': model.compositeContentTypes.indexOf(compositeContentType.alias)+1, '-disabled': model.lockedCompositeContentTypes.indexOf(compositeContentType.alias)+1 }">
-
-      <div class="umb-checkbox-list__item-checkbox" ng-class="{ '-selected': model.compositeContentTypes.indexOf(compositeContentType.alias)+1 }">
-         <input type="checkbox"
-            checklist-model="model.compositeContentTypes"
-            checklist-value="compositeContentType.alias"
-            ng-change="model.selectCompositeContentType(compositeContentType)" />
-      </div>
-
-      <div class="umb-checkbox-list__item-text">
-         <i class="{{ compositeContentType.icon }} umb-checkbox-list__item-icon"></i>
-         {{ compositeContentType.name }}
-      </div>
-
-   </li>
-</ul>