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

Add focus manager to advansed settings

Browse source
This commit is contained in:
Julia Radzhabova 2020-10-02 12:43:59 +03:00
parent ca08e91c4e
commit f6b7b82b07
4 changed files with 99 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -51,7 +51,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
contentWidth: 375, contentWidth: 375,
height: 430, height: 430,
buttons: null, buttons: null,
toggleGroup: 'autocorrect-dialog-group' toggleGroup: 'autocorrect-dialog-group',
focusManager: true
}, },
initialize : function(options) { initialize : function(options) {
@ -177,7 +178,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
'<div style="flex-grow:1;font-family: Cambria Math;font-size:13px;<% if (defaultDisabled) { %> font-style:italic; opacity: 0.5;<% } %>"><%= by %></div>', '<div style="flex-grow:1;font-family: Cambria Math;font-size:13px;<% if (defaultDisabled) { %> font-style:italic; opacity: 0.5;<% } %>"><%= by %></div>',
'</div>' '</div>'
].join('')), ].join('')),
scrollAlwaysVisible: true scrollAlwaysVisible: true,
tabindex: 1
}); });
this.mathList.on('item:select', _.bind(this.onSelectMathItem, this)); this.mathList.on('item:select', _.bind(this.onSelectMathItem, this));
@ -257,7 +259,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
itemTemplate: _.template([ itemTemplate: _.template([
'<div id="<%= id %>" class="list-item" style="<% if (defaultDisabled) { %> font-style:italic; opacity: 0.5;<% } %>"><%= value %></div>' '<div id="<%= id %>" class="list-item" style="<% if (defaultDisabled) { %> font-style:italic; opacity: 0.5;<% } %>"><%= value %></div>'
].join('')), ].join('')),
scrollAlwaysVisible: true scrollAlwaysVisible: true,
tabindex: 1
}); });
this.mathRecList.on('item:select', _.bind(this.onSelectRecItem, this)); this.mathRecList.on('item:select', _.bind(this.onSelectRecItem, this));
@ -352,6 +355,14 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
this.btnsCategory[1].on('click', _.bind(this.onRecCategoryClick, this, false)); this.btnsCategory[1].on('click', _.bind(this.onRecCategoryClick, this, false));
this.btnsCategory[2] && this.btnsCategory[2].on('click', _.bind(this.updateFooterButtons, this, true)); this.btnsCategory[2] && this.btnsCategory[2].on('click', _.bind(this.updateFooterButtons, this, true));
// 0 tab
this.focusManager.add([this.inputReplace, this.inputBy], '.form-control');
this.focusManager.add(this.mathList, '.listview');
// 1 tab
this.focusManager.add([this.inputRecFind], '.form-control');
this.focusManager.add(this.mathRecList, '.listview');
this.afterRender(); this.afterRender();
}, },

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

