From fad9ff67dfd6ca4749324771451d97c381ce996d Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Wed, 25 Dec 2024 21:25:49 +0300
Subject: [PATCH] Change the size of the toolbar buttons

---
 apps/common/main/resources/less/buttons.less  | 32 ++++++++-----
 .../resources/less/colors-table-classic.less  |  4 +-
 .../less/colors-table-dark-contrast.less      |  6 +--
 .../resources/less/colors-table-dark.less     |  6 +--
 .../resources/less/colors-table-ie-fix.less   |  4 +-
 .../main/resources/less/colors-table.less     |  8 ++--
 apps/common/main/resources/less/common.less   |  8 ++--
 .../main/resources/less/dropdown-menu.less    | 16 +++----
 apps/common/main/resources/less/header.less   |  6 +--
 apps/common/main/resources/less/label.less    |  6 +--
 .../main/resources/less/language-dialog.less  |  4 +-
 apps/common/main/resources/less/toolbar.less  | 45 ++++++++++---------
 .../main/app/template/Toolbar.template        |  2 +-
 .../main/resources/less/toolbar.less          |  2 +-
 .../main/app/template/Toolbar.template        |  2 +-
 .../main/resources/less/toolbar.less          |  2 +-
 16 files changed, 81 insertions(+), 72 deletions(-)

diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 30ad01dbb6..0c0b2ce79d 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -1,5 +1,9 @@
 @x-huge-btn-height: 52px;
 @x-huge-btn-icon-size: 28px;
+@x-small-btn-size: 24px;
+@x-small-btn-icon-size: 24px;
+@x-tiny-btn-size: 20px;
+@x-tiny-btn-icon-size: 20px;
 
 .btn {
     border-radius: 1px;
@@ -14,8 +18,12 @@
         line-height: @value - 2px;
     }
 
+    &.tiny {
+        .btnsize(@x-tiny-btn-size);
+    }
+
     &.small {
-        .btnsize(20px);
+        .btnsize(@x-small-btn-size);
     }
 
     &.normal {
@@ -341,8 +349,8 @@
         }
 
         button.small .icon {
-            width: 20px;
-            height: 20px;
+            width: @x-small-btn-icon-size;
+            height: @x-small-btn-icon-size;
             min-width: 0;
         }
 
@@ -476,9 +484,9 @@
 
     &:not(.x-huge) {
         .icon {
-            width: 20px;
-            height: 20px;
-            line-height: 20px;
+            width: @x-small-btn-icon-size;
+            height: @x-small-btn-icon-size;
+            line-height: @x-small-btn-icon-size;
 
         }
 
@@ -514,7 +522,7 @@
         position: absolute;
         left: 3px;
         bottom: 1px;
-        width: 14px;
+        width: calc(@x-small-btn-size - 2*3px);
         height: 3px;
         background-color: red;
         .rtl & {
@@ -544,8 +552,8 @@
         position: absolute;
         left: 3px;
         bottom: 3px;
-        width: 14px;
-        height: 14px;
+        width: calc(@x-small-btn-size - 2*3px);
+        height: calc(@x-small-btn-size - 2*3px);
         background-color: red;
         .rtl & {
             left: auto;
@@ -602,9 +610,9 @@
     .icon {
         display: inline-block;
         position: relative;
-        width: 20px;
-        height: 20px;
-        line-height: 20px;
+        width: @x-small-btn-icon-size;
+        height: @x-small-btn-icon-size;
+        line-height: @x-small-btn-icon-size;
     }
 
     &[disabled],
diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less
index e65fc1159c..c0c2e12124 100644
--- a/apps/common/main/resources/less/colors-table-classic.less
+++ b/apps/common/main/resources/less/colors-table-classic.less
@@ -166,7 +166,7 @@
         // Others
 
         --button-small-normal-icon-offset-x: 0;
-        --button-small-active-icon-offset-x: -20px;
+        --button-small-active-icon-offset-x: -24px;
         --button-large-normal-icon-offset-x: 0;
         --button-large-active-icon-offset-x: -31px;
         --button-huge-normal-icon-offset-x: 0;
@@ -192,7 +192,7 @@
         --header-component-active-icon-opacity: 1;
         --header-component-active-hover-icon-opacity: 1;
 
-        --menu-icon-item-checked-offset-x: -20px;
+        --menu-icon-item-checked-offset-x: -24px;
     }
 }
 
diff --git a/apps/common/main/resources/less/colors-table-dark-contrast.less b/apps/common/main/resources/less/colors-table-dark-contrast.less
index ede21cbcb6..574fb78b4d 100644
--- a/apps/common/main/resources/less/colors-table-dark-contrast.less
+++ b/apps/common/main/resources/less/colors-table-dark-contrast.less
@@ -168,8 +168,8 @@
 
         // Others
 
-        --button-small-normal-icon-offset-x: -20px;
-        --button-small-active-icon-offset-x: -20px;
+        --button-small-normal-icon-offset-x: -24px;
+        --button-small-active-icon-offset-x: -24px;
         --button-large-normal-icon-offset-x: -31px;
         --button-large-active-icon-offset-x: -31px;
         --button-huge-normal-icon-offset-x: -40px;
@@ -195,6 +195,6 @@
         --header-component-active-icon-opacity: 1;
         --header-component-active-hover-icon-opacity: 1;
 
-        --menu-icon-item-checked-offset-x: -20px;
+        --menu-icon-item-checked-offset-x: -24px;
     }
 }
diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less
index 9f59e0f837..32d2decbd2 100644
--- a/apps/common/main/resources/less/colors-table-dark.less
+++ b/apps/common/main/resources/less/colors-table-dark.less
@@ -168,8 +168,8 @@
 
         // Others
 
-        --button-small-normal-icon-offset-x: -20px;
-        --button-small-active-icon-offset-x: -20px;
+        --button-small-normal-icon-offset-x: -24px;
+        --button-small-active-icon-offset-x: -24px;
         --button-large-normal-icon-offset-x: -31px;
         --button-large-active-icon-offset-x: -31px;
         --button-huge-normal-icon-offset-x: -40px;
@@ -195,6 +195,6 @@
         --header-component-active-icon-opacity: 1;
         --header-component-active-hover-icon-opacity: 1;
 
-        --menu-icon-item-checked-offset-x: -20px;
+        --menu-icon-item-checked-offset-x: -24px;
     }
 }
diff --git a/apps/common/main/resources/less/colors-table-ie-fix.less b/apps/common/main/resources/less/colors-table-ie-fix.less
index 7e523513a8..848ae415c6 100644
--- a/apps/common/main/resources/less/colors-table-ie-fix.less
+++ b/apps/common/main/resources/less/colors-table-ie-fix.less
@@ -83,8 +83,8 @@
 @canvas-scroll-thumb-hover-ie: #c0c0c0;
 @canvas-scroll-thumb-border-hover-ie: #cbcbcb;
 
-@button-header-normal-icon-offset-x-ie: -20px;
-@button-header-active-icon-offset-x-ie: -20px;
+@button-header-normal-icon-offset-x-ie: -24px;
+@button-header-active-icon-offset-x-ie: -24px;
 @button-xhuge-active-icon-offset-x-ie: -28px;
 @scaled-one-px-value-ie: 1px;
 
diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less
index 8555d57a35..e9fa9d513c 100644
--- a/apps/common/main/resources/less/colors-table.less
+++ b/apps/common/main/resources/less/colors-table.less
@@ -189,8 +189,8 @@
     //--button-huge-active-icon-offset-x: 0;
     //--button-xhuge-normal-icon-offset-x: 0;
     //--button-xhuge-active-icon-offset-x: 0;
-    --button-header-normal-icon-offset-x: -20px;
-    --button-header-active-icon-offset-x: -20px;
+    --button-header-normal-icon-offset-x: -24px;
+    --button-header-active-icon-offset-x: -24px;
     //--menu-icon-item-checked-offset-x: 0;
 
     --modal-window-mask-opacity: 0.2;
@@ -293,8 +293,8 @@
 //@button-huge-normal-icon-offset-x: var(--button-huge-normal-icon-offset-x, 0);
 //@button-huge-active-icon-offset-x: var(--button-huge-active-icon-offset-x, 0);
 
-@button-header-normal-icon-offset-x: var(--button-header-normal-icon-offset-x, -20px);
-@button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -20px);
+@button-header-normal-icon-offset-x: var(--button-header-normal-icon-offset-x, -24px);
+@button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -24px);
 
 @component-normal-icon-filter: var(--component-normal-icon-filter);
 @component-normal-icon-opacity: var(--component-normal-icon-opacity, .8);
diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index bda8b81d28..15e1930f90 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -248,7 +248,7 @@ label {
                     }
 
                     .menu-item-icon {
-                        background-position-x: -20px;
+                        background-position-x: -24px;
                         background-position-x: @button-small-active-icon-offset-x;
                     }
 
