From b70d36efad7d7204aae21cee3d3fdec01dc7840a Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Tue, 18 Oct 2022 19:24:53 +0300
Subject: [PATCH] [scaling] changed button's svg icon adding for 2.5x

---
 apps/common/main/lib/component/Button.js     | 16 ++++++++++------
 apps/common/main/lib/util/utils.js           | 11 ++++++++---
 apps/common/main/resources/less/buttons.less | 14 ++++++++++++--
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index e88f8ebe1..f77ce5db7 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -353,16 +353,20 @@ define([
                 if ( e.matches ) {
                     console.log('scaling 250%');
 
-                    const re_icon_name = /btn-[^\s]+/.exec(me.iconCls);
-                    const icon_name = re_icon_name ? re_icon_name[0] : "null";
-                    const svg_icon = `<svg class="icon"><use class="zoom-int" href="#${icon_name}"></use></svg>`;
+                    if ( !me.$el.find('svg.icon').length ) {
+                        const re_icon_name = /btn-[^\s]+/.exec(me.iconCls);
+                        const icon_name = re_icon_name ? re_icon_name[0] : "null";
+                        const svg_icon = `<svg class="icon"><use class="zoom-int" href="#${icon_name}"></use></svg>`;
 
-                    me.$el.find('i.icon').replaceWith(svg_icon);
+                        me.$el.find('i.icon').after(svg_icon);
+                    }
                 } else {
                     console.log('scaling less than 250%');
 
-                    const png_icon = `<i class="icon ${me.iconCls}">&nbsp;</i>`;
-                    me.$el.find('svg.icon').replaceWith(png_icon);
+                    if ( !me.$el.find('i.icon') ) {
+                        const png_icon = `<i class="icon ${me.iconCls}">&nbsp;</i>`;
+                        me.$el.find('svg.icon').after(png_icon);
+                    }
                 }
             });
         },
diff --git a/apps/common/main/lib/util/utils.js b/apps/common/main/lib/util/utils.js
index 109b223e6..36765e3b7 100644
--- a/apps/common/main/lib/util/utils.js
+++ b/apps/common/main/lib/util/utils.js
@@ -187,11 +187,16 @@ var utils = new(function() {
                 if ( !/pixel-ratio__1_75/.test(classes) ) {
                     document.body.className = clear_list + ' pixel-ratio__1_75';
                 }
-            } else {
-                $root.addClass('pixel-ratio__2');
-                if ( !/pixel-ratio__2/.test(classes) ) {
+            } else
+            if ( !(scale.devicePixelRatio < 2) && scale.devicePixelRatio < 2.5 ) {
+                if ( !/pixel-ratio__2\b/.test(classes) ) {
                     document.body.className = clear_list + ' pixel-ratio__2';
                 }
+            } else {
+                // $root.addClass('pixel-ratio__2_5');
+                if ( !/pixel-ratio__2_5/.test(classes) ) {
+                    document.body.className = clear_list + ' pixel-ratio__2_5';
+                }
             }
 
             me.zoom = scale.correct ? scale.zoom : 1;
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 8825c37be..6a8490196 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -424,8 +424,8 @@
             only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
             only screen and (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
             only screen and (min-resolution: 144dpi) and (max-resolution: 143dpi) {
-                width:calc(~"28px/1.5");
-                height:calc(~"28px/1.5");
+                //width:calc(~"28px/1.5");
+                //height:calc(~"28px/1.5");
             }
         }
     }
@@ -474,6 +474,16 @@
     &.align-left {
         text-align: left;
     }
+
+    .pixel-ratio__2_5 & {
+        i.icon {
+            display: none;
+        }
+    }
+
+    & svg.icon:not(.pixel-ratio__2_5 *) {
+        display: none;
+    }
 }
 
 .btn-category {