Testing the arrows for expanding and collapsing a tree

fixes: 156: Update nested content css/markup so it doesn't collide with the old package

src/SolutionInfo.cs

@@ -11,5 +11,5 @@ using System.Resources;
 
 [assembly: AssemblyVersion("1.0.*")]
 
-[assembly: AssemblyFileVersion("7.12.0")]
-[assembly: AssemblyInformationalVersion("7.12.0")]
+[assembly: AssemblyFileVersion("7.12.1")]
+[assembly: AssemblyInformationalVersion("7.12.1")]

src/Umbraco.Core/Configuration/UmbracoVersion.cs

@@ -6,7 +6,7 @@ namespace Umbraco.Core.Configuration
 {
     public class UmbracoVersion
     {
-        private static readonly Version Version = new Version("7.12.0");
+        private static readonly Version Version = new Version("7.12.1");
 
         /// <summary>
         /// Gets the current version of Umbraco.

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

@@ -39,7 +39,7 @@ angular.module("umbraco.directives")
             '<div ng-class="getNodeCssClass(node)" ng-swipe-right="options(node, $event)" ng-dblclick="load(node)" >' +
             //NOTE: This ins element is used to display the search icon if the node is a container/listview and the tree is currently in dialog
             //'<ins ng-if="tree.enablelistviewsearch && node.metaData.isContainer" class="umb-tree-node-search icon-search" ng-click="searchNode(node, $event)" alt="searchAltText"></ins>' + 
-            '<ins data-element="tree-item-expand" ng-class="{\'icon-navigation-right\': !node.expanded || node.metaData.isContainer, \'icon-navigation-down\': node.expanded && !node.metaData.isContainer}" ng-click="load(node)">&nbsp;</ins>' +
+            '<ins data-element="tree-item-expand" ng-class="{\'icon-navigation-right\': !node.expanded || enablelistviewexpand === \'true\', \'icon-navigation-down\': node.expanded || true}" ng-click="load(node)">&nbsp;</ins>' +
             '<i class="icon umb-tree-icon sprTree" ng-click="select(node, $event)"></i>' +
             '<a class="umb-tree-item__label" href="#/{{node.routePath}}" ng-click="select(node, $event)"></a>' +
             //NOTE: These are the 'option' elipses

src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less

@@ -1,16 +1,13 @@
-.nested-content
-{
+.umb-nested-content {
     text-align: center;
 }
 
-.nested-content--not-supported
-{
+.umb-nested-content--not-supported {
     opacity: 0.3;
     pointer-events: none;
 }
 
-.nested-content-overlay
-{
+.umb-nested-content-overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -19,47 +16,39 @@
     z-index: 1000;
 }
 
-.nested-content__item
-{
+.umb-nested-content__item {
     position: relative;
     text-align: left;
     border-top: solid 1px transparent;
-    background: white;
-
-
+    background: @white;
 }
 
-.nested-content__item--active:not(.nested-content__item--single)
-{
-    background: #f8f8f8;
+.umb-nested-content__item--active:not(.umb-nested-content__item--single) {
+    background: @gray-10;
 }
 
-.nested-content__item.ui-sortable-placeholder
-{
-    background: #f8f8f8;
-    border: 1px dashed #d9d9d9;
+.umb-nested-content__item.ui-sortable-placeholder {
+    background: @gray-10;
+    border: 1px dashed @gray-8;
     visibility: visible !important;
     height: 55px;
     margin-top: -1px;
 }
 
-.nested-content__item--single > .nested-content__content
-{
+.umb-nested-content__item--single > .umb-nested-content__content {
     border: 0;
 }
 
-.nested-content__item--single > .nested-content__content > .umb-pane
-{
+.umb-nested-content__item--single > .umb-nested-content__content > .umb-pane {
     margin: 0;
 }
 
-.nested-content__header-bar
-{
+.umb-nested-content__header-bar {
     padding: 15px 20px;
-    border-bottom: 1px dashed #e0e0e0;
+    border-bottom: 1px dashed @gray-8;
     text-align: right;
     cursor: pointer;
-    background-color: white;
+    background-color: @white;
 
     -moz-user-select: none;
     -khtml-user-select: none;
@@ -67,24 +56,21 @@
     -o-user-select: none;
 }
 
-.nested-content__heading {
+.umb-nested-content__heading {
     line-height: 20px;
     position: relative;
 
-    &.-with-icon
-    {
+    &.-with-icon {
         padding-left: 20px;
     }
 
-    i
-    {
-        color: #999; /* same icon color as the icons in the item type picker */
+    i {
+        color: @gray-2;
         position: absolute;
         left: 0;
     }
 
-    .nested-content__item-name
-    {
+    .umb-nested-content__item-name {
         max-height: 20px;
         text-align: left;
         white-space: nowrap;
@@ -94,22 +80,16 @@
     }
 }
 
-.nested-content__icons
-{
+.umb-nested-content__icons {
     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;
+    background-color: @white;
     padding: 5px;
 
-    &:before
-    {
+    &:before {
         content: ' ';
         position: absolute;
         display: block;
@@ -117,126 +97,118 @@
         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
-{
+.umb-nested-content__header-bar:hover .umb-nested-content__icons,
+.umb-nested-content__item--active > .umb-nested-content__header-bar .umb-nested-content__icons {
     opacity: 1;
 }
 
-.nested-content__icon,
-.nested-content__icon.nested-content__icon--disabled:hover
-{
+.umb-nested-content__icon,
+.umb-nested-content__icon.umb-nested-content__icon--disabled:hover {
     display: inline-block;
     padding: 4px 6px;
     margin: 2px;
     cursor: pointer;
-    background: #fff;
-    border: 1px solid #b6b6b6;
+    background: @white;
+    border: 1px solid @gray-7;
     border-radius: 200px;
     text-decoration: none !important;
 }
 
-.nested-content__icon:hover,
-.nested-content__icon--active
+.umb-nested-content__icon:hover,
+.umb-nested-content__icon--active
 {
-    color: white;
-    background: #2e8aea;
-    border-color: #2e8aea;
+    color: @white;
+    background: @turquoise-d1;
+    border-color: @turquoise-d1;
     text-decoration: none;
 }
 
-.nested-content__icon .icon,
-.nested-content__icon.nested-content__icon--disabled:hover .icon
-{
+.umb-nested-content__icon .icon,
+.umb-nested-content__icon.umb-nested-content__icon--disabled:hover .icon {
     display: block;
     font-size: 16px !important;
-    color: #5f5f5f;
+    color: @gray-3;
 }
 
-.nested-content__icon:hover .icon,
-.nested-content__icon--active .icon
-{
-    color: white;
+.umb-nested-content__icon:hover .icon,
+.umb-nested-content__icon--active .icon {
+    color: @white;
 }
 
-.nested-content__icon--disabled
-{
+.umb-nested-content__icon--disabled {
     opacity: 0.3;
 }
 
 
-.nested-content__footer-bar
-{
+.umb-nested-content__footer-bar {
     text-align: center;
     padding-top: 20px;
 }
 
-.nested-content__content
-{
-    border-bottom: 1px dashed #e0e0e0;
+.umb-nested-content__content {
+    border-bottom: 1px dashed @gray-8;
 }
 
-.nested-content__content .umb-control-group {
+.umb-nested-content__content .umb-control-group {
     padding-bottom: 0;
 }
 
-.nested-content__item.ui-sortable-helper .nested-content__content
-{
+.umb-nested-content__item.ui-sortable-helper .umb-nested-content__content {
     display: none !important;
 }
 
-.nested-content__help-text
-{
+.umb-nested-content__help-text {
     display: inline-block;
     padding: 10px 20px 10px 20px;
     clear: both;
     font-size: 14px;
-    color: #555;
-    background: #f8f8f8;
+    color: @gray-3;
+    background: @gray-10;
     border-radius: 15px;
 }
 
-.nested-content__doctypepicker table input, .nested-content__doctypepicker table select {
+.umb-nested-content__doctypepicker table input, 
+.umb-nested-content__doctypepicker table select {
     width: 100%;
     padding-right: 0;
 }
 
-.nested-content__doctypepicker table td.icon-navigation, .nested-content__doctypepicker i.nested-content__help-icon {
+.umb-nested-content__doctypepicker table td.icon-navigation, 
+.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
     vertical-align: middle;
-    color: #CCC;
+    color: @gray-7;
 }
 
-.nested-content__doctypepicker table td.icon-navigation:hover, .nested-content__doctypepicker i.nested-content__help-icon:hover {
-    color: #343434;
+.umb-nested-content__doctypepicker table td.icon-navigation:hover, 
+.umb-nested-content__doctypepicker i.umb-nested-content__help-icon:hover {
+    color: @gray-2;
 }
 
-.nested-content__doctypepicker i.nested-content__help-icon {
+.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
     margin-left: 10px;
 }
 
-.form-horizontal .nested-content--narrow .controls-row
+.form-horizontal .umb-nested-content--narrow .controls-row
 {
     margin-left: 40% !important;
 }
 
-.form-horizontal .nested-content--narrow .controls-row .umb-textstring,
-.form-horizontal .nested-content--narrow .controls-row .umb-textarea
+.form-horizontal .umb-nested-content--narrow .controls-row .umb-textstring,
+.form-horizontal .umb-nested-content--narrow .controls-row .umb-textarea
 {
     width: 95%;
 }
 
-.form-horizontal .nested-content--narrow .controls-row .umb-dropdown {
+.form-horizontal .umb-nested-content--narrow .controls-row .umb-dropdown {
     width: 99%;
 }
 
-.usky-grid.nested-content__node-type-picker .cell-tools-menu {
+.usky-grid.umb-nested-content__node-type-picker .cell-tools-menu {
     position: relative;
     transform: translate(-50%, -25%);
 }

src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-toggle.html

@@ -1,4 +1,4 @@
-<button ng-click="click()" class="umb-toggle dib" ng-class="{'umb-toggle--checked': checked}">
+<button ng-click="click()" type="button" class="umb-toggle dib" ng-class="{'umb-toggle--checked': checked}">
 
     <span ng-if="!labelPosition && showLabels === 'true' || labelPosition === 'left' && showLabels === 'true'">
         <span ng-if="!checked" class="umb-toggle__label umb-toggle__label--left">{{ displayLabelOff }}</span>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js

@@ -229,10 +229,10 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
         $scope.sortableOptions = {
             axis: 'y',
             cursor: "move",
-            handle: ".nested-content__icon--move",
+            handle: ".umb-nested-content__icon--move",
             start: function (ev, ui) {
                 // Yea, yea, we shouldn't modify the dom, sue me
-                $("#nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
+                $("#umb-nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
                     tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id'));
                     $(this).css("visibility", "hidden");
                 });
@@ -244,7 +244,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
                 $scope.setDirty();
             },
             stop: function (ev, ui) {
-                $("#nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
+                $("#umb-nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
                     tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
                     $(this).css("visibility", "visible");
                 });

src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html

@@ -1,4 +1,4 @@
-<div id="{{model.alias}}" class="nested-content__doctypepicker" ng-controller="Umbraco.PropertyEditors.NestedContent.DocTypePickerController">
+<div id="{{model.alias}}" class="umb-nested-content__doctypepicker" ng-controller="Umbraco.PropertyEditors.NestedContent.DocTypePickerController">
     <div>
         <table class="table table-striped">
             <thead>
@@ -45,11 +45,11 @@
             <a class="btn" ng-click="add()">
                 <localize key="general_add">Add</localize>
             </a>
-            <i class="icon icon-help-alt medium nested-content__help-icon" ng-click="showHelpText = !showHelpText"></i>
+            <i class="icon icon-help-alt medium umb-nested-content__help-icon" ng-click="showHelpText = !showHelpText"></i>
         </div>
     </div>
     <br/>
-    <div class="nested-content__help-text" ng-show="showHelpText">
+    <div class="umb-nested-content__help-text" ng-show="showHelpText">
         <p>
             <b><localize key="editcontenttype_tab">Tab</localize>:</b><br/>
             Select the tab who's properties should be displayed. If left blank, the first tab on the doc type will be used.

src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.editor.html

@@ -1,11 +1,11 @@
 <div class="umb-pane">
   <div ng-repeat="property in tab.properties" style="position: relative;">
 
-    <umb-property property="property" ng-class="{'nested-content--not-supported': property.notSupported}">
+    <umb-property property="property" ng-class="{'umb-nested-content--not-supported': property.notSupported}">
       <umb-editor model="property"></umb-editor>
     </umb-property>
 
-    <div ng-if="property.notSupported" class="nested-content-overlay"></div>
+    <div ng-if="property.notSupported" class="umb-nested-content-overlay"></div>
 
     <p ng-if="property.notSupported">{{property.notSupportedMessage}}</p>
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html

@@ -1,48 +1,48 @@
-<div id="nested-content--{{model.id}}" class="nested-content"
+<div id="umb-nested-content--{{model.id}}" class="umb-nested-content"
      ng-controller="Umbraco.PropertyEditors.NestedContent.PropertyEditorController"
-     ng-class="{'nested-content--narrow':!wideMode, 'nested-content--wide':wideMode}">
+     ng-class="{'umb-nested-content--narrow':!wideMode, 'umb-nested-content--wide':wideMode}">
     <ng-form>
 
-        <div class="nested-content__items" ng-hide="nodes.length == 0" ui-sortable="sortableOptions" ng-model="nodes">
+        <div class="umb-nested-content__items" ng-hide="nodes.length == 0" ui-sortable="sortableOptions" ng-model="nodes">
 
-            <div class="nested-content__item" ng-repeat="node in nodes" ng-class="{ 'nested-content__item--active' : $parent.realCurrentNode.key == node.key, 'nested-content__item--single' : $parent.singleMode }">
+            <div class="umb-nested-content__item" ng-repeat="node in nodes" ng-class="{ 'umb-nested-content__item--active' : $parent.realCurrentNode.key == node.key, 'umb-nested-content__item--single' : $parent.singleMode }">
 
-                <div class="nested-content__header-bar" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">
+                <div class="umb-nested-content__header-bar" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">
 
-                    <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="umb-nested-content__heading" ng-class="{'-with-icon': showIcons}"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span class="umb-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>
+                    <div class="umb-nested-content__icons">
+                        <a class="umb-nested-content__icon umb-nested-content__icon--edit" title="{{editIconTitle}}" ng-class="{ 'umb-nested-content__icon--active' : $parent.realCurrentNode.id == node.id }" ng-click="$parent.editNode($index); $event.stopPropagation();" ng-show="$parent.maxItems > 1" prevent-default>
                             <i class="icon icon-edit"></i>
                         </a>
-                        <a class="nested-content__icon nested-content__icon--move" title="{{moveIconTitle}}" ng-click="$event.stopPropagation();" ng-show="$parent.nodes.length > 1" prevent-default>
+                        <a class="umb-nested-content__icon umb-nested-content__icon--move" title="{{moveIconTitle}}" ng-click="$event.stopPropagation();" ng-show="$parent.nodes.length > 1" prevent-default>
                             <i class="icon icon-navigation"></i>
                         </a>
-                        <a class="nested-content__icon nested-content__icon--delete" title="{{deleteIconTitle}}" ng-class="{ 'nested-content__icon--disabled': $parent.nodes.length <= $parent.minItems }" ng-click="$parent.deleteNode($index); $event.stopPropagation();" prevent-default>
+                        <a class="umb-nested-content__icon umb-nested-content__icon--delete" title="{{deleteIconTitle}}" ng-class="{ 'umb-nested-content__icon--disabled': $parent.nodes.length <= $parent.minItems }" ng-click="$parent.deleteNode($index); $event.stopPropagation();" prevent-default>
                             <i class="icon icon-trash"></i>
                         </a>
                     </div>
 
                 </div>
 
-                <div class="nested-content__content" ng-if="$parent.realCurrentNode.key == node.key && !$parent.sorting">
+                <div class="umb-nested-content__content" ng-if="$parent.realCurrentNode.key == node.key && !$parent.sorting">
                     <umb-nested-content-editor ng-model="node" tab-alias="ncTabAlias" />
                 </div>
             </div>
 
         </div>
 
-        <div class="nested-content__help-text" ng-show="nodes.length == 0">
+        <div class="umb-nested-content__help-text" ng-show="nodes.length == 0">
             <localize key="grid_addElement"></localize>
         </div>
 
-        <div class="nested-content__footer-bar" ng-hide="nodes.length >= maxItems">
-            <a class="nested-content__icon" ng-click="openNodeTypePicker($event)" prevent-default>
+        <div class="umb-nested-content__footer-bar" ng-hide="nodes.length >= maxItems">
+            <a class="umb-nested-content__icon" ng-click="openNodeTypePicker($event)" prevent-default>
                 <i class="icon icon-add"></i>
             </a>
         </div>
 
-        <div class="usky-grid nested-content__node-type-picker" ng-if="overlayMenu.show">
+        <div class="usky-grid umb-nested-content__node-type-picker" ng-if="overlayMenu.show">
             <div class="cell-tools-menu" ng-style="overlayMenu.style" style="margin: 0;" delayed-mouseleave="closeNodeTypePicker()" on-delayed-mouseleave="closeNodeTypePicker()">
                 <h5>
                     <localize key="grid_insertControl" />

src/Umbraco.Web.UI/Umbraco.Web.UI.csproj

@@ -1034,9 +1034,9 @@ xcopy "$(ProjectDir)"..\packages\SqlServerCE.4.0.0.1\x86\*.* "$(TargetDir)x86\"
         <WebProjectProperties>
           <UseIIS>True</UseIIS>
           <AutoAssignPort>True</AutoAssignPort>
-          <DevelopmentServerPort>7120</DevelopmentServerPort>
+          <DevelopmentServerPort>7121</DevelopmentServerPort>
           <DevelopmentServerVPath>/</DevelopmentServerVPath>
-          <IISUrl>http://localhost:7120</IISUrl>
+          <IISUrl>http://localhost:7121</IISUrl>
           <NTLMAuthentication>False</NTLMAuthentication>
           <UseCustomServer>False</UseCustomServer>
           <CustomServerUrl>
@@ -1089,4 +1089,4 @@ xcopy "$(ProjectDir)"..\packages\SqlServerCE.4.0.0.1\x86\*.* "$(TargetDir)x86\"
     <Exec WorkingDirectory="$(ProjectDir)\..\..\" Command="powershell -ExecutionPolicy RemoteSigned -Command &quot;&amp;{ $env:PSModulePath = \&quot;$pwd\build\Modules\;$env:PSModulePath\&quot; ; Import-Module Umbraco.Build -Force -DisableNameChecking ; build-umbraco compile-belle }&quot;" />
   </Target>
   <Import Project="..\packages\AutoMapper.3.3.1\tools\AutoMapper.targets" Condition="Exists('..\packages\AutoMapper.3.3.1\tools\AutoMapper.targets')" />
-</Project>
+</Project>

src/Umbraco.Web/Trees/ApplicationTreeExtensions.cs

@@ -51,17 +51,24 @@ namespace Umbraco.Web.Trees
 
         internal static string GetRootNodeDisplayName(this TreeAttribute attribute, ILocalizedTextService textService)
         {
+            var label = $"[{attribute.Alias}]";
+
             // try to look up a the localized tree header matching the tree alias
             var localizedLabel = textService.Localize("treeHeaders/" + attribute.Alias);
-            if (string.IsNullOrEmpty(localizedLabel) == false)
-                return localizedLabel;
-
-            // otherwise return the header if it's defined
-            if (string.IsNullOrEmpty(attribute.Title) == false)
-                return attribute.Title;
             
-            // if all fails, return this to signal that a label was not found
-            return "[" + attribute.Alias + "]";
+            // if the localizedLabel returns [alias] then return the title attribute from the trees.config file, if it's defined
+            if (localizedLabel != null && localizedLabel.Equals(label, StringComparison.InvariantCultureIgnoreCase))
+            {
+                if (string.IsNullOrEmpty(attribute.Title) == false)
+                    label = attribute.Title;
+            }
+            else
+            {
+                // the localizedLabel translated into something that's not just [alias], so use the translation
+                label = localizedLabel;
+            }
+
+            return label;
         }
 
         internal static Attempt<Type> TryGetControllerTree(this ApplicationTree appTree)