From f7eb7dd48100c9f084bea7318d8cb29f1b5f0271 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 12 Oct 2023 18:02:57 +0300
Subject: [PATCH] Revert "[SSE DE PE] Change template for user avatar"

This reverts commit 673b53e3bf4190886aae588c292bca28569354b3.
---
 .../main/lib/template/Comments.template       | 24 ++++----------
 .../lib/template/CommentsPopover.template     | 32 ++++++-------------
 .../template/ReviewChangesPopover.template    | 14 +++-----
 apps/common/main/lib/view/Chat.js             | 10 ++----
 apps/common/main/lib/view/Header.js           | 24 ++++++--------
 apps/common/main/resources/less/chat.less     | 13 ++------
 apps/common/main/resources/less/comments.less | 12 ++-----
 apps/common/main/resources/less/header.less   | 25 +++------------
 8 files changed, 40 insertions(+), 114 deletions(-)

diff --git a/apps/common/main/lib/template/Comments.template b/apps/common/main/lib/template/Comments.template
index 5b0fae5901..0c747184ec 100644
--- a/apps/common/main/lib/template/Comments.template
+++ b/apps/common/main/lib/template/Comments.template
@@ -4,19 +4,13 @@
         <!-- comment block -->
 
         <div class="user-info">
-            <div class="color" 
+            <div class="color"
                 <% if (avatar) { %>
-                    style="<% if (usercolor!==null) { %> border-color:<%=usercolor%>; border-style:solid;<% }%>" 
+                    style="background-image: url(<%=avatar%>); <% if (usercolor!==null) { %> border-color:<%=usercolor%>; border-style:solid;<% }%>" 
                 <% } else { %>
                     style="background-color: <% if (usercolor!==null) { %> <%=usercolor%> <% } else { %> #cfcfcf <% }%>;" 
                 <% } %>
-            >
-                <% if (avatar) { %>
-                    <img src="<%=avatar%>" />
-                <% } else { %>
-                    <%=initials%>
-                <% } %>
-            </div>
+            ><% if (!avatar) { %><%=initials%><% } %></div>
             <div class="user-info-text">
                 <div class="user-name"><%= scope.getEncodedName(parsedName) %></div>
                 <div class="user-date"><%=date%></div>
@@ -46,19 +40,13 @@
                 <% } %>
                 <div class="reply-item-ct" <% if (scope.viewmode && index==replys.length-1) { %>style="padding-bottom: 0;" <% } %>;>
                     <div class="user-info">
-                        <div class="color" 
+                        <div class="color"
                             <% if (item.get("avatar")) { %>
-                                style="<% if (item.get('usercolor')!==null) { %> border-color:<%=item.get('usercolor')%>; border-style:solid;<% }%>" 
+                                style="background-image: url(<%=item.get('avatar')%>); <% if (item.get('usercolor')!==null) { %> border-color:<%=item.get('usercolor')%>; border-style:solid;<% }%>" 
                             <% } else { %>
                                 style="background-color: <% if (item.get('usercolor')!==null) { %> <%=item.get('usercolor')%> <% } else { %> #cfcfcf <% }%>;" 
                             <% } %>
-                        >
-                            <% if (item.get("avatar")) { %>
-                                <img src="<%=item.get("avatar")%>" />
-                            <% } else { %>
-                                <%=item.get("initials")%>
-                            <% } %>
-                        </div>
+                        ><% if (!item.get("avatar")) { %><%=item.get("initials")%><% } %></div>
                         <div class="user-info-text">
                             <div class="user-name"><%= scope.getEncodedName(item.get("parsedName")) %></div>
                             <div class="user-date"><%=item.get("date")%></div>
diff --git a/apps/common/main/lib/template/CommentsPopover.template b/apps/common/main/lib/template/CommentsPopover.template
index 15384bc764..29bc93c28f 100644
--- a/apps/common/main/lib/template/CommentsPopover.template
+++ b/apps/common/main/lib/template/CommentsPopover.template
@@ -6,17 +6,11 @@
     <div class="user-info">
         <div class="color" 
             <% if (avatar) { %>
-                style="<% if (usercolor!==null) { %> border-color:<%=usercolor%>; border-style:solid;<% }%>" 
-             <% } else { %>
-                style="background-color: <% if (usercolor!==null) { %> <%=usercolor%> <% } else { %> #cfcfcf <% }%>;" 
-            <% } %>
-        >
-            <% if (avatar) { %>
-                <img src="<%=avatar%>" />
+                style="background-image: url(<%=avatar%>); <% if (usercolor!==null) { %> border-color:<%=usercolor%>; border-style:solid;<% }%>" 
             <% } else { %>
-                <%=initials%>
+                style="background-color: <% if (usercolor!==null) { %> <%=usercolor%> <% } else { %> #cfcfcf <% }%>;" 
             <% } %>
-        </div>
+        ><% if (!avatar) { %><%=initials%><% } %></div>
         <div class="user-info-text">
             <div class="user-name"><%= scope.getEncodedName(parsedName) %></div>
             <div class="user-date"><%=date%></div>
