From fc66f37f43c6b6cfdabb18a2c1e74f7442cff080 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Tue, 27 Apr 2021 21:21:11 +0300
Subject: [PATCH 1/2] Change groups paddings

---
 apps/common/main/resources/less/toolbar.less  |  8 +++++
 .../main/app/template/Toolbar.template        | 14 ++++----
 apps/documenteditor/main/app/view/FormsTab.js |  2 +-
 .../main/app/template/Toolbar.template        | 16 +++++-----
 .../main/app/template/Toolbar.template        | 32 +++++++++----------
 .../main/app/template/ToolbarAnother.template | 16 +++++-----
 .../main/app/view/PivotTable.js               |  6 ++--
 7 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 62419ab15d..ca1348f691 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -216,6 +216,14 @@
         &:last-child {
             padding-right: 6px;
         }
+
+        &.small {
+            padding-left: 10px;
+
+            + .separator {
+                margin-left: 10px;
+            }
+        }
     }
 
     .elset {
diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template
index 1c6b327452..f58295e4f4 100644
--- a/apps/documenteditor/main/app/template/Toolbar.template
+++ b/apps/documenteditor/main/app/template/Toolbar.template
@@ -6,7 +6,7 @@
     </div>
     <section class="box-controls">
         <section class="panel static">
-            <div class="group no-mask">
+            <div class="group no-mask small">
                 <div class="elset">
                     <span class="btn-slot" id="slot-btn-print"></span>
                 </div>
@@ -15,7 +15,7 @@
                 </div>
             </div>
             <div class="separator long"></div>
-            <div class="group">
+            <div class="group small">
                 <div class="elset">
                     <span class="btn-slot split" id="slot-btn-copy"></span>
                     <span class="btn-slot" id="slot-btn-paste"></span>
@@ -29,7 +29,7 @@
         </section>
         <section class="box-panels">
             <section class="panel" data-tab="home">
-                <div class="group">
+                <div class="group small">
                     <div class="elset" style="width:208px;">
                         <span class="btn-slot" id="slot-field-fontname"></span>
                         <span class="btn-slot" id="slot-field-fontsize"></span>
@@ -49,7 +49,7 @@
                     </div>
                 </div>
                 <div class="separator long"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot split" id="slot-btn-markers"></span>
                         <span class="btn-slot split" id="slot-btn-numbering"></span>
@@ -68,7 +68,7 @@
                     </div>
                 </div>
                 <div class="separator long"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot split" id="slot-btn-clearstyle"></span>
                         <span class="btn-slot split" id="slot-btn-colorschemas"></span>
@@ -78,7 +78,7 @@
                         <span class="btn-slot" id="slot-btn-mailrecepients"></span>
                     </div>
                 </div>
-                <div class="group" id="slot-field-styles"></div>
+                <div class="group small" id="slot-field-styles"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">
@@ -165,7 +165,7 @@
                     <span class="btn-slot text x-huge" id="slot-btn-caption"></span>
                     <span class="btn-slot text x-huge" id="slot-btn-crossref"></span>
                 </div>
-                <div class="group sheet-views" style="padding-left: 5px;">
+                <div class="group sheet-views small">
                     <div class="elset">
                         <span class="btn-slot text" id="slot-btn-tof"></span>
                     </div>
diff --git a/apps/documenteditor/main/app/view/FormsTab.js b/apps/documenteditor/main/app/view/FormsTab.js
index f5ef8f2a26..fa93c08024 100644
--- a/apps/documenteditor/main/app/view/FormsTab.js
+++ b/apps/documenteditor/main/app/view/FormsTab.js
@@ -58,7 +58,7 @@ define([
                 '<span class="btn-slot text x-huge" id="slot-btn-form-image"></span>' +
             '</div>' +
             '<div class="separator long forms" style="display: none;"></div>' +
-            '<div class="group no-group-mask form-view" style="display: none;">' +
+            '<div class="group no-group-mask form-view small" style="display: none;">' +
                 '<div class="elset">' +
                     '<span class="btn-slot text" id="slot-form-clear-fields"></span>' +
                 '</div>' +
diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template
index 46b612cd60..f967bcac27 100644
--- a/apps/presentationeditor/main/app/template/Toolbar.template
+++ b/apps/presentationeditor/main/app/template/Toolbar.template
@@ -6,7 +6,7 @@
     </section>
     <section class="box-controls">
         <section class="panel static">
-            <div class="group no-mask">
+            <div class="group no-mask small">
                 <div class="elset">
                     <span class="btn-slot" id="slot-btn-print"></span>
                 </div>
@@ -15,7 +15,7 @@
                 </div>
             </div>
             <div class="separator long"></div>
-            <div class="group">
+            <div class="group small">
                 <div class="elset">
                     <span class="btn-slot split" id="slot-btn-copy"></span>
                     <span class="btn-slot" id="slot-btn-paste"></span>
@@ -33,7 +33,7 @@
                     <span class="btn-slot text x-huge slot-addslide"></span>
                 </div>
                 <div class="group" style="display:none;"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot split" id="slot-btn-changeslide"></span>
                     </div>
@@ -42,7 +42,7 @@
                     </div>
                 </div>
                 <div class="separator long"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset" style="width:208px;">
                         <span class="btn-slot" style="float: left; width: 89px;" id="slot-field-fontname"></span>
                         <span class="btn-slot" style="float: left; width: 40px; margin-left: 2px;" id="slot-field-fontsize"></span>
@@ -62,7 +62,7 @@
                     </div>
                 </div>
                 <div class="separator long"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot split" id="slot-btn-markers"></span>
                         <span class="btn-slot split" id="slot-btn-numbering"></span>
@@ -82,7 +82,7 @@
                     <span class="btn-slot text x-huge slot-insertimg"></span>
                     <span class="btn-slot text x-huge slot-insertshape"></span>
                 </div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot split" id="slot-btn-arrange-shape"></span>
                     </div>
@@ -91,7 +91,7 @@
                     </div>
                 </div>
                 <div class="separator long"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot split" id="slot-btn-clearstyle"></span>
                         <span class="btn-slot split" id="slot-btn-colorschemas"></span>
@@ -101,7 +101,7 @@
                         <span class="btn-slot split" id="slot-btn-slidesize"></span>
                     </div>
                 </div>
-                <div class="group flex" id="slot-field-styles" style="width: 100%; min-width: 140px;" data-group-width="100%"></div>
+                <div class="group flex small" id="slot-field-styles" style="width: 100%; min-width: 140px;" data-group-width="100%"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">
diff --git a/apps/spreadsheeteditor/main/app/template/Toolbar.template b/apps/spreadsheeteditor/main/app/template/Toolbar.template
index 84494e2dfa..50b6fc5dd7 100644
--- a/apps/spreadsheeteditor/main/app/template/Toolbar.template
+++ b/apps/spreadsheeteditor/main/app/template/Toolbar.template
@@ -6,7 +6,7 @@
     </section>
     <section class="box-controls">
         <section class="panel static">
-            <div class="group no-mask">
+            <div class="group no-mask small">
                 <div class="elset">
                     <span class="btn-slot" id="slot-btn-print"></span>
                 </div>
@@ -15,7 +15,7 @@
                 </div>
             </div>
             <div class="separator long"></div>
-            <div class="group">
+            <div class="group small">
                 <div class="elset">
                     <span class="btn-slot split" id="slot-btn-copy"></span>
                     <span class="btn-slot" id="slot-btn-paste"></span>
@@ -29,7 +29,7 @@
         </section>
         <section class="box-panels">
             <section class="panel" data-tab="home">
-                <div class="group">
+                <div class="group small">
                     <div class="elset font-attr-top">
                         <span class="btn-slot" id="slot-field-fontname"></span>
                         <span class="btn-slot" id="slot-field-fontsize"></span>
@@ -48,7 +48,7 @@
                     </div>
                 </div>
                 <div class="separator long"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot split-small" id="slot-btn-top"></span>
                         <span class="btn-slot split-small" id="slot-btn-middle"></span>
@@ -65,7 +65,7 @@
                     </div>
                 </div>
                 <div class="separator long"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot split" id="slot-btn-formula"></span>
                     </div>
@@ -74,7 +74,7 @@
                     </div>
                 </div>
                 <div class="separator long"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot split slot-sortdesc"></span>
                         <span class="btn-slot slot-sortasc"></span>
@@ -85,7 +85,7 @@
                     </div>
                 </div>
                 <div class="separator long"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot" id="slot-btn-format" style="width: 100%"></span>
                     </div>
@@ -97,7 +97,7 @@
                     </div>
                 </div>
                 <div class="separator long"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot split" id="slot-btn-cell-ins"></span>
                     </div>
@@ -106,7 +106,7 @@
                     </div>
                 </div>
                 <div class="separator long"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot split" id="slot-btn-clear"></span>
                         <span class="btn-slot split" id="slot-btn-colorschemas"></span>
@@ -116,7 +116,7 @@
                         <span class="btn-slot split" id="slot-btn-table-tpl"></span>
                     </div>
                 </div>
-                <div class="group" id="slot-field-styles" style="width: 100%; min-width: 168px;"></div>
+                <div class="group small" id="slot-field-styles" style="width: 100%; min-width: 168px;"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">
@@ -194,7 +194,7 @@
                 </div>
             </section>
             <section class="panel" data-tab="data">
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot split slot-btn-setfilter"></span>
                         <span class="btn-slot slot-sortdesc"></span>
@@ -204,7 +204,7 @@
                         <span class="btn-slot slot-sortasc"></span>
                     </div>
                 </div>
-                <div class="group" style="padding-left: 0;">
+                <div class="group">
                     <span class="btn-slot text x-huge" id="slot-btn-custom-sort"></span>
                 </div>
                 <div class="separator long"></div>
@@ -231,7 +231,7 @@
                 <div class="group sheet-views">
                     <span class="btn-slot text x-huge" id="slot-btn-sheet-view"></span>
                 </div>
-                <div class="group sheet-views" style="padding-left: 5px;">
+                <div class="group sheet-views small">
                     <div class="elset">
                         <span class="btn-slot text" id="slot-createview"></span>
                     </div>
@@ -240,7 +240,7 @@
                     </div>
                 </div>
                 <div class="separator long sheet-views"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset" style="display: flex;">
                         <span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>
                     </div>
@@ -253,7 +253,7 @@
                     <span class="btn-slot text x-huge" id="slot-btn-freeze"></span>
                 </div>
                 <div class="separator long"></div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot text" id="slot-chk-formula"></span>
                     </div>
@@ -261,7 +261,7 @@
                         <span class="btn-slot text" id="slot-chk-heading"></span>
                     </div>
                 </div>
-                <div class="group">
+                <div class="group small">
                     <div class="elset">
                         <span class="btn-slot text" id="slot-chk-gridlines"></span>
                     </div>
diff --git a/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template b/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template
index 7bced25b77..cc642b5adc 100644
--- a/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template
+++ b/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template
@@ -4,7 +4,7 @@
         <!-- Edit diagram mode -->
         <!----------------------->
         <section class="simple-bar">
-            <div class="group">
+            <div class="group small">
                 <div class="elset">
                     <span class="btn-slot split" id="slot-btn-copy"></span>
                     <span class="btn-slot split" id="slot-btn-paste"></span>
@@ -13,13 +13,13 @@
                 </div>
             </div>
             <div class="separator short"></div>
-            <div class="group">
+            <div class="group small">
                 <div class="elset">
                     <span class="btn-slot split" id="slot-btn-formula"></span>
                 </div>
             </div>
             <div class="separator short"></div>
-            <div class="group">
+            <div class="group small">
                 <div class="elset">
                     <span class="btn-slot split" id="slot-btn-digit-dec"></span>
                     <span class="btn-slot split" id="slot-btn-digit-inc"></span>
@@ -27,7 +27,7 @@
                 </div>
             </div>
             <div class="separator short"></div>
-            <div class="group">
+            <div class="group small">
                 <div class="elset">
                     <span class="btn-slot text" id="slot-btn-chart-data"></span>
                     <span class="btn-slot text" id="slot-btn-chart-type" style="margin-left: 12px;"></span>
@@ -41,7 +41,7 @@
         <!-- Edit mail merge mode -->
         <!----------------------->
         <section class="simple-bar">
-            <div class="group">
+            <div class="group small">
                 <div class="elset">
                     <span class="btn-slot split" id="slot-btn-copy"></span>
                     <span class="btn-slot split" id="slot-btn-paste"></span>
@@ -50,21 +50,21 @@
                 </div>
             </div>
             <div class="separator short"></div>
-            <div class="group">
+            <div class="group small">
                 <div class="elset">
                     <span class="btn-slot split" id="slot-btn-sortdesc"></span>
                     <span class="btn-slot" id="slot-btn-sortasc"></span>
                 </div>
             </div>
             <div class="separator short" style="margin-left: 5px;"></div>
-            <div class="group">
+            <div class="group small">
                 <div class="elset">
                     <span class="btn-slot split" id="slot-btn-setfilter"></span>
                     <span class="btn-slot" id="slot-btn-clear-filter"></span>
                 </div>
             </div>
             <div class="separator short"></div>
-            <div class="group">
+            <div class="group small">
                 <div class="elset">
                     <span class="btn-slot" id="slot-btn-search"></span>
                 </div>
diff --git a/apps/spreadsheeteditor/main/app/view/PivotTable.js b/apps/spreadsheeteditor/main/app/view/PivotTable.js
index 0598af43ea..0b6be69386 100644
--- a/apps/spreadsheeteditor/main/app/view/PivotTable.js
+++ b/apps/spreadsheeteditor/main/app/view/PivotTable.js
@@ -71,7 +71,7 @@ define([
                     '<span id="slot-btn-select-pivot" class="btn-slot text x-huge"></span>' +
                 '</div>' +
                 '<div class="separator long"></div>' +
-                '<div class="group">' +
+                '<div class="group small">' +
                     '<div class="elset">' +
                         '<span class="btn-slot text" id="slot-chk-header-row"></span>' +
                     '</div>' +
@@ -79,7 +79,7 @@ define([
                         '<span class="btn-slot text" id="slot-chk-header-column"></span>' +
                     '</div>' +
                 '</div>' +
-                '<div class="group">' +
+                '<div class="group small">' +
                     '<div class="elset">' +
                         '<span class="btn-slot text" id="slot-chk-banded-row"></span>' +
                     '</div>' +
@@ -87,7 +87,7 @@ define([
                         '<span class="btn-slot text" id="slot-chk-banded-column"></span>' +
                     '</div>' +
                 '</div>' +
-                '<div class="group flex" id="slot-field-pivot-styles" style="width: 336px;max-width: 336px;min-width: 115px;" data-group-width="336px">' +
+                '<div class="group flex small" id="slot-field-pivot-styles" style="width: 336px;max-width: 336px;min-width: 115px;" data-group-width="336px">' +
                 '</div>' +
             '</section>';
 

From cc4108081432770db54041cfe1e2dcab61a01701 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Tue, 27 Apr 2021 22:27:47 +0300
Subject: [PATCH 2/2] Change paddings for huge buttons

---
 apps/common/main/resources/less/buttons.less | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index de279182eb..9767334993 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -229,7 +229,7 @@
 
         .inner-box-caption {
             line-height: 18px;
-            padding: 0 4px;
+            padding: 0 2px;
             display: flex;
             align-items: center;
 
@@ -303,6 +303,14 @@
     }
 }
 
+.icon-top.btn-group {
+    &.x-huge, .x-huge {
+        .inner-box-caption {
+            padding-right: 4px;
+        }
+    }
+}
+
 .icon-top {
     &.x-huge  {
         .btn&, .btn-group& .btn-toolbar {