Merge pull request #2084 from ONLYOFFICE/feature/fix-focus-manager

Feature/fix focus manager

apps/common/main/lib/component/ColorButton.js

@@ -65,6 +65,7 @@ define([
 
                 this.colorPicker = new Common.UI.ThemeColorPalette(config);
                 this.colorPicker.on('select', _.bind(this.onColorSelect, this));
+                this.colorPicker.on('close:extended', _.bind(this.onCloseExtentedColor, this));
                 this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
                 if (this.options.auto) {
                     this.cmpEl.find('#' + this.menu.id + '-color-auto').on('click', _.bind(this.onAutoColorSelect, this));
@@ -147,6 +148,13 @@ define([
             this.trigger('color:select', this, color);
         },
 
+        onCloseExtentedColor: function(picker, isOk) {
+            if (this.options.takeFocusOnClose) {
+                var me = this;
+                setTimeout(function(){me.focus();}, 1);
+            }
+        },
+
         setColor: function(color) {
             if (color == 'auto' && this.options.auto)
                 color = this.autocolor;
@@ -192,6 +200,9 @@ define([
             return this.cmpEl.hasClass('open');
         },
 
+        focus: function() {
+            $('button', this.cmpEl).focus();
+        },
         textNewColor: 'Add New Custom Color',
         textAutoColor: 'Automatic'
 

apps/common/main/lib/component/ThemeColorPalette.js

@@ -330,6 +330,7 @@ define([
                     me.setCustomColor(win.getColor());
                     me.fireEvent('select', me, win.getColor());
                 }
+                me.fireEvent('close:extended', me, mr==1);
             });
             me._isdlgopen = true;
             win.setColor((me.value!==undefined && me.value!==false) ? me.value : ((defcolor!==undefined) ? defcolor : '000000'));

apps/common/main/lib/view/ListSettingsDialog.js

@@ -260,7 +260,9 @@ define([
                 if (record.value === _BulletTypes.newSymbol) {
                     var me = this,
                         props = me.bulletProps,
+                        btn,
                         handler = function(dlg, result, settings) {
+                            btn = result;
                             if (result == 'ok') {
                                 props.changed = true;
                                 props.code = settings.code;
@@ -292,6 +294,9 @@ define([
                             font: props.font,
                             symbol: props.symbol,
                             handler: handler
+                        }).on('close', function(obj){
+                            (btn===undefined) && handler && handler.call(me);
+                            setTimeout(function(){me.cmbBulletFormat.focus();}, 1);
                         });
                     win.show();
                     win.on('symbol:dblclick', handler);

apps/common/main/lib/view/SignDialog.js

@@ -248,7 +248,7 @@ define([
         },
 
         getFocusedComponents: function() {
-            return [this.inputPurpose, this.inputName, this.cmbFonts, this.cmbFontSize];
+            return [this.inputPurpose, this.inputName, this.cmbFonts, this.cmbFontSize, this.btnBold, this.btnItalic, this.btnSelectImage, this.btnChangeCertificate];
         },
 
         show: function() {

apps/common/main/resources/less/buttons.less

@@ -1009,6 +1009,15 @@
     }
 }
 
+.asc-window.modal {
+    .btn-toolbar:not(.bg-white), .btn-group {
+        &:focus:not(.disabled) {
+            .box-shadow(0 0 0 @scaled-one-px-value-ie @border-control-focus-ie);
+            .box-shadow(0 0 0 @scaled-one-px-value @border-control-focus);
+        }
+    }
+}
+
 .btn-large-dataview {
     display: inline-block;
     width: 72px;

apps/documenteditor/main/app/view/ImageSettingsAdvanced.js

@@ -1165,7 +1165,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
 
         getFocusedComponents: function() {
             return [
-                this.spnWidth, this.spnHeight, this.btnOriginalSize, // 0 tab
+                this.spnWidth, this.btnRatio, this.spnHeight, this.btnOriginalSize, // 0 tab
                 this.radioHSize, this.spnShapeWidth , this.spnShapeWidthPc, this.radioHSizePc, this.cmbWidthPc,
                 this.radioVSize, this.spnShapeHeight, this.spnShapeHeightPc, this.radioVSizePc, this.cmbHeightPc, this.chRatio, // 1 tab
                 this.spnAngle, this.chFlipHor, this.chFlipVert, // 2 tab

apps/documenteditor/main/app/view/ListSettingsDialog.js

@@ -297,10 +297,11 @@ define([
 
             this.btnColor = new Common.UI.ButtonColored({
                 parentEl: $window.find('#id-dlg-bullet-color'),
-                cls         : 'btn-toolbar',
+                cls         : 'btn-toolbar move-focus',
                 iconCls     : 'toolbar__icon btn-fontcolor',
                 hint        : this.txtColor,
                 menu: true,
+                takeFocusOnClose: true,
                 additionalItems: [{
                         id: 'id-dlg-bullet-text-color',
                         caption: this.txtLikeText,
@@ -701,11 +702,23 @@ define([
             this.btnMore.on('click', _.bind(this.onMoreClick, this));
             this.on('animate:after', _.bind(this.onAnimateAfter, this));
 
+            if (Common.localStorage.getBool("de-hide-multilevel-settings", true))
+                this.onMoreClick(this.btnMore);
+
             this.afterRender();
         },
 
         getFocusedComponents: function() {
-            return [this.cmbFormat, this.cmbAlign, this.cmbSize, this.btnColor, this.levelsList];
+            switch (this.type) {
+                case 0:
+                    return [this.cmbFormat, this.cmbAlign, this.cmbSize, this.btnBold, this.btnItalic, this.btnColor];
+                case 1:
+                    return [this.cmbFormat, this.cmbAlign, this.txtNumFormat, this.cmbFonts, this.btnBold, this.btnItalic, this.btnColor, this.cmbSize];
+                case 2:
+                    return [this.cmbFormat, this.cmbSize, this.btnBold, this.btnItalic, this.btnColor, this.txtNumFormat, this.btnMore, this.levelsList,
+                            this.cmbFonts, this.cmbLevel, this.spnStart, this.chRestart, this.cmbAlign, this.spnAlign, this.spnIndents, this.cmbFollow, this.chTabStop, this.spnTabStop];
+            }
+            return [];
         },
 
         getDefaultFocusableComponent: function () {
@@ -793,7 +806,9 @@ define([
         addNewBullet: function(callback) {
             var me = this,
                 props = me.bulletProps,
+                btn,
                 handler = function(dlg, result, settings) {
+                    btn = result;
                     if (result == 'ok') {
                         props.changed = true;
                         props.code = settings.code;
@@ -820,6 +835,9 @@ define([
                     font: props.font,
                     symbol: props.symbol,
                     handler: handler
+                }).on('close', function(obj){
+                    (btn===undefined) && callback && callback.call(me);
+                    setTimeout(function(){me.cmbFormat.focus();}, 1);
                 });
             win.show();
             win.on('symbol:dblclick', handler);
@@ -827,7 +845,9 @@ define([
 
         addNewListType: function(callback) {
             var me = this,
+                btn,
                 handler = function(result, value) {
+                    btn = result;
                     if (result == 'ok') {
                         if (me._changedProps) {
                             me._changedProps.put_Format(value);
@@ -842,6 +862,9 @@ define([
                     modal: true,
                     lang: me.lang,
                     handler: handler
+                }).on('close', function(obj){
+                    (btn===undefined) && callback && callback.call(me);
+                    setTimeout(function(){me.cmbFormat.focus();}, 1);
                 });
             win.show();
         },

apps/documenteditor/main/app/view/WatermarkSettingsDialog.js

@@ -316,13 +316,14 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
 
             this.btnTextColor = new Common.UI.ButtonColored({
                 parentEl: $('#watermark-textcolor'),
-                cls         : 'btn-toolbar',
+                cls         : 'btn-toolbar move-focus',
                 iconCls     : 'toolbar__icon btn-fontcolor',
                 hint        : this.textColor,
                 additionalAlign: this.menuAddAlign,
                 auto: true,
                 color: 'c0c0c0',
-                menu: true
+                menu: true,
+                takeFocusOnClose: true
             });
             this.btnTextColor.setMenu();
             this.mnuTextColorPicker = this.btnTextColor.getPicker();
@@ -363,7 +364,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
         },
 
         getFocusedComponents: function() {
-            return [ this.radioNone, this.radioText, this.cmbLang, this.cmbText, this.cmbFonts, this.chTransparency, this.radioDiag, this.radioHor, this.radioImage, this.cmbFontSize, this.cmbScale ];
+            return [ this.radioNone, this.radioText, this.cmbLang, this.cmbText, this.cmbFonts, this.cmbFontSize, this.btnTextColor, this.btnBold, this.btnItalic, this.btnUnderline, this.btnStrikeout,
+                     this.chTransparency, this.radioDiag, this.radioHor, this.radioImage, this.cmbScale ];
         },
 
         getDefaultFocusableComponent: function () {

apps/presentationeditor/main/app/view/ChartSettingsAdvanced.js

@@ -235,7 +235,7 @@ define([    'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
 
         getFocusedComponents: function() {
             return [
-                this.spnWidth, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
+                this.spnWidth, this.btnRatio, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
                 this.inputAltTitle, this.textareaAltDescription  // 1 tab
             ];
         },

apps/presentationeditor/main/app/view/ImageSettingsAdvanced.js

@@ -250,7 +250,7 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
 
         getFocusedComponents: function() {
             return [
-                this.spnWidth, this.spnHeight, this.btnOriginalSize, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY,// 0 tab
+                this.spnWidth, this.btnRatio, this.spnHeight, this.btnOriginalSize, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY,// 0 tab
                 this.spnAngle, this.chFlipHor, this.chFlipVert, // 1 tab
                 this.inputAltTitle, this.textareaAltDescription  // 2 tab
             ];

apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js

@@ -580,7 +580,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
 
         getFocusedComponents: function() {
             return [
-                this.spnWidth, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
+                this.spnWidth, this.btnRatio, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
                 this.spnAngle, this.chFlipHor, this.chFlipVert, // 1 tab
                 this.cmbCapType, this.cmbJoinType, // 2 tab
                 this.radioNofit, this.radioShrink, this.radioFit, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, // 3 tab

apps/presentationeditor/main/app/view/TableSettingsAdvanced.js

@@ -431,7 +431,7 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
 
         getFocusedComponents: function() {
             return [
-                this.spnWidth, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
+                this.spnWidth, this.btnRatio, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
                 this.chCellMargins, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight,
                 this.spnTableMarginTop, this.spnTableMarginLeft, this.spnTableMarginBottom, this.spnTableMarginRight, // 1 tab
                 this.inputAltTitle, this.textareaAltDescription  // 2 tab

apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js

@@ -350,6 +350,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
                 hint: this.textBold
             });
             this.btnBold.on('click', _.bind(this.onBoldClick, this));
+            Common.UI.FocusManager.add(this, this.btnBold);
 
             this.btnItalic = new Common.UI.Button({
                 parentEl: $('#format-rules-italic'),
@@ -359,6 +360,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
                 hint: this.textItalic
             });
             this.btnItalic.on('click', _.bind(this.onItalicClick, this));
+            Common.UI.FocusManager.add(this, this.btnItalic);
 
             this.btnUnderline = new Common.UI.Button({
                 parentEl: $('#format-rules-underline'),
@@ -368,6 +370,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
                 hint: this.textUnderline
             });
             this.btnUnderline.on('click', _.bind(this.onUnderlineClick, this));
+            Common.UI.FocusManager.add(this, this.btnUnderline);
 
             this.btnStrikeout = new Common.UI.Button({
                 parentEl: $('#format-rules-strikeout'),
@@ -377,6 +380,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
                 hint: this.textStrikeout
             });
             this.btnStrikeout.on('click',_.bind(this.onStrikeoutClick, this));
+            Common.UI.FocusManager.add(this, this.btnStrikeout);
 
             var initNewColor = function(btn) {
                 btn.setMenu();
@@ -388,28 +392,32 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
 
             this.btnTextColor = new Common.UI.ButtonColored({
                 parentEl: $('#format-rules-fontcolor'),
-                cls         : 'btn-toolbar',
+                cls         : 'btn-toolbar move-focus',
                 iconCls     : 'toolbar__icon btn-fontcolor',
                 hint        : this.textColor,
                 additionalAlign: this.menuAddAlign,
                 color: '000000',
-                menu        : true
+                menu        : true,
+                takeFocusOnClose: true
             });
             this.mnuTextColorPicker = initNewColor(this.btnTextColor);
             this.btnTextColor.on('color:select', _.bind(this.onFormatTextColorSelect, this));
+            Common.UI.FocusManager.add(this, this.btnTextColor);
 
             this.btnFillColor = new Common.UI.ButtonColored({
                 parentEl: $('#format-rules-fillcolor'),
-                cls         : 'btn-toolbar',
+                cls         : 'btn-toolbar move-focus',
                 iconCls     : 'toolbar__icon btn-paracolor',
                 hint        : this.fillColor,
                 additionalAlign: this.menuAddAlign,
                 color: '000000',
                 transparent: true,
-                menu        : true
+                menu        : true,
+                takeFocusOnClose: true
             });
             this.mnuFillColorPicker = initNewColor(this.btnFillColor);
             this.btnFillColor.on('color:select', _.bind(this.onFormatFillColorSelect, this));
+            Common.UI.FocusManager.add(this, this.btnFillColor);
 
             this.btnBorders = new Common.UI.Button({
                 parentEl    : $('#format-rules-borders'),
@@ -557,6 +565,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
             }, this));
 
             this.mnuBorderWidth.on('item:toggle', _.bind(this.onBordersWidth, this));
+            // Common.UI.FocusManager.add(this, this.btnBorders);
 
             this.ascFormatOptions = {
                 General     : 'General',
@@ -628,6 +637,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
                 el: $('#format-rules-edit-btn-clear')
             });
             this.btnClear.on('click', _.bind(this.clearFormat, this));
+            Common.UI.FocusManager.add(this, this.btnClear);
 
             this.panels = {
                 format:     {el: this.$window.find('.hasformat'),   rendered: false,    initColors: false},

apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js

@@ -583,7 +583,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
 
         getFocusedComponents: function() {
             return [
-                this.spnWidth, this.spnHeight, // 0 tab
+                this.spnWidth, this.btnRatio, this.spnHeight, // 0 tab
                 this.spnAngle, this.chFlipHor, this.chFlipVert, // 1 tab
                 this.cmbCapType, this.cmbJoinType, // 2 tab
                 this.chAutofit, this.chOverflow, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, // 3 tab

apps/spreadsheeteditor/main/app/view/SlicerSettingsAdvanced.js

@@ -386,7 +386,7 @@ define([    'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem
 
         getFocusedComponents: function() {
             return [
-                this.inputHeader, this.chHeader, this.numWidth, this.numHeight, this.numCols, this.numColHeight, // 0 tab
+                this.inputHeader, this.chHeader, this.numWidth, this.btnRatio, this.numHeight, this.numCols, this.numColHeight, // 0 tab
                 this.radioAsc, this.radioDesc, this.chHideNoData, this.chIndNoData, this.chShowNoData, // 1 tab
                 this.inputName,  // 2 tab
                 this.radioTwoCell, this.radioOneCell, this.radioAbsolute, // 3 tab