@@ -47,19 +41,13 @@
             <% } %>
             <div class="reply-item-ct">
                 <div class="user-info">
-                    <div class="color" 
-                        <% if (item.get("avatar")) { %>
-                            style="<% if (item.get('usercolor')!==null) { %> border-color:<%=item.get('usercolor')%>; border-style:solid;<% }%>" 
-                        <% } else { %>
-                            style="background-color: <% if (item.get('usercolor')!==null) { %> <%=item.get('usercolor')%> <% } else { %> #cfcfcf <% }%>;" 
-                        <% } %>
-                    >
-                        <% if (item.get("avatar")) { %>
-                            <img src="<%=item.get("avatar")%>" />
-                        <% } else { %>
-                            <%=item.get("initials")%>
-                        <% } %>
-                    </div>
+                    <div class="color"
+                            <% if (item.get("avatar")) { %>
+                                style="background-image: url(<%=item.get('avatar')%>); <% if (item.get('usercolor')!==null) { %> border-color:<%=item.get('usercolor')%>; border-style:solid;<% }%>" 
+                            <% } else { %>
+                                style="background-color: <% if (item.get('usercolor')!==null) { %> <%=item.get('usercolor')%> <% } else { %> #cfcfcf <% }%>;" 
+                            <% } %>
+                    ><% if (!item.get("avatar")) { %><%=item.get("initials")%><% } %></div>
                     <div class="user-info-text">
                         <div class="user-name"><%= scope.getEncodedName(item.get("parsedName")) %></div>
                         <div class="user-date"><%=item.get("date")%></div>
diff --git a/apps/common/main/lib/template/ReviewChangesPopover.template b/apps/common/main/lib/template/ReviewChangesPopover.template
index a41f008bfd..b89bced635 100644
--- a/apps/common/main/lib/template/ReviewChangesPopover.template
+++ b/apps/common/main/lib/template/ReviewChangesPopover.template
@@ -1,19 +1,13 @@
 <div id="<%=id%>" class="user-comment-item">
 
     <div class="user-info">
-        <div class="color" 
+        <div class="color"
             <% if (avatar) { %>
-                style="<% if (usercolor!==null) { %> border-color:<%=usercolor%>; border-style:solid;<% }%>" 
-             <% } else { %>
-                style="background-color: <% if (usercolor!==null) { %> <%=usercolor%> <% } else { %> #cfcfcf <% }%>;" 
-            <% } %>
-        >
-            <% if (avatar) { %>
-                <img src="<%=avatar%>" />
+                style="background-image: url(<%=avatar%>); <% if (usercolor!==null) { %> border-color:<%=usercolor%>; border-style:solid;<% }%>" 
             <% } else { %>
-                <%=initials%>
+                style="background-color: <% if (usercolor!==null) { %> <%=usercolor%> <% } else { %> #cfcfcf <% }%>;" 
             <% } %>
-        </div>
+        ><% if (!avatar) { %><%=initials%><% } %></div>
         <div class="user-info-text">
             <div class="user-name"><%= scope.getUserName(username) %></div>
             <div class="user-date"><%=date%></div>
