Highlight document name when it can be renamed.

apps/common/main/lib/template/Header.template

@@ -2,6 +2,6 @@
     <div id="header-logo"></div>
     <div id="header-caption"><div><%= headerCaption %></div></div>
     <div id="header-developer" class="hidden"><div><%= headerDeveloper %></div></div>
-    <div id="header-documentcaption"><span><%= documentCaption %></span></div>
+    <div id="header-documentcaption"><div><%= documentCaption %></div></div>
     <div id="header-back" style="display: <%= canBack ? 'table-cell' : 'none' %>;"><div><%= textBack %></div></div>
 </div>
\ No newline at end of file

apps/common/main/lib/view/Header.js

@@ -166,7 +166,7 @@ define([
             if (!value)
                 value = '';
 
-            var dc = $('#header-documentcaption span');
+            var dc = $('#header-documentcaption div');
             if (dc)
                 dc.html(Common.Utils.String.htmlEncode(value));
 
@@ -228,7 +228,7 @@ define([
         },
 
         setCanRename: function(rename) {
-            var dc = $('#header-documentcaption span');
+            var dc = $('#header-documentcaption div');
             if (rename) {
                 var me = this;
                 dc.tooltip({title: me.txtRename, placement: 'cursor'});
@@ -252,6 +252,7 @@ define([
                 dc.off('click');
             }
             dc.css('cursor', rename ? 'pointer' : 'default');
+            dc.toggleClass('renamed', rename);
         },
 
         textBack: 'Go to Documents',

apps/common/main/resources/less/header.less

@@ -80,8 +80,17 @@
     overflow: hidden;
     text-overflow: ellipsis;
     background-color: @app-header-bg-color;
-    padding: 0 15px + @app-header-height / 3;
+    padding: 0 7px + @app-header-height / 3;
     cursor: default;
+
+    div {
+        display: inline-block;
+        padding: 2px 8px;
+
+        &.renamed {
+            background-color: @app-header-bg-color-dark;
+        }
+    }
 }
 
 #header-back {