diff --git a/apps/common/main/lib/component/FocusManager.js b/apps/common/main/lib/component/FocusManager.js index f67dfd0ce..fc39780ac 100644 --- a/apps/common/main/lib/component/FocusManager.js +++ b/apps/common/main/lib/component/FocusManager.js @@ -67,6 +67,8 @@ Common.UI.FocusManager = new(function() { item.selector = '.listview'; else if (field instanceof Common.UI.CheckBox) item.selector = '.checkbox-indeterminate'; + else if (field instanceof Common.UI.RadioBox) + item.selector = '.radiobox'; else if (field instanceof Common.UI.TreeView) item.selector = '.treeview'; else diff --git a/apps/common/main/lib/component/RadioBox.js b/apps/common/main/lib/component/RadioBox.js index 1c9a6c360..33e13cfbe 100644 --- a/apps/common/main/lib/component/RadioBox.js +++ b/apps/common/main/lib/component/RadioBox.js @@ -72,7 +72,7 @@ define([ rendered : false, template : _.template(''), + ''), initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); @@ -89,6 +89,8 @@ define([ if (this.options.checked!==undefined) this.setValue(this.options.checked, true); + this.setCaption(this.options.labelText); + // handle events this.$radio.on('click', _.bind(this.onItemCheck, this)); }, @@ -103,6 +105,8 @@ define([ this.$radio = el.find('input[type=radio]'); this.$label = el.find('label.radiobox'); + this.$span = this.$label.find('span'); + this.$label.on('keydown', this.onKeyDown.bind(this)); this.rendered = true; return this; @@ -116,6 +120,12 @@ define([ this.$label.toggleClass('disabled', disabled); this.$radio.toggleClass('disabled', disabled); (disabled) ? this.$radio.attr({disabled: disabled}) : this.$radio.removeAttr('disabled'); + if (disabled) { + this.tabindex = this.$label.attr('tabindex'); + this.$label.attr('tabindex', -1); + } else if (this.tabindex) { + this.$label.attr('tabindex', this.tabindex); + } } this.disabled = disabled; @@ -152,7 +162,20 @@ define([ }, setCaption: function(text) { - this.$label.find('span').text(text); + this.$span.text(text); + this.$span.css('visibility', text ? 'visible' : 'hidden'); + }, + + onKeyDown: function(e) { + if (e.isDefaultPrevented()) + return; + + if (e.keyCode === Common.UI.Keys.SPACE) + this.onItemCheck(e); + }, + + focus: function() { + this.$label && this.$label.focus(); } }); }); \ No newline at end of file diff --git a/apps/common/main/lib/view/OptionsDialog.js b/apps/common/main/lib/view/OptionsDialog.js index 183745111..4eb89ba3f 100644 --- a/apps/common/main/lib/view/OptionsDialog.js +++ b/apps/common/main/lib/view/OptionsDialog.js @@ -79,8 +79,8 @@ define([ var me = this, $window = me.getChild(), items = this.options.items, - checked = true, - checkedIndex = -1; + checked = true; + this.checkedIndex = -1; if (items) { for (var i=0; i=0) && this.radio[checkedIndex].setValue(true); + (this.checkedIndex>=0) && this.radio[this.checkedIndex].setValue(true); } $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); }, + getFocusedComponents: function() { + return this.radio; + }, + + getDefaultFocusableComponent: function () { + return (this.checkedIndex>=0) ? this.radio[this.checkedIndex] : null; + }, + _handleInput: function(state) { if (this.options.handler) { this.options.handler.call(this, this, state); diff --git a/apps/common/main/resources/less/radiobox.less b/apps/common/main/resources/less/radiobox.less index 1c5355ccf..843c1eb82 100644 --- a/apps/common/main/resources/less/radiobox.less +++ b/apps/common/main/resources/less/radiobox.less @@ -23,6 +23,12 @@ border: @scaled-one-px-value-ie solid @border-regular-control-ie; border: @scaled-one-px-value solid @border-regular-control; border-radius: 50%; + + + span { + outline: @scaled-one-px-value-ie dotted transparent; + outline: @scaled-one-px-value dotted transparent; + display: inline-block; + } } &:checked { @@ -49,4 +55,18 @@ } } } + + &:focus:not(.disabled) { + input[type=radio] { + + label { + border-color: @border-control-focus-ie; + border-color: @border-control-focus; + + + span { + outline-color: @border-control-focus-ie; + outline-color: @border-control-focus; + } + } + } + } } \ No newline at end of file diff --git a/apps/documenteditor/main/app/view/BookmarksDialog.js b/apps/documenteditor/main/app/view/BookmarksDialog.js index 3a9b73fa6..e0c0ccf46 100644 --- a/apps/documenteditor/main/app/view/BookmarksDialog.js +++ b/apps/documenteditor/main/app/view/BookmarksDialog.js @@ -249,7 +249,7 @@ define([ }, getFocusedComponents: function() { - return [this.txtName, this.bookmarksList, this.chHidden]; + return [this.txtName, this.radioName, this.radioLocation, this.bookmarksList, this.chHidden]; }, afterRender: function() { diff --git a/apps/documenteditor/main/app/view/CellsAddDialog.js b/apps/documenteditor/main/app/view/CellsAddDialog.js index 3b86c7abd..2fd9754e2 100644 --- a/apps/documenteditor/main/app/view/CellsAddDialog.js +++ b/apps/documenteditor/main/app/view/CellsAddDialog.js @@ -130,7 +130,7 @@ define([ }, getFocusedComponents: function() { - return [this.cmbRowCol, this.spnCount]; + return [this.cmbRowCol, this.spnCount, this.radioBefore, this.radioAfter]; }, getDefaultFocusableComponent: function () { diff --git a/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js b/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js index ca4692219..37e11ed17 100644 --- a/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js @@ -1155,11 +1155,12 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat getFocusedComponents: function() { return [ this.spnWidth, this.spnHeight, // 0 tab - this.spnShapeWidth , this.spnShapeWidthPc, this.cmbWidthPc, this.spnShapeHeight, this.spnShapeHeightPc, this.cmbHeightPc, this.chRatio, // 1 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 this.spnTop, this.spnLeft, this.spnBottom, this.spnRight, // 3 tab - this.cmbHAlign , this.cmbHRelative, this.spnX, this.cmbHPosition, this.spnXPc, this.cmbHPositionPc, - this.cmbVAlign , this.cmbVRelative, this.spnY, this.cmbVPosition, this.spnYPc, this.cmbVPositionPc, this.chMove, this.chOverlap, // 4 tab + this.radioHAlign, this.radioHPosition, this.radioHPositionPc, this.cmbHAlign , this.cmbHRelative, this.spnX, this.cmbHPosition, this.spnXPc, this.cmbHPositionPc, + this.radioVAlign, this.radioVPosition, this.radioVPositionPc, this.cmbVAlign , this.cmbVRelative, this.spnY, this.cmbVPosition, this.spnYPc, this.cmbVPositionPc, this.chMove, this.chOverlap, // 4 tab this.cmbCapType, this.cmbJoinType, // 5 tab this.chAutofit, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, // 6 tab this.inputAltTitle, this.textareaAltDescription // 7 tab @@ -1176,7 +1177,10 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat me.spnWidth.focus(); break; case 1: - me.spnShapeWidth.focus(); + if (!me.spnShapeWidth.isDisabled()) + me.spnShapeWidth.focus(); + else + me.spnShapeWidthPc.focus(); break; case 2: me.spnAngle.focus(); diff --git a/apps/documenteditor/main/app/view/LineNumbersDialog.js b/apps/documenteditor/main/app/view/LineNumbersDialog.js index 406ecece0..55c23237a 100644 --- a/apps/documenteditor/main/app/view/LineNumbersDialog.js +++ b/apps/documenteditor/main/app/view/LineNumbersDialog.js @@ -179,7 +179,7 @@ define([ }, getFocusedComponents: function() { - return [this.chAddLineNumbering, this.spnStartAt, this.spnFromText, this.spnCountBy, this.cmbApply]; + return [this.chAddLineNumbering, this.spnStartAt, this.spnFromText, this.spnCountBy, this.rbRestartEachPage, this.rbRestartEachSection, this.rbContinuous, this.cmbApply]; }, getDefaultFocusableComponent: function () { diff --git a/apps/documenteditor/main/app/view/NoteSettingsDialog.js b/apps/documenteditor/main/app/view/NoteSettingsDialog.js index 5ff80e096..72d518d72 100644 --- a/apps/documenteditor/main/app/view/NoteSettingsDialog.js +++ b/apps/documenteditor/main/app/view/NoteSettingsDialog.js @@ -291,7 +291,7 @@ define([ }, getFocusedComponents: function() { - return [this.cmbFootnote, this.cmbEndnote, this.cmbFormat, this.spnStart, this.cmbNumbering, this.txtCustom, this.cmbApply]; + return [this.radioFootnote, this.cmbFootnote, this.radioEndnote, this.cmbEndnote, this.cmbFormat, this.spnStart, this.cmbNumbering, this.txtCustom, this.cmbApply]; }, getDefaultFocusableComponent: function () { diff --git a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js index ef35b7d47..fba5d8685 100644 --- a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js @@ -1012,8 +1012,8 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat return [ this.chWidth, this.nfWidth, this.cmbUnit, this.chAutofit, this.spnTableMarginTop, this.spnTableMarginLeft, this.spnTableMarginBottom, this.spnTableMarginRight, this.chAllowSpacing, this.nfSpacing, // 0 tab this.chPrefWidth, this.nfPrefWidth, this.cmbPrefWidthUnit, this.chCellMargins, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, this.chWrapText, // 1 tab - this.cmbHAlign , this.cmbHRelative, this.spnX, this.cmbHPosition, - this.cmbVAlign , this.cmbVRelative, this.spnY, this.cmbVPosition, this.chMove, this.chOverlap, // 3 tab + this.radioHAlign, this.cmbHAlign , this.radioHPosition, this.cmbHRelative, this.spnX, this.cmbHPosition, + this.radioVAlign, this.cmbVAlign , this.radioVPosition, this.cmbVRelative, this.spnY, this.cmbVPosition, this.chMove, this.chOverlap, // 3 tab this.spnIndentLeft, this.spnDistanceTop, this.spnDistanceLeft, this.spnDistanceBottom, this.spnDistanceRight, // 4 tab this.inputAltTitle, this.textareaAltDescription // 5 tab ]; diff --git a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js index 7caa4ced0..cda542b93 100644 --- a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js +++ b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js @@ -383,7 +383,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template', }, getFocusedComponents: function() { - return [ this.cmbLang, this.cmbText, this.cmbFonts, this.chTransparency, this.cmbFontSize, this.cmbScale ]; + return [ this.radioNone, this.radioText, this.cmbLang, this.cmbText, this.cmbFonts, this.chTransparency, this.radioDiag, this.radioHor, this.radioImage, this.cmbFontSize, this.cmbScale ]; }, getDefaultFocusableComponent: function () { @@ -391,6 +391,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template', return this.cmbLang; else if (!this.cmbScale.isDisabled()) return this.cmbScale; + else + return this.radioNone; }, focusControls: function() { diff --git a/apps/presentationeditor/main/app/view/HeaderFooterDialog.js b/apps/presentationeditor/main/app/view/HeaderFooterDialog.js index 3a9de16ef..67163c9c1 100644 --- a/apps/presentationeditor/main/app/view/HeaderFooterDialog.js +++ b/apps/presentationeditor/main/app/view/HeaderFooterDialog.js @@ -188,7 +188,7 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', }, getFocusedComponents: function() { - return [ this.chDateTime, this.cmbFormat, this.cmbLang, this.inputFixed, this.chSlide, this.chFooter, this.inputFooter, this.chNotTitle ]; + return [ this.chDateTime, this.radioUpdate, this.cmbFormat, this.cmbLang, this.radioFixed, this.inputFixed, this.chSlide, this.chFooter, this.inputFooter, this.chNotTitle ]; }, getDefaultFocusableComponent: function () { diff --git a/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js b/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js index cb3a939a5..8023bba9e 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js +++ b/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js @@ -524,7 +524,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem this.spnWidth, this.spnHeight, // 0 tab this.spnAngle, this.chFlipHor, this.chFlipVert, // 1 tab this.cmbCapType, this.cmbJoinType, // 2 tab - this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, // 3 tab + this.radioNofit, this.radioShrink, this.radioFit, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, // 3 tab this.spnColumns, this.spnSpacing, // 4 tab this.inputAltTitle, this.textareaAltDescription // 5 tab ];