[Header] Change icon for current user

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

@@ -111,7 +111,7 @@ define([
                                     '<div class="btn-slot" id="slot-btn-favorite"></div>' +
                                 '</div>' +
                                 '<div class="hedset">' +
-                                    '<div class="btn-slot" id="slot-btn-user-name"></div>' +
+                                    '<div class="btn-slot slot-btn-user-name"></div>' +
                                     '<div class="btn-current-user btn-header hidden">' +
                                         '<i class="icon toolbar__icon icon--inverse btn-user"></i>' +
                                     '</div>' +
@@ -135,7 +135,12 @@ define([
                                     // '<label id="title-doc-name" /></label>' +
                                     '<input id="title-doc-name" autofill="off" autocomplete="off"/></input>' +
                                 '</div>' +
-                                '<label id="title-user-name"></label>' +
+                                '<div class="hedset">' +
+                                    '<div class="btn-slot slot-btn-user-name"></div>' +
+                                    '<div class="btn-current-user btn-header hidden">' +
+                                        '<i class="icon toolbar__icon icon--inverse btn-user"></i>' +
+                                    '</div>' +
+                                '</div>' +
                             '</section>';
 
         function onResetUsers(collection, opts) {
@@ -281,12 +286,7 @@ define([
 
 
             if (appConfig.user.guest && appConfig.canRenameAnonymous) {
-                if (me.labelUserName) {
+                if (me.btnUserName) {
-                    me.labelUserName.addClass('clickable');
-                    me.labelUserName.on('click', function (e) {
-                        Common.NotificationCenter.trigger('user:rename');
-                    });
-                } else if (me.btnUserName) {
                     me.btnUserName.on('click', function (e) {
                         Common.NotificationCenter.trigger('user:rename');
                     });
@@ -531,7 +531,7 @@ define([
 
                     if (!config.isEdit || config.customization && !!config.customization.compactHeader) {
                         if (config.user.guest && config.canRenameAnonymous)
-                            me.btnUserName = createTitleButton('toolbar__icon icon--inverse btn-user', $html.findById('#slot-btn-user-name'), undefined, 'bottom', 'big' );
+                            me.btnUserName = createTitleButton('toolbar__icon icon--inverse btn-user', $html.findById('.slot-btn-user-name'), undefined, 'bottom', 'big' );
                         else {
                             me.elUserName = $html.find('.btn-current-user');
                             me.elUserName.removeClass('hidden');
@@ -557,7 +557,12 @@ define([
                     me.labelDocName.val( me.documentCaption );
                     me.options.wopi && me.labelDocName.attr('maxlength', me.options.wopi.FileNameMaxLength);
 
-                    me.labelUserName = $('> #title-user-name', $html);
+                    if (config.user.guest && config.canRenameAnonymous)
+                        me.btnUserName = createTitleButton('toolbar__icon icon--inverse btn-user', $html.findById('.slot-btn-user-name'), undefined, 'bottom', 'big' );
+                    else {
+                        me.elUserName = $html.find('.btn-current-user');
+                        me.elUserName.removeClass('hidden');
+                    }
                     me.setUserName(me.options.userName);
 
                     if ( config.canPrint && config.isEdit ) {
@@ -727,11 +732,6 @@ define([
             },
 
             setUserName: function(name) {
-                if ( !!this.labelUserName ) {
-                    if ( !!name ) {
-                        this.labelUserName.text(name).show();
-                    } else this.labelUserName.hide();
-                } else {
                 this.options.userName = name;
                 if ( this.btnUserName ) {
                     this.btnUserName.updateHint(name);
@@ -742,7 +742,6 @@ define([
                         html: true
                     });
                 }
-                }
 
                 return this;
             },
@@ -767,15 +766,7 @@ define([
                         $btnShare.removeClass('disabled').removeAttr('disabled');
                     }
                 } else if ( alias == 'rename-user' ) {
-                    if (me.labelUserName) {
+                    if (me.btnUserName) {
-                        if ( lock ) {
-                            me.labelUserName.removeClass('clickable');
-                            me.labelUserName.addClass('disabled');
-                        } else {
-                            me.labelUserName.addClass('clickable');
-                            me.labelUserName.removeClass('disabled');
-                        }
-                    } else if (me.btnUserName) {
                         me.btnUserName.setDisabled(lock);
                     }
                 } else {

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

@@ -194,6 +194,24 @@
         overflow: hidden;
     }
 
+    &:not(:disabled) {
+        .inner-box-icon, .caption {
+            opacity: @header-component-normal-icon-opacity;
+        }
+    }
+
+    &:active, &.active {
+        .inner-box-icon, .caption {
+            opacity: @header-component-active-icon-opacity;
+        }
+    }
+
+    &:hover:not(:disabled)  {
+        .inner-box-icon, .caption {
+            opacity: @header-component-hover-icon-opacity;
+        }
+    }
+
     &.disabled {
         opacity: @component-disabled-opacity;
         pointer-events: none;
@@ -226,6 +244,24 @@
         margin: 2px 0 0 2px;
     }
 
+    &:not(:disabled) {
+        .icon, .caption {
+            opacity: @header-component-normal-icon-opacity;
+        }
+    }
+
+    &:active, &.active {
+        .icon, .caption {
+            opacity: @header-component-active-icon-opacity;
+        }
+    }
+
+    &:hover:not(:disabled)  {
+        .icon, .caption {
+            opacity: @header-component-hover-icon-opacity;
+        }
+    }
+
     &.disabled {
         opacity: @component-disabled-opacity;
         pointer-events: none;
@@ -262,6 +298,18 @@
             height:calc(~"28px/1.5");
         }
     }
+
+    &:not(:disabled) .icon {
+        opacity: @header-component-normal-icon-opacity;
+    }
+
+    &:active, &.active .icon {
+        opacity: @header-component-active-icon-opacity;
+    }
+
+    &:hover:not(:disabled) .icon {
+        opacity: @header-component-hover-icon-opacity;
+    }
 }
 
 .cousers-menu {
@@ -478,22 +526,6 @@
         border: 0 none;
         cursor: default;
    }
-    #title-user-name {
-        white-space: pre;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        text-align: right;
-        font-size: 11px;
-        width: 200px;
-        height: 100%;
-        padding: 0 12px;
-        line-height: @height-title;
-        pointer-events: none;
-        &.clickable {
-            cursor: pointer;
-            pointer-events: auto;
-        }
-   }
 
     .lr-separator {
         flex-grow: 1;