Add focus for buttons in dialogs

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

@@ -71,6 +71,8 @@ Common.UI.FocusManager = new(function() {
                         item.selector = '.radiobox';
                     else if (field instanceof Common.UI.TreeView)
                         item.selector = '.treeview';
+                    else if (field instanceof Common.UI.Button)
+                        item.selector = 'button';
                     else
                         item.selector = '.form-control';
                 }

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

@@ -353,8 +353,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
 
         getFocusedComponents: function() {
             var arr = [
-                    this.chReplaceType, this.inputReplace, this.inputBy, this.mathList, // 0 tab
+                    this.chReplaceType, this.inputReplace, this.inputBy, this.mathList, this.btnReset, this.btnEdit, this.btnDelete, // 0 tab
-                    this.inputRecFind, this.mathRecList // 1 tab
+                    this.inputRecFind, this.mathRecList, this.btnResetRec, this.btnAddRec, this.btnDeleteRec // 1 tab
                 ];
             arr = arr.concat(this.chNewRows ? [this.chNewRows] : [this.chQuotes, this.chHyphens, this.chBulleted, this.chNumbered]);
             return arr;

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

@@ -729,6 +729,11 @@
         padding-right: 10px;
     }
 
+    &:focus:not(.disabled) {
+        border-color: @border-control-focus-ie;
+        border-color: @border-control-focus;
+    }
+
     &:hover:not(.disabled),
     .over:not(.disabled) {
         background-color: @highlight-button-hover-ie !important;

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

@@ -238,7 +238,9 @@ define([
                             }
                         }
                     }
-                })).show();
+                })).on('close', function() {
+                    me.cmbLabel.focus();
+                }).show();
             }, this));
 
             this.btnDelete = new Common.UI.Button({
@@ -353,7 +355,7 @@ define([
         },
 
         getFocusedComponents: function() {
-            return [this.txtCaption, this.cmbPosition, this.cmbLabel, this.chExclude, this.cmbNumbering, this.chChapter, this.cmbChapter, this.cmbSeparator];
+            return [this.txtCaption, this.cmbPosition, this.cmbLabel,  this.btnAdd, this.btnDelete, this.chExclude, this.cmbNumbering, this.chChapter, this.cmbChapter, this.cmbSeparator];
         },
 
         getDefaultFocusableComponent: function () {

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

@@ -357,7 +357,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
 
         getFocusedComponents: function() {
             return [
-                this.txtName, this.txtTag, this.txtPlaceholder, this.cmbShow, // 0 tab
+                this.txtName, this.txtTag, this.txtPlaceholder, this.cmbShow, this.btnApplyAll, // 0 tab
                 this.chLockDelete , this.chLockEdit, // 1 tab
                 this.list, // 2 tab
                 this.txtDate, this.listFormats, this.cmbLang // 3 tab

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

@@ -154,6 +154,7 @@ define([
                             Common.localStorage.setItem("de-settings-datetime-default", value);
                             Common.Utils.InternalSettings.set("de-settings-datetime-default", value);
                         }
+                        this.listFormats.focus();
                     }, this)
                 });
             }, this));
@@ -176,7 +177,7 @@ define([
         },
 
         getFocusedComponents: function() {
-            return [this.cmbLang, this.listFormats, this.chUpdate];
+            return [this.cmbLang, this.listFormats, this.chUpdate, this.btnDefault];
         },
 
         getDefaultFocusableComponent: function () {

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

@@ -1154,7 +1154,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
 
         getFocusedComponents: function() {
             return [
-                this.spnWidth, this.spnHeight, // 0 tab
+                this.spnWidth, 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

@@ -340,7 +340,7 @@ define([
         },
 
         getFocusedComponents: function() {
-            return [this.cmbFormat, this.cmbAlign, this.cmbSize, this.levelsList];
+            return [this.btnEdit, this.cmbFormat, this.cmbAlign, this.cmbSize, this.levelsList];
         },
 
         getDefaultFocusableComponent: function () {

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

@@ -683,7 +683,7 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
                 this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, this.chAddInterval, // 0 tab
                 this.chBreakBefore, this.chKeepLines, this.chOrphan, this.chKeepNext, this.chLineNumbers, // 1 tab
                 this.chStrike, this.chSubscript, this.chDoubleStrike, this.chSmallCaps, this.chSuperscript, this.chAllCaps, this.numSpacing, this.numPosition, // 3 tab
-                this.numDefaultTab, this.numTab, this.cmbAlign, this.cmbLeader, this.tabList, // 4 tab
+                this.numDefaultTab, this.numTab, this.cmbAlign, this.cmbLeader, this.tabList, this.btnAddTab, this.btnRemoveTab, this.btnRemoveAll,// 4 tab
                 this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight // 5 tab
             ];
         },

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

@@ -154,6 +154,7 @@ define([
                             Common.localStorage.setItem("pe-settings-datetime-default", value);
                             Common.Utils.InternalSettings.set("pe-settings-datetime-default", value);
                         }
+                        this.listFormats.focus();
                     }, this)
                 });
             }, this));
