Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[Header] Show user's initials

Browse source
This commit is contained in:
Julia Radzhabova 2022-02-04 12:13:13 +03:00
parent 06a0f34d49
commit b9d2c851d1
6 changed files with 77 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
apps/common/main/lib/view/Header.js
View file

@ -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)
me.btnUserName = createTitleButton('toolbar__icon icon--inverse btn-user', $html.findById('.slot-btn-user-name'), undefined, 'bottom', 'big' );
else {
if (config.user.guest && config.canRenameAnonymous) {
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);
}
@ -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)
me.btnUserName = createTitleButton('toolbar__icon icon--inverse btn-user', $html.findById('.slot-btn-user-name'), undefined, 'bottom', 'big' );
if (config.user.guest && config.canRenameAnonymous) {
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',

2
apps/common/main/resources/less/colors-table-classic.less
View file

@ -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;

2
apps/common/main/resources/less/colors-table-dark.less
View file

@ -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;

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

@ -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;

49
apps/common/main/resources/less/header.less
View file

@ -273,45 +273,38 @@
align-items: center;
height: 100%;
width: 40px;
padding: 0 10px;
padding: 1px 3px;
.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");
}
}
&:not(:disabled) .icon {
&:not(:disabled) .color-user-name {
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;

12
apps/common/main/resources/less/toolbar.less
View file

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