From b639b12d9877924512c8b8153fd67201056e7368 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Mon, 13 Apr 2020 17:45:30 +0300
Subject: [PATCH 1/2] Refactoring toolbar resize: hide buttons captions in
 right-to-left order

---
 apps/common/main/lib/component/Mixtbar.js     | 62 ++++++++++++++++---
 apps/common/main/resources/less/toolbar.less  |  2 +-
 .../main/app/view/PivotTable.js               |  2 +-
 3 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index f3e4ba840..12bbdb4e2 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -374,20 +374,68 @@ define([
                     if ( $active && $active.length ) {
                         var _maxright = $active.parents('.box-controls').width();
                         var data = $active.data(),
-                            _rightedge = data.rightedge;
+                            _rightedge = data.rightedge,
+                            _btns = data.buttons,
+                            _flex = data.flex;
 
                         if ( !_rightedge ) {
                             _rightedge = $active.get(0).getBoundingClientRect().right;
                         }
+                        if ( !_btns ) {
+                            _btns = [];
+                            _.each($active.find('.btn-slot .x-huge'), function(item) {
+                                _btns.push($(item).closest('.btn-slot'));
+                            });
+                            data.buttons = _btns;
+                        }
+                        if (!_flex) {
+                            _flex = [];
+                            _.each($active.find('.group.flex'), function(item) {
+                                _flex.push($(item));
+                            });
+                            data.flex = _flex;
+                        }
 
-                        if ( _rightedge > _maxright ) {
-                            if ( !$active.hasClass('compactwidth') ) {
-                                $active.addClass('compactwidth');
-                                data.rightedge = _rightedge;
+                        if ( _rightedge > _maxright) {
+                            if (_flex.length>0) {
+                                for (var i=0; i<_flex.length; i++) {
+                                    var item = _flex[i];
+                                    if (item.outerWidth() > parseInt(item.css('min-width')))
+                                        return;
+                                    else
+                                        item.css('width', item.css('min-width'));
+                                }
                             }
+                            for (var i=_btns.length-1; i>=0; i--) {
+                                var btn = _btns[i];
+                                if ( !btn.hasClass('compactwidth') ) {
+                                    btn.addClass('compactwidth');
+                                    _rightedge = $active.get(0).getBoundingClientRect().right;
+                                    if (_rightedge <= _maxright)
+                                        break;
+                                }
+                            }
+                            data.rightedge = _rightedge;
                         } else {
-                            if ($active.hasClass('compactwidth')) {
-                                $active.removeClass('compactwidth');
+                            for (var i=0; i<_btns.length; i++) {
+                                var btn = _btns[i];
+                                if ( btn.hasClass('compactwidth') ) {
+                                    btn.removeClass('compactwidth');
+                                    _rightedge = $active.get(0).getBoundingClientRect().right;
+                                    if ( _rightedge > _maxright) {
+                                        btn.addClass('compactwidth');
+                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        break;
+                                    }
+                                }
+                            }
+                            data.rightedge = _rightedge;
+                            if (_flex.length>0 && $active.find('.btn-slot.compactwidth').length<1) {
+                                for (var i=0; i<_flex.length; i++) {
+                                    var item = _flex[i];
+                                    if (parseInt(item.css('width')) < parseInt(item.css('max-width')))
+                                        item.css('width', item.css('max-width'));
+                                }
                             }
                         }
                     }
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 96a098cbb..ccdff0f1b 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -175,7 +175,7 @@
         }
 
         /* ##adopt-panel-width */
-        .panel.compactwidth:not(#plugns-panel) {
+        .panel:not(#plugns-panel) .compactwidth {
             .btn-group, .btn-toolbar {
                 &.x-huge {
                     .caption {
diff --git a/apps/spreadsheeteditor/main/app/view/PivotTable.js b/apps/spreadsheeteditor/main/app/view/PivotTable.js
index efabd3db0..a8fe76fda 100644
--- a/apps/spreadsheeteditor/main/app/view/PivotTable.js
+++ b/apps/spreadsheeteditor/main/app/view/PivotTable.js
@@ -87,7 +87,7 @@ define([
                         '<span class="btn-slot text" id="slot-chk-banded-column"></span>' +
                     '</div>' +
                 '</div>' +
-                '<div class="group" id="slot-field-pivot-styles" style="width: 347px;">' +
+                '<div class="group flex" id="slot-field-pivot-styles" style="width: 347px;max-width: 347px;min-width: 115px;">' +
                 '</div>' +
             '</section>';
 

From 4ce8507aca613b650d580d8b7a56ef04164f0813 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Mon, 13 Apr 2020 18:10:01 +0300
Subject: [PATCH 2/2] [PE] Fix toolbar resizing

---
 apps/common/main/lib/component/Mixtbar.js                  | 3 +--
 apps/presentationeditor/main/app/template/Toolbar.template | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 12bbdb4e2..74b785c60 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -433,8 +433,7 @@ define([
                             if (_flex.length>0 && $active.find('.btn-slot.compactwidth').length<1) {
                                 for (var i=0; i<_flex.length; i++) {
                                     var item = _flex[i];
-                                    if (parseInt(item.css('width')) < parseInt(item.css('max-width')))
-                                        item.css('width', item.css('max-width'));
+                                    item.css('width', item.css('max-width'));
                                 }
                             }
                         }
diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template
index 56b59459a..abbc6ad38 100644
--- a/apps/presentationeditor/main/app/template/Toolbar.template
+++ b/apps/presentationeditor/main/app/template/Toolbar.template
@@ -96,7 +96,7 @@
                         <span class="btn-slot split" id="slot-btn-slidesize"></span>
                     </div>
                 </div>
-                <div class="group" id="slot-field-styles" style="width: 100%; min-width: 148px;"></div>
+                <div class="group flex" id="slot-field-styles" style="width: 100%; min-width: 148px; max-width: 100%;"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">