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

Add focus for buttons in dialogs

Browse source
This commit is contained in:
Julia Radzhabova 2021-04-15 01:02:11 +03:00
parent 703f0f7532
commit 4d7dc3bb65
16 changed files with 43 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/common/main/lib/component/FocusManager.js
View file

@ -71,6 +71,8 @@ Common.UI.FocusManager = new(function() {
item.selector = '.radiobox';
else if (field instanceof Common.UI.TreeView)
item.selector = '.treeview';
else if (field instanceof Common.UI.Button)
item.selector = 'button';
else
item.selector = '.form-control';
}

4
apps/common/main/lib/view/AutoCorrectDialog.js
View file

@ -353,8 +353,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
getFocusedComponents: function() {
var arr = [
this.chReplaceType, this.inputReplace, this.inputBy, this.mathList, // 0 tab
this.inputRecFind, this.mathRecList // 1 tab
this.chReplaceType, this.inputReplace, this.inputBy, this.mathList, this.btnReset, this.btnEdit, this.btnDelete, // 0 tab
this.inputRecFind, this.mathRecList, this.btnResetRec, this.btnAddRec, this.btnDeleteRec // 1 tab
];
arr = arr.concat(this.chNewRows ? [this.chNewRows] : [this.chQuotes, this.chHyphens, this.chBulleted, this.chNumbered]);
return arr;

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

@ -729,6 +729,11 @@
padding-right: 10px;
}
&:focus:not(.disabled) {
border-color: @border-control-focus-ie;
border-color: @border-control-focus;
}
&:hover:not(.disabled),
.over:not(.disabled) {
background-color: @highlight-button-hover-ie !important;

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

@ -238,7 +238,9 @@ define([
}
}
}
})).show();
})).on('close', function() {
me.cmbLabel.focus();
}).show();
}, this));
this.btnDelete = new Common.UI.Button({
@ -353,7 +355,7 @@ define([
},
getFocusedComponents: function() {
return [this.txtCaption, this.cmbPosition, this.cmbLabel, this.chExclude, this.cmbNumbering, this.chChapter, this.cmbChapter, this.cmbSeparator];
return [this.txtCaption, this.cmbPosition, this.cmbLabel, this.btnAdd, this.btnDelete, this.chExclude, this.cmbNumbering, this.chChapter, this.cmbChapter, this.cmbSeparator];
},
getDefaultFocusableComponent: function () {

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

@ -357,7 +357,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
getFocusedComponents: function() {
return [
this.txtName, this.txtTag, this.txtPlaceholder, this.cmbShow, // 0 tab
this.txtName, this.txtTag, this.txtPlaceholder, this.cmbShow, this.btnApplyAll, // 0 tab
this.chLockDelete , this.chLockEdit, // 1 tab
this.list, // 2 tab
this.txtDate, this.listFormats, this.cmbLang // 3 tab

3
apps/documenteditor/main/app/view/DateTimeDialog.js
View file

@ -154,6 +154,7 @@ define([
Common.localStorage.setItem("de-settings-datetime-default", value);
Common.Utils.InternalSettings.set("de-settings-datetime-default", value);
}
this.listFormats.focus();
}, this)
});
}, this));
@ -176,7 +177,7 @@ define([
},
getFocusedComponents: function() {
return [this.cmbLang, this.listFormats, this.chUpdate];
return [this.cmbLang, this.listFormats, this.chUpdate, this.btnDefault];
},
getDefaultFocusableComponent: function () {

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

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

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

@ -340,7 +340,7 @@ define([
},
getFocusedComponents: function() {
return [this.cmbFormat, this.cmbAlign, this.cmbSize, this.levelsList];
return [this.btnEdit, this.cmbFormat, this.cmbAlign, this.cmbSize, this.levelsList];
},
getDefaultFocusableComponent: function () {

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

@ -683,7 +683,7 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, this.chAddInterval, // 0 tab
this.chBreakBefore, this.chKeepLines, this.chOrphan, this.chKeepNext, this.chLineNumbers, // 1 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.numDefaultTab, this.numTab, this.cmbAlign, this.cmbLeader, this.tabList, this.btnAddTab, this.btnRemoveTab, this.btnRemoveAll,// 4 tab
this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight // 5 tab
];
},

3
apps/presentationeditor/main/app/view/DateTimeDialog.js
View file

@ -154,6 +154,7 @@ define([
Common.localStorage.setItem("pe-settings-datetime-default", value);
Common.Utils.InternalSettings.set("pe-settings-datetime-default", value);
}
this.listFormats.focus();
}, this)
});
}, this));
@ -176,7 +177,7 @@ define([
},
getFocusedComponents: function() {
return [this.cmbLang, this.listFormats, this.chUpdate];
return [this.cmbLang, this.listFormats, this.chUpdate, this.btnDefault];
},
getDefaultFocusableComponent: function () {

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

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

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

@ -410,7 +410,7 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
this.cmbTextAlignment, this.numIndentsLeft, this.numIndentsRight, this.cmbSpecial, this.numSpecialBy,
this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, // 0 tab
this.chStrike, this.chSubscript, this.chDoubleStrike, this.chSmallCaps, this.chSuperscript, this.chAllCaps, this.numSpacing, // 1 tab
this.numDefaultTab, this.numTab, this.cmbAlign, this.tabList // 2 tab
this.numDefaultTab, this.numTab, this.cmbAlign, this.tabList, this.btnAddTab, this.btnRemoveTab, this.btnRemoveAll // 2 tab
];
},

