Focus support for checkbox

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

@@ -121,6 +121,7 @@ define([
                 this.$chk = me.$el.find('input[type=checkbox]');
                 this.$label = me.$el.find('label.checkbox-indeterminate');
                 this.$chk.on('click', this.onItemCheck.bind(this));
+                this.$label.on('keydown', this.onKeyDown.bind(this));
 
                 this.rendered = true;
             }
@@ -194,6 +195,18 @@ define([
 
         setCaption: function(text) {
             this.$label.find('span').text(text);
+        },
+
+        onKeyDown: function(e) {
+            if (e.isDefaultPrevented())
+                return;
+
+            if (e.keyCode === Common.UI.Keys.SPACE)
+                this.onItemCheck(e);
+        },
+
+        focus: function() {
+            this.$label && this.$label.focus();
         }
     });
 });

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

@@ -58,7 +58,19 @@ Common.UI.FocusManager = new(function() {
         }
         fields.forEach(function(field) {
             if (field) {
-                var item = (field.cmp && typeof field.selector == 'string') ? field : {cmp: field, selector: '.form-control'};
+                // var item = (field.cmp && typeof field.selector == 'string') ? field : {cmp: field, selector: '.form-control'};
+                var item = {};
+                if (field.cmp && typeof field.selector == 'string')
+                    item = field;
+                else {
+                    item.cmp = field;
+                    if (field instanceof Common.UI.ListView)
+                        item.selector = '.listview';
+                    else if (field instanceof Common.UI.CheckBox)
+                        item.selector = '.checkbox-indeterminate';
+                    else
+                        item.selector = '.form-control';
+                }
                 item.el = (item.cmp.$el || $(item.cmp.el || item.cmp)).find(item.selector).addBack().filter(item.selector);
                 item.el && item.el.attr && item.el.attr('tabindex', _tabindex.toString());
                 arr.push(item);

apps/common/main/resources/less/checkbox.less

@@ -20,6 +20,11 @@
             position: absolute;
             left: 0;
             margin-top: auto;
+
+            + span {
+                border: @scaled-one-px-value-ie dotted transparent;
+                border: @scaled-one-px-value dotted transparent;
+            }
         }
 
         &:checked:not(:indeterminate) {
@@ -65,4 +70,18 @@
             }
         }
     }
+
+    &:focus {
+        input[type=checkbox] {
+            + label {
+                border-color: @border-control-focus-ie;
+                border-color: @border-control-focus;
+
+                + span {
+                    border-color: @border-control-focus-ie;
+                    border-color: @border-control-focus;
+                }
+            }
+        }
+    }
 }

apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template

@@ -122,18 +122,32 @@
         <div class="padding-small">
             <label class="header"><%= scope.textEffects %></label>
         </div>
-        <div>
+        <table cols="2">
-            <div class="padding-large" style="display: inline-block;">
+            <tr>
-                <div class="padding-small" id="paragraphadv-checkbox-strike"></div>
+                <td class="padding-small">
-                <div class="padding-small" id="paragraphadv-checkbox-double-strike"></div>
+                    <div id="paragraphadv-checkbox-strike"></div>
-                <div id="paragraphadv-checkbox-superscript"></div>
+                </td>
-            </div>
+                <td class="padding-small" style="padding-left: 40px;">
-            <div class="padding-large" style="display: inline-block; padding-left: 40px;">
+                    <div id="paragraphadv-checkbox-subscript"></div>
-                <div class="padding-small" id="paragraphadv-checkbox-subscript"></div>
+                </td>
-                <div class="padding-small" id="paragraphadv-checkbox-small-caps"></div>
+            </tr>
-                <div id="paragraphadv-checkbox-all-caps"></div>
+            <tr>
-            </div>
+                <td class="padding-small">
-        </div>
+                    <div id="paragraphadv-checkbox-double-strike"></div>
+                </td>
+                <td class="padding-small" style="padding-left: 40px;">
+                    <div id="paragraphadv-checkbox-small-caps"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-large">
+                    <div id="paragraphadv-checkbox-superscript"></div>
+                </td>
+                <td class="padding-large" style="padding-left: 40px;">
+                    <div id="paragraphadv-checkbox-all-caps"></div>
+                </td>
+            </tr>
+        </table>
             <div class="padding-small">
                 <label class="header"><%= scope.textCharacterSpacing %></label>
             </div>

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

@@ -680,9 +680,10 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
         getFocusedComponents: function() {
             return [
                 this.cmbTextAlignment, this.cmbOutlinelevel, this.numIndentsLeft, this.numIndentsRight, this.cmbSpecial, this.numSpecialBy,
-                this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, // 0 tab
+                this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, this.chAddInterval, // 0 tab
-                this.numSpacing, this.numPosition, // 3 tab
+                this.chBreakBefore, this.chKeepLines, this.chOrphan, this.chKeepNext, this.chLineNumbers, // 1 tab
-                this.numDefaultTab, this.numTab, this.cmbAlign, this.cmbLeader, {cmp: this.tabList, selector: '.listview'}, // 4 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.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight // 5 tab
             ];
         },
@@ -696,8 +697,11 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
                     case 0:
                         me.cmbTextAlignment.focus();
                         break;
+                    case 1:
+                        me.chBreakBefore.focus();
+                        break;
                     case 3:
-                        me.numSpacing.focus();
+                        me.chStrike.focus();
                         break;
                     case 4:
                         me.numDefaultTab.focus();