Fix focus for modal windows

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/resources/less/buttons.less

@@ -1010,7 +1010,7 @@
 }
 
 .asc-window.modal {
-    .btn-toolbar, .btn-group {
+    .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);

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/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},