Fix focus in advanced settings dialogs

This commit is contained in:
Julia Radzhabova
2023-09-13 16:36:55 +03:00
parent 94a6f940c5
commit 2557c16fe7
25 changed files with 92 additions and 49 deletions

View File

@ -509,10 +509,10 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
},
getFocusedComponents: function() {
var arr = [
var arr = this.btnsCategory.concat([
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.chHyperlink, this.chNewRows] : [this.chQuotes, this.chHyphens, this.chHyperlink, this.chDoubleSpaces, this.chBulleted, this.chNumbered]);
arr = arr.concat(this.chkSentenceExceptions ? [this.chkSentenceExceptions, this.chkSentenceCells, this.exceptionsLangCmb, this.exceptionsFindInput, this.exceptionsList, this.btnResetExceptions, this.btnAddExceptions, this.btnDeleteExceptions] : []);
return arr;

View File

@ -575,7 +575,6 @@
.font-weight-bold();
background-color: transparent;
&:hover:not(.disabled),
.over:not(.disabled) {
background-color: @highlight-button-hover-ie;
@ -613,6 +612,18 @@
display: none;
}
}
&:not(.disabled) {
&:focus {
border-color: @border-control-focus-ie;
border-color: @border-control-focus;
&.active,
&:active {
border-color: @highlight-button-pressed-focus-ie;
border-color: @highlight-button-pressed-focus;
}
}
}
}
// The clickable button for toggling the menu
@ -964,8 +975,13 @@
}
&:focus:not(.disabled) {
box-shadow: inset 0 0 0 @scaled-one-px-value-ie @border-control-focus-ie;
box-shadow: inset 0 0 0 @scaled-one-px-value @border-control-focus;
.box-inner-shadow(0 0 0 @scaled-one-px-value-ie @border-control-focus-ie);
.box-inner-shadow(0 0 0 @scaled-one-px-value @border-control-focus);
&.active,
&:active {
.box-inner-shadow(0 0 0 @scaled-one-px-value-ie @highlight-button-pressed-focus-ie);
.box-inner-shadow(0 0 0 @scaled-one-px-value @highlight-button-pressed-focus);
}
}
&.border-off {
@ -1166,6 +1182,11 @@
&:focus {
.box-inner-shadow(0 0 0 @scaled-one-px-value-ie @border-control-focus-ie);
.box-inner-shadow(0 0 0 @scaled-one-px-value @border-control-focus);
&.active,
&:active {
.box-inner-shadow(0 0 0 @scaled-one-px-value-ie @highlight-button-pressed-focus-ie);
.box-inner-shadow(0 0 0 @scaled-one-px-value @highlight-button-pressed-focus);
}
}
}
.btn-group:not(.split) {

View File

@ -24,6 +24,7 @@
--highlight-button-hover: #d8dadc;
--highlight-button-pressed: #7d858c;
--highlight-button-pressed-hover: #7d858c;
--highlight-button-pressed-focus: #444444;
--highlight-primary-dialog-button-hover: #666d73;
--highlight-accent-button-hover: #375478;
--highlight-accent-button-pressed: #293f59;

View File

@ -25,6 +25,7 @@
--highlight-button-hover: #424242;
--highlight-button-pressed: #666666;
--highlight-button-pressed-hover: #828282;
--highlight-button-pressed-focus: #b8b8b8;
--highlight-primary-dialog-button-hover: #a6a6a6;
--highlight-accent-button-hover: #75a2d6;
--highlight-accent-button-pressed: #89afdc;

View File

@ -25,6 +25,7 @@
--highlight-button-hover: #555;
--highlight-button-pressed: #707070;
--highlight-button-pressed-hover: #808080;
--highlight-button-pressed-focus: #ccc;
--highlight-primary-dialog-button-hover: #fcfcfc;
--highlight-accent-button-hover: #75a2d6;
--highlight-accent-button-pressed: #89afdc;

View File

@ -24,6 +24,7 @@
@highlight-button-hover-ie: #d8dadc;
@highlight-button-pressed-ie: #7d858c;
@highlight-button-pressed-hover-ie: #7d858c;
@highlight-button-pressed-focus-ie: #666d73;
@highlight-primary-dialog-button-hover-ie: #666d73;
@highlight-header-button-hover-ie: fade(#fff, 20%);
@highlight-header-button-pressed-ie: fade(#000, 20%);

View File

@ -36,6 +36,7 @@
--highlight-button-hover: #e0e0e0;
--highlight-button-pressed: #cbcbcb;
--highlight-button-pressed-hover: #bababa;
--highlight-button-pressed-focus: #848484;
--highlight-primary-dialog-button-hover: #1c1c1c;
--highlight-accent-button-hover: #375478;
--highlight-accent-button-pressed: #293f59;
@ -186,6 +187,7 @@
@highlight-button-hover: var(--highlight-button-hover);
@highlight-button-pressed: var(--highlight-button-pressed);
@highlight-button-pressed-hover: var(--highlight-button-pressed-hover);
@highlight-button-pressed-focus: var(--highlight-button-pressed-focus);
@highlight-primary-dialog-button-hover: var(--highlight-primary-dialog-button-hover);
@highlight-header-button-hover: var(--highlight-header-button-hover);
@highlight-header-button-pressed: var(--highlight-header-button-pressed);

View File

@ -363,12 +363,13 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
this.txtName, this.txtTag, this.txtPlaceholder, this.chTemp, 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
];
this.list, this.btnAdd, this.btnChange, this.btnDelete, this.btnUp, this.btnDown, // 2 tab
this.txtDate, this.listFormats, this.cmbLang, // 3 tab,
this.btnEditChecked, this.btnEditUnchecked // 4 tab,
]);
},
onCategoryClick: function(btn, index) {
@ -384,6 +385,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
me.list.focus();
} else if (index==3)
me.txtDate.focus();
else if (index==4)
me.btnEditChecked.focus();
}, 100);
},
@ -719,6 +722,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
}
me.list.focus();
}
}).on('close', function() {
me.list.focus();
});
win.show();
},
@ -739,6 +744,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
}
me.list.focus();
}
}).on('close', function() {
me.list.focus();
});
rec && win.show();
rec && win.setSettings({name: rec.get('name'), value: rec.get('value')});

