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

Fix/menu focus

apps/common/main/lib/component/ColorButton.js

@@ -59,8 +59,7 @@ define([
                     el: this.cmpEl.find('#' + this.menu.id + '-color-menu'),
                     transparent: this.options.transparent,
                     value: color,
-                    colors: colors,
+                    colors: colors
-                    parentButton: this
                 });
                 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'
 

apps/common/main/lib/component/ComboDataView.js

@@ -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);
 

apps/common/main/lib/component/DataView.js

@@ -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) {
+                            if (topIdx==0 && this.outerMenu && this.outerMenu.menu) {
-                                topIdx--;
+                                this.deselectAll(true);
-                                if (topIdx<0) topIdx = this._layoutParams.rows-1;
+                                this.outerMenu.menu.focusOuter && this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
-                                idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
+                                return;
-                            }
+                            } else
+                                while (idx===undefined) {
+                                    topIdx--;
+                                    if (topIdx<0) topIdx = this._layoutParams.rows-1;
+                                    idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
+                                }
                         } else {
-                            while (idx===undefined) {
+                            if (topIdx==this._layoutParams.rows-1 && this.outerMenu && this.outerMenu.menu) {
-                                topIdx++;
+                                this.deselectAll(true);
-                                if (topIdx>this._layoutParams.rows-1) topIdx = 0;
+                                this.outerMenu.menu.focusOuter && this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
-                                idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
+                                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() {
+        focus: function(index) {
-            this.cmpEl && this.cmpEl.find('.dataview').focus();
+            $(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) {
+                            if (topIdx==0 && this.outerMenu && this.outerMenu.menu) {
-                                topIdx--;
+                                this.deselectAll(true);
-                                if (topIdx<0) topIdx = this._layoutParams.rows-1;
+                                this.outerMenu.menu.focusOuter && this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
-                                idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
+                                return;
-                            }
+                            } else
+                                while (idx===undefined) {
+                                    topIdx--;
+                                    if (topIdx<0) topIdx = this._layoutParams.rows-1;
+                                    idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
+                                }
                         } else {
-                            while (idx===undefined) {
+                            if (topIdx==this._layoutParams.rows-1 && this.outerMenu && this.outerMenu.menu) {
-                                topIdx++;
+                                this.deselectAll(true);
-                                if (topIdx>this._layoutParams.rows-1) topIdx = 0;
+                                this.outerMenu.menu.focusOuter && this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
-                                idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
+                                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)

apps/common/main/lib/component/HintManager.js

@@ -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;
 

apps/common/main/lib/component/Menu.js

@@ -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) {

apps/common/main/lib/component/MenuItem.js

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

apps/common/main/lib/component/ThemeColorPalette.js

@@ -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)
+                    if (this.outerMenu && this.outerMenu.menu)
-                        this.parentButton.menu.hide();
+                        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 || {}));

apps/documenteditor/main/app/controller/Toolbar.js

@@ -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));
-
+            toolbar.listStylesAdditionalMenuItem.on('click', this.onMenuSaveStyle.bind(this));
-            $('#id-save-style-plus, #id-save-style-link', toolbar.$el).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');
         },

apps/documenteditor/main/app/view/Toolbar.js

@@ -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(
+                        cls: 'save-style-container',
-                            '<div id="id-save-style-container" class = "save-style-container">' +
+                        iconCls: 'menu__icon btn-zoomup',
-                            '<span id="id-save-style-plus" class="plus img-commonctrl"  ></span>' +
+                        caption: me.textStyleMenuNew
-                            '<label id="id-save-style-link" class="save-style-link" >' + me.textStyleMenuNew + '</label>' +
-                            '</div>')
                     });
 
                     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}]);
                 }
             },
 

apps/documenteditor/main/resources/less/toolbar.less

@@ -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 {
+    a {
-    border-bottom: @scaled-one-px-value-ie dotted @text-secondary-ie;
+        padding: 14px 20px !important;
-    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;
     }
 }
 

apps/presentationeditor/main/app/view/Toolbar.js

@@ -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({

apps/spreadsheeteditor/main/app/controller/DocumentHolder.js

@@ -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);
         },
 

apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js

@@ -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;

apps/spreadsheeteditor/main/app/view/FormulaTab.js

@@ -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;
                     }
                 }

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -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,

apps/spreadsheeteditor/main/app/view/ViewTab.js

@@ -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 () {