diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js index 4f3472f30..8f3dcfd34 100644 --- a/apps/common/main/lib/view/Header.js +++ b/apps/common/main/lib/view/Header.js @@ -100,6 +100,12 @@ define([ '
' + '
' + '' + + '
' + + '
' + + '' + + '
' + '' + ''; @@ -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; diff --git a/apps/common/main/lib/view/UserNameDialog.js b/apps/common/main/lib/view/UserNameDialog.js index 05534a06e..5076d9bd0 100644 --- a/apps/common/main/lib/view/UserNameDialog.js +++ b/apps/common/main/lib/view/UserNameDialog.js @@ -57,11 +57,9 @@ define([ this.template = [ '
', - '
', - '', - '
', + '
' + (this.options.label ? this.options.label : this.textLabel) + '
', '
', - '
', + '
', '
' ].join(''); diff --git a/apps/common/main/resources/img/toolbar/1.25x/btn-user.png b/apps/common/main/resources/img/toolbar/1.25x/btn-user.png new file mode 100644 index 000000000..21d84e54a Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.25x/btn-user.png differ diff --git a/apps/common/main/resources/img/toolbar/1.5x/btn-user.png b/apps/common/main/resources/img/toolbar/1.5x/btn-user.png new file mode 100644 index 000000000..aaf8b3178 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.5x/btn-user.png differ diff --git a/apps/common/main/resources/img/toolbar/1.75x/btn-user.png b/apps/common/main/resources/img/toolbar/1.75x/btn-user.png new file mode 100644 index 000000000..f8557526b Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1.75x/btn-user.png differ diff --git a/apps/common/main/resources/img/toolbar/1x/btn-user.png b/apps/common/main/resources/img/toolbar/1x/btn-user.png new file mode 100644 index 000000000..bc693d9c3 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/1x/btn-user.png differ diff --git a/apps/common/main/resources/img/toolbar/2x/btn-user.png b/apps/common/main/resources/img/toolbar/2x/btn-user.png new file mode 100644 index 000000000..6eb464375 Binary files /dev/null and b/apps/common/main/resources/img/toolbar/2x/btn-user.png differ diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less index 9da7f823c..353a07aa0 100644 --- a/apps/common/main/resources/less/header.less +++ b/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; diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index a8f7639d5..63461d4c2 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/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; }