From d6e183b52fbfc6bc854e9652dbbeb26909e774ec Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Tue, 29 Dec 2020 10:39:00 +0300
Subject: [PATCH] Compact toolbar: add user button to header for changing guest
 name

---
 apps/common/main/lib/view/Header.js           |  42 +++++++++++++++---
 apps/common/main/lib/view/UserNameDialog.js   |   6 +--
 .../resources/img/toolbar/1.25x/btn-user.png  | Bin 0 -> 552 bytes
 .../resources/img/toolbar/1.5x/btn-user.png   | Bin 0 -> 748 bytes
 .../resources/img/toolbar/1.75x/btn-user.png  | Bin 0 -> 830 bytes
 .../resources/img/toolbar/1x/btn-user.png     | Bin 0 -> 462 bytes
 .../resources/img/toolbar/2x/btn-user.png     | Bin 0 -> 1009 bytes
 apps/common/main/resources/less/header.less   |  32 +++++++++++++
 apps/common/main/resources/less/toolbar.less  |  10 +++++
 9 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 apps/common/main/resources/img/toolbar/1.25x/btn-user.png
 create mode 100644 apps/common/main/resources/img/toolbar/1.5x/btn-user.png
 create mode 100644 apps/common/main/resources/img/toolbar/1.75x/btn-user.png
 create mode 100644 apps/common/main/resources/img/toolbar/1x/btn-user.png
 create mode 100644 apps/common/main/resources/img/toolbar/2x/btn-user.png

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([
                                     '<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;
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 = [
                 '<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('');
 
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 0000000000000000000000000000000000000000..21d84e54ab4160b7ff9eb338bcab6de76e1b10b5
GIT binary patch
literal 552
zcmV+@0@wYCP)<h;3K|Lk000e1NJLTq001%o000>X1ONa4*<H2I0005+Nkl<ZcmeHI
z!I6V740H*U;1Vc7bCPe;Mbg2g1Kfe#LFgbQPy!{W1edV)fEXJ?^0@E$rD0f!-L)2D
z{?A_ybu!2#Ngzokju-n0fer&EBmfB$BJ8IDL6UeO>WraIh(}fl)V&!Hkl;b+j6ny&
z2t~jd;$oe0+&3i4qtjzPuu#N(Ls*Q^Lq60w6@NTlywjEqIw(#M@X!M`68Q0|`Nye1
z=I?8M5+yW^0x|+WPyjPB0uiB+ij`J^?#3!)4E3yX&u*of3+yHdZcvah=%Ki0o@vL0
z<Hkc~*RK^h-6X5UL@apBSP>v-Az3Y^OhUOv@jTZ;GF3w+WCRMtR)a9rLkcmRz6QEp
z=Hhy%YDgi*B9<}6pvPQXj8qRPzUAxg)b)#4d_8_=_w{!u`b8{UkKfrbG3M(gv%qEB
zKQS=|H_X6h`!SQklapO}<H^acG@j(UBP4^&ZFcd<akp+hHybdw*@Y1mV%>v_<>xND
zA}c>G_F`S$qjC>m@!VxsgyI2P?oqWVlEk<1A>OG>HILV(Ai=ls0T0E524SdUmFI~c
zfzPt*1c7jvUB-}Iq}dObz&ojOE4xV33=bzMyt0W-`LTH-gQPb8tA>jQn<oQO8~-hz
qxcwQAJUZYLi$9~sN5ubmdwu~n-;V(AKXpg|0000<MNUMnLSTZ@?)5zY

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..aaf8b3178940a9703873605e63c88757b361a56a
GIT binary patch
literal 748
zcmeAS@N?(olHy`uVBq!ia0vp^Hb5-L!3-qb-Fj<*)Z_r45LY1W;Nai_2ClBIaE6D6
z$A28a84Mu0AZ#FsrWPmyF$yB?=H>=u0L=%IKye`H<m3cY0~7}`AR<5#qM)xf#|r2y
z!;&DsU<QHu{rCUB&sTua69N<*7TljdA;4k5{QQQ3hJyI`gam*8g7|=h{{Hg|&i_$7
z2=p7{bx#+^kP61DA?#&u6nI#g3mL!negAy9diVdQK><gEJM{%7#qMpCWeffGT-?9K
zCs=jUpBGy+wys<iW&ZYHqF%^#{vO`PCi?qdtX+3~?cXhB=F8*1)L;6@Fz1*2e6we3
zI3BFA>-V2rxu9T%FqgM*=hkICC5_fxQ@gkmgx|952)jOYAB)+=b5|KYDX0IP!(h$t
zRLcEnTY_}QwkMjCfB)JyYwz_MxxM$9{J(Er|33TiUcH{Lb*~j{s+IE?`sN)Ib?4uE
zaXZ7><)Wr+AM!q`9j(#Mw_^YB=ZSCY&vknv&+pqPv6pdWfww+G=4)P$)@ZYu?NT53
zPD!a8*mcx;LhHE;-}{7^)ZQ1)-giCefZj>7!fPklkGa3RAvkmH%wExJb2e5)CzaZE
zg*<$GbHRbODRHk?T{BaW*Ll{VcSho5;GQ+do|n1nTGoocxLI{&lC{{1_3egPo+WIr
z4<6I?oRfIyqq=L<r^33VlT9A;MbDdNp3MGy=9KWu1JlFhwmwn0+OWVhzglqXlf0};
zi_2dfe{<rcg$2L8Ynct-oSqvyOGM`Vm0?T2C-k<($EkCd<8GD77Xo5SiY50i`g=jM
z@n4X+|2OShx1(M!{%QF~Sj%^*LgMl-Zr4LoP1^qQujls?l}TY%c=ZUFJ{UY*{an^L
HB{Ts50JLhZ

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..f8557526bd06ecdcb63d54571326c58bf0b5566d
GIT binary patch
literal 830
zcmeAS@N?(olHy`uVBq!ia0vp^Za}Qe!3-qjPWHqDsR;o-A+A8$!NI}R)z#VA8A!Sy
z0XH`{4-b$3cmYs3P#4eyAaHVW0vdv>9LNPK0Ez$^KmcJtM38L+iUajR#AC1Zo&&nc
zpd`pIm_Z<a{{8p=&##YHK(Oi)6bup;)F&7$$Zu%4KVd?ALBWFc1{*dM^!H28nw8GL
zz@+Qx;uuoFn54kh!{nxx#t{2-;ZrS+mPDJTdmb!49ZNFa+&=x={;uwsRDqiXr}Ssv
z<X`3#Iqm8GvZKnv`}A8wR$0k>RX)+VY^x`SW&FCxU&<Z#U2bOhdECAe`crwu;@T$Z
z%a>zwHi<JI@0B}ZXlB`~c4PL(Ev7p=Kh)^v394=n*HoJpSfFvzd`@)g`bFt0SuBpM
z=3OqQo4RnX;xc*h(~|SAsr7D{vRJ~z>d4X0x0Wnmdy=#L`9_BQleV%;E!leeTJBG-
z;<tfsUa3#GH~S8|$nG}Dl!#b0<FJ*5A5+7G>Sfn%3GLZ5E$qiDt5U96jX&0l_xJ@j
zX$kx<{eH1B)?sGhb!lfi#dhTtM{aXG**$fCqu*ZddakS$#w(*P+&uayY+b=Z<206g
zv$=x~If*aw5j>RIqB#9yh(Ph8=`X~eo_@Zpb6=<0uT}$}j-7pyvwdnBj<mek9Z+;l
z<(P&1qOa4MlNLR`8usI7ko^qvuhwDlpA+tx$annQ(y6)b;+~y)=br3jX<t-XynSlJ
z)mb$g6YllIcdpJ0U;8Jz?enwQ$)*4E=Qa5;d_1_URa-toPB*P(M?$uS{GPt^8_TDz
zRhJZB)af%XRpOWbtRtIe>K)wAA$R`STbZ|?b=6P){=o0N_34MK8%@<wEWewSSS>H=
z+zZ$s_$T>r6Xz@G#IH9z<_IR{Z7TWh=8^R3ioMzFJ1aij5IR&E{3uztS#N#iG{aeC
q9Gwnl7Y2EC6`lXz)2Ly<#bEPCooW9O9YbKEWAJqKb6Mw<&;$Vfv5y7-

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..bc693d9c34fdcf10685141271cd76a25515265a7
GIT binary patch
literal 462
zcmV;<0WtoGP)<h;3K|Lk000e1NJLTq001Ze000yS1ONa4RZq7t0004%Nkl<ZcmdUv
zQPtxh5QUL|1SCWPXBqa?MJr()6bHcpIQb<Y0SP1F+XrZpChhw!PXsRad<=7A%zrh+
zha9^gNDJlWzUlB}IslErXPvjQic0d%7-RhM>k+!F-d@ZsD@qzREIjC}*sEQO_5HZF
zAxnE-!_ugn*D~#7DQn1c_7oMBb$rG8n$5#2Q^ylUnY&bux|<7qkjNUVx8B7nX_Bk>
z&CbyW2`d$gqmm}2vgu5y;Xe6v*3gR1mGojahRW2Tvxb(bBa!zDx43MEb}+vTy^DP_
zY%H6hoy@w^?}lu%6wA$d8_UkM@3PMl1&5{VT>I|fh%q6HijE3?H#CNfq8xOG-PlLv
zK8?6Y+m3X;H~T_6Ql)EB#_PsMC<m(aAt~M%V|Y*wkrR!J{Dl6Vlu+Vwq{pKy{LoKH
zDJ&=YkOld3zJ?^x{c$EETy!Lqe2LyUx!%U|F?#DIdgT(mk=)pS-$zG!Cr{CkKmHst
zo%`rW98Z*dv3oUfsL})>_K^3;T}&O720$nCRrha>zg_`9hKBHMt^fc407*qoM6N<$
Eg4+q%{{R30

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..6eb464375f69ded4a32a87342f978af18aa30f0a
GIT binary patch
literal 1009
zcmeAS@N?(olHy`uVBq!ia0vp^0YI$5!3-qh_VpSAsTBb}A+A8$!NI}R)z#VA*#!pN
z+}!?S10Eh8KxGgah*}^Qs2#{gQw}r`C=OQ)F&{z#RYKH5WFc%g>Ez@DQ~;C$x&g=r
ziUV~4K^jBhLZDkMN`m}?83YpMpMU>99!e=pP?*raKi|LsOx#ykaDRcp{RQjS*VhLG
zG&K187Zeo42PCYYpTDE7=@<h8(*aKx$B+ufx6`iAT5Z77lG=4mL{%~Ia`)xeFW>&1
zpX05>-SP0t>A&mM7-wHpf5`aHJYVBHzta(e5Aq^^SY(fSdQDL)^maCW>({|rCoOei
zm!{~E$jQ6ql%Dn1epO=cw^aHTvUazkVDB;Eze>v=3kvd<uH7rS$eulMpTnH1GtT&2
z4cVq*WU3Z!9P@qQp_<;!qIV1pQ`F8WKUu$Ne{b-DThnY#Jz5&P;GU)2Ri5o@zF8)H
zIPgEeV40RT@7oAjHy6+D|M8Pn+AV9(PMsT<n4Z;Zt6`|Jc<p6vwaxreVO(xc%FYzn
z1{B0Zr`H|{x+p0)J?(^#>71V011;+fxWD8dN?xATn_j(=`Ou_CvpY^?l$C9qzDq&F
zP~ySv*%Aro)*cIBTzu5c>3x2ZmvXk<)r604vK&$tx;%ZsD17s(!x5)$slbp`Kbmt^
zyxab-qb~5H`ptm*`F}f;Hn3O-Sg+}mxX~%j%ISNQZ?&*$*&|oRmPfD8+zmDUqjR+V
zz>-I=gG`pH9$mgBr}EC-o8ke@lI!lSj*-hx@msLGjmILqvUAV=@N1us@!mZ+ZS~Vh
zt?L<+>ZaM>nKV;FQ7ZOHzt>5|bqgjs?$i{{NQufi<#z1YQCVqrN$K(ps=-D77wS&_
za#J$r<dncWr&1<GB?KzQP3JGtdC33cjz-+xDeF!zSJo2r|9R(vLP^}|tmofnKHC0v
z=fRTr)2H0N&lE~8$}=cFa#cC0B5dh@tL!7Sg&Q{Zo}8hv_eBwl)S_mYoFqe+HzKz^
zeH7=%B^j!|5(6?P&WZcf*3!Id;=!-AEK4r$ny9#VZp-gyZCA=;&d;52Yp0^<b(YL}
zUC!%M)(9=Wd46)JP1t_BTihb`^&(%IUMVE~OI{H7<du8h9aZ+bd;89Y>_2g`!sV)-
zWv=L<zU1{eULLz8O&0Id`%!%E_tEEfCfPq%;?4h)K98}}#O#~Ywfb~meqiu)^>bP0
Hl+XkKXuRe-

literal 0
HcmV?d00001

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