View File

@ -712,10 +712,10 @@ define([
},
getFocusedComponents: function() {
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
return this.btnsCategory.concat([
this.btnFrameNone, this.btnFrameInline, this.btnFrameFlow, 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.btnNone, this.btnInText, this.btnInMargin, 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
]);
},

View File

@ -1161,18 +1161,19 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
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
this.btnWrapInline, this.btnWrapSquare, this.btnWrapTight, this.btnWrapThrough, this.btnWrapTopBottom, this.btnWrapInFront, this.btnWrapBehind,
this.spnTop, this.spnLeft, this.spnBottom, this.spnRight, // 3 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
];
]);
},
onCategoryClick: function(btn, index) {
@ -1194,7 +1195,12 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
me.spnAngle.focus();
break;
case 3:
me.spnTop.focus();
if (!me.spnTop.isDisabled())
me.spnTop.focus();
else if (!me.spnLeft.isDisabled())
me.spnLeft.focus();
else if (!me.btnWrapInline.isDisabled())
me.btnWrapInline.focus();
break;
case 4:
if (!me.cmbHAlign.isDisabled())

View File

@ -713,11 +713,11 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
this.cmbTextAlignment, this.cmbOutlinelevel, this.numIndentsLeft, this.numIndentsRight, this.cmbSpecial, this.numSpecialBy,
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.cmbBorderSize, this.btnBorderColor].concat(this._btnsBorderPosition).concat([this.btnBackColor, // 2 tab
this.cmbBorderSize, this.btnBorderColor]).concat(this._btnsBorderPosition).concat([this.btnBackColor, // 2 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, this.btnAddTab, this.btnRemoveTab, this.btnRemoveAll,// 4 tab
this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight // 5 tab

View File

@ -1014,13 +1014,13 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
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.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.btnWrapNone, this.btnWrapParallel, this.btnAlignLeft, this.btnAlignCenter, this.btnAlignRight, this.spnIndentLeft, this.spnDistanceTop, this.spnDistanceLeft, this.spnDistanceBottom, this.spnDistanceRight, // 4 tab
this.inputAltTitle, this.textareaAltDescription // 5 tab
]);
},
@ -1054,9 +1054,12 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
me.spnX.focus();
break;
case 4:
if (me.spnIndentLeft.isVisible())
me.spnIndentLeft.focus();
else
if (me.spnIndentLeft.isVisible()) {
if (!me.spnIndentLeft.isDisabled())
me.spnIndentLeft.focus();
else
me.btnWrapNone.focus();
} else
me.spnDistanceTop.focus();
break;
case 5:

View File

