improve layout of inner nested content; start adding hidden properties

UmbracoPackages/App_Plugins/brothers.uNesting/uNesting.css

@@ -20,7 +20,7 @@
 
 .unesting-items
 {
-  margin-top: -15px;
+  /*margin-top: -15px;*/
 }
 /*.unesting-item .unesting-items
 {
@@ -37,13 +37,30 @@
   position: relative;
 }
 
+.unesting-item.is-hidden .unesting-item-header .unesting-icons > .hidden-toggle
+{
+  opacity: 1;
+  color: #d42054;
+}
+
+.unesting-item.is-hidden .unesting-item-header-content,
+.unesting-item.is-hidden .unesting-item-header-inner > i
+{
+  opacity: 0.4;
+}
+
+.unesting-item.is-hidden .unesting-item-header-content-text
+{
+  display: none;
+}
+
 .unesting-item.is-active > .unesting-item-header:after,
 .unesting-item.is-active > .unesting-item-header:before
 {
   position: absolute;
   content: ' ';
   display: inline-block;
-  left: 5px;
+  left: 36px;
   bottom: -19px;
   border: 10px solid transparent;
   border-top-color: white;
@@ -57,17 +74,22 @@
   border-top-color: #e9e9eb;
 }
 
-.unesting-item:last-child .unesting-item-header
+.unesting-content .unesting-item.is-active > .unesting-item-header:after
+{
+  border-top-color: #faf8f8;
+}
+
+/*.unesting-item:last-child .unesting-item-header
 {
   border-bottom: none;
-}
+}*/
 
 .unesting-item-header-inner
 {
   line-height: 20px;
   position: relative;
   margin-top: 1px;
-  padding: 15px 5px;
+  padding: 20px 5px;
   color: #1b264f;
   border-radius: 3px 3px 0 0;
   border-bottom: none;
@@ -76,14 +98,14 @@
 
 /*.unesting-item:nth-child(2n+1) .unesting-item-header-inner
 {
-  background: #faf9f9;
+  background: #faf8f8;
 }*/
 
 .unesting-item-header-inner > i
 {
   position: absolute;
   top: 50%;
-  margin-top: -13px;
+  margin-top: -12px;
   left: 3px;
   font-size: 1.4rem;
   z-index: 1;
@@ -103,7 +125,7 @@
   left: -46px;
   width: 46px;
   top: -16px;
-  background: #faf9f9;
+  background: #faf8f8;
   z-index: 0;
   bottom: -15px;
 }
@@ -142,8 +164,6 @@
 
 .unesting-icons
 {
-  opacity: 0;
-  transition: opacity .12s ease-in-out;
   position: absolute;
   right: 0;
   top: 50%;
@@ -153,7 +173,13 @@
   grid-gap: 8px;
 }
 
-.unesting-item-header:hover .unesting-icons
+.unesting-icons > *
+{
+  transition: opacity .12s ease-in-out;
+  opacity: 0;
+}
+
+.unesting-item-header:hover .unesting-icons > *
 {
   opacity: 1;
 }
@@ -173,6 +199,11 @@
   transition: background 0.12s ease;
 }
 
+.unesting-icon.is-negative:hover
+{
+  color: #d42054;
+}
+
 .unesting-icon:hover
 {
   background: #f6f4f4;
@@ -231,18 +262,24 @@
 
 .unesting-item.is-active > .unesting-content
 {
-  background: #faf9f9;
+  background: #faf8f8;
-  margin: 0 -20px;
+  margin: 0 -20px 0 0;
-  border-left: none;
+  border-left: 1px solid #e9e9eb;
   border-right: none;
   border-radius: 0;
   border-top: 1px solid #e9e9eb;
 }
 
+.hidelabel .unesting-item.is-active > .unesting-content
+{
+  margin: 0 -20px;
+  border-left: none;
+}
+
 .unesting-content .unesting-item.is-active > .unesting-content
 {
   background: white;
-  margin: 0 -20px;
+  margin: 0 -20px 0 0;
   border-left: 1px solid #e9e9eb;
 }
 
@@ -252,6 +289,19 @@
 }
 
 
+/* nested content in nested content */
+
+.unesting-item .unesting-item .unesting-item-header-content.--has-icon
+{
+  border-left-color: #e9e9eb;
+}
+
+.unesting-item .unesting-item .unesting-item-header
+{
+  border-bottom-color: #e9e9eb;
+}
+
+
 /* media */
 .unesting-media
 {
@@ -330,6 +380,14 @@
 }
 
 
