Change style for the empty headers.

apps/common/main/lib/component/TreeView.js

@@ -153,14 +153,7 @@ define([
                 handleSelect: true,
                 showLast: true,
                 allowScrollbar: true,
-                itemTemplate: _.template([
-                    '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'hidden' + '<% } %>" style="display: block;padding-left: <%= level*16 + 24 %>px;">',
-                    '<% if (hasSubItems) { %>',
-                    '<div class="tree-caret img-commonctrl ' + '<% if (!isExpanded) { %>' + 'up' + '<% } %>' + '" style="margin-left: <%= level*16 %>px;"></div>',
-                    '<% } %>',
-                    '<div class="name <% if (isNotHeader) { %>' + 'not-header' + '<% } %>"><%= name %></div>',
-                    '</div>'
-                ].join(''))
+                emptyItemText: ''
             },
 
             template: _.template([
@@ -169,6 +162,19 @@ define([
 
             initialize : function(options) {
                 options.store = options.store || new Common.UI.TreeViewStore();
+                options.emptyItemText = options.emptyItemText || '';
+                options.itemTemplate = options.itemTemplate || _.template([
+                    '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'hidden' + '<% } %>" style="display: block;padding-left: <%= level*16 + 24 %>px;">',
+                    '<% if (hasSubItems) { %>',
+                        '<div class="tree-caret img-commonctrl ' + '<% if (!isExpanded) { %>' + 'up' + '<% } %>' + '" style="margin-left: <%= level*16 %>px;"></div>',
+                    '<% } %>',
+                    '<% if (name!=="") { %>',
+                    '   <div class="name <% if (isNotHeader) { %>' + 'not-header' + '<% } %>"><%= name %></div>',
+                    '<% } else { %>',
+                    '   <div class="name empty">' + options.emptyItemText + '</div>',
+                    '<% } %>',
+                    '</div>'
+                ].join(''));
                 Common.UI.DataView.prototype.initialize.call(this, options);
             },
 

apps/common/main/resources/less/treeview.less

@@ -24,6 +24,11 @@
     &.selected {
       background-color: @secondary;
     }
+
+    &.selected .empty {
+      display: none;
+    }
+
   }
 
   .tree-item {
@@ -38,6 +43,11 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    &.empty {
+      color: #999;
+      font-style: italic;
+    }
   }
 
   .tree-caret {

apps/documenteditor/main/app/view/Navigation.js

@@ -71,7 +71,9 @@ define([
             this.viewNavigationList = new Common.UI.TreeView({
                 el: $('#navigation-list'),
                 store: this.storeNavigation,
-                enableKeyEvents: false
+                enableKeyEvents: false,
+                emptyText: this.txtEmpty,
+                emptyItemText: this.txtEmptyItem
             });
             this.viewNavigationList.cmpEl.off('click');
             this.navigationMenu = new Common.UI.Menu({
@@ -155,7 +157,9 @@ define([
         txtSelect: 'Select content',
         txtExpand: 'Expand all',
         txtCollapse: 'Collapse all',
-        txtExpandToLevel: 'Expand to level...'
+        txtExpandToLevel: 'Expand to level...',
+        txtEmpty: 'This document doesn\'t contain headings',
+        txtEmptyItem: 'Empty Heading'
 
     }, DE.Views.Navigation || {}));
 });