From 8e29326db75245a05eed14098986bb7f4baabfe8 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Thu, 3 May 2018 19:02:09 +0300
Subject: [PATCH] [All] fix bug 37587

---
 apps/common/main/lib/component/Mixtbar.js                | 9 +++++++--
 apps/common/main/resources/less/toolbar.less             | 4 ++++
 apps/documenteditor/main/resources/less/toolbar.less     | 4 ----
 apps/presentationeditor/main/resources/less/toolbar.less | 4 ----
 apps/spreadsheeteditor/main/resources/less/toolbar.less  | 4 ----
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index efa156028..ebe3f1230 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -127,8 +127,12 @@ define([
                 if ( this.isFolded ) {
                     if (!optsFold.$box) optsFold.$box = me.$el.find('.box-controls');
 
-                    optsFold.$bar.addClass('folded').toggleClass('expanded', false);
+                    optsFold.$bar.addClass('folded z-clear').toggleClass('expanded', false);
                     optsFold.$bar.find('.tabs .ribtab').removeClass('active');
+                    optsFold.$bar.on($.support.transition.end, function (e) {
+                        if ( optsFold.$bar.hasClass('folded') && !optsFold.$bar.hasClass('expanded') )
+                            optsFold.$bar.toggleClass('z-clear', true);
+                    });
                     optsFold.$box.on({
                         mouseleave: function (e) {
                             // optsFold.timer = setTimeout( function(e) {
@@ -167,7 +171,7 @@ define([
 
                 } else {
                     // clearTimeout(optsFold.timer);
-                    optsFold.$bar.removeClass('folded');
+                    optsFold.$bar.removeClass('folded z-clear');
                     optsFold.$box.off();
 
                     var active_panel = optsFold.$box.find('.panel.active');
@@ -191,6 +195,7 @@ define([
             expand: function() {
                 // clearTimeout(optsFold.timer);
 
+                optsFold.$bar.removeClass('z-clear');
                 optsFold.$bar.addClass('expanded');
                 // optsFold.timer = setTimeout(this.collapse, optsFold.timeout);
             },
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 6b4dfe3b3..aa1340adf 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -251,6 +251,10 @@
             z-index: 102;
         }
     }
+
+    &:not(.cover):not(.z-clear) {
+        z-index: @zindex-navbar + 1;
+    }
 }
 
 .btn-toolbar {
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index bbe1c7805..061c8495a 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -2,10 +2,6 @@
 @tabs-bg-color: #446995;
 
 .toolbar {
-    &:not(.cover) {
-        z-index: 1001;
-    }
-
     &.masked {
         button.disabled .icon:not(.no-mask) {
             background-position-x: 0px !important;
diff --git a/apps/presentationeditor/main/resources/less/toolbar.less b/apps/presentationeditor/main/resources/less/toolbar.less
index 95fcab43d..5c4841cdf 100644
--- a/apps/presentationeditor/main/resources/less/toolbar.less
+++ b/apps/presentationeditor/main/resources/less/toolbar.less
@@ -1,10 +1,6 @@
 @tabs-bg-color: #aa5252;
 
 .toolbar {
-    &:not(.cover) {
-        z-index: 1001;
-    }
-
     &.masked {
         button.disabled .icon:not(.no-mask) {
             background-position-x: 0px !important;
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index ebacaa1d5..9a8a4f004 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -1,10 +1,6 @@
 @tabs-bg-color: #40865c;
 
 .toolbar {
-    &:not(.cover) {
-        z-index: 1001;
-    }
-
     &.masked {
         button.disabled .icon:not(.no-mask) {
             background-position-x: 0px !important;