From 0bb1d90bb33ee6c362edc1ee51840944ad26c29c Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Tue, 15 Aug 2017 14:44:59 +0300
Subject: [PATCH] [Common] rename document in title

---
 apps/common/main/lib/view/Header.js         | 28 +++++++++++++++------
 apps/common/main/resources/less/header.less | 10 +++++++-
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index 31c010e7b..bca203c83 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -70,7 +70,9 @@ define([
                 '</ul>');
 
         var templateRightBox = '<section>' +
-                            '<section id="box-doc-name"><input type="text" id="rib-doc-name" spellcheck="false" data-can-copy="false"></input></section>' +
+                            '<section id="box-doc-name">' +
+                                '<input type="text" id="rib-doc-name" spellcheck="false" data-can-copy="false"></input>' +
+                            '</section>' +
                             '<a id="rib-save-status" class="status-label locked"><%= textSaveEnd %></a>' +
                             '<div class="hedset">' +
                                 '<div class="btn-slot" id="slot-hbtn-edit"></div>' +
@@ -382,12 +384,13 @@ define([
 
                     if ( this.labelDocName ) this.labelDocName.off();
                     this.labelDocName = $html.find('#rib-doc-name');
-                    this.labelDocName.on({
-                        'keydown': onDocNameKeyDown.bind(this)
-                    });
+                    // this.labelDocName.attr('maxlength', 50);
+                    this.labelDocName.text = function (text) {
+                        this.val(text).attr('size', text.length);
+                    }
 
                     if ( this.documentCaption ) {
-                        this.labelDocName.val( this.documentCaption );
+                        this.labelDocName.text( this.documentCaption );
                     }
 
                     if ( !_.isUndefined(this.options.canRename) ) {
@@ -485,8 +488,8 @@ define([
                 this.documentCaption = value;
                 this.isModified && (value += '*');
                 if ( this.labelDocName ) {
-                    this.labelDocName.val( value );
-                    this.labelDocName.attr('size', value.length);
+                    this.labelDocName.text( value );
+                    // this.labelDocName.attr('size', value.length);
 
                     this.setCanRename(true);
                 }
@@ -504,7 +507,7 @@ define([
                 var _name = this.documentCaption;
                 changed && (_name += '*');
 
-                this.labelDocName.val(_name);
+                this.labelDocName.text(_name);
             },
 
             setCanBack: function (value) {
@@ -529,7 +532,16 @@ define([
                             title: me.txtRename,
                             placement: 'cursor'}
                         );
+
+                        label.on({
+                            'keydown': onDocNameKeyDown.bind(this),
+                            'blur': function (e) {
+
+                            }
+                        });
+
                     } else {
+                        label.off();
                         label.attr('disabled', true);
                         var tip = label.data('bs.tooltip');
                         if ( tip ) {
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index 4fb0027eb..bc92bd3f1 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -100,8 +100,16 @@
         border: 0 none;
         cursor: default;
 
-        &:focus {
+        &:hover:not(:disabled) {
+            border: 1px solid @gray-dark;
+            background-color: rgba(255,255,255,0.2);
+        }
+
+        &:focus:not(:active) {
+            border: 1px solid @gray-dark;
             cursor: text;
+            background-color: white;
+            color: @gray-deep;
         }
     }