From 357bcc9061cb9867bf12a25e791d0c10f63e0f74 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Mon, 6 Mar 2017 12:02:32 +0300
Subject: [PATCH] [Common] repaired button's caption

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

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index f70308a14..e158b09b4 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -138,28 +138,28 @@ define([
         template: _.template([
             '<% if (menu == null) { %>',
                 '<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>">',
-                    '<span class="caption"><%= caption %></span>',
                     '<% if (iconCls != "") { %>',
-                        '<span class="btn-icon <%= iconCls %>">&nbsp;</span>',
+                        '<i class="btn-icon <%= iconCls %>">&nbsp;</i>',
                     '<% } %>',
+                    '<span class="caption"><%= caption %></span>',
                 '</button>',
             '<% } else if (split == false) {%>',
                 '<div class="btn-group" id="<%= id %>" style="<%= style %>">',
                     '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">',
-                        '<span class="caption"><%= caption %></span>',
                         '<% if (iconCls != "") { %>',
-                            '<span class="btn-icon <%= iconCls %>">&nbsp;</span>',
+                            '<i class="btn-icon <%= iconCls %>">&nbsp;</i>',
                         '<% } %>',
+                        '<span class="caption"><%= caption %></span>',
                         '<span class="caret img-commonctrl"></span>',
                     '</button>',
                 '</div>',
             '<% } else { %>',
                 '<div class="btn-group split" id="<%= id %>" style="<%= style %>">',
                     '<button type="button" class="btn <%= cls %>">',
-                        '<span class="caption"><%= caption %></span>',
                         '<% if (iconCls != "") { %>',
-                            '<span class="btn-icon <%= iconCls %>">&nbsp;</span>',
+                            '<i class="btn-icon <%= iconCls %>">&nbsp;</i>',
                         '<% } %>',
+                        '<span class="caption"><%= caption %></span>',
                     '</button>',
                     '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">',
                         '<span class="caret img-commonctrl"></span>',
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index cac8a3afc..697436ecc 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -99,11 +99,14 @@
         background-color: @primary;
     }
 
-    span.btn-icon {
-        .position();
+    .caption:not(:empty) {
+        padding: 0 5px 0 2px;
+    }
+
+    .btn-icon {
         padding: 0;
         margin: 0;
-        position: absolute;
+        display: inline-block;
         background-repeat: no-repeat;
         .background-ximage('@{app-image-path}/toolbar-menu.png', '@{app-image-path}/toolbar-menu@2x.png', 60px);
 
@@ -119,7 +122,7 @@
     // Large size
     // ------------------------
     &.large {
-        span.btn-icon {
+        .btn-icon {
             width: 30px !important;
             height: 30px;
             line-height: 20px;
@@ -224,12 +227,6 @@
                 &.dropdown-toggle {
                     width: 100%;
                     min-width: 28px;
-
-                    .caret {
-//                        float: right;
-                        position: relative;
-                        right: -8px;
-                    }
                 }
 
                 &.btn-text-value {
@@ -295,7 +292,7 @@
     .box-shadow(none);
     background-color: transparent;
 
-    span.btn-icon {
+    .btn-icon {
         position: relative;
         min-width: inherit;
         height: inherit;
@@ -378,7 +375,7 @@
     border: 1px solid @input-border;
     .border-radius(@border-radius-small);
 
-    span.btn-icon {
+    .btn-icon {
         width: 28px;
         padding: 0;
         margin: 0;
@@ -414,7 +411,7 @@
     border: 1px solid @input-border;
     .border-radius(@border-radius-small);
 
-    span.btn-icon {
+    .btn-icon {
         display: inline-block;
         .btn.btnsize(52px);
         padding: 0;