Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add focus for color buttons in modal dialogs

Browse source
This commit is contained in:
Julia Radzhabova 2021-07-11 16:12:05 +03:00
parent 9eeba125d0
commit 2be31ade1e
7 changed files with 82 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
apps/common/main/lib/component/ColorButton.js
View file

@ -49,8 +49,6 @@ define([
if (this.options.auto) if (this.options.auto)
this.autocolor = (typeof this.options.auto == 'object') ? this.options.auto.color || '000000' : '000000'; 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) if (this.options.color!==undefined)
this.setColor(this.options.color); this.setColor(this.options.color);
}, },
@ -171,19 +169,18 @@ define([
this.colorPicker && this.colorPicker.addNewColor((typeof(this.color) == 'object') ? this.color.color : this.color); 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()) { if ((e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.SPACE) && !this.isMenuOpen()) {
$('button', this.cmpEl).click(); $('button', this.cmpEl).click();
return false; return false;
} }
},
onBeforeKeyDown: function(menu, e) {
if (e.keyCode == Common.UI.Keys.RETURN) { if (e.keyCode == Common.UI.Keys.RETURN) {
e.preventDefault();
e.stopPropagation();
var li = $(e.target).closest('li'); 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(); Common.UI.Menu.Manager.hideAll();
} else if (e.namespace!=="after.bs.dropdown" && (e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.UP)) { } 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'); var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', menu.$el).find('> a');
@ -273,8 +270,6 @@ define([
if (this.options.auto) if (this.options.auto)
this.autocolor = (typeof this.options.auto == 'object') ? this.options.auto.color || '000000' : '000000'; 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) if (this.options.color!==undefined)
this.setColor(this.options.color); this.setColor(this.options.color);
}, },

6
apps/common/main/lib/view/ListSettingsDialog.js
View file