@@ -176,7 +177,7 @@ define([
         },
 
         getFocusedComponents: function() {
-            return [this.cmbLang, this.listFormats, this.chUpdate];
+            return [this.cmbLang, this.listFormats, this.chUpdate, this.btnDefault];
         },
 
         getDefaultFocusableComponent: function () {

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

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

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

@@ -410,7 +410,7 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
                 this.cmbTextAlignment, this.numIndentsLeft, this.numIndentsRight, this.cmbSpecial, this.numSpecialBy,
                 this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, // 0 tab
                 this.chStrike, this.chSubscript, this.chDoubleStrike, this.chSmallCaps, this.chSuperscript, this.chAllCaps, this.numSpacing, // 1 tab
-                this.numDefaultTab, this.numTab, this.cmbAlign, this.tabList // 2 tab
+                this.numDefaultTab, this.numTab, this.cmbAlign, this.tabList, this.btnAddTab, this.btnRemoveTab, this.btnRemoveAll // 2 tab
             ];
         },
 

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

@@ -214,6 +214,10 @@ define([  'text!spreadsheeteditor/main/app/template/FormatRulesManagerDlg.templa
         _setDefaults: function (props) {
             Common.UI.FocusManager.add(this, this.cmbScope);
             Common.UI.FocusManager.add(this, this.rulesList);
+            Common.UI.FocusManager.add(this, this.btnNew);
+            Common.UI.FocusManager.add(this, this.btnEdit);
+            Common.UI.FocusManager.add(this, this.btnDelete);
+
 
             this.rulesList.on('item:add', _.bind(this.addControls, this));
             this.rulesList.on('item:change', _.bind(this.addControls, this));

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

@@ -172,7 +172,7 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
         },
 
         getFocusedComponents: function() {
-            return [ this.cmbFilter, this.rangeList ];
+            return [ this.cmbFilter, this.rangeList, this.btnNewRange, this.btnEditRange, this.btnDeleteRange ];
         },
 
         getDefaultFocusableComponent: function () {
@@ -321,6 +321,7 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
                 }
             }).on('close', function() {
                 me.show();
+                setTimeout(function(){ me.getDefaultFocusableComponent().focus(); }, 100);
             });
             
             me.hide();

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

@@ -408,7 +408,7 @@ define([    'text!spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.
                 this.cmbTextAlignment, this.numIndentsLeft, this.numIndentsRight, this.cmbSpecial, this.numSpecialBy,
                 this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, // 0 tab
                 this.chStrike, this.chSubscript, this.chDoubleStrike, this.chSmallCaps, this.chSuperscript, this.chAllCaps, this.numSpacing, // 1 tab
-                this.numDefaultTab, this.numTab, this.cmbAlign, this.tabList // 2 tab
+                this.numDefaultTab, this.numTab, this.cmbAlign, this.tabList, this.btnAddTab, this.btnRemoveTab, this.btnRemoveAll // 2 tab
             ];
         },
 

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

@@ -123,7 +123,8 @@ define([
                                 '<div class="lock-user"><%=lockuser%></div>',
                             '<% } %>',
                         '</div>'
-                ].join(''))
+                ].join('')),
+                tabindex: 1
             });
             this.viewList.on('item:select', _.bind(this.onSelectItem, this))
                          .on('item:keydown', _.bind(this.onKeyDown, this))
@@ -158,6 +159,14 @@ define([
             this.afterRender();
         },
 
+        getFocusedComponents: function() {
+            return [ this.viewList, this.btnNew, this.btnRename, this.btnDuplicate, this.btnDelete ];
+        },
+
+        getDefaultFocusableComponent: function () {
+            return this.viewList;
+        },
+
         afterRender: function() {
             this._setDefaults();
         },
@@ -286,7 +295,9 @@ define([
                             rec.get('view').asc_setName(value);
                         }
                     }
-                })).show();
+                })).on('close', function() {
+                    me.getDefaultFocusableComponent().focus();
+                }).show();
             }
         },