From b11e89652182376c01dd8e50dab3f238bdccfe1f Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Thu, 21 Dec 2017 15:01:37 +0300
Subject: [PATCH] Change style for the empty headers.

---
 apps/common/main/lib/component/TreeView.js    | 22 ++++++++++++-------
 apps/common/main/resources/less/treeview.less | 10 +++++++++
 .../main/app/view/Navigation.js               |  8 +++++--
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/apps/common/main/lib/component/TreeView.js b/apps/common/main/lib/component/TreeView.js
index 9fcbbdf13..24e139a25 100644
--- a/apps/common/main/lib/component/TreeView.js
+++ b/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);
             },
 
diff --git a/apps/common/main/resources/less/treeview.less b/apps/common/main/resources/less/treeview.less
index 13e0fbd3c..0deb15644 100644
--- a/apps/common/main/resources/less/treeview.less
+++ b/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 {
diff --git a/apps/documenteditor/main/app/view/Navigation.js b/apps/documenteditor/main/app/view/Navigation.js
index d8f2b87d1..b30a2e66e 100644
--- a/apps/documenteditor/main/app/view/Navigation.js
+++ b/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 || {}));
 });
\ No newline at end of file