@@ -282,9 +282,9 @@ label {
             }
 
             .menu-item-icon {
-                width: 20px;
-                height: 20px;
-                line-height: 20px;
+                width: @x-small-btn-icon-size;
+                height: @x-small-btn-icon-size;
+                line-height: @x-small-btn-icon-size;
                 position: relative;
                 &:not(:disabled) {
                     opacity: 0.8;
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index 98ae18dd7e..ec6d0ee56a 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -98,14 +98,14 @@
         .menu-item-icon {
             display: inline-block;
             .float-left();
-            width: 20px;
-            height: 20px;
-            margin: -2px 4px 0 -16px;
+            width: @x-small-btn-icon-size;
+            height: @x-small-btn-icon-size;
+            margin: -4px 4px 0 -16px;
             background-repeat: no-repeat;
             opacity: @component-normal-icon-opacity;
 
             .rtl & {
-                margin: -2px -16px 0 4px;
+                margin: -4px -16px 0 4px;
             }
         }
 
@@ -148,16 +148,16 @@
     &.shifted-right > li,
     li.shifted-right {
             & > a {
-                .padding-x(28px, 20px);
+                .padding-x(calc(@x-small-btn-icon-size + 8px), 20px);
             }
             .menu-item-icon {
-                margin: -2px 0 0 -24px;
+                margin: -4px 0 0 calc(-1*@x-small-btn-icon-size - 4px);
                 .rtl & {
-                    margin: -2px -24px 0 0;
+                    margin: -4px calc(-1*@x-small-btn-icon-size - 4px) 0 0;
                 }
             }
             .checked:not(.no-checkmark):before  {
-                margin-left: -22px;
+                margin-left: calc(-1*@x-small-btn-icon-size - 2px);
             }
     }
     &.shifted-left {
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index af6d4c05a0..0584f29299 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -213,8 +213,8 @@
     width: 40px;
 
     .icon {
-        width: 20px;
-        height: 20px;
+        width: @x-small-btn-icon-size;
+        height: @x-small-btn-icon-size;
         display: inline-block;
         position: relative;
 
@@ -319,7 +319,7 @@
         > svg {
             position: absolute;
             width: 28px;
-            height: 20px;
+            height: @x-small-btn-icon-size;
             top: 50%;
             margin-top: -10px;
             fill: @icon-toolbar-header-ie;
diff --git a/apps/common/main/resources/less/label.less b/apps/common/main/resources/less/label.less
index 8f44c647b3..43e2bfe120 100644
--- a/apps/common/main/resources/less/label.less
+++ b/apps/common/main/resources/less/label.less
@@ -4,9 +4,9 @@
     font-weight: normal;
 
     .icon {
-        width: 20px;
-        height: 20px;
-        line-height: 20px;
+        width: @x-small-btn-icon-size;
+        height: @x-small-btn-icon-size;
+        line-height: @x-small-btn-icon-size;
         padding: 0;
         margin-top: -2px;
         display: inline-block;
diff --git a/apps/common/main/resources/less/language-dialog.less b/apps/common/main/resources/less/language-dialog.less
index 06c382e723..b3a9651aea 100644
--- a/apps/common/main/resources/less/language-dialog.less
+++ b/apps/common/main/resources/less/language-dialog.less
@@ -1,7 +1,7 @@
 // spell check indicator
 .icon.spellcheck-lang {
-  width: 20px;
-  height: 20px;
+  width: @x-small-btn-icon-size;
+  height: @x-small-btn-icon-size;
   position: absolute;
 }
 
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index ece052d16c..cc6ff1cf23 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -2,8 +2,9 @@
 @height-tabs: 32px;
 @height-controls: 67px;
 @img-equition-filter: var(--image-border-types-filter);
-
-
+@toolbar-paddings: floor(((@height-controls - 2*@x-small-btn-size)/3));
+@toolbar-small-btn-margin-top: ceil(((@height-controls - 2*@x-small-btn-size)/3));
+@toolbar-group-height: calc(@height-controls - 2 * @toolbar-paddings);
 .toolbar {
     position: relative;
 
@@ -292,8 +293,8 @@
     }
 
     .box-controls {
-        //height: @height-controls;         // button has strange offset in IE when odd height
-        padding: 7px 0;
+        height: @height-controls;         // button has strange offset in IE when odd height
+        padding: @toolbar-paddings 0;
         display: flex;
         .panel {
             display: table;
@@ -363,7 +364,7 @@
             }
         }
         .group {
-            height: 52px !important;
+            height: @toolbar-group-height !important;
             &.flex {
                 vertical-align: bottom;
             }
@@ -430,11 +431,11 @@
     }
 
     .elset {
-        height: 20px;
+        height: @x-small-btn-size;
         font-size: 0;
 
         &:not(:first-child) {
-            margin-top: 8px;
+            margin-top: @toolbar-small-btn-margin-top;
         }
 
         &.font-normal {
@@ -458,29 +459,29 @@
         }
 
         &.long {
-            height: 52px;
+            height: @toolbar-group-height;
         }
 
         &.short {
-            height: 20px;
+            height: @x-small-btn-size;
         }
     }
 
     .btn-slot {
         display: inline-block;
-        width: 20px;
+        width: @x-small-btn-size;
         height: auto;
 
         &.split-large {
-            width: 37px;
+            width: calc(@x-small-btn-size + 17px);
         }
 
         &.split {
-            width: 31px;
+            width: calc(@x-small-btn-size + 11px);
         }
 
         &.split-small {
-            width: 26px;
+            width: calc(@x-small-btn-size + 6px);
         }
 
         &.text {
@@ -845,24 +846,24 @@
         }
 
         & {
-            width: 21px;
-            height: 21px;
+            width: calc(@x-small-btn-size + 1px);
+            height: calc(@x-small-btn-size + 1px);
 
             .pixel-ratio__2_5 & {
-                width: 20px;
-                height: 20px;
+                width: @x-small-btn-size;
+                height: @x-small-btn-size;
             }
         }
 
         .icon {
-            width: 22px;
-            height: 22px;
+            width: @x-small-btn-size; // calc(@x-small-btn-size + 2px)
+            height: @x-small-btn-size; // calc(@x-small-btn-size + 2px)
 
             .pixel-ratio__1_25 &,
             .pixel-ratio__1_75 &,
             .pixel-ratio__2_5 & {
-                width: 20px;
-                height: 20px;
+                width: @x-small-btn-icon-size;
+                height: @x-small-btn-icon-size;
             }
         }
     }
@@ -1047,7 +1048,7 @@
                 }
             }
             .menu-item-icon {
-                background-position-x: -20px;
+                background-position-x: -24px;
                 background-position-x: @button-small-active-icon-offset-x;
             }
 
diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template
index d82d6fc5b2..551d610b5d 100644
--- a/apps/documenteditor/main/app/template/Toolbar.template
+++ b/apps/documenteditor/main/app/template/Toolbar.template
@@ -38,7 +38,7 @@
         <section class="box-panels">
             <section class="panel" data-tab="home" role="tabpanel" aria-labelledby="home">
                 <div class="group small">
-                    <div class="elset" style="width:230px;">
+                    <div class="elset font-attr">
                         <span class="btn-slot float-left" id="slot-field-fontname"></span>
                         <span class="btn-slot margin-left-2 float-left" id="slot-field-fontsize"></span>
                         <span class="btn-slot margin-left-2" id="slot-btn-incfont"></span>
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index e5f253f668..9ac6e26095 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -190,7 +190,7 @@
 }
 
 #slot-field-fontname {
-    width: 106px;
+    width: 120px;
 }
 
 #slot-field-fontsize {
diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template
index 1199c9cb10..36f2c527d9 100644
--- a/apps/presentationeditor/main/app/template/Toolbar.template
+++ b/apps/presentationeditor/main/app/template/Toolbar.template
@@ -55,7 +55,7 @@
         <section class="box-panels">
             <section class="panel" data-tab="home" role="tabpanel" aria-labelledby="home">
                 <div class="group small">
-                    <div class="elset" style="width:230px;">
+                    <div class="elset font-attr">
                         <span class="btn-slot float-left" id="slot-field-fontname"></span>
                         <span class="btn-slot margin-left-2 float-left" id="slot-field-fontsize"></span>
                         <span class="btn-slot margin-left-2" id="slot-btn-incfont"></span>
diff --git a/apps/presentationeditor/main/resources/less/toolbar.less b/apps/presentationeditor/main/resources/less/toolbar.less
index 78b86645f6..3a3b6e6510 100644
--- a/apps/presentationeditor/main/resources/less/toolbar.less
+++ b/apps/presentationeditor/main/resources/less/toolbar.less
@@ -145,7 +145,7 @@
 }
 
 #slot-field-fontname {
-    width: 111px;
+    width: 135px;
 }
 
 #slot-field-fontsize {