From b50bff460e018dbba334837df879afcd205f3f2f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 16 Sep 2021 12:36:12 +0300 Subject: [PATCH 01/11] [DE] Change add style menu item --- apps/common/main/lib/component/MenuItem.js | 2 +- apps/documenteditor/main/app/controller/Toolbar.js | 3 ++- apps/documenteditor/main/app/view/Toolbar.js | 13 ++++++++----- .../documenteditor/main/resources/less/toolbar.less | 7 ++++--- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/apps/common/main/lib/component/MenuItem.js b/apps/common/main/lib/component/MenuItem.js index b3ff956e3..8f2078738 100644 --- a/apps/common/main/lib/component/MenuItem.js +++ b/apps/common/main/lib/component/MenuItem.js @@ -111,7 +111,7 @@ define([ tagName : 'li', template: _.template([ - ' tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; if(!_.isUndefined(options.dataHint)) { %> data-hint="<%= options.dataHint %>" <% }; if(!_.isUndefined(options.dataHintDirection)) { %> data-hint-direction="<%= options.dataHintDirection %>" <% }; if(!_.isUndefined(options.dataHintOffset)) { %> data-hint-offset="<%= options.dataHintOffset %>" <% }; %> >', + ' tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; if(!_.isUndefined(options.dataHint)) { %> data-hint="<%= options.dataHint %>" <% }; if(!_.isUndefined(options.dataHintDirection)) { %> data-hint-direction="<%= options.dataHintDirection %>" <% }; if(!_.isUndefined(options.dataHintOffset)) { %> data-hint-offset="<%= options.dataHintOffset %>" <% }; %> >', '<% if (!_.isEmpty(iconCls)) { %>', '', '<% } %>', diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 8b7114bd4..31705aa9e 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -358,7 +358,8 @@ define([ 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)); + // $('#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()); diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 89b39e1e5..8f2f7aa51 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -1283,11 +1283,14 @@ 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 + // template: _.template( + // '
' + + // '' + + // '' + + // '
') }); this.listStyles = new Common.UI.ComboDataView({ diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index 2bcb39ba2..b7b8056a5 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -152,9 +152,10 @@ } .save-style-container { - cursor: default; - position: relative; - padding: 14px 11px; + //cursor: default; + //position: relative; + //padding: 14px 11px; + padding: 14px 20px !important; 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; From 2f868c978034ab3e5625220c790356bf5d517e44 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 17 Sep 2021 18:16:00 +0300 Subject: [PATCH 02/11] Refactoring focus in color buttons --- apps/common/main/lib/component/ColorButton.js | 51 +++--------- apps/common/main/lib/component/Menu.js | 78 +++++++++++++++++++ .../main/lib/component/ThemeColorPalette.js | 17 ++-- 3 files changed, 99 insertions(+), 47 deletions(-) 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/Menu.js b/apps/common/main/lib/component/Menu.js index 398f0490c..043276199 100644 --- a/apps/common/main/lib/component/Menu.js +++ b/apps/common/main/lib/component/Menu.js @@ -267,6 +267,7 @@ 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.options.innerMenus && this.on('keydown:before', _.bind(me.onBeforeKeyDown, me)); menuRoot.hover( function(e) { me.isOver = true;}, @@ -491,6 +492,83 @@ 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)) { + 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.options.innerMenus && 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/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js index 79b937503..dfefb3980 100644 --- a/apps/common/main/lib/component/ThemeColorPalette.js +++ b/apps/common/main/lib/component/ThemeColorPalette.js @@ -105,7 +105,6 @@ 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.lastSelectedIdx = -1; me.colorItems = []; @@ -516,8 +515,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 +543,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 +553,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 +634,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 || {})); From b4991432a59ebcee0718c602a9e7fc4163af20e1 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 17 Sep 2021 22:59:02 +0300 Subject: [PATCH 03/11] Fix focus in multilevel menu --- apps/common/main/lib/component/Menu.js | 2 ++ apps/common/main/lib/component/ThemeColorPalette.js | 1 + apps/documenteditor/main/app/view/Toolbar.js | 4 +++- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js index 043276199..94c1fbf4d 100644 --- a/apps/common/main/lib/component/Menu.js +++ b/apps/common/main/lib/component/Menu.js @@ -502,6 +502,8 @@ define([ } 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(); diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js index dfefb3980..770dc4231 100644 --- a/apps/common/main/lib/component/ThemeColorPalette.js +++ b/apps/common/main/lib/component/ThemeColorPalette.js @@ -105,6 +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.outerMenu = me.options.outerMenu; this.lastSelectedIdx = -1; me.colorItems = []; diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 8f2f7aa51..6050cf629 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -2171,8 +2171,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}]); } }, From 97f607afa976519886cde9de334371111b25d472 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 17 Sep 2021 23:02:24 +0300 Subject: [PATCH 04/11] [DE] Fix focus in content controls settings --- apps/documenteditor/main/app/view/Toolbar.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 6050cf629..cd5048993 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 + '') + } ] }) } From 9be440c3b38471c3dfbcb41340c2dc9e7bf274c6 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 17 Sep 2021 23:30:46 +0300 Subject: [PATCH 05/11] Fix focus for menu with dataview --- apps/common/main/lib/component/DataView.js | 73 +++++++++++++------ apps/documenteditor/main/app/view/Toolbar.js | 6 ++ .../main/app/view/Toolbar.js | 4 + 3 files changed, 62 insertions(+), 21 deletions(-) diff --git a/apps/common/main/lib/component/DataView.js b/apps/common/main/lib/component/DataView.js index 76f887b5a..17a7888ea 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,25 @@ 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(data, this.outerMenu.index); + } 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(data, this.outerMenu.index); + } 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 +829,22 @@ define([ this._layoutParams = undefined; }, - focus: function() { + focus: function(index) { this.cmpEl && this.cmpEl.find('.dataview').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 +1169,25 @@ 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(data, this.outerMenu.index); + } 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(data, this.outerMenu.index); + } 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/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index cd5048993..4c376f738 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -2017,6 +2017,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([ @@ -2032,12 +2033,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([ @@ -2052,12 +2055,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([ @@ -2068,6 +2073,7 @@ 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; diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index b6db11ec8..f59bc2c3b 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/apps/presentationeditor/main/app/view/Toolbar.js @@ -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({ From 5fa14b63fe9ab485c2082c382ba200d36560fde1 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Sun, 19 Sep 2021 21:28:47 +0300 Subject: [PATCH 06/11] Fix keydown in menu --- apps/common/main/lib/component/Menu.js | 17 ++++++ .../main/app/view/FormulaTab.js | 54 ++++--------------- .../main/app/view/ViewTab.js | 43 ++------------- 3 files changed, 33 insertions(+), 81 deletions(-) diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js index 94c1fbf4d..673e66b2f 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,7 @@ 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( @@ -454,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'), 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/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 () { From 754bc9c8bc16f9a787d84e3f9afdb2b299d38f11 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 20 Sep 2021 01:41:38 +0300 Subject: [PATCH 07/11] Fix menu focus in ComboDataView --- apps/common/main/lib/component/ComboDataView.js | 11 ++++++----- apps/common/main/lib/component/DataView.js | 2 +- apps/common/main/lib/component/Menu.js | 2 +- 3 files changed, 8 insertions(+), 7 deletions(-) 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 17a7888ea..e09b8f9d3 100644 --- a/apps/common/main/lib/component/DataView.js +++ b/apps/common/main/lib/component/DataView.js @@ -830,7 +830,7 @@ define([ }, 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); diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js index 673e66b2f..d8c410063 100644 --- a/apps/common/main/lib/component/Menu.js +++ b/apps/common/main/lib/component/Menu.js @@ -536,7 +536,7 @@ define([ if (this.options.innerMenus || !menus) return; this.options.innerMenus = menus; - this.options.innerMenus && this.on('keydown:before', _.bind(this.onBeforeKeyDown, this)); + this.rendered && this.on('keydown:before', _.bind(this.onBeforeKeyDown, this)); }, findInnerMenu: function(direction, index, findOuter) { From 302db500deffa5a4297fd6764e65aa854da3094d Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 20 Sep 2021 01:44:09 +0300 Subject: [PATCH 08/11] Fix hints for styles list --- apps/common/main/lib/component/HintManager.js | 2 +- apps/documenteditor/main/app/view/Toolbar.js | 2 +- apps/presentationeditor/main/app/view/Toolbar.js | 2 +- apps/spreadsheeteditor/main/app/view/Toolbar.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) 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/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 4c376f738..f5a7a2a32 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -1303,7 +1303,7 @@ define([ // hint : this.tipParagraphStyle, dataHint: '1', dataHintDirection: 'bottom', - dataHintOffset: '-16, 0', + dataHintOffset: '-16, -4', enableKeyEvents: true, additionalMenuItems: [this.listStylesAdditionalMenuItem], beforeOpenHandler: function (e) { diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index f59bc2c3b..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, 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, From 03069417fb28049926bf814338425529b6ca0aff Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 20 Sep 2021 17:38:41 +0300 Subject: [PATCH 09/11] Add focus to menu with dataview items --- apps/common/main/lib/component/DataView.js | 12 ++++++++---- apps/documenteditor/main/app/controller/Toolbar.js | 5 ++++- apps/documenteditor/main/app/view/Toolbar.js | 10 ++++------ .../main/app/controller/DocumentHolder.js | 2 ++ .../main/app/view/FormatRulesEditDlg.js | 2 ++ 5 files changed, 20 insertions(+), 11 deletions(-) diff --git a/apps/common/main/lib/component/DataView.js b/apps/common/main/lib/component/DataView.js index e09b8f9d3..86db1a9a7 100644 --- a/apps/common/main/lib/component/DataView.js +++ b/apps/common/main/lib/component/DataView.js @@ -701,7 +701,8 @@ define([ } else if (data.keyCode==Common.UI.Keys.UP) { if (topIdx==0 && this.outerMenu && this.outerMenu.menu) { this.deselectAll(true); - this.outerMenu.menu.focusOuter(data, this.outerMenu.index); + this.outerMenu.menu.focusOuter && this.outerMenu.menu.focusOuter(data, this.outerMenu.index); + return; } else while (idx===undefined) { topIdx--; @@ -711,7 +712,8 @@ define([ } else { if (topIdx==this._layoutParams.rows-1 && this.outerMenu && this.outerMenu.menu) { this.deselectAll(true); - this.outerMenu.menu.focusOuter(data, this.outerMenu.index); + this.outerMenu.menu.focusOuter && this.outerMenu.menu.focusOuter(data, this.outerMenu.index); + return; } else while (idx===undefined) { topIdx++; @@ -1171,7 +1173,8 @@ define([ } else if (data.keyCode==Common.UI.Keys.UP) { if (topIdx==0 && this.outerMenu && this.outerMenu.menu) { this.deselectAll(true); - this.outerMenu.menu.focusOuter(data, this.outerMenu.index); + this.outerMenu.menu.focusOuter && this.outerMenu.menu.focusOuter(data, this.outerMenu.index); + return; } else while (idx===undefined) { topIdx--; @@ -1181,7 +1184,8 @@ define([ } else { if (topIdx==this._layoutParams.rows-1 && this.outerMenu && this.outerMenu.menu) { this.deselectAll(true); - this.outerMenu.menu.focusOuter(data, this.outerMenu.index); + this.outerMenu.menu.focusOuter && this.outerMenu.menu.focusOuter(data, this.outerMenu.index); + return; } else while (idx===undefined) { topIdx++; diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 31705aa9e..3ca7e25b8 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -2181,10 +2181,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 f5a7a2a32..99efa6dab 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -2080,9 +2080,11 @@ define([ 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, @@ -2090,7 +2092,6 @@ define([ } }, { - allowSelected: false, iconname: 'page-number-top-center', data: { type: c_pageNumPosition.PAGE_NUM_POSITION_TOP, @@ -2098,7 +2099,6 @@ define([ } }, { - allowSelected: false, iconname: 'page-number-top-right', data: { type: c_pageNumPosition.PAGE_NUM_POSITION_TOP, @@ -2106,7 +2106,6 @@ define([ } }, { - allowSelected: false, iconname: 'page-number-bottom-left', data: { type: c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, @@ -2114,7 +2113,6 @@ define([ } }, { - allowSelected: false, iconname: 'page-number-bottom-center', data: { type: c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, @@ -2122,7 +2120,6 @@ define([ } }, { - allowSelected: false, iconname: 'page-number-bottom-right', data: { type: c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, @@ -2133,6 +2130,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'), 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; From 75fa8c5c10a4b83b8a920b034c484c2c205ce3fe Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 20 Sep 2021 19:51:32 +0300 Subject: [PATCH 10/11] [DE] Fix style for disabled item Add new style --- apps/common/main/lib/component/MenuItem.js | 4 +++ .../main/app/controller/Toolbar.js | 2 -- apps/documenteditor/main/app/view/Toolbar.js | 7 +---- .../main/resources/less/toolbar.less | 27 ++----------------- 4 files changed, 7 insertions(+), 33 deletions(-) diff --git a/apps/common/main/lib/component/MenuItem.js b/apps/common/main/lib/component/MenuItem.js index 8f2078738..8b2af5156 100644 --- a/apps/common/main/lib/component/MenuItem.js +++ b/apps/common/main/lib/component/MenuItem.js @@ -137,6 +137,7 @@ define([ this.toggleGroup = me.options.toggleGroup; this.template = me.options.template || this.template; this.iconCls = me.options.iconCls; + this.liCls = me.options.liCls; this.hint = me.options.hint; this.rendered = false; @@ -216,6 +217,9 @@ define([ }); } + if (this.liCls) + el.addClass(this.liCls); + if (this.disabled) el.toggleClass('disabled', this.disabled); diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 3ca7e25b8..0bc6d2fd2 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -357,8 +357,6 @@ 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(); diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 99efa6dab..a236c4f96 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -1286,14 +1286,9 @@ define([ this.paragraphControls.push(this.cmbFontName); this.listStylesAdditionalMenuItem = new Common.UI.MenuItem({ - cls: 'save-style-container', + liCls: 'save-style-container', iconCls: 'menu__icon btn-zoomup', caption: me.textStyleMenuNew - // template: _.template( - // '
' + - // '' + - // '' + - // '
') }); this.listStyles = new Common.UI.ComboDataView({ diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index b7b8056a5..648bd6fe6 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -152,36 +152,13 @@ } .save-style-container { - //cursor: default; - //position: relative; - //padding: 14px 11px; - padding: 14px 20px !important; 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; } } From e5a35881f868e1b3e4f8b2e650b70b67aebc1473 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 20 Sep 2021 20:27:00 +0300 Subject: [PATCH 11/11] Fix MenuItem cls parameter --- apps/common/main/lib/component/MenuItem.js | 7 +++---- apps/documenteditor/main/app/view/Toolbar.js | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/common/main/lib/component/MenuItem.js b/apps/common/main/lib/component/MenuItem.js index 8b2af5156..0609242c9 100644 --- a/apps/common/main/lib/component/MenuItem.js +++ b/apps/common/main/lib/component/MenuItem.js @@ -111,7 +111,7 @@ define([ tagName : 'li', template: _.template([ - ' tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; if(!_.isUndefined(options.dataHint)) { %> data-hint="<%= options.dataHint %>" <% }; if(!_.isUndefined(options.dataHintDirection)) { %> data-hint-direction="<%= options.dataHintDirection %>" <% }; if(!_.isUndefined(options.dataHintOffset)) { %> data-hint-offset="<%= options.dataHintOffset %>" <% }; %> >', + ' tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; if(!_.isUndefined(options.dataHint)) { %> data-hint="<%= options.dataHint %>" <% }; if(!_.isUndefined(options.dataHintDirection)) { %> data-hint-direction="<%= options.dataHintDirection %>" <% }; if(!_.isUndefined(options.dataHintOffset)) { %> data-hint-offset="<%= options.dataHintOffset %>" <% }; %> >', '<% if (!_.isEmpty(iconCls)) { %>', '', '<% } %>', @@ -137,7 +137,6 @@ define([ this.toggleGroup = me.options.toggleGroup; this.template = me.options.template || this.template; this.iconCls = me.options.iconCls; - this.liCls = me.options.liCls; this.hint = me.options.hint; this.rendered = false; @@ -217,8 +216,8 @@ define([ }); } - if (this.liCls) - el.addClass(this.liCls); + if (this.cls) + el.addClass(this.cls); if (this.disabled) el.toggleClass('disabled', this.disabled); diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index a236c4f96..d98efe611 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -1286,7 +1286,7 @@ define([ this.paragraphControls.push(this.cmbFontName); this.listStylesAdditionalMenuItem = new Common.UI.MenuItem({ - liCls: 'save-style-container', + cls: 'save-style-container', iconCls: 'menu__icon btn-zoomup', caption: me.textStyleMenuNew });