Visual improvements to Nested Content (U4-10742) (#2457)

Author: kjac

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);
  };
 
-});
+}).filter("ncRichText", function () {
+ return function(input) {
+ return $("<div/>").html(input).text();
+ };
+});

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
 {

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>