From 262387a139f9ba6a98c3152eeb41c3787a2bc348 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Wed, 12 Dec 2018 14:56:08 +0300
Subject: [PATCH] [common] reduce 'huge' bottons width to show invisible
 elements on tabbar

---
 apps/common/main/lib/component/Mixtbar.js     | 44 +++++++++++++++++++
 apps/common/main/resources/less/toolbar.less  | 16 +++++++
 .../main/app/template/Toolbar.template        |  2 +-
 .../main/app/view/Toolbar.js                  |  4 +-
 4 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 667b36449..fb96d265e 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -226,6 +226,8 @@ define([
                 if ( $boxTabs.parent().hasClass('short') ) {
                     $boxTabs.parent().removeClass('short');
                 }
+
+                this.processPanelVisible();
             },
 
             onTabClick: function (e) {
@@ -243,10 +245,12 @@ define([
                         me.collapse();
                     } else {
                         me.setTab(tab);
+                        me.processPanelVisible();
                     }
                 } else {
                     if ( !$target.hasClass('active') && !islone ) {
                         me.setTab(tab);
+                        me.processPanelVisible();
                     }
                 }
             },
@@ -345,6 +349,46 @@ define([
                 return true;
             },
 
+            /**
+             * in case panel partly visible.
+             * hide button's caption to decrease panel width
+             * ##adopt-panel-width
+            **/
+            processPanelVisible: function(panel) {
+                var me = this;
+                if ( me._timer_id ) clearTimeout(me._timer_id);
+
+                function _fc() {
+                    let $active = panel || me.$panels.filter('.active');
+                    if ($active) {
+                        var _maxright = $active.parents('.box-controls').width();
+                        var data = $active.data(),
+                            _rightedge = data.rightedge;
+
+                        if ( !_rightedge ) {
+                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                        }
+
+                        if ( _rightedge > _maxright ) {
+                            if ( !$active.hasClass('compactwidth') ) {
+                                $active.addClass('compactwidth');
+                                data.rightedge = _rightedge;
+                            }
+                        } else {
+                            if ($active.hasClass('compactwidth')) {
+                                $active.removeClass('compactwidth');
+                            }
+                        }
+                    }
+                };
+
+                me._timer_id =  setTimeout(function() {
+                    delete me._timer_id;
+                    _fc();
+                }, 100);
+            },
+            /**/
+
             setExtra: function (place, el) {
                 if ( !!el ) {
                     if (this.$tabs) {
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index c90ccf813..80f415680 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -147,6 +147,22 @@
         .panel:not(.active) {
             display: none;
         }
+
+        /* ##adopt-panel-width */
+        .panel.compactwidth:not(#plugns-panel) {
+            .btn-group, .btn-toolbar {
+                &.x-huge {
+                    .caption {
+                        display: none;
+                    }
+
+                    .inner-box-caption {
+                        justify-content: center;
+                    }
+                }
+            }
+        }
+        /**/
     }
 
     background-color: @gray-light;
diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template
index 33e675bcd..60dd131f2 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: 140px;"></div>
+                <div class="group" id="slot-field-styles" style="width: 100%; min-width: 148px;"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js
index e8ead7172..6bf5ea6df 100644
--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@@ -868,8 +868,10 @@ define([
                     }
                 });
 
-                if ( mode.isEdit )
+                if ( mode.isEdit ) {
                     me.setTab('home');
+                    me.processPanelVisible();
+                }
 
                 if ( me.isCompactView )
                     me.setFolded(true);