Compact toolbar: add user button to header for changing guest name

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

@@ -100,6 +100,12 @@ define([
                                     '<div class="btn-slot" id="slot-btn-back"></div>' +
                                     '<div class="btn-slot" id="slot-btn-options"></div>' +
                                 '</div>' +
+                                '<div class="hedset">' +
+                                    '<div class="btn-slot" id="slot-btn-user-name"></div>' +
+                                    '<div class="btn-current-user hidden">' +
+                                        '<i class="icon toolbar__icon icon--inverse btn-user"></i>' +
+                                    '</div>' +
+                                '</div>' +
                             '</section>' +
                         '</section>';
 
@@ -273,11 +279,18 @@ define([
                 $panelUsers[(editingUsers > 1  || editingUsers > 0 && !appConfig.isEdit && !appConfig.isRestrictedEdit || !mode.isOffline && (mode.sharingSettingsUrl && mode.sharingSettingsUrl.length || mode.canRequestSharingSettings)) ? 'show' : 'hide']();
             }
 
-            if (me.labelUserName && appConfig.user.guest) {
-                me.labelUserName.addClass('clickable');
-                me.labelUserName.on('click', function (e) {
-                    Common.NotificationCenter.trigger('user:rename');
-                });
+
+            if (appConfig.user.guest) {
+                if (me.labelUserName) {
+                    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');
+                    });
+                }
             }
 
             if ( me.btnPrint ) {
@@ -482,6 +495,16 @@ define([
                     }
                     me.btnOptions.render($html.find('#slot-btn-options'));
 
+                    if (!config.isEdit || config.customization && !!config.customization.compactHeader) {
+                        if (config.user.guest)
+                            me.btnUserName = createTitleButton('toolbar__icon icon--inverse btn-user', $html.findById('#slot-btn-user-name'));
+                        else {
+                            me.elUserName = $html.find('.btn-current-user');
+                            me.elUserName.removeClass('hidden');
+                        }
+                        me.setUserName(me.options.userName);
+                    }
+
                     $userList = $html.find('.cousers-list');
                     $panelUsers = $html.find('.box-cousers');
                     $btnUsers = $html.find('.btn-users');
@@ -629,6 +652,15 @@ define([
                     } else this.labelUserName.hide();
                 } else {
                     this.options.userName = name;
+                    if ( this.btnUserName ) {
+                        this.btnUserName.updateHint(name);
+                    } else if (this.elUserName) {
+                        this.elUserName.tooltip({
+                            title: name,
+                            placement: 'cursor',
+                            html: true
+                        });
+                    }
                 }
 
                 return this;

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

@@ -57,11 +57,9 @@ define([
 
             this.template = [
                 '<div class="box">',
-                '<div class="input-row">',
-                '<label>' + (this.options.label ? this.options.label : this.textLabel) + '</label>',
-                '</div>',
+                '<div style="margin-bottom: 2px;">' + (this.options.label ? this.options.label : this.textLabel) + '</div>',
                 '<div id="id-dlg-username-caption" class="input-row"></div>',
-                '<div id="id-dlg-username-chk-use" class="input-row" style="margin-top: 15px;"></div>',
+                '<div id="id-dlg-username-chk-use" class="" style="margin-top: 10px;"></div>',
                 '</div>'
             ].join('');
 

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

@@ -206,6 +206,38 @@
     }
 }
 
+.btn-current-user {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 40px;
+    padding: 0 10px;
+
+    .icon {
+        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");
+        }
+    }
+}
+
 .cousers-menu {
     position: fixed;
     top: @height-tabs - 8px;

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

@@ -413,6 +413,16 @@
             }
         }
 
+        .btn-current-user {
+            .icon--inverse {
+                background-position-x: 0;
+            }
+
+            svg.icon {
+                fill: @gray-deep;
+            }
+        }
+
         #rib-doc-name {
             color: @gray-deep;
         }