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

Merge pull request #1187 from ONLYOFFICE/fix/menu-focus

Browse source 
Fix/menu focus
This commit is contained in:
Julia Radzhabova 2021-09-20 23:30:37 +03:00 committed by GitHub
parent d846aa49c9 e5a35881f8
commit f1067b9968
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 241 additions and 200 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -59,8 +59,7 @@ define([
el: this.cmpEl.find('#' + this.menu.id + '-color-menu'),
transparent: this.options.transparent,
value: color,
colors: colors,
parentButton: this
colors: colors
});
this.colorPicker.on('select', _.bind(this.onColorSelect, this));
this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
@ -69,6 +68,7 @@ define([
this.colorAuto = this.cmpEl.find('#' + this.menu.id + '-color-auto > a');
(color == 'auto') && this.setAutoColor(true);
}
this.initInnerMenu();
}
return this.colorPicker;
},
@ -105,7 +105,7 @@ define([
}
])
});
this.colorPicker && (this.colorPicker.parentButton = menu);
this.initInnerMenu();
var me = this;
menu.on('keydown:before', _.bind(this.onBeforeKeyDown, this));
menu.on('show:after', function(menu) {
@ -123,6 +123,14 @@ define([
return this.menu;
},
initInnerMenu: function() {
if (!this.colorPicker || typeof this.menu !== 'object') return;
var index = (this.options.additionalItems || []).length + (this.options.auto ? 2 : 0);
this.colorPicker.outerMenu = {menu: this.menu, index: index};
this.menu.setInnerMenu([{menu: this.colorPicker, index: index}]);
},
setMenu: function (m) {
m = m || this.getMenu();
Common.UI.Button.prototype.setMenu.call(this, m);
@ -174,49 +182,12 @@ define([
$('button', this.cmpEl).click();
return false;
}
if (e.keyCode == Common.UI.Keys.RETURN) {
var li = $(e.target).closest('li');
if (li.length>0) {
e.preventDefault();
e.stopPropagation();
li.click();
}
Common.UI.Menu.Manager.hideAll();
} else if (e.namespace!=="after.bs.dropdown" && (e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.UP)) {
var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', menu.$el).find('> a');
if (!$items.length) return;
var index = $items.index($items.filter(':focus')),
me = this,
pickerIndex = $items.length-1 ;
if (e.keyCode == Common.UI.Keys.DOWN && (index==pickerIndex-1 || pickerIndex==0) || e.keyCode == Common.UI.Keys.UP && index==pickerIndex) {
e.preventDefault();
e.stopPropagation();
_.delay(function() {
me.focusInner(e);
}, 10);
}
}
},
isMenuOpen: function() {
return this.cmpEl.hasClass('open');
},
focusInner: function(e) {
if (!this.colorPicker) return;
this.colorPicker.focus(e.keyCode == Common.UI.Keys.DOWN ? 'first' : 'last');
},
focusOuter: function(e) {
if (!this.menu) return;
var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', this.menu.$el).find('> a');
if (!$items.length) return;
$items.eq(e.keyCode == Common.UI.Keys.UP ? $items.length-2 : $items.length-1).focus();
},
textNewColor: 'Add New Custom Color',
textAutoColor: 'Automatic'

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

@ -114,20 +114,17 @@ define([
offset: [0, 3],
items: [
{template: _.template('<div class="menu-picker-container"></div>')}
]
].concat(this.options.additionalMenuItems != null ? this.options.additionalMenuItems : [])
}),
dataHint: this.options.dataHint,
dataHintDirection: this.options.dataHintDirection,
dataHintOffset: this.options.dataHintOffset
});
if (this.options.additionalMenuItems != null) {
this.openButton.menu.items = this.openButton.menu.items.concat(this.options.additionalMenuItems)
}
this.menuPicker = new Common.UI.DataView({
cls: 'menu-picker',
parentMenu: this.openButton.menu,
outerMenu: this.options.additionalMenuItems ? {menu: this.openButton.menu, index: 0} : undefined,
restoreHeight: this.menuMaxHeight,
style: 'max-height: '+this.menuMaxHeight+'px;',
enableKeyEvents: this.options.enableKeyEvents,
@ -143,6 +140,10 @@ define([
delayRenderTips: this.delayRenderTips
});
if (this.options.additionalMenuItems != null) {
this.openButton.menu.setInnerMenu([{menu: this.menuPicker, index: 0}]);
}
// Handle resize
setInterval(_.bind(this.checkSize, this), 500);

79
apps/common/main/lib/component/DataView.js
View file

@ -262,6 +262,7 @@ define([
me.multiSelect = me.options.multiSelect;
me.handleSelect = me.options.handleSelect;
me.parentMenu = me.options.parentMenu;
me.outerMenu = me.options.outerMenu;
me.enableKeyEvents= me.options.enableKeyEvents;
me.useBSKeydown = me.options.useBSKeydown; // only with enableKeyEvents && parentMenu
me.showLast = me.options.showLast;
@ -698,17 +699,27 @@ define([
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else if (data.keyCode==Common.UI.Keys.UP) {
while (idx===undefined) {
topIdx--;
if (topIdx<0) topIdx = this._layoutParams.rows-1;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
if (topIdx==0 && this.outerMenu && this.outerMenu.menu) {
this.deselectAll(true);
this.outerMenu.menu.focusOuter && this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
return;
} else
while (idx===undefined) {
topIdx--;
if (topIdx<0) topIdx = this._layoutParams.rows-1;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else {
while (idx===undefined) {
topIdx++;
if (topIdx>this._layoutParams.rows-1) topIdx = 0;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
if (topIdx==this._layoutParams.rows-1 && this.outerMenu && this.outerMenu.menu) {
this.deselectAll(true);
this.outerMenu.menu.focusOuter && this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
return;
} else
while (idx===undefined) {
topIdx++;
if (topIdx>this._layoutParams.rows-1) topIdx = 0;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
}
} else {
idx = (data.keyCode==Common.UI.Keys.UP || data.keyCode==Common.UI.Keys.LEFT)
@ -820,8 +831,22 @@ define([
this._layoutParams = undefined;
},
focus: function() {
this.cmpEl && this.cmpEl.find('.dataview').focus();
focus: function(index) {
$(this.el).find('.inner').addBack().filter('.inner').focus();
if (typeof index == 'string') {
if (index == 'first') {
this.selectByIndex(0, true);
} else if (index == 'last') {
if (this._layoutParams === undefined)
this.fillIndexesArray();
this.selectByIndex(this._layoutParams.itemsIndexes[this._layoutParams.rows-1][0], true);
}
} else if (index !== undefined)
this.selectByIndex(index, true);
},
focusInner: function(e) {
this.focus(e.keyCode == Common.UI.Keys.DOWN ? 'first' : 'last');
}
});
@ -1146,17 +1171,27 @@ define([
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else if (data.keyCode==Common.UI.Keys.UP) {
while (idx===undefined) {
topIdx--;
if (topIdx<0) topIdx = this._layoutParams.rows-1;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
if (topIdx==0 && this.outerMenu && this.outerMenu.menu) {
this.deselectAll(true);
this.outerMenu.menu.focusOuter && this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
return;
} else
while (idx===undefined) {
topIdx--;
if (topIdx<0) topIdx = this._layoutParams.rows-1;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else {
while (idx===undefined) {
topIdx++;
if (topIdx>this._layoutParams.rows-1) topIdx = 0;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
if (topIdx==this._layoutParams.rows-1 && this.outerMenu && this.outerMenu.menu) {
this.deselectAll(true);
this.outerMenu.menu.focusOuter && this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
return;
} else
while (idx===undefined) {
topIdx++;
if (topIdx>this._layoutParams.rows-1) topIdx = 0;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
}
} else {
idx = (data.keyCode==Common.UI.Keys.UP || data.keyCode==Common.UI.Keys.LEFT)

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

@ -252,7 +252,7 @@ Common.UI.HintManager = new(function() {
var _getHints = function() {
var docH = Common.Utils.innerHeight() - 20,
docW = Common.Utils.innerWidth() - 20,
docW = Common.Utils.innerWidth(),
topSection = _currentLevel !== 0 && $(_currentSection).length > 0 ? $(_currentSection).offset().top : 0,
bottomSection = _currentLevel !== 0 && $(_currentSection).length > 0 ? topSection + $(_currentSection).height() : docH;

97
apps/common/main/lib/component/Menu.js
View file

@ -171,6 +171,7 @@ define([
this.menuAlignEl = this.options.menuAlignEl;
this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
this.search = this.options.search;
this.outerMenu = this.options.outerMenu;
if (this.options.restoreHeight) {
this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000);
@ -267,6 +268,8 @@ define([
this.parentEl.on('hide.bs.dropdown', _.bind(me.onBeforeHideMenu, me));
this.parentEl.on('hidden.bs.dropdown', _.bind(me.onAfterHideMenu, me));
this.parentEl.on('keydown.after.bs.dropdown', _.bind(me.onAfterKeydownMenu, me));
this.parentEl.on('keydown.before.bs.dropdown', _.bind(me.onBeforeKeydownMenu, me));
this.options.innerMenus && this.on('keydown:before', _.bind(me.onBeforeKeyDown, me));
menuRoot.hover(
function(e) { me.isOver = true;},
@ -453,6 +456,21 @@ define([
}
},
onBeforeKeydownMenu: function(e) {
if (e.isDefaultPrevented() || !(this.outerMenu && this.outerMenu.menu))
return;
if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) {
var $items = this.menuRoot.find('> li').find('> a'),
index = $items.index($items.filter(':focus'));
if (e.keyCode==Common.UI.Keys.UP && index==0 || e.keyCode == Common.UI.Keys.DOWN && index==$items.length-1) {
this.outerMenu.menu.focusOuter(e, this.outerMenu.index);
e.preventDefault();
e.stopPropagation();
}
}
},
selectCandidate: function() {
var index = this._search.index || 0,
re = new RegExp('^' + ((this._search.full) ? this._search.text : this._search.char), 'i'),
@ -491,6 +509,85 @@ define([
}
},
onBeforeKeyDown: function(menu, e) {
if (e.keyCode == Common.UI.Keys.RETURN) {
var li = $(e.target).closest('li');
if (li.length>0) {
e.preventDefault();
e.stopPropagation();
li.click();
}
Common.UI.Menu.Manager.hideAll();
} else if (e.namespace!=="after.bs.dropdown" && (e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.UP)) {
if ( this.menuRoot.length<1 || $(e.target).closest('ul[role=menu]').get(0) !== this.menuRoot.get(0)) return;
var innerMenu = this.findInnerMenu(e.keyCode);
if (innerMenu && innerMenu.focusInner) {
e.preventDefault();
e.stopPropagation();
_.delay(function() {
innerMenu.focusInner(e);
}, 10);
}
}
},
setInnerMenu: function(menus) {
if (this.options.innerMenus || !menus) return;
this.options.innerMenus = menus;
this.rendered && this.on('keydown:before', _.bind(this.onBeforeKeyDown, this));
},
findInnerMenu: function(direction, index, findOuter) {
if (!this.options.innerMenus) return;
var $allItems = $('> li', this.menuRoot),
$liItems = $('> li:not(.divider):not(.disabled):visible', this.menuRoot),
length = $liItems.length;
if (!length) return;
var step = 0;
while (step<length) {
var focusedIndex = (index!==undefined) ? $liItems.index($allItems.eq(index)) : $liItems.index($liItems.find('> a').filter(':focus').parent());
var checkedIndex = (direction == Common.UI.Keys.DOWN) ? (focusedIndex<length-1 ? focusedIndex+1 : 0) : (focusedIndex>0 ? focusedIndex-1 : length-1),
checkedItem = $liItems.eq(checkedIndex);
index = $allItems.index(checkedItem);
for (var i=0; i<this.options.innerMenus.length; i++) {
var item = this.options.innerMenus[i];
if (item && item.menu && item.index==index) {
return item.menu;
}
}
if (checkedItem.find('> a').length>0)
return findOuter ? checkedItem : undefined;
step++;
}
},
focusInner: function(e) {
if (e.keyCode == Common.UI.Keys.UP)
this.items[this.items.length-1].cmpEl.find('> a').focus();
else
this.items[0].cmpEl.find('> a').focus();
},
focusOuter: function(e, index) {
var innerMenu = this.findInnerMenu(e.keyCode, index, true);
if (innerMenu && innerMenu.focusInner) {
_.delay(function() {
innerMenu.focusInner(e);
}, 10);
} else if (innerMenu) {
innerMenu.find('> a').focus();
} else {
var $items = $('> li:not(.divider):not(.disabled):visible', this.menuRoot).find('> a'),
length = $items.length;
length && $items.eq(e.keyCode == Common.UI.Keys.UP ? (index<0 ? length-1 : index) : (index>=length-1 ? 0 : index+1)).focus();
}
},
onItemClick: function(item, e) {
if (!item.menu) this.isOver = false;
if (item.options.stopPropagation) {

3
apps/common/main/lib/component/MenuItem.js
View file

@ -216,6 +216,9 @@ define([
});
}
if (this.cls)
el.addClass(this.cls);
if (this.disabled)
el.toggleClass('disabled', this.disabled);

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

@ -105,7 +105,7 @@ define([
this.colors = me.options.colors || this.generateColorData(me.options.themecolors, me.options.effects, me.options.standardcolors, me.options.transparent);
this.enableKeyEvents= me.options.enableKeyEvents;
this.tabindex = me.options.tabindex || 0;
this.parentButton = me.options.parentButton;
this.outerMenu = me.options.outerMenu;
this.lastSelectedIdx = -1;
me.colorItems = [];
@ -516,8 +516,8 @@ define([
var rec = this.getSelectedColor();
if (data.keyCode==Common.UI.Keys.RETURN) {
rec && this.selectByIndex(rec.index);
if (this.parentButton && this.parentButton.menu)
this.parentButton.menu.hide();
if (this.outerMenu && this.outerMenu.menu)
this.outerMenu.menu.hide();
} else {
var idx = rec ? rec.index : -1;
if (idx<0) {
@ -544,9 +544,9 @@ define([
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else if (data.keyCode==Common.UI.Keys.UP) {
if (topIdx==0 && this.parentButton) {
if (topIdx==0 && this.outerMenu && this.outerMenu.menu) {
this.clearSelection(true);
this.parentButton.focusOuter(data);
this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
} else
while (idx===undefined) {
topIdx--;
@ -554,9 +554,9 @@ define([
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else {
if (topIdx==this._layoutParams.rows-1 && this.parentButton) {
if (topIdx==this._layoutParams.rows-1 && this.outerMenu && this.outerMenu.menu) {
this.clearSelection(true);
this.parentButton.focusOuter(data);
this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
} else
while (idx===undefined) {
topIdx++;
@ -635,6 +635,10 @@ define([
this.selectByIndex(index, true);
},
focusInner: function(e) {
this.focus(e.keyCode == Common.UI.Keys.DOWN ? 'first' : 'last');
},
textThemeColors : 'Theme Colors',
textStandartColors : 'Standart Colors'
}, Common.UI.ThemeColorPalette || {}));

8
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -357,8 +357,7 @@ define([
Common.Gateway.on('insertimage', _.bind(this.insertImage, this));
Common.Gateway.on('setmailmergerecipients', _.bind(this.setMailMergeRecipients, this));
$('#id-toolbar-menu-new-control-color').on('click', _.bind(this.onNewControlsColor, this));
$('#id-save-style-plus, #id-save-style-link', toolbar.$el).on('click', this.onMenuSaveStyle.bind(this));
toolbar.listStylesAdditionalMenuItem.on('click', this.onMenuSaveStyle.bind(this));
this.onSetupCopyStyleButton();
this.onBtnChangeState('undo:disabled', toolbar.btnUndo, toolbar.btnUndo.isDisabled());
@ -2180,10 +2179,13 @@ define([
}
},
onInsertPageNumberClick: function(picker, item, record) {
onInsertPageNumberClick: function(picker, item, record, e) {
if (this.api)
this.api.put_PageNum(record.get('data').type, record.get('data').subtype);
if (e.type !== 'click')
this.toolbar.btnEditHeader.menu.hide();
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
Common.component.Analytics.trackEvent('ToolBar', 'Page Number');
},

37
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -750,7 +750,7 @@ define([
{
caption: this.mniHighlightControls,
value: 'highlight',
menu: new Common.UI.Menu({
menu: this.mnuHighlightControls = new Common.UI.Menu({
menuAlign : 'tl-tr',
items: [
this.mnuNoControlsColor = new Common.UI.MenuItem({
@ -760,7 +760,10 @@ define([
}),
{caption: '--'},
{template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 169px; height: 94px; margin: 10px;"></div>')},
{template: _.template('<a id="id-toolbar-menu-new-control-color" style="padding-left:12px;">' + this.textNewColor + '</a>')}
{
id: 'id-toolbar-menu-new-control-color',
template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>')
}
]
})
}
@ -1283,11 +1286,9 @@ define([
this.paragraphControls.push(this.cmbFontName);
this.listStylesAdditionalMenuItem = new Common.UI.MenuItem({
template: _.template(
'<div id="id-save-style-container" class = "save-style-container">' +
'<span id="id-save-style-plus" class="plus img-commonctrl" ></span>' +
'<label id="id-save-style-link" class="save-style-link" >' + me.textStyleMenuNew + '</label>' +
'</div>')
cls: 'save-style-container',
iconCls: 'menu__icon btn-zoomup',
caption: me.textStyleMenuNew
});
this.listStyles = new Common.UI.ComboDataView({
@ -1297,7 +1298,7 @@ define([
// hint : this.tipParagraphStyle,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-16, 0',
dataHintOffset: '-16, -4',
enableKeyEvents: true,
additionalMenuItems: [this.listStylesAdditionalMenuItem],
beforeOpenHandler: function (e) {
@ -2011,6 +2012,7 @@ define([
this.mnuMarkersPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-markers'),
parentMenu: this.btnMarkers.menu,
outerMenu: {menu: this.btnMarkers.menu, index: 0},
restoreHeight: 138,
allowScrollbar: false,
store: new Common.UI.DataViewStore([
@ -2026,12 +2028,14 @@ define([
]),
itemTemplate: _.template('<div id="<%= id %>" class="item-markerlist"></div>')
});
this.btnMarkers.menu.setInnerMenu([{menu: this.mnuMarkersPicker, index: 0}]);
_conf && this.mnuMarkersPicker.selectByIndex(_conf.index, true);
_conf = this.mnuNumbersPicker.conf;
this.mnuNumbersPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-numbering'),
parentMenu: this.btnNumbers.menu,
outerMenu: {menu: this.btnNumbers.menu, index: 0},
restoreHeight: 92,
allowScrollbar: false,
store: new Common.UI.DataViewStore([
@ -2046,12 +2050,14 @@ define([
]),
itemTemplate: _.template('<div id="<%= id %>" class="item-multilevellist"></div>')
});
this.btnNumbers.menu.setInnerMenu([{menu: this.mnuNumbersPicker, index: 0}]);
_conf && this.mnuNumbersPicker.selectByIndex(_conf.index, true);
_conf = this.mnuMultilevelPicker.conf;
this.mnuMultilevelPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-multilevels'),
parentMenu: this.btnMultilevels.menu,
outerMenu: {menu: this.btnMultilevels.menu, index: 0},
restoreHeight: 92,
allowScrollbar: false,
store: new Common.UI.DataViewStore([
@ -2062,15 +2068,18 @@ define([
]),
itemTemplate: _.template('<div id="<%= id %>" class="item-multilevellist"></div>')
});
this.btnMultilevels.menu.setInnerMenu([{menu: this.mnuMultilevelPicker, index: 0}]);
_conf && this.mnuMultilevelPicker.selectByIndex(_conf.index, true);
_conf = this.mnuPageNumberPosPicker ? this.mnuPageNumberPosPicker.conf : undefined;
this.mnuPageNumberPosPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-pageposition'),
allowScrollbar: false,
parentMenu: this.mnuInsertPageNum.menu,
outerMenu: {menu: this.mnuInsertPageNum.menu, index: 0},
showLast: false,
store: new Common.UI.DataViewStore([
{
allowSelected: false,
iconname: 'page-number-top-left',
data: {
type: c_pageNumPosition.PAGE_NUM_POSITION_TOP,
@ -2078,7 +2087,6 @@ define([
}
},
{
allowSelected: false,
iconname: 'page-number-top-center',
data: {
type: c_pageNumPosition.PAGE_NUM_POSITION_TOP,
@ -2086,7 +2094,6 @@ define([
}
},
{
allowSelected: false,
iconname: 'page-number-top-right',
data: {
type: c_pageNumPosition.PAGE_NUM_POSITION_TOP,
@ -2094,7 +2101,6 @@ define([
}
},
{
allowSelected: false,
iconname: 'page-number-bottom-left',
data: {
type: c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM,
@ -2102,7 +2108,6 @@ define([
}
},
{
allowSelected: false,
iconname: 'page-number-bottom-center',
data: {
type: c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM,
@ -2110,7 +2115,6 @@ define([
}
},
{
allowSelected: false,
iconname: 'page-number-bottom-right',
data: {
type: c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM,
@ -2121,6 +2125,7 @@ define([
itemTemplate: _.template('<div id="<%= id %>" class="item-pagenumber options__icon options__icon-huge <%= iconname %>"></div>')
});
_conf && this.mnuPageNumberPosPicker.setDisabled(_conf.disabled);
this.mnuInsertPageNum.menu.setInnerMenu([{menu: this.mnuPageNumberPosPicker, index: 0}]);
this.mnuTablePicker = new Common.UI.DimensionPicker({
el: $('#id-toolbar-menu-tablepicker'),
@ -2168,8 +2173,10 @@ define([
'808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966',
'33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
'993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
]
],
outerMenu: {menu: this.mnuHighlightControls, index: 2}
});
this.mnuHighlightControls.setInnerMenu([{menu: this.mnuControlsColorPicker, index: 2}]);
}
},

26
apps/documenteditor/main/resources/less/toolbar.less
View file

@ -152,35 +152,13 @@
}
.save-style-container {
cursor: default;
position: relative;
padding: 14px 11px;
border-left: @scaled-one-px-value-ie solid @border-regular-control-ie;
border-left: @scaled-one-px-value solid @border-regular-control;
border-top: @scaled-one-px-value-ie solid @border-regular-control-ie;
border-top: @scaled-one-px-value solid @border-regular-control;
}
.save-style-link {
border-bottom: @scaled-one-px-value-ie dotted @text-secondary-ie;
border-bottom: @scaled-one-px-value dotted @text-secondary;
cursor: pointer;
margin-left: 22px;
}
.plus {
width: 16px;
height: 16px;
cursor: pointer;
position: absolute;
background-position: @plus-offset-x @plus-offset-y;
}
.dropdown-menu > .disabled {
.plus, .save-style-link {
cursor: default;
color: @dropdown-link-disabled-color;
background-position: @plus-offset-x @plus-offset-y - 16;
a {
padding: 14px 20px !important;
}
}

6
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -1001,7 +1001,7 @@ define([
lock: [_set.themeLock, _set.lostConnect, _set.noSlides],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-16, 0',
dataHintOffset: '-16, -4',
beforeOpenHandler: function (e) {
var cmp = this,
menu = cmp.openButton.menu,
@ -1408,6 +1408,7 @@ define([
this.mnuMarkersPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-markers'),
parentMenu: this.btnMarkers.menu,
outerMenu: {menu: this.btnMarkers.menu, index: 0},
restoreHeight: 138,
allowScrollbar: false,
store: new Common.UI.DataViewStore([
@ -1423,12 +1424,14 @@ define([
]),
itemTemplate: _.template('<div id="<%= id %>" class="item-markerlist"></div>')
});
this.btnMarkers.menu.setInnerMenu([{menu: this.mnuMarkersPicker, index: 0}]);
_conf && this.mnuMarkersPicker.selectByIndex(_conf.index, true);
_conf = this.mnuNumbersPicker.conf;
this.mnuNumbersPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-numbering'),
parentMenu: this.btnNumbers.menu,
outerMenu: {menu: this.btnNumbers.menu, index: 0},
restoreHeight: 92,
allowScrollbar: false,
store: new Common.UI.DataViewStore([
@ -1443,6 +1446,7 @@ define([
]),
itemTemplate: _.template('<div id="<%= id %>" class="item-multilevellist"></div>')
});
this.btnNumbers.menu.setInnerMenu([{menu: this.mnuNumbersPicker, index: 0}]);
_conf && this.mnuNumbersPicker.selectByIndex(_conf.index, true);
this.mnuTablePicker = new Common.UI.DimensionPicker({

2
apps/spreadsheeteditor/main/app/controller/DocumentHolder.js
View file

@ -3567,6 +3567,7 @@ define([
view.paraBulletsPicker = new Common.UI.DataView({
el : $('#id-docholder-menu-bullets'),
parentMenu : view.menuParagraphBullets.menu,
outerMenu: {menu: view.menuParagraphBullets.menu, index: 0},
groups : view.paraBulletsPicker.groups,
store : view.paraBulletsPicker.store,
itemTemplate: _.template('<% if (type==0) { %>' +
@ -3576,6 +3577,7 @@ define([
'<% } %>')
});
view.paraBulletsPicker.on('item:click', _.bind(this.onSelectBullets, this));
view.menuParagraphBullets.menu.setInnerMenu([{menu: view.paraBulletsPicker, index: 0}]);
_conf && view.paraBulletsPicker.selectRecord(_conf.rec, true);
},

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

@ -664,11 +664,13 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
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),
itemTemplate: _.template('<img id="<%= id %>" class="item-icon" src="<%= imgUrl %>" style="width: 16px; height: 16px;">'),
type : i
});
picker.on('item:click', _.bind(this.onSelectIcon, this, combo, menu.items[0]));
menu.setInnerMenu([{menu: picker, index: 1}]);
menu.items[0].on('toggle', _.bind(this.onSelectNoIcon, this, combo, picker));
this.iconsControls[i].cmbIcons = combo;

54
apps/spreadsheeteditor/main/app/view/FormulaTab.js
View file

@ -367,40 +367,6 @@ define([
}, this);
},
focusInner: function(menu, e) {
if (e.keyCode == Common.UI.Keys.UP)
menu.items[menu.items.length-1].cmpEl.find('> a').focus();
else
menu.items[0].cmpEl.find('> a').focus();
},
focusOuter: function(menu, e) {
menu.items[2].cmpEl.find('> a').focus();
},
onBeforeKeyDown: function(menu, e) {
if (e.keyCode == Common.UI.Keys.RETURN) {
e.preventDefault();
e.stopPropagation();
var li = $(e.target).closest('li');
(li.length>0) && li.click();
Common.UI.Menu.Manager.hideAll();
} else if (e.namespace!=="after.bs.dropdown" && (e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.UP)) {
var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', menu.$el).find('> a');
if (!$items.length) return;
var index = $items.index($items.filter(':focus')),
me = this;
if (menu._outerMenu && (e.keyCode == Common.UI.Keys.UP && index==0 || e.keyCode == Common.UI.Keys.DOWN && index==$items.length - 1) ||
menu._innerMenu && (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) && index!==-1) {
e.preventDefault();
e.stopPropagation();
_.delay(function() {
menu._outerMenu ? me.focusOuter(menu._outerMenu, e) : me.focusInner(menu._innerMenu, e);
}, 10);
}
}
},
setButtonMenu: function(btn, name) {
var me = this,
arr = [],
@ -445,12 +411,13 @@ define([
_.delay(function() {
menu._innerMenu && menu._innerMenu.cmpEl.focus();
}, 10);
}).on('keydown:before', _.bind(me.onBeforeKeyDown, this));
});
var menu = new Common.UI.Menu({
maxHeight: 300,
cls: 'internal-menu',
items: arr
items: arr,
outerMenu: {menu: btn.menu, index: 0}
});
menu.render(btn.menu.items[0].cmpEl.children(':first'));
menu.cmpEl.css({
@ -462,9 +429,9 @@ define([
menu.cmpEl.attr({tabindex: "-1"});
menu.on('item:click', function (menu, item, e) {
me.fireEvent('function:apply', [{name: item.caption, origin: item.value}, false, name]);
}).on('keydown:before', _.bind(me.onBeforeKeyDown, this));
});
btn.menu._innerMenu = menu;
menu._outerMenu = btn.menu;
btn.menu.setInnerMenu([{menu: menu, index: 0}]);
}
}
Common.Utils.lockControls(SSE.enumLock.noSubitems, arr.length<1, {array: [btn]});
@ -509,8 +476,7 @@ define([
_.delay(function() {
menu._innerMenu && menu._innerMenu.items[0].cmpEl.find('> a').focus();
}, 10);
}).on('keydown:before', _.bind(me.onBeforeKeyDown, this))
.on('keydown:before', function(menu, e) {
}).on('keydown:before', function(menu, e) {
if (e.keyCode == Common.UI.Keys.LEFT || e.keyCode == Common.UI.Keys.ESC) {
var $parent = menu.cmpEl.parent();
if ($parent.hasClass('dropdown-submenu') && $parent.hasClass('over')) { // close submenu
@ -524,13 +490,15 @@ define([
var menu = new Common.UI.Menu({
maxHeight: 300,
cls: 'internal-menu',
items: arr
items: arr,
outerMenu: {menu: mnu.menu, index: 0}
});
menu.on('item:click', function (menu, item, e) {
me.fireEvent('function:apply', [{name: item.caption, origin: item.value}, false, name]);
}).on('keydown:before', _.bind(me.onBeforeKeyDown, this));
});
mnu.menu._innerMenu = menu;
menu._outerMenu = mnu.menu;
mnu.menu.setInnerMenu([{menu: menu, index: 0}]);
return mnu;
}
}

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

@ -908,7 +908,7 @@ define([
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set['FormatCells']],
dataHint : '1',
dataHintDirection: 'bottom',
dataHintOffset : '-16, 0',
dataHintOffset : '-16, -4',
beforeOpenHandler: function(e) {
var cmp = this,
menu = cmp.openButton.menu,

43
apps/spreadsheeteditor/main/app/view/ViewTab.js
View file

@ -254,40 +254,6 @@ define([
});
},
focusInner: function(menu, e) {
if (e.keyCode == Common.UI.Keys.UP)
menu.items[menu.items.length-1].cmpEl.find('> a').focus();
else
menu.items[0].cmpEl.find('> a').focus();
},
focusOuter: function(menu, e) {
menu.items[2].cmpEl.find('> a').focus();
},
onBeforeKeyDown: function(menu, e) {
if (e.keyCode == Common.UI.Keys.RETURN) {
e.preventDefault();
e.stopPropagation();
var li = $(e.target).closest('li');
(li.length>0) && li.click();
Common.UI.Menu.Manager.hideAll();
} else if (e.namespace!=="after.bs.dropdown" && (e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.UP)) {
var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', menu.$el).find('> a');
if (!$items.length) return;
var index = $items.index($items.filter(':focus')),
me = this;
if (menu._outerMenu && (e.keyCode == Common.UI.Keys.UP && index==0 || e.keyCode == Common.UI.Keys.DOWN && index==$items.length - 1) ||
menu._innerMenu && (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) && index!==-1) {
e.preventDefault();
e.stopPropagation();
_.delay(function() {
menu._outerMenu ? me.focusOuter(menu._outerMenu, e) : me.focusInner(menu._innerMenu, e);
}, 10);
}
}
},
setButtonMenu: function(btn) {
var me = this,
arr = [{caption: me.textDefault, value: 'default', checkable: true, allowDepress: false}];
@ -312,12 +278,13 @@ define([
}, 10);
}).on('show:before', function (menu, e) {
me.fireEvent('viewtab:showview');
}).on('keydown:before', _.bind(me.onBeforeKeyDown, this));
});
var menu = new Common.UI.Menu({
maxHeight: 300,
cls: 'internal-menu',
items: arr
items: arr,
outerMenu: {menu: btn.menu, index: 0}
});
menu.render(btn.menu.items[0].cmpEl.children(':first'));
menu.cmpEl.css({
@ -330,9 +297,9 @@ define([
menu.on('item:toggle', function (menu, item, state, e) {
if (!!state)
me.fireEvent('viewtab:openview', [{name: item.caption, value: item.value}]);
}).on('keydown:before', _.bind(me.onBeforeKeyDown, this));
});
btn.menu._innerMenu = menu;
menu._outerMenu = btn.menu;
btn.menu.setInnerMenu([{menu: menu, index: 0}]);
},
show: function () {