From c85185bdb0e8a50609fa82bd0f83c4f7af8ae1df Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Tue, 24 Jul 2018 16:19:26 +0200
Subject: [PATCH] Visual improvements to Nested Content (U4-10742) (#2457)

---
 .../common/filters/nestedcontent.filter.js    | 40 ++++++++++----
 .../less/components/umb-nested-content.less   | 54 +++++++++++++++----
 .../nestedcontent/nestedcontent.html          |  2 +-
 3 files changed, 76 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/nestedcontent.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/nestedcontent.filter.js
index 76e4e4a822..8c23094bbf 100644
--- a/src/Umbraco.Web.UI.Client/src/common/filters/nestedcontent.filter.js
+++ b/src/Umbraco.Web.UI.Client/src/common/filters/nestedcontent.filter.js
@@ -9,6 +9,13 @@ var ncNodeNameCache = {
 
 angular.module("umbraco.filters").filter("ncNodeName", function (editorState, entityResource) {
 
+    function formatLabel(firstNodeName, totalNodes) {
+        return totalNodes <= 1
+            ? firstNodeName
+            // If there is more than one item selected, append the additional number of items selected to hint that
+            : firstNodeName + " (+" + (totalNodes - 1) + ")";
+    }
+
     return function (input) {
 
         // Check we have a value at all
@@ -25,23 +32,38 @@ angular.module("umbraco.filters").filter("ncNodeName", function (editorState, en
             ncNodeNameCache.keys = {};
         }
 
+        // MNTP values are comma separated IDs. We'll only fetch the first one for the NC header.
+        var ids = input.split(',');
+        var lookupId = ids[0];
+
         // See if there is a value in the cache and use that
-        if (ncNodeNameCache.keys[input]) {
-            return ncNodeNameCache.keys[input];
+        if (ncNodeNameCache.keys[lookupId]) {
+            return formatLabel(ncNodeNameCache.keys[lookupId], ids.length);
         }
 
         // No value, so go fetch one 
         // We'll put a temp value in the cache though so we don't 
         // make a load of requests while we wait for a response
-        ncNodeNameCache.keys[input] = "Loading...";
+        ncNodeNameCache.keys[lookupId] = "Loading...";
 
-        entityResource.getById(input, "Document")
-            .then(function (ent) {
-                ncNodeNameCache.keys[input] = ent.name;
-            });
+        var type = lookupId.indexOf("umb://media/") === 0
+            ? "Media"
+            : lookupId.indexOf("umb://member/") === 0
+                ? "Member"
+                : "Document";
+        entityResource.getById(lookupId, type)
+            .then(
+                function (ent) {
+                    ncNodeNameCache.keys[lookupId] = ent.name;
+                }
+            );
 
         // Return the current value for now
-        return ncNodeNameCache.keys[input];
+        return formatLabel(ncNodeNameCache.keys[lookupId], ids.length);
     };
 
-});
\ No newline at end of file
+}).filter("ncRichText", function () {
+    return function(input) {
+        return $("<div/>").html(input).text();
+    };
+});
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
index 4f24fcf504..e2a8c8fc81 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
@@ -67,29 +67,63 @@
     -o-user-select: none;
 }
 
-.nested-content__heading
-{
-    float: left;
+.nested-content__heading {
     line-height: 20px;
-}
+    position: relative;
 
-.nested-content__heading i
-{
-    vertical-align: text-top;
-    color: #999; /* same icon color as the icons in the item type picker */
-    margin-right: 10px;
+    &.-with-icon
+    {
+        padding-left: 20px;
+    }
+
+    i
+    {
+        color: #999; /* same icon color as the icons in the item type picker */
+        position: absolute;
+        left: 0;
+    }
+
+    .nested-content__item-name
+    {
+        max-height: 20px;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+    }
 }
 
 .nested-content__icons
 {
-    margin: -6px 0;
     opacity: 0;
 
     transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -webkit-transition: opacity .15s ease-in-out;
+
+    position: absolute;
+    right: 0px;
+    top: 2px;
+    background-color: white;
+    padding: 5px;
+
+    &:before
+    {
+        content: ' ';
+        position: absolute;
+        display: block;
+        width: 30px;
+        left: -30px;
+        top: 0;
+        bottom: 0;
+        background: -webkit-linear-gradient(90deg, rgba(255,255,255,0), white);
+        background: -moz-linear-gradient(90deg, rgba(255,255,255,0), white);
+        background: linear-gradient(90deg, rgba(255,255,255,0), white);
+    }
 }
 
+
 .nested-content__header-bar:hover .nested-content__icons,
 .nested-content__item--active > .nested-content__header-bar .nested-content__icons
 {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
index eb7c98d016..03dc7d47ab 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
@@ -9,7 +9,7 @@
 
                 <div class="nested-content__header-bar" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">
 
-                    <div class="nested-content__heading"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span ng-bind="$parent.getName($index)"></span></div>
+                    <div class="nested-content__heading" ng-class="{'-with-icon': showIcons}"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span class="nested-content__item-name" ng-bind="$parent.getName($index)"></span></div>
 
                     <div class="nested-content__icons">
                         <a class="nested-content__icon nested-content__icon--edit" title="{{editIconTitle}}" ng-class="{ 'nested-content__icon--active' : $parent.realCurrentNode.id == node.id }" ng-click="$parent.editNode($index); $event.stopPropagation();" ng-show="$parent.maxItems > 1" prevent-default>