From f5bb8c8ed84a18e26b45b09504f038dc8db3778d Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Mon, 26 Jun 2017 12:19:08 +0300
Subject: [PATCH] [Common] refactoring

---
 apps/common/main/lib/component/Button.js      | 34 ++++++++-----------
 .../main/resources/less/asc-mixins.less       | 12 +++++--
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index b9094757f..42856bd49 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -119,18 +119,20 @@ define([
 ], function () {
     'use strict';
 
+    var templateBtnIcon =
+            '<% if ( iconImg ) { %>' +
+                '<img src="<%= iconImg %>">' +
+            '<% } else { %>' +
+                '<% if (/svgicon/.test(iconCls)) {' +
+                    'print(\'<svg width="26" height="26" class=\"icon\"><use href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use></svg>\');' +
+                '} else ' +
+                    'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); %>' +
+            '<% } %>';
+
     var templateHugeCaption =
-            '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">' +
+            '<button type="button" class="btn <%= cls %>">' +
                 '<div class="inner-box-icon">' +
-                '<% if ( iconImg ) { %>' +
-                    '<img src="<%= iconImg %>">' +
-                '<% } else { %>' +
-                    '<% if (/svgicon/.test(iconCls)) {' +
-                        'print(\'<svg class=\"icon\"><use xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use></svg>\');' +
-                    '} else ' +
-                        'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); %>' +
-                    // '<i class="icon <%= iconCls %>">&nbsp;</i>' +
-                '<% } %>' +
+                    templateBtnIcon +
                 '</div>' +
                 '<span class="caption"><%= caption %></span>' +
             '</button>';
@@ -139,11 +141,7 @@ define([
         '<div class="btn-group icon-top" id="<%= id %>" style="<%= style %>">' +
             '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">' +
                 '<div class="inner-box-icon">' +
-                '<% if ( iconImg ) { %>' +
-                    '<img src="<%= iconImg %>">' +
-                '<% } else { %>' +
-                    '<i class="icon <%= iconCls %>">&nbsp;</i>' +
-                '<% } %>' +
+                    templateBtnIcon +
                 '</div>' +
                 '<div class="inner-box-caption">' +
                     '<span class="caption"><%= caption %></span>' +
@@ -155,11 +153,7 @@ define([
     var templateHugeSplitCaption =
         '<div class="btn-group x-huge split icon-top" id="<%= id %>" style="<%= style %>">' +
             '<button type="button" class="btn <%= cls %> inner-box-icon">' +
-                '<% if ( iconImg ) { %>' +
-                    '<img src="<%= iconImg %>">' +
-                '<% } else { %>' +
-                    '<i class="icon <%= iconCls %>">&nbsp;</i>' +
-                '<% } %>' +
+                templateBtnIcon +
             '</button>' +
             '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
                 '<span class="caption"><%= caption %></span>' +
diff --git a/apps/common/main/resources/less/asc-mixins.less b/apps/common/main/resources/less/asc-mixins.less
index 0be0225b3..e18de81c4 100644
--- a/apps/common/main/resources/less/asc-mixins.less
+++ b/apps/common/main/resources/less/asc-mixins.less
@@ -103,10 +103,16 @@
     button.disabled > .@{icon-class} {background-position-x: -3*@icon-size !important; --bgX: -(3*@icon-size);}
 }
 
+.mx-button-otherstates-icon2(@icon-size) {
+    &.active   .icon,
+    &:active   .icon {background-position-x: -1*@icon-size; --bgX: -(1*@icon-size);}
+    &.disabled .icon {background-position-x: -2*@icon-size; --bgX: -(2*@icon-size);}
+}
+
 .button-otherstates-icon2(@icon-class, @icon-size) {
-    button.@{icon-class}.active   .icon,
-    button.@{icon-class}:active   .icon {background-position-x: -1*@icon-size; --bgX: -(1*@icon-size);}
-    button.@{icon-class}.disabled .icon {background-position-x: -2*@icon-size; --bgX: -(2*@icon-size);}
+    button.@{icon-class} {
+        .mx-button-otherstates-icon2(@icon-size);
+    }
 }
 
 .menu-icon-normal(@icon-class, @index, @icon-size) {