@ -245,11 +245,11 @@ define([ 'text!presentationeditor/main/app/template/ChartSettingsAdvanced.tem
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
this.inputChartName, // 0 tab
this.spnWidth, this.btnRatio, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 1 tab
this.inputAltTitle, this.textareaAltDescription // 2 tab
];
]);
},
onCategoryClick: function(btn, index) {

View File

@ -260,12 +260,12 @@ define([ 'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
this.inputImageName, // 0 tab
this.spnWidth, this.btnRatio, this.spnHeight, this.btnOriginalSize, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY,// 1 tab
this.spnAngle, this.chFlipHor, this.chFlipVert, // 2 tab
this.inputAltTitle, this.textareaAltDescription // 3 tab
];
]);
},
onCategoryClick: function(btn, index) {

View File

@ -405,12 +405,12 @@ define([ 'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
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, this.btnAddTab, this.btnRemoveTab, this.btnRemoveAll // 2 tab
];
]);
},
onCategoryClick: function(btn, index, cmp, e) {

View File

@ -594,7 +594,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
this.inputShapeName,// 0 tab
this.spnWidth, this.btnRatio, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 1 tab
this.spnAngle, this.chFlipHor, this.chFlipVert, // 2 tab
@ -602,7 +602,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
this.radioNofit, this.radioShrink, this.radioFit, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, // 4 tab
this.spnColumns, this.spnSpacing, // 5 tab
this.inputAltTitle, this.textareaAltDescription // 6 tab
];
]);
},
onCategoryClick: function(btn, index) {

View File

@ -439,13 +439,13 @@ define([ 'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
this.inputTableName, // 0 tab
this.spnWidth, this.btnRatio, this.spnHeight, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY, // 1 tab
this.chCellMargins, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight,
this.spnTableMarginTop, this.spnTableMarginLeft, this.spnTableMarginBottom, this.spnTableMarginRight, // 2 tab
this.inputAltTitle, this.textareaAltDescription // 3 tab
];
]);
},
onCategoryClick: function(btn, index) {

View File

@ -263,11 +263,11 @@ define([ 'text!spreadsheeteditor/main/app/template/DataValidationDialog.templ
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
this.cmbAllow, this.cmbData, this.chIgnore, this.chShowDropDown, this.inputRangeSource, this.inputRangeMin, this.inputRangeMax, this.chApply, // 0 tab
this.chShowInput, this.inputInputTitle, this.textareaInput, // 1 tab
this.chShowError, this.cmbStyle, this.inputErrorTitle, this.textareaError // 2 tab
];
]);
},
onCategoryClick: function(btn, index) {

View File

@ -220,10 +220,10 @@ define([ 'text!spreadsheeteditor/main/app/template/FieldSettingsDialog.templa
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
this.inputCustomName, this.radioTabular, this.radioOutline, this.chCompact, this.btnFormat, this.chRepeat, this.chBlank, this.chSubtotals, this.radioTop, this.radioBottom, this.chEmpty, // 0 tab
this.chSum, this.chCount, this.chAve, this.chMax, this.chMin, this.chProduct, this.chNum, this.chDev, this.chDevp, this.chVar, this.chVarp // 1 tab
];
]);
},
onCategoryClick: function(btn, index) {

View File

@ -146,11 +146,11 @@ define([ 'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
this.spnAngle, this.chFlipHor, this.chFlipVert, // 0 tab
this.radioTwoCell, this.radioOneCell, this.radioAbsolute, // 1 tab
this.inputAltTitle, this.textareaAltDescription // 2 tab
];
]);
},
onCategoryClick: function(btn, index) {

View File

@ -403,12 +403,12 @@ define([ 'text!spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
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, this.btnAddTab, this.btnRemoveTab, this.btnRemoveAll // 2 tab
];
]);
},
onCategoryClick: function(btn, index, cmp, e) {

View File

@ -186,11 +186,11 @@ define([ 'text!spreadsheeteditor/main/app/template/PivotSettingsAdvanced.temp
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
this.inputName, this.chRows, this.chCols, this.radioDown, this.radioOver, this.numWrap, this.chHeaders, this.chAutofitColWidth, // 0 tab
this.txtDataRange, // 1 tab
this.inputAltTitle, this.textareaAltDescription // 2 tab
];
]);
},
onCategoryClick: function(btn, index) {

View File

@ -585,7 +585,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
this.spnWidth, this.btnRatio, this.spnHeight, // 0 tab
this.spnAngle, this.chFlipHor, this.chFlipVert, // 1 tab
this.cmbCapType, this.cmbJoinType, // 2 tab
@ -593,7 +593,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
this.spnColumns, this.spnSpacing, // 4 tab
this.radioTwoCell, this.radioOneCell, this.radioAbsolute, // 5 tab
this.inputAltTitle, this.textareaAltDescription // 6 tab
];
]);
},
onCategoryClick: function(btn, index) {

View File

@ -385,13 +385,13 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem
},
getFocusedComponents: function() {
return [
return this.btnsCategory.concat([
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
this.inputAltTitle, this.textareaAltDescription // 4 tab
];
]);
},
onCategoryClick: function(btn, index) {

View File

@ -96,7 +96,7 @@ define([ 'text!spreadsheeteditor/main/app/template/TableSettingsAdvanced.temp
},
getFocusedComponents: function() {
return [ this.inputAltTitle, this.textareaAltDescription ]; // 0 tab
return this.btnsCategory.concat([ this.inputAltTitle, this.textareaAltDescription ]); // 0 tab
},
onCategoryClick: function(btn, index) {