From d9757ca68e223b1f2e120ae1a45723cd5577b618 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Tue, 17 Aug 2021 16:55:46 +0300
Subject: [PATCH] Fix visibility of alt-key hints when we need to scroll tabs,
 add hints to scroll buttons

---
 apps/common/main/lib/component/HintManager.js | 15 +++++++++++++--
 apps/common/main/lib/component/Mixtbar.js     |  4 ++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/common/main/lib/component/HintManager.js b/apps/common/main/lib/component/HintManager.js
index 4534fe864..095e4187c 100644
--- a/apps/common/main/lib/component/HintManager.js
+++ b/apps/common/main/lib/component/HintManager.js
@@ -260,6 +260,8 @@ Common.UI.HintManager = new(function() {
             _getControls();
         _currentControls.forEach(function(item, index) {
             if (!_isItemDisabled(item)) {
+                var leftBorder = 0,
+                    rightBorder = docW;
                 if ($(_currentSection).prop('id') === 'toolbar' && ($(_currentSection).find('.toolbar-mask').length > 0 || item.closest('.group').find('.toolbar-group-mask').length > 0)) {
                     return;
                 }
@@ -269,6 +271,15 @@ Common.UI.HintManager = new(function() {
                         return;
                     }
                 }
+                if (_currentLevel === 0 && item.closest('.tabs.short').length > 0) {
+                    var blockTabs = item.closest('.tabs.short');
+                    leftBorder = blockTabs.offset().left;
+                    rightBorder = leftBorder + blockTabs.width();
+                    if (!item.hasClass('scroll')) {
+                        leftBorder += 20;
+                        rightBorder -= 20;
+                    }
+                }
                 var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>');
                 var direction = item.attr('data-hint-direction');
                 // exceptions
@@ -327,7 +338,7 @@ Common.UI.HintManager = new(function() {
                     left = offset.left + (item.outerWidth() - 18) / 2 + offsets[1];
                 }
 
-                if (top < maxHeight && left < docW && top > topSection && top < bottomSection) {
+                if (top < maxHeight && left < docW && top > topSection && top < bottomSection && left > leftBorder && left + 18 < rightBorder) {
                     hint.css({
                         top: top,
                         left: left
@@ -452,7 +463,7 @@ Common.UI.HintManager = new(function() {
                                         }
                                     }
                                 }
-                                if (curr.prop('id') === 'btn-goback' || curr.closest('.btn-slot').prop('id') === 'slot-btn-options' || curr.prop('id') === 'left-btn-thumbs') {
+                                if (curr.prop('id') === 'btn-goback' || curr.closest('.btn-slot').prop('id') === 'slot-btn-options' || curr.prop('id') === 'left-btn-thumbs' || curr.hasClass('scroll')) {
                                     _resetToDefault();
                                     return;
                                 }
diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 80bf8c471..44fc291ab 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -93,7 +93,7 @@ define([
 
                 var _template_tabs =
                     '<section class="tabs">' +
-                        '<a class="scroll left"></a>' +
+                        '<a class="scroll left" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="V"></a>' +
                         '<ul>' +
                             '<% for(var i in items) { %>' +
                                 '<% if (typeof items[i] == "object") { %>' +
@@ -105,7 +105,7 @@ define([
                                 '<% } %>' +
                             '<% } %>' +
                         '</ul>' +
-                        '<a class="scroll right"></a>' +
+                        '<a class="scroll right" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="R"></a>' +
                     '</section>';
 
                 this.$layout = $(options.template({