diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js index 1b5d93b34..e33631d3b 100644 --- a/apps/common/main/lib/component/ColorButton.js +++ b/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, - 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' diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js index d3a1f3bd0..fb0b1af65 100644 --- a/apps/common/main/lib/component/ComboDataView.js +++ b/apps/common/main/lib/component/ComboDataView.js @@ -114,20 +114,17 @@ define([ offset: [0, 3], items: [ {template: _.template('
')} - ] + ].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); diff --git a/apps/common/main/lib/component/DataView.js b/apps/common/main/lib/component/DataView.js index 76f887b5a..86db1a9a7 100644 --- a/apps/common/main/lib/component/DataView.js +++ b/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) { - 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) diff --git a/apps/common/main/lib/component/HintManager.js b/apps/common/main/lib/component/HintManager.js index af16505e2..c5d774123 100644 --- a/apps/common/main/lib/component/HintManager.js +++ b/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; diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js index 398f0490c..d8c410063 100644 --- a/apps/common/main/lib/component/Menu.js +++ b/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 a').filter(':focus').parent()); + var checkedIndex = (direction == Common.UI.Keys.DOWN) ? (focusedIndex0 ? focusedIndex-1 : length-1), + checkedItem = $liItems.eq(checkedIndex); + index = $allItems.index(checkedItem); + + for (var i=0; i 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) { diff --git a/apps/common/main/lib/component/MenuItem.js b/apps/common/main/lib/component/MenuItem.js index b3ff956e3..0609242c9 100644 --- a/apps/common/main/lib/component/MenuItem.js +++ b/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); diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js index 79b937503..770dc4231 100644 --- a/apps/common/main/lib/component/ThemeColorPalette.js +++ b/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) - 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 || {})); diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 8b7114bd4..0bc6d2fd2 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/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)); - - $('#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'); }, diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 89b39e1e5..d98efe611 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/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('
')}, - {template: _.template('' + this.textNewColor + '')} + { + id: 'id-toolbar-menu-new-control-color', + template: _.template('' + this.textNewColor + '') + } ] }) } @@ -1283,11 +1286,9 @@ define([ this.paragraphControls.push(this.cmbFontName); this.listStylesAdditionalMenuItem = new Common.UI.MenuItem({ - template: _.template( - '
' + - '' + - '' + - '
') + 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('
') }); + 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('
') }); + 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('
') }); + 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('
') }); _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}]); } }, diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index 2bcb39ba2..648bd6fe6 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/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 { - 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; } } diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index b6db11ec8..0168d399c 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/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('
') }); + 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('
') }); + this.btnNumbers.menu.setInnerMenu([{menu: this.mnuNumbersPicker, index: 0}]); _conf && this.mnuNumbersPicker.selectByIndex(_conf.index, true); this.mnuTablePicker = new Common.UI.DimensionPicker({ diff --git a/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js b/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js index ff1223e9e..f680e44fd 100644 --- a/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js +++ b/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); }, diff --git a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js index 390a7504e..4172db974 100644 --- a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js +++ b/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(''), 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; diff --git a/apps/spreadsheeteditor/main/app/view/FormulaTab.js b/apps/spreadsheeteditor/main/app/view/FormulaTab.js index 8c89c952c..a175becdd 100644 --- a/apps/spreadsheeteditor/main/app/view/FormulaTab.js +++ b/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; } } diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index 7a25f45e5..6e23a4bef 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/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, diff --git a/apps/spreadsheeteditor/main/app/view/ViewTab.js b/apps/spreadsheeteditor/main/app/view/ViewTab.js index 269283802..e756d7bd1 100644 --- a/apps/spreadsheeteditor/main/app/view/ViewTab.js +++ b/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 () {