From 2be31ade1e1638aecec9a9e27c7a536854bacdeb Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Sun, 11 Jul 2021 16:12:05 +0300 Subject: [PATCH] Add focus for color buttons in modal dialogs --- apps/common/main/lib/component/ColorButton.js | 17 ++++------ .../main/lib/view/ListSettingsDialog.js | 6 ++-- .../main/app/view/ControlSettingsDialog.js | 6 ++-- .../main/app/view/DropcapSettingsAdvanced.js | 33 ++++++++++++++----- .../main/app/view/ListSettingsDialog.js | 6 ++-- .../main/app/view/TableSettingsAdvanced.js | 21 +++++++++--- .../main/app/view/FormatRulesEditDlg.js | 30 +++++++++++++---- 7 files changed, 82 insertions(+), 37 deletions(-) diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js index c9f4e0dfb..88064fc16 100644 --- a/apps/common/main/lib/component/ColorButton.js +++ b/apps/common/main/lib/component/ColorButton.js @@ -49,8 +49,6 @@ define([ if (this.options.auto) this.autocolor = (typeof this.options.auto == 'object') ? this.options.auto.color || '000000' : '000000'; - this.cmpEl.on('keydown.after.bs.dropdown', _.bind(this.onAfterKeydownMenu, this)); - if (this.options.color!==undefined) this.setColor(this.options.color); }, @@ -171,19 +169,18 @@ define([ this.colorPicker && this.colorPicker.addNewColor((typeof(this.color) == 'object') ? this.color.color : this.color); }, - onAfterKeydownMenu: function(e) { + onBeforeKeyDown: function(menu, e) { if ((e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.SPACE) && !this.isMenuOpen()) { $('button', this.cmpEl).click(); return false; } - }, - - onBeforeKeyDown: function(menu, e) { if (e.keyCode == Common.UI.Keys.RETURN) { - e.preventDefault(); - e.stopPropagation(); var li = $(e.target).closest('li'); - (li.length>0) && li.click(); + if (li.length>0) { + e.preventDefault(); + e.stopPropagation(); + li.click(); + } Common.UI.Menu.Manager.hideAll(); } else if (e.namespace!=="after.bs.dropdown" && (e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.UP)) { var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', menu.$el).find('> a'); @@ -273,8 +270,6 @@ define([ if (this.options.auto) this.autocolor = (typeof this.options.auto == 'object') ? this.options.auto.color || '000000' : '000000'; - this.cmpEl.on('keydown.after.bs.dropdown', _.bind(this.onAfterKeydownMenu, this)); - if (this.options.color!==undefined) this.setColor(this.options.color); }, diff --git a/apps/common/main/lib/view/ListSettingsDialog.js b/apps/common/main/lib/view/ListSettingsDialog.js index 54a13d0b2..96afdac6a 100644 --- a/apps/common/main/lib/view/ListSettingsDialog.js +++ b/apps/common/main/lib/view/ListSettingsDialog.js @@ -292,7 +292,9 @@ define([ parentEl: $window.find('#id-dlg-list-color'), style: "width:45px;", additionalAlign: this.menuAddAlign, - color: this.color + color: this.color, + cls: 'move-focus', + takeFocusOnClose: true }); this.btnColor.on('color:select', _.bind(this.onColorsSelect, this)); this.colors = this.btnColor.getPicker(); @@ -321,7 +323,7 @@ define([ }, getFocusedComponents: function() { - return [this.cmbNumFormat, this.cmbBulletFormat, this.spnSize, this.spnStart]; + return [this.cmbNumFormat, this.cmbBulletFormat, this.spnSize, this.spnStart, this.btnColor]; }, afterRender: function() { diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js index 537918e74..a2ce6ee1c 100644 --- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js +++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js @@ -141,7 +141,9 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF' ], - paletteHeight: 94 + paletteHeight: 94, + cls: 'move-focus', + takeFocusOnClose: true }); this.colors = this.btnColor.getPicker(); @@ -357,7 +359,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', getFocusedComponents: function() { return [ - this.txtName, this.txtTag, this.txtPlaceholder, this.cmbShow, this.btnApplyAll, // 0 tab + this.txtName, this.txtTag, this.txtPlaceholder, this.cmbShow, this.btnColor, this.btnApplyAll, // 0 tab this.chLockDelete , this.chLockEdit, // 1 tab this.list, // 2 tab this.txtDate, this.listFormats, this.cmbLang // 3 tab diff --git a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js index 4eaf5f6d5..3eda0e8c5 100644 --- a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js @@ -112,6 +112,7 @@ define([ spacingMode: false }); + this._btnsBorderPosition = []; _.each([ [c_tableBorder.BORDER_HORIZONTAL_TOP, 't', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-top', '00'], [c_tableBorder.BORDER_HORIZONTAL_CENTER, 'm', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-inner', '01'], @@ -134,6 +135,7 @@ define([ _btn.on('click', function(btn) { me._ApplyBorderPreset(btn.options.strId); }); + me._btnsBorderPosition.push( _btn ); }, this); var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt); @@ -164,7 +166,9 @@ define([ parentEl: $('#drop-advanced-button-bordercolor'), additionalAlign: this.menuAddAlign, color: 'auto', - auto: true + auto: true, + cls: 'move-focus', + takeFocusOnClose: true }); this.btnBorderColor.on('color:select', _.bind(function(btn, color) { this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color); @@ -177,7 +181,9 @@ define([ this.btnBackColor = new Common.UI.ColorButton({ parentEl: $('#drop-advanced-button-color'), additionalAlign: this.menuAddAlign, - transparent: true + transparent: true, + cls: 'move-focus', + takeFocusOnClose: true }); this.btnBackColor.on('color:select', _.bind(function(btn, color) { var clr, border; @@ -720,8 +726,9 @@ define([ return [ this.cmbWidth, this.spnWidth, this.cmbHeight, this.spnHeight, this.cmbHAlign, this.cmbHRelative, this.spnX, this.cmbVAlign, this.cmbVRelative, this.spnY, this.chMove, // 0 tab this.cmbFonts, this.spnRowHeight, this.numDistance, // 1 tab + this.cmbBorderSize, this.btnBorderColor].concat(this._btnsBorderPosition).concat([this.btnBackColor, // 2 tab this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight // 3 tab - ]; + ]); }, onCategoryClick: function(btn, index) { @@ -729,12 +736,20 @@ define([ var me = this; setTimeout(function(){ - if (index==0) { - me.cmbWidth.focus(); - } else if (index==1) { - me.cmbFonts.focus(); - } else if (index==3) - me.spnMarginTop.focus(); + switch (index) { + case 0: + me.cmbWidth.focus(); + break; + case 1: + me.cmbFonts.focus(); + break; + case 2: + me.cmbBorderSize.focus(); + break; + case 3: + me.spnMarginTop.focus(); + break; + } }, 100); }, diff --git a/apps/documenteditor/main/app/view/ListSettingsDialog.js b/apps/documenteditor/main/app/view/ListSettingsDialog.js index 7c7a11f94..75238cfd3 100644 --- a/apps/documenteditor/main/app/view/ListSettingsDialog.js +++ b/apps/documenteditor/main/app/view/ListSettingsDialog.js @@ -171,7 +171,9 @@ define([ style: 'padding-left: 20px;' }, {caption: '--'}], - additionalAlign: this.menuAddAlign + additionalAlign: this.menuAddAlign, + cls: 'move-focus', + takeFocusOnClose: true }); this.btnColor.on('color:select', _.bind(this.onColorsSelect, this)); this.btnColor.menu.items[0].on('toggle', _.bind(this.onLikeTextColor, this)); @@ -342,7 +344,7 @@ define([ }, getFocusedComponents: function() { - return [this.btnEdit, this.cmbFormat, this.cmbAlign, this.cmbSize, this.levelsList]; + return [this.btnEdit, this.cmbFormat, this.cmbAlign, this.cmbSize, this.btnColor, this.levelsList]; }, getDefaultFocusableComponent: function () { diff --git a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js index 0df32d36a..1030478cc 100644 --- a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js @@ -879,7 +879,8 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat this.cmbBorderSize = new Common.UI.ComboBorderSize({ el: $('#tableadv-combo-border-size'), - style: "width: 93px;" + style: "width: 93px;", + takeFocusOnClose: true }); var rec = this.cmbBorderSize.store.at(1); this.BorderSize = {ptValue: rec.get('value'), pxValue: rec.get('pxValue')}; @@ -890,7 +891,9 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat parentEl: $('#tableadv-border-color-btn'), additionalAlign: this.menuAddAlign, color: 'auto', - auto: true + auto: true, + cls: 'move-focus', + takeFocusOnClose: true }); this.btnBorderColor.on('color:select', _.bind(me.onColorsBorderSelect, me)); this.btnBorderColor.on('auto:select', _.bind(me.onColorsBorderSelect, me)); @@ -899,7 +902,9 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat this.btnBackColor = new Common.UI.ColorButton({ parentEl: $('#tableadv-button-back-color'), additionalAlign: this.menuAddAlign, - transparent: true + transparent: true, + cls: 'move-focus', + takeFocusOnClose: true }); this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this)); this.colorsBack = this.btnBackColor.getPicker(); @@ -907,7 +912,9 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat this.btnTableBackColor = new Common.UI.ColorButton({ parentEl: $('#tableadv-button-table-back-color'), additionalAlign: this.menuAddAlign, - transparent: true + transparent: true, + cls: 'move-focus', + takeFocusOnClose: true }); this.btnTableBackColor.on('color:select', _.bind(this.onColorsTableBackSelect, this)); this.colorsTableBack = this.btnTableBackColor.getPicker(); @@ -1012,11 +1019,12 @@ 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.cmbBorderSize, this.btnBorderColor].concat(this._btnsBorderPosition).concat(this._btnsTableBorderPosition).concat([this.btnBackColor, this.btnTableBackColor, 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 - ]; + ]); }, onCategoryClick: function(btn, index) { @@ -1038,6 +1046,9 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat else me.chPrefWidth.focus(); break; + case 2: + me.cmbBorderSize.focus(); + break; case 3: if (!me.cmbHAlign.isDisabled()) me.cmbHAlign.focus(); diff --git a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js index 27fc78965..5af7f83fa 100644 --- a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js +++ b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js @@ -881,15 +881,21 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template', parentEl: $('#format-rules-edit-color-pos-fill'), style: "width:45px;", menu : true, - color : '638EC6' + color : '638EC6', + cls: 'move-focus', + takeFocusOnClose: true }); + Common.UI.FocusManager.add(this, this.btnPosFill); this.btnNegFill = new Common.UI.ColorButton({ parentEl: $('#format-rules-edit-color-neg-fill'), style: "width:45px;", menu : true, - color : 'FF0000' + color : 'FF0000', + cls: 'move-focus', + takeFocusOnClose: true }); + Common.UI.FocusManager.add(this, this.btnNegFill); this.chFill = new Common.UI.CheckBox({ el: $('#format-rules-edit-chk-fill'), @@ -932,15 +938,21 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template', parentEl: $('#format-rules-edit-color-pos-border'), style: "width:45px;", menu : true, - color : '000000' + color : '000000', + cls: 'move-focus', + takeFocusOnClose: true }); + Common.UI.FocusManager.add(this, this.btnPosBorder); this.btnNegBorder = new Common.UI.ColorButton({ parentEl: $('#format-rules-edit-color-neg-border'), style: "width:45px;", menu : true, - color : '000000' + color : '000000', + cls: 'move-focus', + takeFocusOnClose: true }); + Common.UI.FocusManager.add(this, this.btnNegBorder); this.chBorder = new Common.UI.CheckBox({ el: $('#format-rules-edit-chk-border'), @@ -1001,8 +1013,11 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template', parentEl: $('#format-rules-edit-color-axis-color'), style: "width:45px;", menu : true, - color : '000000' + color : '000000', + cls: 'move-focus', + takeFocusOnClose: true }); + Common.UI.FocusManager.add(this, this.btnAxisColor); this.panels.databar.rendered = true; this.updateThemeColors(); @@ -1056,8 +1071,11 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template', parentEl: $('#format-rules-edit-color-scale-' + (i+1)), menu : true, type : i, - color : '000000' + color : '000000', + cls: 'move-focus', + takeFocusOnClose: true }); + Common.UI.FocusManager.add(this, color); this.scaleControls.push({combo: combo, range: range, color: color}); } this.panels.scale.rendered = true;