@ -292,7 +292,9 @@ define([
parentEl: $window.find('#id-dlg-list-color'), parentEl: $window.find('#id-dlg-list-color'),
style: "width:45px;", style: "width:45px;",
additionalAlign: this.menuAddAlign, additionalAlign: this.menuAddAlign,
color: this.color color: this.color,
cls: 'move-focus',
takeFocusOnClose: true
}); });
this.btnColor.on('color:select', _.bind(this.onColorsSelect, this)); this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
this.colors = this.btnColor.getPicker(); this.colors = this.btnColor.getPicker();
@ -321,7 +323,7 @@ define([
}, },
getFocusedComponents: function() { getFocusedComponents: function() {
return [this.cmbNumFormat, this.cmbBulletFormat, this.spnSize, this.spnStart]; return [this.cmbNumFormat, this.cmbBulletFormat, this.spnSize, this.spnStart, this.btnColor];
}, },
afterRender: function() { afterRender: function() {

6
apps/documenteditor/main/app/view/ControlSettingsDialog.js
View file

@ -141,7 +141,9 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
'33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
'993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF' '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
], ],
paletteHeight: 94 paletteHeight: 94,
cls: 'move-focus',
takeFocusOnClose: true
}); });
this.colors = this.btnColor.getPicker(); this.colors = this.btnColor.getPicker();
@ -357,7 +359,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
getFocusedComponents: function() { getFocusedComponents: function() {
return [ 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.chLockDelete , this.chLockEdit, // 1 tab
this.list, // 2 tab this.list, // 2 tab
this.txtDate, this.listFormats, this.cmbLang // 3 tab this.txtDate, this.listFormats, this.cmbLang // 3 tab

33
apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
View file

@ -112,6 +112,7 @@ define([
spacingMode: false spacingMode: false
}); });
this._btnsBorderPosition = [];
_.each([ _.each([
[c_tableBorder.BORDER_HORIZONTAL_TOP, 't', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-top', '00'], [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'], [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) { _btn.on('click', function(btn) {
me._ApplyBorderPreset(btn.options.strId); me._ApplyBorderPreset(btn.options.strId);
}); });
me._btnsBorderPosition.push( _btn );
}, this); }, this);
var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt); var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt);
@ -164,7 +166,9 @@ define([
parentEl: $('#drop-advanced-button-bordercolor'), parentEl: $('#drop-advanced-button-bordercolor'),
additionalAlign: this.menuAddAlign, additionalAlign: this.menuAddAlign,
color: 'auto', color: 'auto',
auto: true auto: true,
cls: 'move-focus',
takeFocusOnClose: true
}); });
this.btnBorderColor.on('color:select', _.bind(function(btn, color) { this.btnBorderColor.on('color:select', _.bind(function(btn, color) {
this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color); this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
@ -177,7 +181,9 @@ define([
this.btnBackColor = new Common.UI.ColorButton({ this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#drop-advanced-button-color'), parentEl: $('#drop-advanced-button-color'),
additionalAlign: this.menuAddAlign, additionalAlign: this.menuAddAlign,
transparent: true transparent: true,
cls: 'move-focus',
takeFocusOnClose: true
}); });
this.btnBackColor.on('color:select', _.bind(function(btn, color) { this.btnBackColor.on('color:select', _.bind(function(btn, color) {
var clr, border; var clr, border;
@ -720,8 +726,9 @@ define([
return [ 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.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.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 this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight // 3 tab
]; ]);
}, },
onCategoryClick: function(btn, index) { onCategoryClick: function(btn, index) {
@ -729,12 +736,20 @@ define([
var me = this; var me = this;
setTimeout(function(){ setTimeout(function(){
if (index==0) { switch (index) {
me.cmbWidth.focus(); case 0:
} else if (index==1) { me.cmbWidth.focus();
me.cmbFonts.focus(); break;
} else if (index==3) case 1:
me.spnMarginTop.focus(); me.cmbFonts.focus();
break;
case 2:
me.cmbBorderSize.focus();
break;
case 3:
me.spnMarginTop.focus();
break;
}
}, 100); }, 100);
}, },

6
apps/documenteditor/main/app/view/ListSettingsDialog.js
View file

@ -171,7 +171,9 @@ define([
style: 'padding-left: 20px;' style: 'padding-left: 20px;'
}, },
{caption: '--'}], {caption: '--'}],
additionalAlign: this.menuAddAlign additionalAlign: this.menuAddAlign,
cls: 'move-focus',
takeFocusOnClose: true
}); });
this.btnColor.on('color:select', _.bind(this.onColorsSelect, this)); this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
this.btnColor.menu.items[0].on('toggle', _.bind(this.onLikeTextColor, this)); this.btnColor.menu.items[0].on('toggle', _.bind(this.onLikeTextColor, this));
@ -342,7 +344,7 @@ define([
}, },
getFocusedComponents: function() { 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 () { getDefaultFocusableComponent: function () {

21
apps/documenteditor/main/app/view/TableSettingsAdvanced.js
View file

@ -879,7 +879,8 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
this.cmbBorderSize = new Common.UI.ComboBorderSize({ this.cmbBorderSize = new Common.UI.ComboBorderSize({
el: $('#tableadv-combo-border-size'), el: $('#tableadv-combo-border-size'),
style: "width: 93px;" style: "width: 93px;",
takeFocusOnClose: true
}); });
var rec = this.cmbBorderSize.store.at(1); var rec = this.cmbBorderSize.store.at(1);
this.BorderSize = {ptValue: rec.get('value'), pxValue: rec.get('pxValue')}; 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'), parentEl: $('#tableadv-border-color-btn'),
additionalAlign: this.menuAddAlign, additionalAlign: this.menuAddAlign,
color: 'auto', color: 'auto',
auto: true auto: true,
cls: 'move-focus',
takeFocusOnClose: true
}); });
this.btnBorderColor.on('color:select', _.bind(me.onColorsBorderSelect, me)); this.btnBorderColor.on('color:select', _.bind(me.onColorsBorderSelect, me));
this.btnBorderColor.on('auto: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({ this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#tableadv-button-back-color'), parentEl: $('#tableadv-button-back-color'),
additionalAlign: this.menuAddAlign, additionalAlign: this.menuAddAlign,
transparent: true transparent: true,
cls: 'move-focus',
takeFocusOnClose: true
}); });
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this)); this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
this.colorsBack = this.btnBackColor.getPicker(); this.colorsBack = this.btnBackColor.getPicker();
@ -907,7 +912,9 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
this.btnTableBackColor = new Common.UI.ColorButton({ this.btnTableBackColor = new Common.UI.ColorButton({
parentEl: $('#tableadv-button-table-back-color'), parentEl: $('#tableadv-button-table-back-color'),
additionalAlign: this.menuAddAlign, additionalAlign: this.menuAddAlign,
transparent: true transparent: true,
cls: 'move-focus',
takeFocusOnClose: true
}); });
this.btnTableBackColor.on('color:select', _.bind(this.onColorsTableBackSelect, this)); this.btnTableBackColor.on('color:select', _.bind(this.onColorsTableBackSelect, this));
this.colorsTableBack = this.btnTableBackColor.getPicker(); this.colorsTableBack = this.btnTableBackColor.getPicker();
@ -1012,11 +1019,12 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
return [ return [
this.chWidth, this.nfWidth, this.cmbUnit, this.chAutofit, this.spnTableMarginTop, this.spnTableMarginLeft, this.spnTableMarginBottom, this.spnTableMarginRight, this.chAllowSpacing, this.nfSpacing, // 0 tab 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.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.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.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.spnIndentLeft, this.spnDistanceTop, this.spnDistanceLeft, this.spnDistanceBottom, this.spnDistanceRight, // 4 tab
this.inputAltTitle, this.textareaAltDescription // 5 tab this.inputAltTitle, this.textareaAltDescription // 5 tab
]; ]);
}, },
onCategoryClick: function(btn, index) { onCategoryClick: function(btn, index) {
@ -1038,6 +1046,9 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
else else
me.chPrefWidth.focus(); me.chPrefWidth.focus();
break; break;
case 2:
me.cmbBorderSize.focus();
break;
case 3: case 3:
if (!me.cmbHAlign.isDisabled()) if (!me.cmbHAlign.isDisabled())
me.cmbHAlign.focus(); me.cmbHAlign.focus();

30
apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
View file

@ -881,15 +881,21 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
parentEl: $('#format-rules-edit-color-pos-fill'), parentEl: $('#format-rules-edit-color-pos-fill'),
style: "width:45px;", style: "width:45px;",
menu : true, menu : true,
color : '638EC6' color : '638EC6',
cls: 'move-focus',
takeFocusOnClose: true
}); });
Common.UI.FocusManager.add(this, this.btnPosFill);
this.btnNegFill = new Common.UI.ColorButton({ this.btnNegFill = new Common.UI.ColorButton({
parentEl: $('#format-rules-edit-color-neg-fill'), parentEl: $('#format-rules-edit-color-neg-fill'),
style: "width:45px;", style: "width:45px;",
menu : true, menu : true,
color : 'FF0000' color : 'FF0000',
cls: 'move-focus',
takeFocusOnClose: true
}); });
Common.UI.FocusManager.add(this, this.btnNegFill);
this.chFill = new Common.UI.CheckBox({ this.chFill = new Common.UI.CheckBox({
el: $('#format-rules-edit-chk-fill'), 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'), parentEl: $('#format-rules-edit-color-pos-border'),
style: "width:45px;", style: "width:45px;",
menu : true, menu : true,
color : '000000' color : '000000',
cls: 'move-focus',
takeFocusOnClose: true
}); });
Common.UI.FocusManager.add(this, this.btnPosBorder);
this.btnNegBorder = new Common.UI.ColorButton({ this.btnNegBorder = new Common.UI.ColorButton({
parentEl: $('#format-rules-edit-color-neg-border'), parentEl: $('#format-rules-edit-color-neg-border'),
style: "width:45px;", style: "width:45px;",
menu : true, menu : true,
color : '000000' color : '000000',
cls: 'move-focus',
takeFocusOnClose: true
}); });
Common.UI.FocusManager.add(this, this.btnNegBorder);
this.chBorder = new Common.UI.CheckBox({ this.chBorder = new Common.UI.CheckBox({
el: $('#format-rules-edit-chk-border'), 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'), parentEl: $('#format-rules-edit-color-axis-color'),
style: "width:45px;", style: "width:45px;",
menu : true, menu : true,
color : '000000' color : '000000',
cls: 'move-focus',
takeFocusOnClose: true
}); });
Common.UI.FocusManager.add(this, this.btnAxisColor);
this.panels.databar.rendered = true; this.panels.databar.rendered = true;
this.updateThemeColors(); this.updateThemeColors();
@ -1056,8 +1071,11 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
parentEl: $('#format-rules-edit-color-scale-' + (i+1)), parentEl: $('#format-rules-edit-color-scale-' + (i+1)),
menu : true, menu : true,
type : i, 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.scaleControls.push({combo: combo, range: range, color: color});
} }
this.panels.scale.rendered = true; this.panels.scale.rendered = true;