From e2f86ace350e47754e61cad3d32c1b52597416e9 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Thu, 1 Feb 2018 17:15:56 +0300
Subject: [PATCH] in button added icon for 150% of zoom

---
 apps/common/main/lib/component/Button.js      |  3 +-
 apps/common/main/lib/view/Header.js           |  5 ++-
 .../main/resources/img/header/buttons150.svg  | 24 +++++++++++
 apps/common/main/resources/less/buttons.less  | 40 +++++++++++++++++++
 apps/documenteditor/main/index.html           |  1 +
 5 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 apps/common/main/resources/img/header/buttons150.svg

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index e55b50942..57cfac85d 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -190,7 +190,8 @@ define([
                 // '<% if (iconCls != "") { print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); }} %>',
                 '<% if (iconCls != "") { ' +
                     ' if (/svgicon/.test(iconCls)) {' +
-                        'print(\'<svg class=\"icon\"><use xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use></svg>\');' +
+                        'print(\'<svg class=\"icon\"><use class=\"zoom-int\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use>' +
+                            '<use class=\"zoom-grit\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'-150\"></use></svg>\');' +
                     '} else ' +
                         'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); ' +
                 '}} %>',
diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index 792c70ff7..0ce0f489e 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -83,7 +83,10 @@ define([
                                 // '<span class="btn-slot text" id="slot-btn-users"></span>' +
                                 '<section id="tlb-box-users" class="box-cousers dropdown"">' +
                                     '<div class="btn-users">' +
-                                        '<svg class="icon"><use xlink:href="#svg-btn-users"></use></svg>' +
+                                        '<svg class="icon">' +
+                                            '<use class="zoom-int" xlink:href="#svg-btn-users"></use>' +
+                                            '<use class="zoom-grit" xlink:href="#svg-btn-users-150"></use>' +
+                                        '</svg>' +
                                         '<label class="caption">&plus;</label>' +
                                     '</div>' +
                                     '<div class="cousers-menu dropdown-menu">' +
diff --git a/apps/common/main/resources/img/header/buttons150.svg b/apps/common/main/resources/img/header/buttons150.svg
new file mode 100644
index 000000000..1534f858f
--- /dev/null
+++ b/apps/common/main/resources/img/header/buttons150.svg
@@ -0,0 +1,24 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px"
+	 height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
+    <symbol id="svg-btn-users-150" viewBox="0 0 30 30">
+		<path display="inline" d="M11.051,6c2.205,0,4,1.794,4,4s-1.795,4-4,4c-2.206,0-4-1.794-4-4S8.845,6,11.051,6 M11.051,5
+	c-2.761,0-5,2.238-5,5c0,2.76,2.239,5,5,5c2.762,0,5-2.24,5-5C16.051,7.238,13.813,5,11.051,5L11.051,5z"/>
+		<path display="inline"  d="M11,18c6.825,0,7.887,3.874,8,4.407V25H3v-2.593C3.11,21.895,4.176,18,11,18 M11,17
+	c-8.216,0-9,5.316-9,5.316V26h18v-3.684C20,22.316,19.216,17,11,17L11,17z"/>
+		<circle cx="21.041" cy="13" r="4"/>
+		<path d="M21,18c-0.728,0-1,0-2,0c1.635,1.63,2,2,2,2v6h7v-3.146C28,22.854,27.572,18,21,18z"/>
+	</symbol>
+    <symbol id="svg-btn-goback-150" viewBox="0 0 30 30">
+		<polygon display="inline" points="19.5,16.5 15,12 15,15 9,15 9,18 15,18 15,21 	"/>
+		<path display="inline" d="M15,7v3h11v14H4V7H15 M15,6H4C3.45,6,3,6.45,3,7v17c0,0.55,0.45,1,1,1h22
+		c0.55,0,1-0.45,1-1V10c0-0.55-0.45-1-1-1H16V7C16,6.45,15.55,6,15,6L15,6z"/>
+	</symbol>
+    <symbol id="svg-btn-comments-150" viewBox="0 0 30 30">
+		<rect x="9" y="11" width="12" height="1"/>
+		<rect x="9" y="14" width="12" height="1"/>
+		<rect x="9" y="17" width="9" height="1"/>
+		<path d="M23.375,8C23.65,8,24,8.386,24,8.641V20c0,0.448-0.552,1-1,1h-6h-0.333L16.4,21.2L13,23.75L9.6,21.2
+			L9.333,21H9H7c-0.449,0-1-0.552-1-1V8.656C6,8.401,6.318,8,6.594,8 M23.5,7h-17C5.671,7,5,7.653,5,8.462V20c0,1,1,2,2,2h2l4,3l4-3
+			h6c1,0,2-1,2-2V8.462C25,7.653,24.329,7,23.5,7L23.5,7z"/>
+	</symbol>
+</svg>
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 90545b262..661174506 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -674,3 +674,43 @@
         min-width: 86px;
     }
 }
+
+@class100: zoom-int;
+@class150: zoom-grit;
+svg.icon {
+    .@{class150} {
+        display: none;
+    }
+
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: 1.5),
+    only screen and (-webkit-min-device-pixel-ratio: 2.5),
+    only screen and (min-resolution: 1.5dppx),
+    only screen and (min-resolution: 2.5dppx),
+    only screen and (min-resolution: 144dpi),
+    only screen and (min-resolution: 240dpi) {
+        .@{class100} {
+            display: none;
+        }
+
+        .@{class150} {
+            display: block;
+        }
+    }
+
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.4),
+    only screen and (-webkit-min-device-pixel-ratio: 4),
+    only screen and (min-resolution: 2dppx) and (max-resolution: 2.4dppx),
+    only screen and (min-resolution: 4dppx),
+    only screen and (min-resolution: 192dpi) and (max-resolution: 239dpi),
+    only screen and (min-resolution: 384dpi) {
+        .@{class100} {
+            display: block;
+        }
+
+        .@{class150} {
+            display: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index bd847a88c..905d6a4fb 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -262,6 +262,7 @@
 
     <script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
     <img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/header/buttons150.svg">
     <script>
         var svgpoints = document.querySelectorAll('img.inline-svg');
         SVGInjector(svgpoints);