+/* settings */
+
+.umb-property[unesting-property="uNestingHide"]
+{
+  display: none;
+}
+
+
 /* data type overrides */
 .unesting-item .umb-sortable-thumbnails li
 {
@@ -347,4 +405,15 @@
 .btn
 {
   font-size: 14px;
+}
+
+.tabLink.active::before
+{
+  display: none;
+}
+
+.tabLink:not(.active)
+{
+  background: rgba(255,255,255,0.5);
+  font-weight: 400;
 }

UmbracoPackages/App_Plugins/brothers.uNesting/uNesting.editor.html

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

UmbracoPackages/App_Plugins/brothers.uNesting/uNesting.html

@@ -14,7 +14,7 @@
 
     <div class="unesting-items" ng-hide="nodes.length === 0" ng-class="{ 'is-hidden': nodes.length === 0 }" ui-sortable="sortableOptions" ng-model="nodes">
 
-      <div class="unesting-item" ng-repeat="node in nodes" ng-class="{ 'is-active' : $parent.realCurrentNode.key === node.key, 'umb-nested-content__item--single' : $parent.singleMode, 'is-hidden': $index === 1 }">
+      <div class="unesting-item" ng-repeat="node in nodes" ng-class="{ 'is-active' : $parent.realCurrentNode.key === node.key, 'umb-nested-content__item--single' : $parent.singleMode }">
 
         <div class="unesting-item-header" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">
 
@@ -28,7 +28,7 @@
             </div>
 
             <div class="unesting-icons">
-              <div class="unesting-more-container">
+              <!--<div class="unesting-more-container">
                 <a class="unesting-icon is-more" ng-click="node._showMenu=!node._showMenu; $event.stopPropagation();" prevent-default>
                   <i></i><i></i><i></i>
                 </a>
@@ -40,6 +40,12 @@
                       <span class="menu-label">Create</span>
                     </a>
                   </li>
+                  <li class="umb-action">
+                    <a title="{{copyIconTitle}}" ng-click="clickCopy($event, node);" ng-if="showCopy" prevent-default>
+                      <i class="icon icon-documents"></i>
+                      <span class="menu-label">Copy</span>
+                    </a>
+                  </li>
                   <li class="umb-action">
                     <a ng-click="" prevent-default>
                       <i class="icon icon-eye"></i>
@@ -47,29 +53,24 @@
                     </a>
                   </li>
                 </ul>
-              </div>
+              </div>-->
 
-              <a class="unesting-icon" localize="title" title="general_visibility"  ng-click="" prevent-default>
+              <a class="unesting-icon" title="{{copyIconTitle}}" ng-click="clickCopy($event, node);" ng-if="showCopy" prevent-default>
-                <i class="icon icon-lock"></i>
+                <i class="icon icon-documents"></i>
               </a>
 
-              <a class="unesting-icon" localize="title" title="general_delete" 
+              <a class="unesting-icon is-negative" localize="title" title="general_delete" 
                  ng-class="{ 'umb-nested-content__icon--disabled': $parent.nodes.length <= $parent.minItems }" 
                  ng-click="$parent.requestDeleteNode($index); $event.stopPropagation();" prevent-default>
                 <i class="icon icon-trash-alt"></i>
               </a>
+
+              <a class="unesting-icon is-negative hidden-toggle" localize="title" title="general_visibility" ng-if="canHide(model.value[$index])"  ng-click="clickHide($event, node);" prevent-default>
+                <i class="icon icon-lock"></i>
+              </a>
             </div>
           </div>
 
-          <!--<div class="umb-nested-content__icons">
-            <a class="umb-nested-content__icon umb-nested-content__icon--copy" title="{{copyIconTitle}}" ng-click="clickCopy($event, node);" ng-if="showCopy" prevent-default>
-              <i class="icon icon-documents"></i>
-            </a>
-            <a class="umb-nested-content__icon umb-nested-content__icon--delete" localize="title" title="general_delete" ng-class="{ 'umb-nested-content__icon--disabled': $parent.nodes.length <= $parent.minItems }" ng-click="$parent.requestDeleteNode($index); $event.stopPropagation();" prevent-default>
-              <i class="icon icon-trash"></i>
-            </a>
-          </div>-->
-
         </div>
 
         <div class="umb-nested-content__content unesting-content" ng-if="$parent.realCurrentNode.key === node.key && !$parent.sorting">

UmbracoPackages/App_Plugins/brothers.uNesting/uNesting.js

@@ -14,6 +14,10 @@ angular.module('umbraco.services').config(['$httpProvider', function ($httpProvi
         {
           request.url = '/App_Plugins/brothers.uNesting/uNesting.doctypepicker.html';
         }
+        else if (request.url.indexOf(Umbraco.Sys.ServerVariables.umbracoSettings.umbracoPath + "/views/propertyeditors/nestedcontent/nestedcontent.editor.html") === 0)
+        {
+          request.url = '/App_Plugins/brothers.uNesting/uNesting.editor.html';
+        }
 
         return request || $q.when(request);
       }
@@ -24,7 +28,7 @@ angular.module('umbraco.services').config(['$httpProvider', function ($httpProvi
 
 
 
-angular.module("umbraco").controller("brothers.uNesting.DocTypePickerController", function ($scope)
+angular.module("umbraco").controller("brothers.uNesting.DocTypePickerController", function ($scope, $controller)
 {
   angular.extend(this, $controller('Umbraco.PropertyEditors.NestedContent.DocTypePickerController', { $scope: $scope }));
 });
@@ -33,6 +37,20 @@ angular.module("umbraco").controller("brothers.uNesting.DocTypePickerController"
 angular.module("umbraco").controller("brothers.uNesting.PropertyEditorController", function ($scope, $controller, $http, $compile)
 {
   angular.extend(this, $controller('Umbraco.PropertyEditors.NestedContent.PropertyEditorController', { $scope: $scope }));
+
+  $scope.clickHide = function ($event, node)
+  {
+    //syncCurrentNode();
+    console.info(node);
+    $event.stopPropagation();
+    //clipboardService.copy("elementType", node.contentTypeAlias, node);
+    //$event.stopPropagation();
+  };
+
+  $scope.canHide = function (item)
+  {
+    return typeof item['uNestingHide'] !== 'undefined';
+  };
 });
 
 

UmbracoPackages/MediaExtendedController.cs

@@ -0,0 +1,52 @@
+using Newtonsoft.Json;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web.Http;
+using Umbraco.Core;
+using Umbraco.Core.Cache;
+using Umbraco.Core.Configuration;
+using Umbraco.Core.Logging;
+using Umbraco.Core.Persistence;
+using Umbraco.Core.Services;
+using Umbraco.Web;
+using Umbraco.Web.Editors;
+using Umbraco.Web.Mvc;
+using Umbraco.Web.WebApi.Filters;
+using Constants = Umbraco.Core.Constants;
+
+namespace UmbracoPackages
+{
+  /// <remarks>
+  /// This controller is decorated with the UmbracoApplicationAuthorizeAttribute which means that any user requesting
+  /// access to ALL of the methods on this controller will need access to the media application.
+  /// </remarks>
+  [PluginController("UmbracoApi")]
+  [UmbracoApplicationAuthorize(Constants.Applications.Media)]
+  public class MediaExtendedController : ContentControllerBase
+  {
+    public MediaExtendedController(IGlobalSettings globalSettings, IUmbracoContextAccessor umbracoContextAccessor, ISqlContext sqlContext, ServiceContext services, AppCaches appCaches, IProfilingLogger logger, IRuntimeState runtimeState, UmbracoHelper umbracoHelper)
+      : base(globalSettings, umbracoContextAccessor, sqlContext, services, appCaches, logger, runtimeState, umbracoHelper) { }
+
+
+    /// <summary>
+    /// Return media for the specified UDIs
+    /// </summary>
+    /// <param name="ids"></param>
+    /// <returns></returns>
+    public Dictionary<Udi, string> GetByUdis([FromUri]Udi[] ids)
+    {
+      var foundMedia = Services.MediaService.GetByIds(ids.Select(x => (x as GuidUdi).Guid));
+      return foundMedia.ToDictionary(media => (Udi)media.GetUdi(), media =>
+      {
+        string json = media.GetValue<string>("umbracoFile");
+        return JsonConvert.DeserializeObject<SrcData>(json).Src;
+      });
+    }
+
+
+    class SrcData
+    {
+      public string Src { get; set; }
+    }
+  }
+}

UmbracoPackages/UmbracoPackages.csproj

@@ -395,10 +395,10 @@
     </Reference>
   </ItemGroup>
   <ItemGroup>
-    <Content Include="App_Plugins\brothers.uNesting\interceptor.js" />
-    <Content Include="App_Plugins\brothers.uNesting\uNesting.controller.js" />
     <Content Include="App_Plugins\brothers.uNesting\uNesting.css" />
+    <Content Include="App_Plugins\brothers.uNesting\uNesting.docTypePicker.html" />
     <Content Include="App_Plugins\brothers.uNesting\uNesting.html" />
+    <Content Include="App_Plugins\brothers.uNesting\uNesting.js" />
     <Content Include="App_Plugins\brothers.uNesting\_nc.js" />
     <Content Include="App_Plugins\Cultiv.Tabify\directives\ct-tabbed-content.html" />
     <Content Include="App_Plugins\Cultiv.Tabify\directives\cttabbedcontent.directive.js" />
@@ -470,6 +470,7 @@
     <Content Include="Web.config" />
   </ItemGroup>
   <ItemGroup>
+    <Compile Include="MediaExtendedController.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
   <ItemGroup>
@@ -490,7 +491,6 @@
     <Content Include="App_Plugins\StarterKit\backoffice\tours\create-content.json" />
     <Content Include="App_Plugins\StarterKit\backoffice\tours\data-structure.json" />
     <Content Include="App_Plugins\StarterKit\package.manifest" />
-    <Content Include="App_Plugins\brothers.uNesting\elements.json" />
     <None Include="App_Plugins\brothers.uNesting\package.manifest" />
     <None Include="packages.config" />
     <Content Include="Views\Web.config" />

UmbracoPackages/config/ClientDependency.config

@@ -10,7 +10,7 @@ NOTES:
 * Compression/Combination/Minification is not enabled unless debug="false" is specified on the 'compiliation' element in the web.config
 * A new version will invalidate both client and server cache and create new persisted files
 -->
-<clientDependency version="770162484" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.CdfLogger, Umbraco.Web">
+<clientDependency version="770162486" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.CdfLogger, Umbraco.Web">
 
   <!--
     This section is used for Web Forms only, the enableCompositeFiles="true" is optional and by default is set to true.