@ -49,7 +49,8 @@ define([
DE.Views.CaptionDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ DE.Views.CaptionDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
options: { options: {
contentWidth: 351, contentWidth: 351,
height: 350 height: 350,
focusManager: true
}, },
initialize : function(options) { initialize : function(options) {
@ -152,6 +153,7 @@ define([
menuStyle: 'min-width: 75px;', menuStyle: 'min-width: 75px;',
editable: false, editable: false,
disabled: !this.isObject, disabled: !this.isObject,
takeFocusOnClose: true,
data: [ data: [
{ displayValue: this.textBefore, value: 1 }, { displayValue: this.textBefore, value: 1 },
{ displayValue: this.textAfter, value: 0 } { displayValue: this.textAfter, value: 0 }
@ -180,6 +182,7 @@ define([
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 160px;max-height:155px;', menuStyle: 'min-width: 160px;max-height:155px;',
editable: false, editable: false,
takeFocusOnClose: true,
data: this.arrLabel, data: this.arrLabel,
alwaysVisibleY: true alwaysVisibleY: true
}); });
@ -264,6 +267,7 @@ define([
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 160px;', menuStyle: 'min-width: 160px;',
editable: false, editable: false,
takeFocusOnClose: true,
data: [ data: [
{ displayValue: '1, 2, 3,...', value: Asc.c_oAscNumberingFormat.Decimal, maskExp: /[0-9]/, defValue: 1 }, { displayValue: '1, 2, 3,...', value: Asc.c_oAscNumberingFormat.Decimal, maskExp: /[0-9]/, defValue: 1 },
{ displayValue: 'a, b, c,...', value: Asc.c_oAscNumberingFormat.LowerLetter, maskExp: /[a-z]/, defValue: 'a' }, { displayValue: 'a, b, c,...', value: Asc.c_oAscNumberingFormat.LowerLetter, maskExp: /[a-z]/, defValue: 'a' },
@ -305,6 +309,7 @@ define([
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 160px;max-height:135px;', menuStyle: 'min-width: 160px;max-height:135px;',
editable: false, editable: false,
takeFocusOnClose: true,
disabled: true, disabled: true,
data: this._arrLevel data: this._arrLevel
}); });
@ -320,6 +325,7 @@ define([
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 160px;', menuStyle: 'min-width: 160px;',
editable: false, editable: false,
takeFocusOnClose: true,
disabled: true, disabled: true,
data: [ data: [
{ displayValue: '- (' + this.textHyphen + ')', value: '-' }, { displayValue: '- (' + this.textHyphen + ')', value: '-' },
@ -338,11 +344,18 @@ define([
this.lblExample = this.$window.find('#caption-label-example'); this.lblExample = this.$window.find('#caption-label-example');
this.focusManager.add([this.txtCaption, this.cmbPosition, this.cmbLabel, this.cmbNumbering, this.cmbChapter, this.cmbSeparator], '.form-control');
this.afterRender(); this.afterRender();
}, },
afterRender: function() { afterRender: function() {
this._setDefaults(this.props); this._setDefaults(this.props);
var me = this;
setTimeout(function(){
me.txtCaption.focus();
}, 100);
}, },
show: function() { show: function() {

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

@ -53,7 +53,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
contentWidth: 310, contentWidth: 310,
height: 392, height: 392,
toggleGroup: 'control-adv-settings-group', toggleGroup: 'control-adv-settings-group',
storageName: 'de-control-settings-adv-category' storageName: 'de-control-settings-adv-category',
focusManager: true
}, },
initialize : function(options) { initialize : function(options) {
@ -120,6 +121,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 120px;', menuStyle: 'min-width: 120px;',
editable: false, editable: false,
takeFocusOnClose: true,
data: [ data: [
{ displayValue: this.textBox, value: Asc.c_oAscSdtAppearance.Frame }, { displayValue: this.textBox, value: Asc.c_oAscSdtAppearance.Frame },
{ displayValue: this.textNone, value: Asc.c_oAscSdtAppearance.Hidden } { displayValue: this.textNone, value: Asc.c_oAscSdtAppearance.Hidden }
@ -168,7 +170,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
'<div style="width:90px;display: inline-block;vertical-align: middle; overflow: hidden; text-overflow: ellipsis;white-space: pre;margin-right: 5px;"><%= name %></div>', '<div style="width:90px;display: inline-block;vertical-align: middle; overflow: hidden; text-overflow: ellipsis;white-space: pre;margin-right: 5px;"><%= name %></div>',
'<div style="width:90px;display: inline-block;vertical-align: middle; overflow: hidden; text-overflow: ellipsis;white-space: pre;"><%= value %></div>', '<div style="width:90px;display: inline-block;vertical-align: middle; overflow: hidden; text-overflow: ellipsis;white-space: pre;"><%= value %></div>',
'</div>' '</div>'
].join('')) ].join('')),
tabindex: 1
}); });
this.list.on('item:select', _.bind(this.onSelectItem, this)); this.list.on('item:select', _.bind(this.onSelectItem, this));
@ -212,6 +215,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
menuStyle : 'min-width: 100%; max-height: 185px;', menuStyle : 'min-width: 100%; max-height: 185px;',
cls : 'input-group-nr', cls : 'input-group-nr',
editable : false, editable : false,
takeFocusOnClose: true,
data : data, data : data,
search: true, search: true,
scrollAlwaysVisible: true scrollAlwaysVisible: true
@ -224,7 +228,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
this.listFormats = new Common.UI.ListView({ this.listFormats = new Common.UI.ListView({
el: $('#control-settings-format'), el: $('#control-settings-format'),
store: new Common.UI.DataViewStore(), store: new Common.UI.DataViewStore(),
scrollAlwaysVisible: true scrollAlwaysVisible: true,
tabindex: 1
}); });
this.listFormats.on('item:select', _.bind(this.onSelectFormat, this)); this.listFormats.on('item:select', _.bind(this.onSelectFormat, this));
@ -345,9 +350,34 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
this.spnWidth.setDisabled(!checked); this.spnWidth.setDisabled(!checked);
}, this)); }, this));
// 0 tab
this.focusManager.add([this.txtName, this.txtTag, this.txtPlaceholder, this.cmbShow], '.form-control');
// 2 tab
this.focusManager.add([this.list], '.listview');
// 3 tab
this.focusManager.add([this.txtDate], '.form-control');
this.focusManager.add([this.listFormats], '.listview');
this.focusManager.add([this.cmbLang], '.form-control');
this.afterRender(); this.afterRender();
}, },
onCategoryClick: function(btn, index) {
Common.Views.AdvancedSettingsWindow.prototype.onCategoryClick.call(this, btn, index);
var me = this;
setTimeout(function(){
if (index==0) {
me.txtName.focus();
} else if (index==2) {
me.list.focus();
} else if (index==3)
me.txtDate.focus();
}, 100);
},
onColorsSelect: function(btn, color) { onColorsSelect: function(btn, color) {
var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a'); var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a');
clr_item.hasClass('selected') && clr_item.removeClass('selected'); clr_item.hasClass('selected') && clr_item.removeClass('selected');

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

@ -62,7 +62,8 @@ define([
contentWidth: 320, contentWidth: 320,
height : 380, height : 380,
toggleGroup : 'dropcap-adv-settings-group', toggleGroup : 'dropcap-adv-settings-group',
storageName: 'de-dropcap-settings-adv-category' storageName: 'de-dropcap-settings-adv-category',
focusManager: true
}, },
initialize : function(options) { initialize : function(options) {
@ -141,6 +142,7 @@ define([
el : $('#drop-advanced-input-bordersize'), el : $('#drop-advanced-input-bordersize'),
style : 'width: 90px;', style : 'width: 90px;',
store : new Backbone.Collection(), store : new Backbone.Collection(),
takeFocusOnClose: true,
data: [ data: [
{id: Common.UI.getId(), displayValue: this.txtNoBorders, value: 0, borderstyle: ''}, {id: Common.UI.getId(), displayValue: this.txtNoBorders, value: 0, borderstyle: ''},
{id: Common.UI.getId(), displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, offsety: 0}, {id: Common.UI.getId(), displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, offsety: 0},
@ -353,7 +355,8 @@ define([
menuStyle : 'min-width: 55px;max-height: 236px;', menuStyle : 'min-width: 55px;max-height: 236px;',
store : new Common.Collections.Fonts(), store : new Common.Collections.Fonts(),
recent : 0, recent : 0,
hint: this.tipFontName hint: this.tipFontName,
takeFocusOnClose: true
}) })
.on('selected', _.bind(function(combo, record) { .on('selected', _.bind(function(combo, record) {
if (me._changedProps) { if (me._changedProps) {
@ -418,6 +421,7 @@ define([
cls : 'input-group-nr', cls : 'input-group-nr',
menuStyle : 'min-width: 130px;', menuStyle : 'min-width: 130px;',
editable : false, editable : false,
takeFocusOnClose: true,
data : this._arrWidth data : this._arrWidth
}) })
.on('selected', _.bind(function(combo, record) { .on('selected', _.bind(function(combo, record) {
@ -457,6 +461,7 @@ define([
cls : 'input-group-nr', cls : 'input-group-nr',
menuStyle : 'min-width: 130px;', menuStyle : 'min-width: 130px;',
editable : false, editable : false,
takeFocusOnClose: true,
data : this._arrHeight data : this._arrHeight
}) })
.on('selected', _.bind(function(combo, record) { .on('selected', _.bind(function(combo, record) {
@ -539,7 +544,8 @@ define([
el : $('#frame-advanced-input-hposition'), el : $('#frame-advanced-input-hposition'),
cls : 'input-group-nr', cls : 'input-group-nr',
menuStyle : 'min-width: 130px;', menuStyle : 'min-width: 130px;',
data : this._arrHAlign data : this._arrHAlign,
takeFocusOnClose: true
}) })
.on('changed:after', _.bind(function(combo, record) { .on('changed:after', _.bind(function(combo, record) {
if (me._changedProps) { if (me._changedProps) {
@ -564,7 +570,8 @@ define([
cls : 'input-group-nr', cls : 'input-group-nr',
menuStyle : 'min-width: 95px;', menuStyle : 'min-width: 95px;',
data : this._arrHRelative, data : this._arrHRelative,
editable : false editable : false,
takeFocusOnClose: true
}) })
.on('selected', _.bind(function(combo, record) { .on('selected', _.bind(function(combo, record) {
if (me._changedProps) { if (me._changedProps) {
@ -582,7 +589,8 @@ define([
el : $('#frame-advanced-input-vposition'), el : $('#frame-advanced-input-vposition'),
cls : 'input-group-nr', cls : 'input-group-nr',
menuStyle : 'min-width: 130px;', menuStyle : 'min-width: 130px;',
data : this._arrVAlign data : this._arrVAlign,
takeFocusOnClose: true
}) })
.on('changed:after', _.bind(function(combo, record) { .on('changed:after', _.bind(function(combo, record) {
if (me._changedProps) { if (me._changedProps) {
@ -607,7 +615,8 @@ define([
cls : 'input-group-nr', cls : 'input-group-nr',
menuStyle : 'min-width: 95px;', menuStyle : 'min-width: 95px;',
data : this._arrVRelative, data : this._arrVRelative,
editable : false editable : false,
takeFocusOnClose: true
}) })
.on('selected', _.bind(function(combo, record) { .on('selected', _.bind(function(combo, record) {
if (me._changedProps) { if (me._changedProps) {
@ -632,6 +641,15 @@ define([
this.on('show', _.bind(this.onShowDialog, this)); this.on('show', _.bind(this.onShowDialog, this));
this.afterRender(); this.afterRender();
// 0 tab
this.focusManager.add([this.cmbWidth, this.spnWidth, this.cmbHeight, this.spnHeight, this.cmbHAlign, this.cmbHRelative, this.spnX,
this.cmbVAlign, this.cmbVRelative, this.spnY], '.form-control');
// 1 tab
this.focusManager.add([this.cmbFonts, this.spnRowHeight, this.numDistance], '.form-control');
// 3 tab
this.focusManager.add([this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight], '.form-control');
}, },
afterRender: function() { afterRender: function() {
@ -687,6 +705,20 @@ define([
} }
}, },
onCategoryClick: function(btn, index) {
Common.Views.AdvancedSettingsWindow.prototype.onCategoryClick.call(this, btn, index);
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();
}, 100);
},
getSettings: function() { getSettings: function() {
if (this.ChangedBorders === null) { if (this.ChangedBorders === null) {
this._changedProps.put_Borders(this.Borders); this._changedProps.put_Borders(this.Borders);