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

Update bootstrap (fix dropdown menu)

Browse source
This commit is contained in:
JuliaSvinareva 2020-09-25 20:00:48 +03:00
parent 79e931df10
commit ca57c48a2b
20 changed files with 81 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -469,7 +469,7 @@ define([
tip.hide(); tip.hide();
} }
} }
var isOpen = el.hasClass('open'); var isOpen = el.hasClass('show');
doSplitSelect(!isOpen, 'arrow', e); doSplitSelect(!isOpen, 'arrow', e);
} }
} }

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

@ -110,8 +110,8 @@ define([
cls: 'shifted-left', cls: 'shifted-left',
additionalAlign: options.additionalAlign, additionalAlign: options.additionalAlign,
items: (options.additionalItems ? options.additionalItems : []).concat([ items: (options.additionalItems ? options.additionalItems : []).concat([
{ template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>'), clsDropdownItem: false }, { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="' + id + '-color-new" style="">' + this.textNewColor + '</a>') } { template: _.template('<a id="' + id + '-color-new" class="dropdown-item" style="">' + this.textNewColor + '</a>') }
]) ])
}); });
return menu; return menu;

30
apps/common/main/lib/component/ComboBox.js
View file

@ -95,7 +95,7 @@ define([
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><span class="caret img-commonctrl"></span></button>', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><span class="caret img-commonctrl"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" class="dropdown-item" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>', '<li id="<%= item.id %>" data-value="<%= item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
'<% }); %>', '<% }); %>',
'</ul>', '</ul>',
'</span>' '</span>'
@ -147,7 +147,7 @@ define([
scope : me scope : me
})); }));
if (this.itemsTemplate) if (this.itemsTemplate)
this.cmpEl.find('ul').html( this.cmpEl.find('.dropdown-menu').html(
$(this.itemsTemplate({ $(this.itemsTemplate({
items : items, items : items,
scope : me scope : me
@ -264,16 +264,17 @@ define([
} }
_.delay(function(){ _.delay(function(){
me.cmpEl.addClass('open'); me.cmpEl.addClass('show');
}, delay || 0); }, delay || 0);
}, },
closeMenu: function() { closeMenu: function() {
this.cmpEl.removeClass('open'); this.cmpEl.removeClass('show');
this.cmpEl.find('.dropdown-menu').removeClass('show');
}, },
isMenuOpen: function() { isMenuOpen: function() {
return this.cmpEl.hasClass('open'); return this.cmpEl.hasClass('show');
}, },
onBeforeShowMenu: function(e) { onBeforeShowMenu: function(e) {
@ -298,7 +299,7 @@ define([
} }
} }
var $list = this.cmpEl.find('ul'); var $list = this.cmpEl.find('.dropdown-menu');
if ($list.hasClass('menu-absolute')) { if ($list.hasClass('menu-absolute')) {
var offset = this.cmpEl.offset(); var offset = this.cmpEl.offset();
$list.css({left: offset.left, top: offset.top + this.cmpEl.outerHeight() + 2}); $list.css({left: offset.left, top: offset.top + this.cmpEl.outerHeight() + 2});
@ -306,7 +307,7 @@ define([
}, },
onAfterShowMenu: function(e) { onAfterShowMenu: function(e) {
var $list = $(this.el).find('ul'), var $list = $(this.el).find('.dropdown-menu'),
$selected = $list.find('> li.selected'); $selected = $list.find('> li.selected');
if ($selected.length) { if ($selected.length) {
@ -319,7 +320,7 @@ define([
height = (Math.floor(height/itemHeight) * itemHeight); height = (Math.floor(height/itemHeight) * itemHeight);
$list.scrollTop(height); $list.scrollTop(height);
} }
setTimeout(function(){$selected.find('a').focus();}, 1); setTimeout(function(){$selected.find('.dropdown-item').focus();}, 1);
} }
if (this.scroller) if (this.scroller)
@ -371,7 +372,7 @@ define([
(this._search.char !== e.key) && (this._search.full = true); (this._search.char !== e.key) && (this._search.full = true);
this._search.text += e.key; this._search.text += e.key;
if (this._search.index===undefined) { if (this._search.index===undefined) {
var $items = this.cmpEl.find('ul > li').find('> a'); var $items = this.cmpEl.find('.dropdown-menu > li').find('> .dropdown-item');
this._search.index = $items.index($items.filter(':focus')); this._search.index = $items.index($items.filter(':focus'));
} }
this.selectCandidate(); this.selectCandidate();
@ -403,7 +404,7 @@ define([
var item = $('#' + itemCandidate.get('id') + ' a', $(this.el)); var item = $('#' + itemCandidate.get('id') + ' a', $(this.el));
if (this.scroller) { if (this.scroller) {
this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible}); this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
var $list = $(this.el).find('ul'); var $list = $(this.el).find('.dropdown-menu');
var itemTop = item.position().top, var itemTop = item.position().top,
itemHeight = item.outerHeight(), itemHeight = item.outerHeight(),
listHeight = $list.outerHeight(); listHeight = $list.outerHeight();
@ -430,7 +431,8 @@ define([
_.delay(function() { _.delay(function() {
me._skipInputChange = true; me._skipInputChange = true;
me.cmpEl.find('ul li:first a').focus(); var item = me.cmpEl.find('.dropdown-menu li:first .dropdown-item');
item.focus();
}, 10); }, 10);
} else if (e.keyCode == Common.UI.Keys.RETURN && $(e.target).val() === me.lastValue){ } else if (e.keyCode == Common.UI.Keys.RETURN && $(e.target).val() === me.lastValue){
this._input.trigger('change', { reapply: true }); this._input.trigger('change', { reapply: true });
@ -637,14 +639,14 @@ define([
onResetItems: function() { onResetItems: function() {
if (this.itemsTemplate) { if (this.itemsTemplate) {
$(this.el).find('ul').html( $(this.itemsTemplate({ $(this.el).find('.dropdown-menu').html( $(this.itemsTemplate({
items: this.store.toJSON(), items: this.store.toJSON(),
scope: this scope: this
}))); })));
} else { } else {
$(this.el).find('ul').html(_.template([ $(this.el).find('.dropdown-menu').html(_.template([
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" class="dropdown-item" data-value="<%- item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>', '<li id="<%= item.id %>" data-value="<%- item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
'<% }); %>' '<% }); %>'
].join(''))({ ].join(''))({
items: this.store.toJSON(), items: this.store.toJSON(),

4
apps/common/main/lib/component/ComboBoxFonts.js
View file

@ -76,8 +76,8 @@ define([
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<li class="dropdown-divider">', '<li class="dropdown-divider">',
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" class="dropdown-item">', '<li id="<%= item.id %>">',
'<a class="font-item" tabindex="-1" type="menuitem" style="height:<%=scope.getListItemHeight()%>px;"></a>', '<a class="font-item dropdown-item" tabindex="-1" type="menuitem" style="height:<%=scope.getListItemHeight()%>px;"></a>',
'</li>', '</li>',
'<% }); %>', '<% }); %>',
'</ul>', '</ul>',

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

@ -108,7 +108,7 @@ define([
menuAlign: 'tl-tl', menuAlign: 'tl-tl',
offset: [0, 3], offset: [0, 3],
items: [ items: [
{template: _.template('<div class="menu-picker-container"></div>'), clsDropdownItem: false} {template: _.template('<div class="menu-picker-container"></div>')}
] ]
}) })
}); });

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

@ -44,10 +44,10 @@
* Default template * Default template
* *
* <ul class="dropdown-menu" role="menu"> * <ul class="dropdown-menu" role="menu">
* <li class="dropdown-item"><a href="#">item 1</a></li>--> * <li><a href="#" class="dropdown-item">item 1</a></li>-->
* <li class="dropdown-item"><a href="#">item 2</a></li>--> * <li><a href="#" class="dropdown-item">item 2</a></li>-->
* <li class="dropdown-divider"></li>--> * <li class="dropdown-divider"></li>-->
* <li class="dropdown-item"><a href="#">item 3</a></li> * <li><a href="#" class="dropdown-item">item 3</a></li>
* </ul> * </ul>
* *
* A useful classes of menu position * A useful classes of menu position
@ -186,8 +186,7 @@ define([
me.items.push( me.items.push(
new Common.UI.MenuItem(_.extend({ new Common.UI.MenuItem(_.extend({
tagName : 'li', tagName : 'li',
template: me.itemTemplate, template: me.itemTemplate
clsDropdownItem: item.clsDropdownItem
}, item)) }, item))
); );
} }
@ -280,14 +279,14 @@ define([
}, },
show: function() { show: function() {
if (this.rendered && this.parentEl && !this.parentEl.hasClass('open')) { if (this.rendered && this.parentEl && !this.parentEl.hasClass('show')) {
this.cmpEl.dropdown('toggle'); this.cmpEl.dropdown('toggle');
} }
}, },
hide: function() { hide: function() {
if (this.rendered && this.parentEl) { if (this.rendered && this.parentEl) {
if ( this.parentEl.hasClass('open') ) if ( this.parentEl.hasClass('show') )
this.cmpEl.dropdown('toggle'); this.cmpEl.dropdown('toggle');
else if (this.parentEl.hasClass('over')) else if (this.parentEl.hasClass('over'))
this.parentEl.removeClass('over'); this.parentEl.removeClass('over');
@ -760,14 +759,14 @@ define([
}, },
show: function() { show: function() {
if (this.rendered && this.parentEl && !this.parentEl.hasClass('open')) { if (this.rendered && this.parentEl && !this.parentEl.hasClass('show')) {
this.cmpEl.dropdown('toggle'); this.cmpEl.dropdown('toggle');
} }
}, },
hide: function() { hide: function() {
if (this.rendered && this.parentEl) { if (this.rendered && this.parentEl) {
if ( this.parentEl.hasClass('open') ) if ( this.parentEl.hasClass('show') )
this.cmpEl.dropdown('toggle'); this.cmpEl.dropdown('toggle');
else if (this.parentEl.hasClass('over')) else if (this.parentEl.hasClass('over'))
this.parentEl.removeClass('over'); this.parentEl.removeClass('over');

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

@ -45,14 +45,14 @@
* Default template * Default template
* *
* Simple menu item: * Simple menu item:
* <li><a href="#">Caption</a></li> * <li><a href="#" class="dropdown-item">Caption</a></li>
* *
* Separator: * Separator:
* <li class="dropdown-divider"></li> * <li class="dropdown-divider"></li>
* *
* Menu item with sub-menu: * Menu item with sub-menu:
* <li class="dropdown-submenu"> * <li class="dropdown-submenu">
* <a href="#">Sub-menu item</a> * <a href="#" class="dropdown-item">Sub-menu item</a>
* <ul class="dropdown-menu"></ul> * <ul class="dropdown-menu"></ul>
* </li> * </li>
* *
@ -108,7 +108,7 @@ define([
tagName : 'li', tagName : 'li',
template: _.template([ template: _.template([
'<a id="<%= id %>" style="<%= style %>" <% if(menu) { %> data-toggle="dropdown" class="dropdown-toggle" <% } %> <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; %> >', '<a id="<%= id %>" class="dropdown-item" style="<%= style %>" <% if(menu) { %> data-toggle="dropdown" class="dropdown-toggle" <% } %> <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; %> >',
'<% if (!_.isEmpty(iconCls)) { %>', '<% if (!_.isEmpty(iconCls)) { %>',
'<span class="menu-item-icon <%= iconCls %>"></span>', '<span class="menu-item-icon <%= iconCls %>"></span>',
'<% } %>', '<% } %>',
@ -136,7 +136,6 @@ define([
this.iconCls = me.options.iconCls; this.iconCls = me.options.iconCls;
this.hint = me.options.hint; this.hint = me.options.hint;
this.rendered = false; this.rendered = false;
this.clsDropdownItem = (!_.isUndefined(me.options.clsDropdownItem)) ? me.options.clsDropdownItem : true; // false for complex elements (forms, group buttons)
if (this.menu !== null && !(this.menu instanceof Common.UI.Menu) && !(this.menu instanceof Common.UI.MenuSimple)) { if (this.menu !== null && !(this.menu instanceof Common.UI.Menu) && !(this.menu instanceof Common.UI.MenuSimple)) {
this.menu = new Common.UI.Menu(_.extend({}, me.options.menu)); this.menu = new Common.UI.Menu(_.extend({}, me.options.menu));
@ -181,8 +180,6 @@ define([
); );
} }
this.clsDropdownItem && el.addClass('dropdown-item');
var firstChild = el.children(':first'); var firstChild = el.children(':first');
if (this.checkable && firstChild) { if (this.checkable && firstChild) {

10
apps/common/main/lib/extend/Bootstrap.js
View file

@ -76,7 +76,7 @@ function patchDropDownKeyDown(e) {
if ($this.is('.disabled, :disabled')) return; if ($this.is('.disabled, :disabled')) return;
var $parent = getParent($this); var $parent = getParent($this);
var isActive = $parent.hasClass('open') || $parent.hasClass('over'); var isActive = $parent.hasClass('show') || $parent.hasClass('over');
if (!isActive || (isActive && e.keyCode == 27)) { if (!isActive || (isActive && e.keyCode == 27)) {
if (e.which == 27) { if (e.which == 27) {
@ -145,7 +145,7 @@ function patchDropDownKeyDownAdditional(e) { // only for formula menu when typin
if ($this.is('.disabled, :disabled')) return; if ($this.is('.disabled, :disabled')) return;
var $parent = getParent($this); var $parent = getParent($this);
var isActive = $parent.hasClass('open') || $parent.hasClass('over'); var isActive = $parent.hasClass('show') || $parent.hasClass('over');
if (!isActive || (isActive && (e.keyCode == 27 || e.keyCode == 37 || e.keyCode == 39))) { if (!isActive || (isActive && (e.keyCode == 27 || e.keyCode == 37 || e.keyCode == 39))) {
// if (e.which == 27) // if (e.which == 27)
@ -194,14 +194,16 @@ function getParent($this) {
function clearMenus(isFromInputControl) { function clearMenus(isFromInputControl) {
$('.dropdown-toggle').each(function (e) { $('.dropdown-toggle').each(function (e) {
var $parent = ($(this)).parent(); var $parent = ($(this)).parent();
if (!$parent.hasClass('open')) return; if (!$parent.hasClass('show')) return;
if ($parent.attr('data-value') == 'prevent-canvas-click') { if ($parent.attr('data-value') == 'prevent-canvas-click') {
$parent.attr('data-value',''); $parent.attr('data-value','');
return; return;
} }
$parent.trigger(e = $.Event('hide.bs.dropdown')); $parent.trigger(e = $.Event('hide.bs.dropdown'));
if (e.isDefaultPrevented()) return; if (e.isDefaultPrevented()) return;
$parent.removeClass('open').trigger('hidden.bs.dropdown', isFromInputControl); $parent.removeClass('show');
$parent.find('.dropdown-menu').removeClass('show');
$parent.trigger('hidden.bs.dropdown', isFromInputControl);
}) })
} }

7
apps/common/main/resources/less/combobox.less
View file

@ -51,6 +51,7 @@
.btn, .btn,
.btn:hover, .btn:hover,
.btn:focus { .btn:focus {
box-shadow: none;
border-left: 0; border-left: 0;
border-color: @input-border; border-color: @input-border;
background-color: transparent; background-color: transparent;
@ -61,12 +62,12 @@
} }
.btn-default:not(.disabled), .btn-default:not(.disabled),
&.open .dropdown-toggle.btn-default { &.show .dropdown-toggle.btn-default {
background-color: @input-bg; background-color: @input-bg;
border-color: @input-border; border-color: @input-border;
} }
&.input-group-nr.open:not(.no-highlighted) { &.input-group-nr.show:not(.no-highlighted) {
& > .form-control, & > .form-control,
& > .btn { & > .btn {
border-color: @gray-darker; border-color: @gray-darker;
@ -132,7 +133,7 @@
} }
} }
.open > .combobox.combo-dataview-menu { .show > .combobox.combo-dataview-menu {
&.input-group-nr:not(.no-highlighted) { &.input-group-nr:not(.no-highlighted) {
& > .form-control, & > .form-control,
& > .btn { & > .btn {

10
apps/common/main/resources/less/dropdown-menu.less
View file

@ -29,9 +29,6 @@
} }
li { li {
&.dropdown-item {
padding: 0;
}
& > a { & > a {
display: block; display: block;
padding: 5px 20px; padding: 5px 20px;
@ -70,6 +67,11 @@
} }
&.disabled { &.disabled {
.dropdown-item {
pointer-events: none;
background-color: transparent;
color: @gray;
}
.menu-item-icon { .menu-item-icon {
opacity: .4; opacity: .4;
} }
@ -107,7 +109,7 @@
} }
&.shifted-left { &.shifted-left {
li { li {
& > a { & > a:not(.checkable) {
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
} }

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

@ -2509,7 +2509,7 @@ define([
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
menuAlign: 'tl-tr', menuAlign: 'tl-tr',
items: [ items: [
{ template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>'), clsDropdownItem: false } { template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
] ]
}) })
}); });
@ -2568,8 +2568,7 @@ define([
{ {
template: _.template('<div id="id-toolbar-menu-equationgroup' + i + template: _.template('<div id="id-toolbar-menu-equationgroup' + i +
'" class="menu-shape" style="width:' + (equationGroup.get('groupWidth') + 8) + 'px; ' + '" class="menu-shape" style="width:' + (equationGroup.get('groupWidth') + 8) + 'px; ' +
equationGroup.get('groupHeight') + 'margin-left:5px;"></div>'), equationGroup.get('groupHeight') + 'margin-left:5px;"></div>')
clsDropdownItem: false
} }
] ]
}) })

3
apps/documenteditor/main/app/controller/Viewport.js
View file

@ -275,8 +275,7 @@ define([
'</div>' '</div>'
].join('')), ].join('')),
stopPropagation: true, stopPropagation: true,
value: me.header.mnuZoom.options.value, value: me.header.mnuZoom.options.value
clsDropdownItem: false
}); });
me.header.btnOptions.setMenu(new Common.UI.Menu({ me.header.btnOptions.setMenu(new Common.UI.Menu({

7
apps/documenteditor/main/app/view/Links.js
View file

@ -197,8 +197,8 @@ define([
var _menu = new Common.UI.Menu({ var _menu = new Common.UI.Menu({
cls: 'toc-menu shifted-left', cls: 'toc-menu shifted-left',
items: [ items: [
{template: contentsTemplate, offsety: 0, value: 0, clsDropdownItem: false}, {template: contentsTemplate, offsety: 0, value: 0},
{template: contentsTemplate, offsety: 72, value: 1, clsDropdownItem: false}, {template: contentsTemplate, offsety: 72, value: 1},
{caption: me.textContentsSettings, value: 'settings'}, {caption: me.textContentsSettings, value: 'settings'},
{caption: me.textContentsRemove, value: 'remove'} {caption: me.textContentsRemove, value: 'remove'}
] ]
@ -251,8 +251,7 @@ define([
'<button id="id-menu-goto-footnote-prev-' + index + '" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>', '<button id="id-menu-goto-footnote-prev-' + index + '" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
'</div>' '</div>'
].join('')), ].join('')),
stopPropagation: true, stopPropagation: true
clsDropdownItem: false
}), }),
new Common.UI.MenuItem({ new Common.UI.MenuItem({
template: _.template([ template: _.template([

2
apps/documenteditor/main/app/view/ListSettingsDialog.js
View file

@ -184,7 +184,7 @@ define([
var itemsTemplate = var itemsTemplate =
[ [
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" class="dropdown-item" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">', '<li id="<%= item.id %>" data-value="<%= item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem">',
'<%= item.displayValue %><% if (item.value === Asc.c_oAscNumberingFormat.Bullet) { %><span style="font-family:<%=item.font%>;"><%=item.symbol%></span><% } %>', '<%= item.displayValue %><% if (item.value === Asc.c_oAscNumberingFormat.Bullet) { %><span style="font-family:<%=item.font%>;"><%=item.symbol%></span><% } %>',
'</a></li>', '</a></li>',
'<% }); %>' '<% }); %>'

2
apps/documenteditor/main/app/view/TableSettings.js
View file

@ -670,7 +670,7 @@ define([
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
style: 'width: 575px;', style: 'width: 575px;',
items: [ items: [
{ template: _.template('<div id="id-table-menu-template" class="menu-table-template" style="margin: 5px 5px 5px 10px;"></div>'), clsDropdownItem: false } { template: _.template('<div id="id-table-menu-template" class="menu-table-template" style="margin: 5px 5px 5px 10px;"></div>') }
] ]
}) })
}); });

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

@ -242,7 +242,7 @@ define([
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
style: 'min-width: 100px;', style: 'min-width: 100px;',
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-highlight" style="width: 120px; height: 120px; margin: 10px;"></div>'), clsDropdownItem: false}, {template: _.template('<div id="id-toolbar-menu-highlight" style="width: 120px; height: 120px; margin: 10px;"></div>')},
{caption: '--'}, {caption: '--'},
this.mnuHighlightTransparent = new Common.UI.MenuItem({ this.mnuHighlightTransparent = new Common.UI.MenuItem({
caption: this.strMenuNoFill, caption: this.strMenuNoFill,
@ -265,11 +265,11 @@ define([
{ {
id: 'id-toolbar-menu-auto-fontcolor', id: 'id-toolbar-menu-auto-fontcolor',
caption: this.textAutoColor, caption: this.textAutoColor,
template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>') template: _.template('<a class="dropdown-item" tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>')
}, },
{caption: '--'}, {caption: '--'},
{template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>'), clsDropdownItem: false}, {template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>')},
{template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="padding-left:12px;">' + this.textNewColor + '</a>')} {template: _.template('<a id="id-toolbar-menu-new-fontcolor" class="dropdown-item" style="padding-left:12px;">' + this.textNewColor + '</a>')}
] ]
}) })
}); });
@ -282,8 +282,8 @@ define([
split: true, split: true,
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-paracolor" style="width: 169px; height: 220px; margin: 10px;"></div>'), clsDropdownItem: false}, {template: _.template('<div id="id-toolbar-menu-paracolor" style="width: 169px; height: 220px; margin: 10px;"></div>')},
{template: _.template('<a id="id-toolbar-menu-new-paracolor" style="padding-left:12px;">' + this.textNewColor + '</a>')} {template: _.template('<a id="id-toolbar-menu-new-paracolor" class="dropdown-item" style="padding-left:12px;">' + this.textNewColor + '</a>')}
] ]
}) })
}); });
@ -439,7 +439,7 @@ define([
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
cls: 'shifted-left', cls: 'shifted-left',
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>'), clsDropdownItem: false}, {template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>')},
{caption: this.mniCustomTable, value: 'custom'}, {caption: this.mniCustomTable, value: 'custom'},
{caption: this.mniDrawTable, value: 'draw', checkable: true}, {caption: this.mniDrawTable, value: 'draw', checkable: true},
{caption: this.mniEraseTable, value: 'erase', checkable: true} {caption: this.mniEraseTable, value: 'erase', checkable: true}
@ -488,7 +488,7 @@ define([
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
cls: 'menu-shapes', cls: 'menu-shapes',
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-insart" style="width: 239px; margin-left: 5px;"></div>'), clsDropdownItem: false} {template: _.template('<div id="id-toolbar-menu-insart" style="width: 239px; margin-left: 5px;"></div>')}
] ]
}) })
}); });
@ -787,7 +787,7 @@ define([
this.toolbarControls.push(this.btnPageOrient); this.toolbarControls.push(this.btnPageOrient);
var pageMarginsTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' + var pageMarginsTemplate = _.template('<a id="<%= id %>" class="dropdown-item" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
'<% if (options.value !== null) { %><div style="display: inline-block;margin-right: 20px;min-width: 80px;">' + '<% if (options.value !== null) { %><div style="display: inline-block;margin-right: 20px;min-width: 80px;">' +
'<label style="display: block;">' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' + '<label style="display: block;">' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
'<label style="display: block;">' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div><div style="display: inline-block;">' + '<label style="display: block;">' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div><div style="display: inline-block;">' +
@ -850,7 +850,7 @@ define([
}); });
this.toolbarControls.push(this.btnPageMargins); this.toolbarControls.push(this.btnPageMargins);
var pageSizeTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' + var pageSizeTemplate = _.template('<a id="<%= id %>" class="dropdown-item" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
'<div><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' + '<div><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
'<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>'); '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>');
@ -1114,8 +1114,7 @@ define([
'<div id="id-save-style-container" class = "save-style-container">' + '<div id="id-save-style-container" class = "save-style-container">' +
'<span id="id-save-style-plus" class="plus img-commonctrl" ></span>' + '<span id="id-save-style-plus" class="plus img-commonctrl" ></span>' +
'<label id="id-save-style-link" class="save-style-link" >' + me.textStyleMenuNew + '</label>' + '<label id="id-save-style-link" class="save-style-link" >' + me.textStyleMenuNew + '</label>' +
'</div>'), '</div>')
clsDropdownItem: false
}); });
this.listStyles = new Common.UI.ComboDataView({ this.listStyles = new Common.UI.ComboDataView({
@ -1653,7 +1652,7 @@ define([
cls: 'shifted-left', cls: 'shifted-left',
style: 'min-width: 139px', style: 'min-width: 139px',
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 139px; margin: 0 9px;"></div>'), clsDropdownItem: false}, {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 139px; margin: 0 9px;"></div>')},
this.mnuMarkerSettings = new Common.UI.MenuItem({ this.mnuMarkerSettings = new Common.UI.MenuItem({
caption: this.textListSettings, caption: this.textListSettings,
disabled: (this.mnuMarkersPicker.conf.index || 0)==0, disabled: (this.mnuMarkersPicker.conf.index || 0)==0,
@ -1667,7 +1666,7 @@ define([
new Common.UI.Menu({ new Common.UI.Menu({
cls: 'shifted-left', cls: 'shifted-left',
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 9px;"></div>'), clsDropdownItem: false}, {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 9px;"></div>')},
this.mnuNumberSettings = new Common.UI.MenuItem({ this.mnuNumberSettings = new Common.UI.MenuItem({
caption: this.textListSettings, caption: this.textListSettings,
disabled: (this.mnuNumbersPicker.conf.index || 0)==0, disabled: (this.mnuNumbersPicker.conf.index || 0)==0,
@ -1682,7 +1681,7 @@ define([
cls: 'shifted-left', cls: 'shifted-left',
style: 'min-width: 90px', style: 'min-width: 90px',
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-multilevels" class="menu-markers" style="width: 93px; margin: 0 9px;"></div>'), clsDropdownItem: false}, {template: _.template('<div id="id-toolbar-menu-multilevels" class="menu-markers" style="width: 93px; margin: 0 9px;"></div>')},
this.mnuMultilevelSettings = new Common.UI.MenuItem({ this.mnuMultilevelSettings = new Common.UI.MenuItem({
caption: this.textListSettings, caption: this.textListSettings,
disabled: (this.mnuMultilevelPicker.conf.index || 0)==0, disabled: (this.mnuMultilevelPicker.conf.index || 0)==0,
@ -1706,7 +1705,7 @@ define([
menuAlign: 'tl-tr', menuAlign: 'tl-tr',
style: 'min-width: 90px;', style: 'min-width: 90px;',
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-pageposition" class="menu-pageposition"></div>'), clsDropdownItem: false}, {template: _.template('<div id="id-toolbar-menu-pageposition" class="menu-pageposition"></div>')},
this.mnuPageNumCurrentPos = new Common.UI.MenuItem({ this.mnuPageNumCurrentPos = new Common.UI.MenuItem({
caption: this.textToCurrent, caption: this.textToCurrent,
disabled: this.mnuPageNumCurrentPos.isDisabled(), disabled: this.mnuPageNumCurrentPos.isDisabled(),
@ -1728,7 +1727,7 @@ define([
this.btnInsertChart.setMenu( new Common.UI.Menu({ this.btnInsertChart.setMenu( new Common.UI.Menu({
style: 'width: 364px;', style: 'width: 364px;',
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>'), clsDropdownItem: false} {template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
] ]
})); }));
@ -2014,7 +2013,7 @@ define([
this.mnuColorSchema.items = []; this.mnuColorSchema.items = [];
var itemTemplate = _.template([ var itemTemplate = _.template([
'<a id="<%= id %>" tabindex="-1" type="menuitem" class="<%= options.cls %>">', '<a id="<%= id %>" tabindex="-1" type="menuitem" class="dropdown-item <%= options.cls %>">',
'<span class="colors">', '<span class="colors">',
'<% _.each(options.colors, function(color) { %>', '<% _.each(options.colors, function(color) { %>',
'<span class="color" style="background: <%= color %>;"></span>', '<span class="color" style="background: <%= color %>;"></span>',

2
apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
View file

@ -338,7 +338,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
}, },
{caption: '--'}, {caption: '--'},
{ template: _.template('<div id="watermark-menu-textcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') }, { template: _.template('<div id="watermark-menu-textcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="watermark-menu-textcolor-new">' + this.textNewColor + '</a>') } { template: _.template('<a id="watermark-menu-textcolor-new" class="dropdown-item">' + this.textNewColor + '</a>') }
] ]
}) })
}); });

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

@ -1309,7 +1309,7 @@ define([
mnuColorSchema.items = []; mnuColorSchema.items = [];
var itemTemplate = _.template([ var itemTemplate = _.template([
'<a id="<%= id %>" class="<%= options.cls %>" tabindex="-1" type="menuitem">', '<a id="<%= id %>" class="dropdown-item <%= options.cls %>" tabindex="-1" type="menuitem">',
'<span class="colors">', '<span class="colors">',
'<% _.each(options.colors, function(color) { %>', '<% _.each(options.colors, function(color) { %>',
'<span class="color" style="background: <%= color %>;"></span>', '<span class="color" style="background: <%= color %>;"></span>',

4
apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
View file

@ -562,7 +562,7 @@ define([
additionalAlign: this.menuAddAlign, additionalAlign: this.menuAddAlign,
items: [ items: [
{ template: _.template('<div id="id-dlg-h-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') }, { template: _.template('<div id="id-dlg-h-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="id-dlg-h-menu-fontcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') } { template: _.template('<a id="id-dlg-h-menu-fontcolor-new" class="dropdown-item" style="padding-left:12px;">' + this.textNewColor + '</a>') }
] ]
}) })
})); }));
@ -581,7 +581,7 @@ define([
additionalAlign: this.menuAddAlign, additionalAlign: this.menuAddAlign,
items: [ items: [
{ template: _.template('<div id="id-dlg-f-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') }, { template: _.template('<div id="id-dlg-f-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="id-dlg-f-menu-fontcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') } { template: _.template('<a id="id-dlg-f-menu-fontcolor-new" class="dropdown-item" style="padding-left:12px;">' + this.textNewColor + '</a>') }
] ]
}) })
})); }));

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

@ -1087,7 +1087,7 @@ define([
}) })
}); });
var pageMarginsTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' + var pageMarginsTemplate = _.template('<a id="<%= id %>" class="dropdown-item" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
'<% if (options.value !== null) { %><div style="display: inline-block;margin-right: 20px;min-width: 80px;">' + '<% if (options.value !== null) { %><div style="display: inline-block;margin-right: 20px;min-width: 80px;">' +
'<label style="display: block;">' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' + '<label style="display: block;">' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
'<label style="display: block;">' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div><div style="display: inline-block;">' + '<label style="display: block;">' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div><div style="display: inline-block;">' +
@ -1136,7 +1136,7 @@ define([
}) })
}); });
var pageSizeTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' + var pageSizeTemplate = _.template('<a id="<%= id %>" class="dropdown-item" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
'<div><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' + '<div><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
'<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>'); '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>');
@ -2003,7 +2003,7 @@ define([
this.mnuColorSchema.items = []; this.mnuColorSchema.items = [];
var itemTemplate = _.template([ var itemTemplate = _.template([
'<a id="<%= id %>" class="<%= options.cls %>" tabindex="-1" type="menuitem">', '<a id="<%= id %>" class="dropdown-item <%= options.cls %>" tabindex="-1" type="menuitem">',
'<span class="colors">', '<span class="colors">',
'<% _.each(options.colors, function(color) { %>', '<% _.each(options.colors, function(color) { %>',
'<span class="color" style="background: <%= color %>;"></span>', '<span class="color" style="background: <%= color %>;"></span>',