pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 01:13:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

[SSE] Fix focus in rules dialog

Browse Source
This commit is contained in:
Julia Radzhabova
2023-09-14 21:55:17 +03:00
parent 1d257113ac
commit b074eaac1e
6 changed files with 59 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/common/main/lib/component/ComboBoxDataView.js
View File

@ -156,7 +156,7 @@ define([
this.dataPicker = new Common.UI.DataView({
el: el.find('#' + id + '-data-menu'),
parentMenu: menu,
outerMenu: {menu: menu, index: options.additionalItems ? options.additionalItems.length : 0},
outerMenu: {menu: menu, index: options.additionalItems ? options.additionalItems.length : 0, focusOnShow: !options.additionalItems},
store: options.store,
itemTemplate: options.itemTemplate
});
@ -187,7 +187,7 @@ define([
if (this.updateFormControl)
this.updateFormControl.call(this, record);
if ( this.disabled || this.isSuspendEvents) return;
this.trigger('item:click', picker, view, record);
this.trigger('item:click', this, picker, view, record);
},
selectRecord: function(record) {

5
apps/common/main/lib/component/DataView.js
View File

@ -381,7 +381,8 @@ define([
this.parentMenu.on('show:before', function(menu) { me.deselectAll(); });
this.parentMenu.on('show:after', function(menu, e) {
if (e && (menu.el !== e.target)) return;
if (me.showLast) me.showLastSelected();
if (me.showLast) me.showLastSelected();
if (me.outerMenu && (me.outerMenu.focusOnShow===false)) return;
Common.NotificationCenter.trigger('dataview:focus');
_.delay(function() {
menu.cmpEl.find('.dataview').focus();
@ -482,6 +483,7 @@ define([
_.each(this.store.where({selected: true}), function(record){
record.set({selected: false});
});
this.lastSelectedRec = null;
if (suspendEvents)
this.resumeEvents();
@ -1187,6 +1189,7 @@ define([
record.set({selected: false});
});
this.cmpEl.find('.item.selected').removeClass('selected');
this.lastSelectedRec = null;
if (suspendEvents)
this.resumeEvents();

8
apps/documenteditor/main/app/view/ImageSettingsAdvanced.js
View File

@ -2045,7 +2045,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
}
},
onSelectBeginStyle: function(picker, view, record, e){
onSelectBeginStyle: function(combo, picker, view, record, e){
if (this._changedShapeProps) {
if (this._changedShapeProps.get_stroke()===null)
this._changedShapeProps.put_stroke(new Asc.asc_CStroke());
@ -2057,7 +2057,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
this._updateSizeArr(this.btnBeginSize, this.mnuBeginSizePicker, record, this._beginSizeIdx);
},
onSelectBeginSize: function(picker, view, record, e){
onSelectBeginSize: function(combo, picker, view, record, e){
if (this._changedShapeProps) {
if (this._changedShapeProps.get_stroke()===null)
this._changedShapeProps.put_stroke(new Asc.asc_CStroke());
@ -2067,7 +2067,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
this._beginSizeIdx = record.get('value');
},
onSelectEndStyle: function(picker, view, record, e){
onSelectEndStyle: function(combo, picker, view, record, e){
if (this._changedShapeProps) {
if (this._changedShapeProps.get_stroke()===null)
this._changedShapeProps.put_stroke(new Asc.asc_CStroke());
@ -2079,7 +2079,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
this._updateSizeArr(this.btnEndSize, this.mnuEndSizePicker, record, this._endSizeIdx);
},
onSelectEndSize: function(picker, view, record, e){
onSelectEndSize: function(combo, picker, view, record, e){
if (this._changedShapeProps) {
if (this._changedShapeProps.get_stroke()===null)
this._changedShapeProps.put_stroke(new Asc.asc_CStroke());

8
apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
View File

@ -848,7 +848,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
}
},
onSelectBeginStyle: function(picker, view, record){
onSelectBeginStyle: function(combo, picker, view, record){
if (this._changedProps) {
if (this._changedProps.get_stroke()===null)
this._changedProps.put_stroke(new Asc.asc_CStroke());
@ -860,7 +860,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
this._updateSizeArr(this.btnBeginSize, this.mnuBeginSizePicker, record, this._beginSizeIdx);
},
onSelectBeginSize: function(picker, view, record){
onSelectBeginSize: function(combo, picker, view, record){
if (this._changedProps) {
if (this._changedProps.get_stroke()===null)
this._changedProps.put_stroke(new Asc.asc_CStroke());
@ -870,7 +870,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
this._beginSizeIdx = record.get('value');
},
onSelectEndStyle: function(picker, view, record){
onSelectEndStyle: function(combo, picker, view, record){
if (this._changedProps) {
if (this._changedProps.get_stroke()===null)
this._changedProps.put_stroke(new Asc.asc_CStroke());
@ -882,7 +882,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
this._updateSizeArr(this.btnEndSize, this.mnuEndSizePicker, record, this._endSizeIdx);
},
onSelectEndSize: function(picker, view, record){
onSelectEndSize: function(combo, picker, view, record){
if (this._changedProps) {
if (this._changedProps.get_stroke()===null)
this._changedProps.put_stroke(new Asc.asc_CStroke());

89
apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
View File

@ -661,41 +661,40 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
var i = this.iconsControls.length;
this.iconsControls.push({});
var combo = new Common.UI.ComboBox({
var combo = new Common.UI.ComboBoxDataView({
el: $('#format-rules-combo-icon-' + (i+1)),
type : i,
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" data-toggle="dropdown">',
additionalAlign: this.menuAddAlign,
additionalItems: [{ caption: this.txtNoCellIcon, checkable: true, allowDepress: false, toggleGroup: 'no-cell-icons-' + (i+1) }],
cls: 'move-focus',
menuStyle: 'min-width: 105px;',
dataViewStyle: 'width: 217px; margin: 0 5px;',
store: new Common.UI.DataViewStore(me.iconsList),
formTemplate: _.template([
'<div class="form-control image" style="display: block;width: 85px;">',
'<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;padding-top: 2px;background-repeat: no-repeat; background-position: 27px center;white-space:nowrap;"></div>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret"></span></button>',
'</div>'
].join(''))
});
var menu = (new Common.UI.Menu({
style: 'min-width: 105px;',
additionalAlign: this.menuAddAlign,
items: [
{ caption: this.txtNoCellIcon, checkable: true, allowDepress: false, toggleGroup: 'no-cell-icons-' + (i+1) },
{ template: _.template('<div id="format-rules-combo-menu-icon-' + (i+1) + '" style="width: 217px; margin: 0 5px;"></div>') }
]
})).render($('#format-rules-combo-icon-' + (i+1)));
var picker = new Common.UI.DataView({
el: $('#format-rules-combo-menu-icon-' + (i+1)),
parentMenu: menu,
outerMenu: {menu: menu, index: 1},
store: new Common.UI.DataViewStore(me.iconsList),
].join('')),
itemTemplate: _.template('<img id="<%= id %>" class="item-icon" src="<%= imgUrl %>" style="width: 16px; height: 16px;">'),
type : i
takeFocusOnClose: true,
updateFormControl: function(record) {
var formcontrol = $(this.el).find('.form-control > div');
formcontrol.css('background-image', record ? 'url(' + record.get('imgUrl') + ')' : '');
formcontrol.text(record ? '' : me.txtNoCellIcon);
}
});
picker.on('item:click', _.bind(this.onSelectIcon, this, combo, menu.items[0]));
menu.setInnerMenu([{menu: picker, index: 1}]);
var picker = combo.getPicker(),
menu = combo.getMenu();
combo.on('item:click', _.bind(this.onSelectIcon, this));
menu.items[0].on('toggle', _.bind(this.onSelectNoIcon, this, combo, picker));
menu.on('show:before', function() {
if (!menu.items[0].isChecked()) {
var rec = picker.store.findWhere({value: picker.currentIconValue});
rec && picker.selectRecord(rec, true);
}
}).on('hide:after', function() {
picker.deselectAll(true);
});
Common.UI.FocusManager.add(this, combo);
this.iconsControls[i].cmbIcons = combo;
this.iconsControls[i].pickerIcons = picker;
this.iconsControls[i].itemNoIcons = menu.items[0];
@ -1463,7 +1462,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
icon.asc_setIconId(0);
this.iconsProps.isReverse ? icons.unshift(icon) : icons.push(icon);
} else {
var icon = controls.pickerIcons.getSelectedRec().get('value')+1;
var icon = controls.pickerIcons.currentIconValue+1;
for (var k=0; k<this.collectionPresets.length; k++) {
var items = this.collectionPresets.at(k).get('icons');
for (var j=0; j<items.length; j++) {
@ -1898,9 +1897,9 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
for (var i=0; i<iconsIndexes.length; i++) {
var controls = arr[isReverse ? len-i-1 : i];
var rec = (iconsIndexes[i]==-1) ? null : controls.pickerIcons.store.findWhere({value: iconsIndexes[i]-1});
rec ? controls.pickerIcons.selectRecord(rec, true) : controls.pickerIcons.deselectAll(true);
controls.cmbIcons.selectRecord(rec);
controls.pickerIcons.currentIconValue = rec ? rec.get('value') : -1;
controls.itemNoIcons.setChecked(!rec, true);
this.selectIconItem(controls.cmbIcons, rec);
}
this.fillIconsLabels();
},
@ -1924,38 +1923,32 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
for (var i=0; i<len/2; i++) {
var controls1 = arr[i],
controls2 = arr[len-i-1];
var icon1 = controls1.itemNoIcons.isChecked() ? -1 : controls1.pickerIcons.getSelectedRec().get('value'),
icon2 = controls2.itemNoIcons.isChecked() ? -1 : controls2.pickerIcons.getSelectedRec().get('value');
var icon1 = controls1.itemNoIcons.isChecked() ? -1 : controls1.pickerIcons.currentIconValue,
icon2 = controls2.itemNoIcons.isChecked() ? -1 : controls2.pickerIcons.currentIconValue;
var rec = controls1.pickerIcons.store.findWhere({value: icon2});
rec ? controls1.pickerIcons.selectRecord(rec, true) : controls1.pickerIcons.deselectAll(true);
controls1.cmbIcons.selectRecord(rec);
controls1.pickerIcons.currentIconValue = rec ? rec.get('value') : -1;
controls1.itemNoIcons.setChecked(!rec, true);
this.selectIconItem(controls1.cmbIcons, rec);
rec = controls2.pickerIcons.store.findWhere({value: icon1});
rec ? controls2.pickerIcons.selectRecord(rec, true) : controls2.pickerIcons.deselectAll(true);
controls2.cmbIcons.selectRecord(rec);
controls2.pickerIcons.currentIconValue = rec ? rec.get('value') : -1;
controls2.itemNoIcons.setChecked(!rec, true);
this.selectIconItem(controls2.cmbIcons, rec);
}
},
onSelectIcon: function(combo, noIconItem, picker, view, record) {
this.selectIconItem(combo, record);
noIconItem.setChecked(false, true);
onSelectIcon: function(combo, picker, view, record) {
picker.currentIconValue = record.get('value');
combo.getMenu().items[0].setChecked(false, true);
this.cmbIconsPresets.setValue(this.textCustom);
},
onSelectNoIcon: function(combo, picker, item, state) {
if (!state) return;
this.selectIconItem(combo);
picker.deselectAll(true);
combo.selectRecord(null);
this.cmbIconsPresets.setValue(this.textCustom);
},
selectIconItem: function(combo, record) {
var formcontrol = $(combo.el).find('.form-control > div');
formcontrol.css('background-image', record ? 'url(' + record.get('imgUrl') + ')' : '');
formcontrol.text(record ? '' : this.txtNoCellIcon);
},
isRangeValid: function() {
var rec = this.ruleStore.findWhere({index: this.cmbCategory.getValue()}),
res;

8
apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
View File

@ -805,7 +805,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
}
},
onSelectBeginStyle: function(picker, view, record){
onSelectBeginStyle: function(combo, picker, view, record){
if (this._changedProps) {
if (this._changedProps.asc_getShapeProperties()===null || this._changedProps.asc_getShapeProperties()===undefined)
this._changedProps.asc_putShapeProperties(new Asc.asc_CShapeProperty());
@ -820,7 +820,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
this._updateSizeArr(this.btnBeginSize, this.mnuBeginSizePicker, record, this._beginSizeIdx);
},
onSelectBeginSize: function(picker, view, record){
onSelectBeginSize: function(combo, picker, view, record){
if (this._changedProps) {
if (this._changedProps.asc_getShapeProperties()===null || this._changedProps.asc_getShapeProperties()===undefined)
this._changedProps.asc_putShapeProperties(new Asc.asc_CShapeProperty());
@ -833,7 +833,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
this._beginSizeIdx = record.get('value');
},
onSelectEndStyle: function(picker, view, record){
onSelectEndStyle: function(combo, picker, view, record){
if (this._changedProps) {
if (this._changedProps.asc_getShapeProperties()===null || this._changedProps.asc_getShapeProperties()===undefined)
this._changedProps.asc_putShapeProperties(new Asc.asc_CShapeProperty());
@ -848,7 +848,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
this._updateSizeArr(this.btnEndSize, this.mnuEndSizePicker, record, this._endSizeIdx);
},
onSelectEndSize: function(picker, view, record){
onSelectEndSize: function(combo, picker, view, record){
if (this._changedProps) {
if (this._changedProps.asc_getShapeProperties()===null || this._changedProps.asc_getShapeProperties()===undefined)
this._changedProps.asc_putShapeProperties(new Asc.asc_CShapeProperty());