From 98268676f8fad8f64506d1eb487bcf64b72fed83 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Thu, 27 May 2021 19:30:48 +0300
Subject: [PATCH] Hint Manager: add hint for file menu, add hint parameters
 into checkbox, inputfield

---
 apps/common/main/lib/component/CheckBox.js    |  7 +-
 apps/common/main/lib/component/HintManager.js | 22 +++--
 apps/common/main/lib/component/InputField.js  |  6 ++
 apps/common/main/lib/view/Protection.js       | 16 +++-
 .../main/app/controller/LeftMenu.js           |  3 +-
 .../main/app/view/FileMenuPanels.js           | 90 +++++++++++++------
 6 files changed, 106 insertions(+), 38 deletions(-)

diff --git a/apps/common/main/lib/component/CheckBox.js b/apps/common/main/lib/component/CheckBox.js
index f25578afc..67382862b 100644
--- a/apps/common/main/lib/component/CheckBox.js
+++ b/apps/common/main/lib/component/CheckBox.js
@@ -94,7 +94,7 @@ define([
         checked     : false,
         value       : 'unchecked',
 
-        template    : _.template('<label class="checkbox-indeterminate"><input id="<%= id %>" type="checkbox" class="checkbox__native">' +
+        template    : _.template('<label class="checkbox-indeterminate" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"><input id="<%= id %>" type="checkbox" class="checkbox__native">' +
                                     '<label for="<%= id %>" class="checkbox__shape"></label><span></span></label>'),
 
         initialize : function(options) {
@@ -108,7 +108,10 @@ define([
             var me = this;
             if (!me.rendered) {
                 var elem = this.template({
-                    id: Common.UI.getId('chb-')
+                    id: Common.UI.getId('chb-'),
+                    dataHint: me.options.dataHint,
+                    dataHintDirection: me.options.dataHintDirection,
+                    dataHintOffset: me.options.dataHintOffset
                 });
                 if (parentEl) {
                     this.setElement(parentEl, false);
diff --git a/apps/common/main/lib/component/HintManager.js b/apps/common/main/lib/component/HintManager.js
index 5c60c7a26..c31fc1b9c 100644
--- a/apps/common/main/lib/component/HintManager.js
+++ b/apps/common/main/lib/component/HintManager.js
@@ -145,8 +145,8 @@ Common.UI.HintManager = new(function() {
                     });
                 else if (direction === 'left-top')
                     hint.css({
-                        top: offset.top - 16 + offsets[0],
-                        left: offset.left - 16 + offsets[1]
+                        top: offset.top - 14 + offsets[0],
+                        left: offset.left - 14 + offsets[1]
                     });
                 else if (direction === 'right')
                     hint.css({
@@ -222,9 +222,14 @@ Common.UI.HintManager = new(function() {
                         }
                     }
                     if (curr) {
-                        curr && curr.trigger(jQuery.Event('click', {which: 1}));
-                        _nextLevel();
-                        _showHints();
+                        if (curr.prop("tagName").toLowerCase() === 'input') {
+                            curr.focus();
+                            _hideHints();
+                        } else {
+                            curr.trigger(jQuery.Event('click', {which: 1}));
+                            _nextLevel();
+                            _showHints();
+                        }
                     }
                 }
                 e.preventDefault();
@@ -240,7 +245,12 @@ Common.UI.HintManager = new(function() {
         });
     };
 
+    var _needCloseMenu = function () {
+        return !(_hintVisible && _currentLevel > 1);
+    };
+
     return {
-        init: _init
+        init: _init,
+        needCloseMenu: _needCloseMenu
     }
 })();
\ No newline at end of file
diff --git a/apps/common/main/lib/component/InputField.js b/apps/common/main/lib/component/InputField.js
index 75fe653ac..5d16292f6 100644
--- a/apps/common/main/lib/component/InputField.js
+++ b/apps/common/main/lib/component/InputField.js
@@ -87,6 +87,9 @@ define([
                         'class="form-control <%= cls %>" ',
                         'placeholder="<%= placeHolder %>" ',
                         'value="<%= value %>"',
+                        'data-hint="<%= dataHint %>"',
+                        'data-hint-direction="<%= dataHintDirection %>"',
+                        'data-hint-offset="<%= dataHintOffset %>"',
                     '>',
                     '<span class="input-error"></span>',
                 '</div>'
@@ -135,6 +138,9 @@ define([
                         name        : this.name,
                         placeHolder : this.placeHolder,
                         spellcheck  : this.spellcheck,
+                        dataHint    : this.options.dataHint,
+                        dataHintDirection: this.options.dataHintDirection,
+                        dataHintOffset: this.options.dataHintOffset,
                         scope       : me
                     }));
 
diff --git a/apps/common/main/lib/view/Protection.js b/apps/common/main/lib/view/Protection.js
index d58b80638..3bd5fe7ed 100644
--- a/apps/common/main/lib/view/Protection.js
+++ b/apps/common/main/lib/view/Protection.js
@@ -228,7 +228,9 @@ define([
                         cls: 'btn-text-default',
                         style: 'width: 100%;',
                         caption: this.txtInvisibleSignature,
-                        disabled: this._state.invisibleSignDisabled
+                        disabled: this._state.invisibleSignDisabled,
+                        dataHint: '2',
+                        dataHintDirection: 'left-top'
                     });
                     this.btnsInvisibleSignature.push(button);
                     if (this._isSetEvents) {
@@ -243,7 +245,9 @@ define([
                         style: 'width: 100%;',
                         caption: this.txtAddPwd,
                         disabled: this._state.disabled || this._state.disabledPassword,
-                        visible: !this._state.hasPassword
+                        visible: !this._state.hasPassword,
+                        dataHint: '2',
+                        dataHintDirection: 'left-top'
                     });
                     this.btnsAddPwd.push(button);
                     if (this._isSetEvents) {
@@ -258,7 +262,9 @@ define([
                         style: 'width: 100%;',
                         caption: this.txtDeletePwd,
                         disabled: this._state.disabled || this._state.disabledPassword,
-                        visible: this._state.hasPassword
+                        visible: this._state.hasPassword,
+                        dataHint: '2',
+                        dataHintDirection: 'left-top'
                     });
                     this.btnsDelPwd.push(button);
                     if (this._isSetEvents) {
@@ -273,7 +279,9 @@ define([
                         style: 'width: 100%;',
                         caption: this.txtChangePwd,
                         disabled: this._state.disabled || this._state.disabledPassword,
-                        visible: this._state.hasPassword
+                        visible: this._state.hasPassword,
+                        dataHint: '2',
+                        dataHintDirection: 'left-top'
                     });
                     this.btnsChangePwd.push(button);
                     if (this._isSetEvents) {
diff --git a/apps/documenteditor/main/app/controller/LeftMenu.js b/apps/documenteditor/main/app/controller/LeftMenu.js
index 9dbcb6a48..cee19ec9f 100644
--- a/apps/documenteditor/main/app/controller/LeftMenu.js
+++ b/apps/documenteditor/main/app/controller/LeftMenu.js
@@ -807,7 +807,8 @@ define([
                 case 'escape':
 //                        if (!this.leftMenu.isOpened()) return true;
                     if ( this.leftMenu.menuFile.isVisible() ) {
-                        this.leftMenu.menuFile.hide();
+                        if (Common.UI.HintManager.needCloseMenu())
+                            this.leftMenu.menuFile.hide();
                         return false;
                     }
 
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index 62dd996f8..c250c2b12 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -74,7 +74,7 @@ define([
                 '<% _.each(rows, function(row) { %>',
                     '<tr>',
                         '<% _.each(row, function(item) { %>',
-                            '<td><div><svg class="btn-doc-format" format="<%= item.type %>">',
+                            '<td><div><svg class="btn-doc-format" format="<%= item.type %>" data-hint="2" data-hint-direction="left-top" data-hint-offset="4, 4">',
                                 '<use xlink:href="#svg-format-<%= item.imgCls %>"></use>',
                             '</svg></div></td>',
                         '<% }) %>',
@@ -210,7 +210,7 @@ define([
                 '</tr>','<tr class="divider edit"></tr>',
                 '<tr class="edit">',
                     '<td class="left"><label><%= scope.txtProofing %></label></td>',
-                    '<td class="right"><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;"><%= scope.txtAutoCorrect %></button></div></td>',
+                    '<td class="right"><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;" data-hint="2" data-hint-direction="left-top"><%= scope.txtAutoCorrect %></button></div></td>',
                 '</tr>','<tr class="divider edit"></tr>',
                 '<tr class="edit">',
                     '<td class="left"><label><%= scope.txtInput %></label></td>',
@@ -272,7 +272,7 @@ define([
                 '</tr>','<tr class="divider macros"></tr>',
                 '<tr class="fms-btn-apply">',
                     '<td class="left"></td>',
-                    '<td class="right" style="padding-top:15px; padding-bottom: 15px;"><button class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
+                    '<td class="right" style="padding-top:15px; padding-bottom: 15px;"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="left-top"><%= scope.okButtonText %></button></td>',
                 '</tr>',
             '</tbody></table>',
         '</div>',
@@ -280,7 +280,7 @@ define([
             '<table style="margin: 10px 0;"><tbody>',
                 '<tr>',
                 '<td class="left"></td>',
-                '<td class="right"><button class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
+                '<td class="right"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="left-top"><%= scope.okButtonText %></button></td>',
                 '</tr>',
             '</tbody></table>',
         '</div>'
@@ -298,36 +298,48 @@ define([
 
             this.chInputMode = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-input-mode'),
-                labelText: this.strInputMode
+                labelText: this.strInputMode,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             });
 
             /** coauthoring begin **/
             this.chLiveComment = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-live-comment'),
-                labelText: this.strLiveComment
+                labelText: this.strLiveComment,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             }).on('change', function(field, newValue, oldValue, eOpts){
                 me.chResolvedComment.setDisabled(field.getValue()!=='checked');
             });
 
             this.chResolvedComment = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-resolved-comment'),
-                labelText: this.strResolvedComment
+                labelText: this.strResolvedComment,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             });
             /** coauthoring end **/
 
             this.chSpell = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-spell-check'),
-                labelText: this.strSpellCheckMode
+                labelText: this.strSpellCheckMode,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             });
 
             this.chCompatible = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-compatible'),
-                labelText: this.textOldVersions
+                labelText: this.textOldVersions,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             });
 
             this.chAutosave = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-autosave'),
-                labelText: this.strAutosave
+                labelText: this.strAutosave,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             }).on('change', function(field, newValue, oldValue, eOpts){
                 if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) {
                     me.cmbCoAuthMode.setValue(0);
@@ -338,12 +350,16 @@ define([
 
             this.chForcesave = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-forcesave'),
-                labelText: this.strForcesave
+                labelText: this.strForcesave,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             });
 
             this.chAlignGuides = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-align-guides'),
-                labelText: this.strAlignGuides
+                labelText: this.strAlignGuides,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             });
 
             this.cmbZoom = new Common.UI.ComboBox({
@@ -366,7 +382,9 @@ define([
                     { value: 150, displayValue: "150%" },
                     { value: 175, displayValue: "175%" },
                     { value: 200, displayValue: "200%" }
-                ]
+                ],
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             });
 
             /** coauthoring begin **/
@@ -379,7 +397,9 @@ define([
                     { value: 'none', displayValue: this.txtNone },
                     { value: 'all', displayValue: this.txtAll },
                     { value: 'last', displayValue: this.txtLast }
-                ]
+                ],
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             });
 
             this.cmbCoAuthMode = new Common.UI.ComboBox({
@@ -390,7 +410,9 @@ define([
                 data        : [
                     { value: 1, displayValue: this.strFast, descValue: this.strCoAuthModeDescFast},
                     { value: 0, displayValue: this.strStrict, descValue: this.strCoAuthModeDescStrict }
-                ]
+                ],
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             }).on('selected', function(combo, record) {
                 if (record.value == 1 && (me.chAutosave.getValue()!=='checked'))
                     me.chAutosave.setValue(1);
@@ -417,7 +439,9 @@ define([
                     { value: 1, displayValue: this.txtMac },
                     { value: 2, displayValue: this.txtNative },
                     { value: 'custom', displayValue: this.txtCacheMode }
-                ]
+                ],
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             });
             this.cmbFontRender.on('selected', _.bind(this.onFontRenderSelected, this));
 
@@ -430,7 +454,9 @@ define([
                     { value: Common.Utils.Metric.c_MetricUnits['cm'], displayValue: this.txtCm },
                     { value: Common.Utils.Metric.c_MetricUnits['pt'], displayValue: this.txtPt },
                     { value: Common.Utils.Metric.c_MetricUnits['inch'], displayValue: this.txtInch }
-                ]
+                ],
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             });
 
             this.cmbMacros = new Common.UI.ComboBox({
@@ -443,7 +469,9 @@ define([
                     { value: 2, displayValue: this.txtStopMacros, descValue: this.txtStopMacrosDesc },
                     { value: 0, displayValue: this.txtWarnMacros, descValue: this.txtWarnMacrosDesc },
                     { value: 1, displayValue: this.txtRunMacros, descValue: this.txtRunMacrosDesc }
-                ]
+                ],
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             }).on('selected', function(combo, record) {
                 me.lblMacrosDesc.text(record.descValue);
             });
@@ -451,7 +479,9 @@ define([
 
             this.chPaste = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-paste-settings'),
-                labelText: this.strPasteButton
+                labelText: this.strPasteButton,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             });
 
             this.btnAutoCorrect = new Common.UI.Button({
@@ -467,7 +497,9 @@ define([
                 data        : [
                     { value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight },
                     { value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark }
-                ]
+                ],
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             });
 
             $markup.find('.btn.primary').each(function(index, el){
@@ -983,7 +1015,7 @@ define([
                 '<table class="main" style="margin: 10px 0;">',
                     '<tr>',
                         '<td class="left"></td>',
-                        '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
+                        '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="left-top"><%= scope.okButtonText %></button></td>',
                     '</tr>',
                 '</table>',
             '</div>'
@@ -1030,19 +1062,25 @@ define([
                 el          : $markup.findById('#id-info-title'),
                 style       : 'width: 200px;',
                 placeHolder : this.txtAddText,
-                validateOnBlur: false
+                validateOnBlur: false,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             }).on('keydown:before', keyDownBefore);
             this.inputSubject = new Common.UI.InputField({
                 el          : $markup.findById('#id-info-subject'),
                 style       : 'width: 200px;',
                 placeHolder : this.txtAddText,
-                validateOnBlur: false
+                validateOnBlur: false,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             }).on('keydown:before', keyDownBefore);
             this.inputComment = new Common.UI.InputField({
                 el          : $markup.findById('#id-info-comment'),
                 style       : 'width: 200px;',
                 placeHolder : this.txtAddText,
-                validateOnBlur: false
+                validateOnBlur: false,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             }).on('keydown:before', keyDownBefore);
 
             // modify info
@@ -1071,7 +1109,9 @@ define([
                 el          : $markup.findById('#id-info-add-author'),
                 style       : 'width: 200px;',
                 validateOnBlur: false,
-                placeHolder: this.txtAddAuthor
+                placeHolder: this.txtAddAuthor,
+                dataHint: '2',
+                dataHintDirection: 'left-top'
             }).on('changed:after', function(input, newValue, oldValue, e) {
                 if (newValue == oldValue) return;