4
apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js
View file

@ -214,6 +214,10 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesManagerDlg.templa
_setDefaults: function (props) {
Common.UI.FocusManager.add(this, this.cmbScope);
Common.UI.FocusManager.add(this, this.rulesList);
Common.UI.FocusManager.add(this, this.btnNew);
Common.UI.FocusManager.add(this, this.btnEdit);
Common.UI.FocusManager.add(this, this.btnDelete);
this.rulesList.on('item:add', _.bind(this.addControls, this));
this.rulesList.on('item:change', _.bind(this.addControls, this));

3
apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
View file

@ -172,7 +172,7 @@ define([ 'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
},
getFocusedComponents: function() {
return [ this.cmbFilter, this.rangeList ];
return [ this.cmbFilter, this.rangeList, this.btnNewRange, this.btnEditRange, this.btnDeleteRange ];
},
getDefaultFocusableComponent: function () {
@ -321,6 +321,7 @@ define([ 'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
}
}).on('close', function() {
me.show();
setTimeout(function(){ me.getDefaultFocusableComponent().focus(); }, 100);
});
me.hide();

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

@ -408,7 +408,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.
this.cmbTextAlignment, this.numIndentsLeft, this.numIndentsRight, this.cmbSpecial, this.numSpecialBy,
this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, // 0 tab
this.chStrike, this.chSubscript, this.chDoubleStrike, this.chSmallCaps, this.chSuperscript, this.chAllCaps, this.numSpacing, // 1 tab
this.numDefaultTab, this.numTab, this.cmbAlign, this.tabList // 2 tab
this.numDefaultTab, this.numTab, this.cmbAlign, this.tabList, this.btnAddTab, this.btnRemoveTab, this.btnRemoveAll // 2 tab
];
},

15
apps/spreadsheeteditor/main/app/view/ViewManagerDlg.js
View file

@ -123,7 +123,8 @@ define([
'<div class="lock-user"><%=lockuser%></div>',
'<% } %>',
'</div>'
].join(''))
].join('')),
tabindex: 1
});
this.viewList.on('item:select', _.bind(this.onSelectItem, this))
.on('item:keydown', _.bind(this.onKeyDown, this))
@ -158,6 +159,14 @@ define([
this.afterRender();
},
getFocusedComponents: function() {
return [ this.viewList, this.btnNew, this.btnRename, this.btnDuplicate, this.btnDelete ];
},
getDefaultFocusableComponent: function () {
return this.viewList;
},
afterRender: function() {
this._setDefaults();
},
@ -286,7 +295,9 @@ define([
rec.get('view').asc_setName(value);
}
}
})).show();
})).on('close', function() {
me.getDefaultFocusableComponent().focus();
}).show();
}
},