[Header] Show user's initials

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

@@ -52,7 +52,7 @@ define([
 
     Common.Views.Header =  Backbone.View.extend(_.extend(function(){
         var storeUsers, appConfig;
-        var $userList, $panelUsers, $btnUsers, $panelShare, $btnShare;
+        var $userList, $panelUsers, $btnUsers, $panelShare, $btnShare, $btnUserName;
         var _readonlyRights = false;
 
         var templateUserItem =
@@ -111,9 +111,12 @@ define([
                                     '<div class="btn-slot" id="slot-btn-favorite"></div>' +
                                 '</div>' +
                                 '<div class="hedset">' +
-                                    '<div class="btn-slot slot-btn-user-name"></div>' +
+                                    // '<div class="btn-slot slot-btn-user-name"></div>' +
+                                    '<button type="button" class="btn btn-header slot-btn-user-name hidden">' +
+                                        '<div class="color-user-name"></div>' +
+                                    '</button>' +
                                     '<div class="btn-current-user btn-header hidden">' +
-                                        '<i class="icon toolbar__icon icon--inverse btn-user"></i>' +
+                                        '<div class="color-user-name"></div>' +
                                     '</div>' +
                                 '</div>' +
                             '</section>' +
@@ -136,9 +139,12 @@ define([
                                     '<input id="title-doc-name" autofill="off" autocomplete="off"/></input>' +
                                 '</div>' +
                                 '<div class="hedset">' +
-                                    '<div class="btn-slot slot-btn-user-name"></div>' +
+                                    // '<div class="btn-slot slot-btn-user-name"></div>' +
+                                    '<button type="button" class="btn btn-header slot-btn-user-name hidden">' +
+                                        '<div class="color-user-name"></div>' +
+                                    '</button>' +
                                     '<div class="btn-current-user btn-header hidden">' +
-                                        '<i class="icon toolbar__icon icon--inverse btn-user"></i>' +
+                                        '<div class="color-user-name"></div>' +
                                     '</div>' +
                                 '</div>' +
                             '</section>';
@@ -530,12 +536,21 @@ define([
                     }
 
                     if (!config.isEdit || config.customization && !!config.customization.compactHeader) {
-                        if (config.user.guest && config.canRenameAnonymous)
+                        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 = new Common.UI.Button({
-                        else {
+                                el: $html.findById('.slot-btn-user-name'),
+                                cls: 'btn-header',
+                                dataHint:'0',
+                                dataHintDirection: 'bottom',
+                                dataHintOffset: 'big',
+                                visible: true
+                            });
+                            me.btnUserName.cmpEl.removeClass('hidden');
+                        } else {
                             me.elUserName = $html.find('.btn-current-user');
                             me.elUserName.removeClass('hidden');
                         }
+                        $btnUserName = $html.find('.color-user-name');
                         me.setUserName(me.options.userName);
                     }
 
@@ -557,12 +572,22 @@ define([
                     me.labelDocName.val( me.documentCaption );
                     me.options.wopi && me.labelDocName.attr('maxlength', me.options.wopi.FileNameMaxLength);
 
-                    if (config.user.guest && config.canRenameAnonymous)
+                    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 = new Common.UI.Button({
+                            el: $html.findById('.slot-btn-user-name'),
+                            cls: 'btn-header',
+                            dataHint:'0',
+                            dataHintDirection: 'bottom',
+                            dataHintOffset: 'big',
+                            visible: true
+                        });
+                        me.btnUserName.cmpEl.removeClass('hidden');
+                    }
                     else {
                         me.elUserName = $html.find('.btn-current-user');
                         me.elUserName.removeClass('hidden');
                     }
+                    $btnUserName = $html.find('.color-user-name');
                     me.setUserName(me.options.userName);
 
                     if ( config.canPrint && config.isEdit ) {
@@ -742,7 +767,7 @@ define([
                         html: true
                     });
                 }
-
+                $btnUserName && $btnUserName.text(this.getInitials(name));
                 return this;
             },
 
@@ -792,6 +817,18 @@ define([
                 }
             },
 
+            getInitials: function(name) {
+                var fio = name.split(' ');
+                var initials = fio[0].substring(0, 1).toUpperCase();
+                for (var i = fio.length-1; i>0; i--) {
+                    if (fio[i][0]!=='(' && fio[i][0]!==')') {
+                        initials += fio[i].substring(0, 1).toUpperCase();
+                        break;
+                    }
+                }
+                return initials;
+            },
+
             textBack: 'Go to Documents',
             txtRename: 'Rename',
             txtAccessRights: 'Change access rights',

apps/common/main/resources/less/colors-table-classic.less

@@ -55,7 +55,7 @@
         --icon-normal: #444;
         --icon-normal-pressed: #fff;
         --icon-inverse: #444;
-        --icon-toolbar-header: fade(#fff, 80%);
+        --icon-toolbar-header: #fff;
         --icon-notification-badge: #000;
         --icon-contrast-popover: #fff;
         --icon-success: #5b9f27;

apps/common/main/resources/less/colors-table-dark.less

@@ -56,7 +56,7 @@
         --icon-normal: fade(#fff, 80%);
         --icon-normal-pressed: fade(#fff, 80%);
         --icon-inverse: #444;
-        --icon-toolbar-header: fade(#fff, 80%);
+        --icon-toolbar-header: #fff;
         --icon-notification-badge: #000;
         --icon-contrast-popover: #fff;
         --icon-success: #090;

apps/common/main/resources/less/colors-table-ie-fix.less

@@ -51,7 +51,7 @@
 @icon-normal-ie: #444;
 @icon-normal-pressed-ie: #fff;
 @icon-inverse-ie: #444;
-@icon-toolbar-header-ie: fade(#fff, 80%);
+@icon-toolbar-header-ie: #fff;
 @icon-notification-badge-ie: #000;
 @icon-contrast-popover-ie: #fff;
 @icon-success-ie: #5b9f27;

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

@@ -273,45 +273,38 @@
     align-items: center;
     height: 100%;
     width: 40px;
-    padding: 0 10px;
+    padding: 1px 3px;
 
-    .icon {
+    &:not(:disabled) .color-user-name {
-        width: 20px;
-        height: 20px;
-        display: inline-block;
-        background-repeat: no-repeat;
-        padding: 0;
-
-        &.icon--inverse {
-            background-position-x: -20px;
-        }
-    }
-
-    svg.icon {
-        vertical-align: middle;
-
-        @media
-        only screen and (-webkit-min-device-pixel-ratio: 1.5),
-        only screen and (min-resolution: 1.5dppx),
-        only screen and (min-resolution: 144dpi) {
-            width:calc(~"28px/1.5");
-            height:calc(~"28px/1.5");
-        }
-    }
-
-    &:not(:disabled) .icon {
         opacity: @header-component-normal-icon-opacity;
     }
 
-    &:active, &.active .icon {
+    &:active, &.active .color-user-name {
         opacity: @header-component-active-icon-opacity;
     }
 
-    &:hover:not(:disabled) .icon {
+    &:hover:not(:disabled) .color-user-name {
         opacity: @header-component-hover-icon-opacity;
     }
 }
 
+.btn-current-user, .btn-header {
+    .color-user-name {
+        width: 20px;
+        height: 20px;
+        border-radius: 20px;
+        background-color: @icon-toolbar-header-ie;
+        background-color: @icon-toolbar-header;
+        color: @header-background-color-ie;
+        color: @header-background-color;
+        font-size: 10px;
+        line-height: 20px;
+        overflow: hidden;
+        margin: 0 6px;
+        text-align: center;
+    }
+}
+
 .cousers-menu {
     position: fixed;
     top: @height-tabs - 8px;

apps/common/main/resources/less/toolbar.less

@@ -519,13 +519,11 @@
         }
 
         .btn-current-user {
-            .icon--inverse {
+            .color-user-name {
-                background-position-x: 0;
+                background-color: @text-normal-ie;
-            }
+                background-color: @text-normal;
-
+                color: @text-inverse-ie;
-            svg.icon {
+                color: @text-inverse;
-                fill: @icon-toolbar-header-ie;
-                fill: @icon-toolbar-header;
             }
         }