From 29e8fd786d4ee00fa48721d4e7797920ac49a5ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Kottal?= <snielsen43@gmail.com>
Date: Tue, 19 Jul 2022 03:35:52 +0200
Subject: [PATCH] Tweaks the composition dialog in the content type editor
 (#12698)

* Tweaks the composition dialog in the content type editor

- removes the search field if no content types is available
- change the styling on the info text regarding missing content types
- moves the search field closer to the content type list

* fixes filter - needed vm binding, probably due to introducing ng-if and related scope trickery
tweaked css on checkbox list icon to improve alignment

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
---
 .../less/components/umb-checkbox-list.less    |  1 +
 .../compositions/compositions.html            | 61 +++++++++++--------
 2 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
index c9f47a66df..44fa84ebb8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
@@ -47,6 +47,7 @@
 
 .umb-checkbox-list__item-icon-wrapper {
   position: relative;
+  display: flex;
 
   .umb-button__progress {
     width: 10px;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
index 9ebb9d4e45..99e18c067d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
@@ -16,55 +16,62 @@
             <umb-box>
                 <umb-box-content>
 
-                    <div class="umb-control-group">
-
-                        <umb-search-filter
-                            input-id="composition-search"
-                            model="searchTerm"
-                            label-key="placeholders_filter"
-                            text="Type to filter..."
-                            css-class="w-100"
-                            auto-focus="true">
-                        </umb-search-filter>
+                  <div ng-if="model.availableCompositeContentTypes.length !== 0">
 
+                    <div class="mb2">
+                      <localize key="contentTypeEditor_compositionsDescription">
+                        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.
+                      </localize>
                     </div>
 
                     <div class="umb-control-group">
-                        <localize key="contentTypeEditor_compositionsDescription">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.</localize>
+
+                      <umb-search-filter input-id="composition-search"
+                                         model="vm.searchTerm"
+                                         label-key="placeholders_filter"
+                                         text="Type to filter..."
+                                         css-class="w-100"
+                                         auto-focus="true">
+                      </umb-search-filter>
+
                     </div>
 
-                    <umb-empty-state ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes <= 1"
-                                     position="center">
+                  </div>
+
+                    <div ng-if="model.availableCompositeContentTypes.length === 0">
+
+                      <div ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes <= 1">
                         <localize key="contentTypeEditor_noAvailableCompositions">There are no Content Types available to use as a composition.</localize>
-                    </umb-empty-state>
+                      </div>
 
-                    <umb-empty-state ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1">
+                      <div ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1">
                         <localize key="contentTypeEditor_compositionInUse">This Content Type is used in a composition, and therefore cannot be composed itself.</localize>
-                    </umb-empty-state>
+                      </div>
 
-                    <div ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1 && model.whereCompositionUsed.length > 0">
+                      <div ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1 && model.whereCompositionUsed.length > 0">
                         <h5><localize key="contentTypeEditor_compositionUsageHeading">Where is this composition used?</localize></h5>
                         <p><localize key="contentTypeEditor_compositionUsageSpecification">This composition is currently used in the composition of the following Content Types:</localize></p>
                         <ul class="umb-checkbox-list">
-                            <li class="umb-checkbox-list__item"
-                                ng-repeat="contentTypeEntity in model.whereCompositionUsed">
-                                <a ng-click="vm.openContentType(contentTypeEntity.contentType, model.section)">
-                                    <umb-icon icon="{{contentTypeEntity.contentType.icon}}"></umb-icon>
-                                    &nbsp;{{contentTypeEntity.contentType.name}}
-                                </a>
-                            </li>
+                          <li class="umb-checkbox-list__item"
+                              ng-repeat="contentTypeEntity in model.whereCompositionUsed">
+                            <a ng-click="vm.openContentType(contentTypeEntity.contentType, model.section)">
+                              <umb-icon icon="{{contentTypeEntity.contentType.icon}}"></umb-icon>
+                              &nbsp;{{contentTypeEntity.contentType.name}}
+                            </a>
+                          </li>
                         </ul>
+                      </div>
                     </div>
 
                     <div class="umb-control-group -no-border" ng-if="vm.availableGroups.length > 0">
-                        <ul class="umb-checkbox-list" ng-repeat="group in vm.availableGroups | filter:searchTerm">
+                        <ul class="umb-checkbox-list" ng-repeat="group in vm.availableGroups | filter:vm.searchTerm">
                             <li ng-show="vm.availableGroups.length > 1">
                                 <umb-icon icon="icon-folder" class="umb-checkbox-list__item-icon"></umb-icon>
                                 {{group.containerPath}}
                             </li>
                             <li class="umb-checkbox-list__item"
-                                ng-repeat="compositeContentType in group.compositeContentTypes | orderBy:'contentType.name' | filter:searchTerm"
+                                ng-repeat="compositeContentType in group.compositeContentTypes | orderBy:'contentType.name' | filter:vm.searchTerm"
                                 ng-class="{'-disabled': (compositeContentType.allowed === false && !compositeContentType.selected) || compositeContentType.inherited, '-selected': compositeContentType.selected}">
 
                                 <div class="umb-checkbox-list__item-checkbox" ng-class="{'-selected': compositeContentType.selected }">