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

Merge pull request #2084 from ONLYOFFICE/feature/fix-focus-manager

Browse source 
Feature/fix focus manager
This commit is contained in:
Julia Radzhabova 2022-11-25 01:57:03 +03:00 committed by GitHub
parent 1e7bb1667c 4c9a2fc794
commit 475709af50
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 78 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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'

1
apps/common/main/lib/component/ThemeColorPalette.js
View file

@ -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'));

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

@ -260,7 +260,9 @@ define([
if (record.value === _BulletTypes.newSymbol) {
var me = this,
props = me.bulletProps,
btn,
handler = function(dlg, result, settings) {
btn = result;
if (result == 'ok') {
props.changed = true;
props.code = settings.code;
@ -292,6 +294,9 @@ define([
font: props.font,
symbol: props.symbol,
handler: handler
}).on('close', function(obj){
(btn===undefined) && handler && handler.call(me);
setTimeout(function(){me.cmbBulletFormat.focus();}, 1);
});
win.show();
win.on('symbol:dblclick', handler);

2
apps/common/main/lib/view/SignDialog.js
View file

@ -248,7 +248,7 @@ define([
},
getFocusedComponents: function() {
return [this.inputPurpose, this.inputName, this.cmbFonts, this.cmbFontSize];
return [this.inputPurpose, this.inputName, this.cmbFonts, this.cmbFontSize, this.btnBold, this.btnItalic, this.btnSelectImage, this.btnChangeCertificate];
},
show: function() {

9
apps/common/main/resources/less/buttons.less
View file

@ -1009,6 +1009,15 @@
}
}
.asc-window.modal {
.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);
}
}
}
.btn-large-dataview {
display: inline-block;
width: 72px;

2
apps/documenteditor/main/app/view/ImageSettingsAdvanced.js
View file

@ -1165,7 +1165,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
getFocusedComponents: function() {
return [
this.spnWidth, this.spnHeight, this.btnOriginalSize, // 0 tab
this.spnWidth, this.btnRatio, this.spnHeight, this.btnOriginalSize, // 0 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

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

@ -297,10 +297,11 @@ define([
this.btnColor = new Common.UI.ButtonColored({
parentEl: $window.find('#id-dlg-bullet-color'),
cls : 'btn-toolbar',
cls : 'btn-toolbar move-focus',
iconCls : 'toolbar__icon btn-fontcolor',
hint : this.txtColor,
menu: true,
takeFocusOnClose: true,
additionalItems: [{
id: 'id-dlg-bullet-text-color',
caption: this.txtLikeText,
@ -701,11 +702,23 @@ define([
this.btnMore.on('click', _.bind(this.onMoreClick, this));
this.on('animate:after', _.bind(this.onAnimateAfter, this));
if (Common.localStorage.getBool("de-hide-multilevel-settings", true))
this.onMoreClick(this.btnMore);
this.afterRender();
},
getFocusedComponents: function() {
return [this.cmbFormat, this.cmbAlign, this.cmbSize, this.btnColor, this.levelsList];
switch (this.type) {
case 0:
return [this.cmbFormat, this.cmbAlign, this.cmbSize, this.btnBold, this.btnItalic, this.btnColor];
case 1:
return [this.cmbFormat, this.cmbAlign, this.txtNumFormat, this.cmbFonts, this.btnBold, this.btnItalic, this.btnColor, this.cmbSize];
case 2:
return [this.cmbFormat, this.cmbSize, this.btnBold, this.btnItalic, this.btnColor, this.txtNumFormat, this.btnMore, this.levelsList,
this.cmbFonts, this.cmbLevel, this.spnStart, this.chRestart, this.cmbAlign, this.spnAlign, this.spnIndents, this.cmbFollow, this.chTabStop, this.spnTabStop];
}
return [];
},
getDefaultFocusableComponent: function () {
@ -793,7 +806,9 @@ define([
addNewBullet: function(callback) {
var me = this,
props = me.bulletProps,
btn,
handler = function(dlg, result, settings) {
btn = result;
if (result == 'ok') {
props.changed = true;
props.code = settings.code;
@ -820,6 +835,9 @@ define([
font: props.font,
symbol: props.symbol,
handler: handler
}).on('close', function(obj){
(btn===undefined) && callback && callback.call(me);
setTimeout(function(){me.cmbFormat.focus();}, 1);
});
win.show();
win.on('symbol:dblclick', handler);
@ -827,7 +845,9 @@ define([
addNewListType: function(callback) {
var me = this,
btn,
handler = function(result, value) {
btn = result;
if (result == 'ok') {
if (me._changedProps) {
me._changedProps.put_Format(value);
@ -842,6 +862,9 @@ define([
modal: true,
lang: me.lang,
handler: handler
}).on('close', function(obj){
(btn===undefined) && callback && callback.call(me);
setTimeout(function(){me.cmbFormat.focus();}, 1);
});
win.show();
},

8
apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
View file

@ -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 () {

2
apps/presentationeditor/main/app/view/ChartSettingsAdvanced.js
View file

@ -235,7 +235,7 @@ define([ 'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
getFocusedComponents: function() {
return [
this.spnWidth, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
this.spnWidth, this.btnRatio, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
this.inputAltTitle, this.textareaAltDescription // 1 tab
];
},

2
apps/presentationeditor/main/app/view/ImageSettingsAdvanced.js
View file

@ -250,7 +250,7 @@ define([ 'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
getFocusedComponents: function() {
return [
this.spnWidth, this.spnHeight, this.btnOriginalSize, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY,// 0 tab
this.spnWidth, this.btnRatio, this.spnHeight, this.btnOriginalSize, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY,// 0 tab
this.spnAngle, this.chFlipHor, this.chFlipVert, // 1 tab
this.inputAltTitle, this.textareaAltDescription // 2 tab
];

2
apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
View file

@ -580,7 +580,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
getFocusedComponents: function() {
return [
this.spnWidth, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
this.spnWidth, this.btnRatio, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
this.spnAngle, this.chFlipHor, this.chFlipVert, // 1 tab
this.cmbCapType, this.cmbJoinType, // 2 tab
this.radioNofit, this.radioShrink, this.radioFit, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, // 3 tab

2
apps/presentationeditor/main/app/view/TableSettingsAdvanced.js
View file

@ -431,7 +431,7 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
getFocusedComponents: function() {
return [
this.spnWidth, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
this.spnWidth, this.btnRatio, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 0 tab
this.chCellMargins, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight,
this.spnTableMarginTop, this.spnTableMarginLeft, this.spnTableMarginBottom, this.spnTableMarginRight, // 1 tab
this.inputAltTitle, this.textareaAltDescription // 2 tab

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

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

2
apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
View file

@ -583,7 +583,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
getFocusedComponents: function() {
return [
this.spnWidth, this.spnHeight, // 0 tab
this.spnWidth, this.btnRatio, this.spnHeight, // 0 tab
this.spnAngle, this.chFlipHor, this.chFlipVert, // 1 tab
this.cmbCapType, this.cmbJoinType, // 2 tab
this.chAutofit, this.chOverflow, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, // 3 tab

2
apps/spreadsheeteditor/main/app/view/SlicerSettingsAdvanced.js
View file

@ -386,7 +386,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem
getFocusedComponents: function() {
return [
this.inputHeader, this.chHeader, this.numWidth, this.numHeight, this.numCols, this.numColHeight, // 0 tab
this.inputHeader, this.chHeader, this.numWidth, this.btnRatio, this.numHeight, this.numCols, this.numColHeight, // 0 tab
this.radioAsc, this.radioDesc, this.chHideNoData, this.chIndNoData, this.chShowNoData, // 1 tab
this.inputName, // 2 tab
this.radioTwoCell, this.radioOneCell, this.radioAbsolute, // 3 tab