diff --git a/apps/common/main/lib/view/Chat.js b/apps/common/main/lib/view/Chat.js
index 5db12523c3..11e5ce9e28 100644
--- a/apps/common/main/lib/view/Chat.js
+++ b/apps/common/main/lib/view/Chat.js
@@ -75,17 +75,11 @@ define([
                     '<% } else { %>',
                         '<div class="color"', 
                             '<% if (msg.get("avatar")) { %>',
-                                'style="<% if (msg.get("usercolor")!==null) { %> border-color:<%=msg.get("usercolor")%>; border-style:solid;<% }%>"', 
+                                'style="background-image: url(<%=msg.get("avatar")%>); <% if (msg.get("usercolor")!==null) { %> border-color:<%=msg.get("usercolor")%>; border-style:solid;<% }%>"', 
                             '<% } else { %>',
                                 'style="background-color: <% if (msg.get("usercolor")!==null) { %> <%=msg.get("usercolor")%> <% } else { %> #cfcfcf <% }%>;"',
                             '<% } %>',
-                        '>',
-                            '<% if (msg.get("avatar")) { %>',
-                                '<img src="<%=msg.get("avatar")%>" />',
-                            '<% } else { %>',
-                                '<%=msg.get("initials")%>',
-                            '<% } %>',
-                        '</div>',
+                        '><% if (!msg.get("avatar")) { %><%=msg.get("initials")%><% } %></div>',
                         '<div class="user-content">',
                             '<div class="user-name" data-can-copy="true">',
                                 '<%= msg.get("parsedName") %>',
diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index a0f5530c87..334049f16f 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -57,19 +57,13 @@ define([
         var templateUserItem =
                 '<li id="<%= user.get("iid") %>" class="<% if (!user.get("online")) { %> offline <% } if (user.get("view")) {%> viewmode <% } %>">' +
                     '<div class="user-name">' +
-                        '<div class="color"'+
-                            '<% if (user.get("avatar")) { %>'+
-                                'style="<% if (user.get("color")!==null) { %> border-color:<%=user.get("color")%>; border-style:solid;<% }%>"'+ 
-                            '<% } else { %>'+
-                                'style="background-color: <% if (user.get("color")!==null) { %> <%=user.get("color")%> <% } else { %> #cfcfcf <% }%>;"'+
-                            '<% } %>'+
-                        '>'+
-                            '<% if (user.get("avatar")) { %>'+
-                                '<img src="<%=user.get("avatar")%>" />'+
-                            '<% } else { %>'+
-                                '<%=user.get("initials")%>'+
-                            '<% } %>'+
-                        '</div>'+
+                        '<div class="color"' + 
+                            '<% if (user.get("avatar")) { %>' +
+                                'style="background-image: url(<%=user.get("avatar")%>); <% if (user.get("color")!==null) { %> border-color:<%=user.get("color")%>; border-style: solid;<% }%>"' +
+                            '<% } else { %>' +
+                                'style="background-color: <% if (user.get("color")!==null) { %> <%=user.get("color")%> <% } else { %> #cfcfcf <% }%>;"' +
+                            '<% } %>' +
+                        '><% if (!user.get("avatar")) { %><%=user.get("initials")%><% } %></div>' +
                         '<label><%= fnEncode(user.get("username")) %></label>' +
                         '<% if (len>1) { %><label class="margin-left-3">(<%=len%>)</label><% } %>' +
                     '</div>'+
@@ -873,8 +867,8 @@ define([
 
             updateAvatarEl(){
                 if(this.options.userAvatar){
-                    $btnUserName.css({'background': 'none'});
-                    $btnUserName.html('<img src="' + this.options.userAvatar+ '"/>');
+                    $btnUserName.css({'background-image': 'url('+ this.options.userAvatar +')'});
+                    $btnUserName.text('');
                 } else {
                     $btnUserName.text(Common.Utils.getUserInitials(this.options.userName));
                 }
diff --git a/apps/common/main/resources/less/chat.less b/apps/common/main/resources/less/chat.less
index 08b325a65f..26958947a9 100644
--- a/apps/common/main/resources/less/chat.less
+++ b/apps/common/main/resources/less/chat.less
@@ -132,7 +132,6 @@
                 }
 
                 .color {
-                    position: relative;
                     display: inline-block;
                     width: 26px;
                     height: 26px;
@@ -140,7 +139,8 @@
                     border-width: @scaled-two-px-value;
                     margin-right: 8px;
                     vertical-align: middle;
-                    overflow: hidden;
+                    background-size: cover;
+                    background-position: center;
             
                     text-align: center;
                     line-height: 26px;
@@ -151,15 +151,6 @@
                         margin-right: 0px;
                         margin-left: 8px;
                     }
-
-                    
-                    img {
-                        position: absolute;
-                        width: 100%;
-                        height: 100%;
-                        top: 0;
-                        left: 0;
-                    }
                 }
 
                 .user-content {
diff --git a/apps/common/main/resources/less/comments.less b/apps/common/main/resources/less/comments.less
index fd35520fc5..f61b59904a 100644
--- a/apps/common/main/resources/less/comments.less
+++ b/apps/common/main/resources/less/comments.less
@@ -194,7 +194,6 @@
     }
 
     .color {
-        position: relative;
         display: inline-block;
         width: 26px;
         height: 26px;
@@ -202,7 +201,8 @@
         border-width: @scaled-two-px-value;
         margin-right: 8px;
         vertical-align: middle;
-        overflow: hidden;
+        background-size: cover;
+        background-position: center;
 
         text-align: center;
         line-height: 26px;
@@ -213,14 +213,6 @@
             margin-right: 0px;
             margin-left: 8px;
         }
-
-        img {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: 0;
-        }
     }
 
     .user-name-colored {
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index de951c704c..3628237b1f 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -392,7 +392,6 @@
     }
 
     .color-user-name {
-        position: relative;
         width: 20px;
         height: 20px;
         border-radius: 20px;
@@ -400,22 +399,16 @@
         background-color: @icon-toolbar-header;
         color: @toolbar-header-text-on-background-ie;
         color: @toolbar-header-text-on-background;
+        vertical-align: middle;
+        background-size: cover;
+        background-position: center;
 
         font-size: 10px;
         line-height: 20px;
         overflow: hidden;
         margin: 0 6px;
         text-align: center;
-
-        img {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: 0;
-        }
     }
-    
 }
 
 .cousers-menu {
@@ -469,27 +462,19 @@
         }
 
         .color {
-            position: relative;
             width: 26px;
             height: 26px;
             border-radius: 20px;
             border-width: @scaled-two-px-value;
             display: inline-block;
             vertical-align: middle;
-            overflow: hidden;
+            background-size: cover;
+            background-position: center;
             .margin-right-8();
 
             line-height: 26px;
             color: #ffffff;
             text-align: center;
-
-            img {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                top: 0;
-                left: 0;
-            }
         }
 
         .user-name {