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

[DE] Add icons to button menu and context menu

Browse source
This commit is contained in:
Julia Radzhabova 2020-08-18 14:02:44 +03:00
parent afb4a2cdc3
commit ffca06badb
9 changed files with 121 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -107,10 +107,12 @@ define([
var id = Common.UI.getId(), var id = Common.UI.getId(),
menu = new Common.UI.Menu({ menu = new Common.UI.Menu({
id: id, id: id,
cls: 'shifted-left',
custom: true,
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>') }, { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="' + id + '-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') } { template: _.template('<a id="' + id + '-color-new" style="">' + this.textNewColor + '</a>') }
]) ])
}); });
return menu; return menu;

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

@ -150,11 +150,12 @@ define([
offset : [0, 0], offset : [0, 0],
cyclic : true, cyclic : true,
search : false, search : false,
scrollAlwaysVisible: true scrollAlwaysVisible: true,
custom : false
}, },
template: _.template([ template: _.template([
'<ul class="dropdown-menu <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu"></ul>' '<ul class="dropdown-menu <% if(!options.custom) { %> shifted-right <% } %> <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu"></ul>'
].join('')), ].join('')),
initialize : function(options) { initialize : function(options) {
@ -620,11 +621,12 @@ define([
offset : [0, 0], offset : [0, 0],
cyclic : true, cyclic : true,
search : false, search : false,
scrollAlwaysVisible: true scrollAlwaysVisible: true,
custom : false
}, },
template: _.template([ template: _.template([
'<ul class="dropdown-menu <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu">', '<ul class="dropdown-menu <% if(!options.custom) { %> shifted-right <% } %> <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu">',
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<% if (!item.id) item.id = Common.UI.getId(); %>', '<% if (!item.id) item.id = Common.UI.getId(); %>',
'<% item.checked = item.checked || false; %>', '<% item.checked = item.checked || false; %>',

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

@ -238,6 +238,16 @@ define([
this.cmpEl.find('a').contents().last()[0].textContent = (noencoding) ? caption : Common.Utils.String.htmlEncode(caption); this.cmpEl.find('a').contents().last()[0].textContent = (noencoding) ? caption : Common.Utils.String.htmlEncode(caption);
}, },
setIconCls: function(iconCls) {
if (this.rendered && !_.isEmpty(this.iconCls)) {
var firstChild = this.cmpEl.children(':first');
if (firstChild) {
firstChild.find('.menu-item-icon').removeClass(this.iconCls).addClass(iconCls);
}
this.iconCls = iconCls;
}
},
setChecked: function(check, suppressEvent) { setChecked: function(check, suppressEvent) {
this.toggle(check, suppressEvent); this.toggle(check, suppressEvent);
}, },

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

@ -84,4 +84,25 @@
} }
} }
} }
&.shifted-right {
li {
& > a {
padding-left: 28px;
}
.menu-item-icon {
margin: -3px 0 0 -24px;
}
.checked:not(.no-checkmark):before {
margin-left: -22px;
}
}
}
&.shifted-left {
li {
& > a {
padding-left: 12px;
}
}
}
} }

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

@ -132,7 +132,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
additionalItems: [{ additionalItems: [{
id: 'control-settings-system-color', id: 'control-settings-system-color',
caption: this.textSystemColor, caption: this.textSystemColor,
template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 -7px; background-color: #dcdcdc;"></span><%= caption %></a>') 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: #dcdcdc;"></span><%= caption %></a>')
}, },
{caption: '--'}], {caption: '--'}],
additionalAlign: this.menuAddAlign, additionalAlign: this.menuAddAlign,

56
apps/documenteditor/main/app/view/DocumentHolder.js
View file

@ -1986,11 +1986,13 @@ define([
var me = this; var me = this;
var menuViewCopy = new Common.UI.MenuItem({ var menuViewCopy = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-copy',
caption: me.textCopy, caption: me.textCopy,
value: 'copy' value: 'copy'
}).on('click', _.bind(me.onCutCopyPaste, me)); }).on('click', _.bind(me.onCutCopyPaste, me));
var menuViewUndo = new Common.UI.MenuItem({ var menuViewUndo = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-undo',
caption: me.textUndo caption: me.textUndo
}).on('click', function () { }).on('click', function () {
me.api.Undo(); me.api.Undo();
@ -2001,6 +2003,7 @@ define([
}); });
var menuViewAddComment = new Common.UI.MenuItem({ var menuViewAddComment = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-menu-comments',
caption: me.addCommentText caption: me.addCommentText
}).on('click', _.bind(me.addComment, me)); }).on('click', _.bind(me.addComment, me));
@ -2011,6 +2014,7 @@ define([
var menuViewSignSeparator = new Common.UI.MenuItem({caption: '--' }); var menuViewSignSeparator = new Common.UI.MenuItem({caption: '--' });
var menuViewPrint = new Common.UI.MenuItem({ var menuViewPrint = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-print',
caption : me.txtPrintSelection caption : me.txtPrintSelection
}).on('click', _.bind(me.onPrintSelection, me)); }).on('click', _.bind(me.onPrintSelection, me));
@ -2246,6 +2250,7 @@ define([
}); });
this.menuImageWrap = new Common.UI.MenuItem({ this.menuImageWrap = new Common.UI.MenuItem({
iconCls: 'menu__icon wrap-inline',
caption : me.textWrap, caption : me.textWrap,
menu : (function(){ menu : (function(){
function onItemClick(item, e) { function onItemClick(item, e) {
@ -2339,6 +2344,7 @@ define([
}); });
var menuImageAdvanced = new Common.UI.MenuItem({ var menuImageAdvanced = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-menu-image',
caption : me.advancedText caption : me.advancedText
}).on('click', function(item, e) { }).on('click', function(item, e) {
var elType, elValue; var elType, elValue;
@ -2444,11 +2450,13 @@ define([
}); });
var menuImgCopy = new Common.UI.MenuItem({ var menuImgCopy = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-copy',
caption : me.textCopy, caption : me.textCopy,
value : 'copy' value : 'copy'
}).on('click', _.bind(me.onCutCopyPaste, me)); }).on('click', _.bind(me.onCutCopyPaste, me));
var menuImgPaste = new Common.UI.MenuItem({ var menuImgPaste = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-paste',
caption : me.textPaste, caption : me.textPaste,
value : 'paste' value : 'paste'
}).on('click', _.bind(me.onCutCopyPaste, me)); }).on('click', _.bind(me.onCutCopyPaste, me));
@ -2459,6 +2467,7 @@ define([
}).on('click', _.bind(me.onCutCopyPaste, me)); }).on('click', _.bind(me.onCutCopyPaste, me));
var menuImgPrint = new Common.UI.MenuItem({ var menuImgPrint = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-print',
caption : me.txtPrintSelection caption : me.txtPrintSelection
}).on('click', _.bind(me.onPrintSelection, me)); }).on('click', _.bind(me.onPrintSelection, me));
@ -2472,19 +2481,23 @@ define([
menuAlign: 'tl-tr', menuAlign: 'tl-tr',
items: [ items: [
new Common.UI.MenuItem({ new Common.UI.MenuItem({
iconCls: 'menu__icon btn-rotate-90',
caption: this.textRotate90, caption: this.textRotate90,
value : 1 value : 1
}).on('click', _.bind(me.onImgRotate, me)), }).on('click', _.bind(me.onImgRotate, me)),
new Common.UI.MenuItem({ new Common.UI.MenuItem({
iconCls: 'menu__icon btn-rotate-270',
caption: this.textRotate270, caption: this.textRotate270,
value : 0 value : 0
}).on('click', _.bind(me.onImgRotate, me)), }).on('click', _.bind(me.onImgRotate, me)),
{ caption: '--' }, { caption: '--' },
new Common.UI.MenuItem({ new Common.UI.MenuItem({
iconCls: 'menu__icon btn-flip-hor',
caption: this.textFlipH, caption: this.textFlipH,
value : 1 value : 1
}).on('click', _.bind(me.onImgFlip, me)), }).on('click', _.bind(me.onImgFlip, me)),
new Common.UI.MenuItem({ new Common.UI.MenuItem({
iconCls: 'menu__icon btn-flip-vert',
caption: this.textFlipV, caption: this.textFlipV,
value : 0 value : 0
}).on('click', _.bind(me.onImgFlip, me)) }).on('click', _.bind(me.onImgFlip, me))
@ -2525,50 +2538,63 @@ define([
me.menuImageWrap._originalProps = value.imgProps.value; me.menuImageWrap._originalProps = value.imgProps.value;
var cls = 'menu__icon ';
if (notflow) { if (notflow) {
for (var i = 0; i < 6; i++) { for (var i = 0; i < 6; i++) {
me.menuImageWrap.menu.items[i].setChecked(false); me.menuImageWrap.menu.items[i].setChecked(false);
} }
cls += 'wrap-inline';
} else { } else {
switch (wrapping) { switch (wrapping) {
case Asc.c_oAscWrapStyle2.Inline: case Asc.c_oAscWrapStyle2.Inline:
me.menuImageWrap.menu.items[0].setChecked(true); me.menuImageWrap.menu.items[0].setChecked(true);
cls += 'wrap-inline';
break; break;
case Asc.c_oAscWrapStyle2.Square: case Asc.c_oAscWrapStyle2.Square:
me.menuImageWrap.menu.items[1].setChecked(true); me.menuImageWrap.menu.items[1].setChecked(true);
cls += 'wrap-square';
break; break;
case Asc.c_oAscWrapStyle2.Tight: case Asc.c_oAscWrapStyle2.Tight:
me.menuImageWrap.menu.items[2].setChecked(true); me.menuImageWrap.menu.items[2].setChecked(true);
cls += 'wrap-tight';
break; break;
case Asc.c_oAscWrapStyle2.Through: case Asc.c_oAscWrapStyle2.Through:
me.menuImageWrap.menu.items[3].setChecked(true); me.menuImageWrap.menu.items[3].setChecked(true);
cls += 'wrap-through';
break; break;
case Asc.c_oAscWrapStyle2.TopAndBottom: case Asc.c_oAscWrapStyle2.TopAndBottom:
me.menuImageWrap.menu.items[4].setChecked(true); me.menuImageWrap.menu.items[4].setChecked(true);
cls += 'wrap-topandbottom';
break; break;
case Asc.c_oAscWrapStyle2.Behind: case Asc.c_oAscWrapStyle2.Behind:
me.menuImageWrap.menu.items[6].setChecked(true); me.menuImageWrap.menu.items[6].setChecked(true);
cls += 'wrap-behind';
break; break;
case Asc.c_oAscWrapStyle2.InFront: case Asc.c_oAscWrapStyle2.InFront:
me.menuImageWrap.menu.items[5].setChecked(true); me.menuImageWrap.menu.items[5].setChecked(true);
cls += 'wrap-infront';
break; break;
default: default:
for (var i = 0; i < 6; i++) { for (var i = 0; i < 6; i++) {
me.menuImageWrap.menu.items[i].setChecked(false); me.menuImageWrap.menu.items[i].setChecked(false);
} }
cls += 'wrap-infront';
break; break;
} }
} }
me.menuImageWrap.setIconCls(cls);
_.each(me.menuImageWrap.menu.items, function(item) { _.each(me.menuImageWrap.menu.items, function(item) {
item.setDisabled(notflow); item.setDisabled(notflow);
}); });
var onlyCommonProps = ( value.imgProps.isImg && value.imgProps.isChart || value.imgProps.isImg && value.imgProps.isShape || var onlyCommonProps = ( value.imgProps.isImg && value.imgProps.isChart || value.imgProps.isImg && value.imgProps.isShape ||
value.imgProps.isShape && value.imgProps.isChart); value.imgProps.isShape && value.imgProps.isChart);
if (onlyCommonProps) if (onlyCommonProps) {
menuImageAdvanced.setCaption(me.advancedText, true); menuImageAdvanced.setCaption(me.advancedText, true);
else { menuImageAdvanced.setIconCls('menu__icon btn-menu-image');
} else {
menuImageAdvanced.setCaption((value.imgProps.isImg) ? me.imageText : ((value.imgProps.isChart) ? me.chartText : me.shapeText), true); menuImageAdvanced.setCaption((value.imgProps.isImg) ? me.imageText : ((value.imgProps.isChart) ? me.chartText : me.shapeText), true);
menuImageAdvanced.setIconCls('menu__icon ' + (value.imgProps.isImg ? 'btn-menu-image' : (value.imgProps.isChart ? 'btn-menu-chart' : 'btn-menu-shape')));
} }
menuChartEdit.setVisible(!_.isNull(value.imgProps.value.get_ChartProperties()) && !onlyCommonProps); menuChartEdit.setVisible(!_.isNull(value.imgProps.value.get_ChartProperties()) && !onlyCommonProps);
@ -2711,22 +2737,28 @@ define([
menuAlign: 'tl-tr', menuAlign: 'tl-tr',
items : [ items : [
me.menuTableCellTop = new Common.UI.MenuItem({ me.menuTableCellTop = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-align-top',
caption : me.textShapeAlignTop, caption : me.textShapeAlignTop,
toggleGroup : 'popuptablecellalign', toggleGroup : 'popuptablecellalign',
checkmark : false,
checkable : true, checkable : true,
checked : false, checked : false,
valign : Asc.c_oAscVertAlignJc.Top valign : Asc.c_oAscVertAlignJc.Top
}).on('click', _.bind(tableCellsVAlign, me)), }).on('click', _.bind(tableCellsVAlign, me)),
me.menuTableCellCenter = new Common.UI.MenuItem({ me.menuTableCellCenter = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-align-middle',
caption : me.textShapeAlignMiddle, caption : me.textShapeAlignMiddle,
toggleGroup : 'popuptablecellalign', toggleGroup : 'popuptablecellalign',
checkmark : false,
checkable : true, checkable : true,
checked : false, checked : false,
valign : Asc.c_oAscVertAlignJc.Center valign : Asc.c_oAscVertAlignJc.Center
}).on('click', _.bind(tableCellsVAlign, me)), }).on('click', _.bind(tableCellsVAlign, me)),
me.menuTableCellBottom = new Common.UI.MenuItem({ me.menuTableCellBottom = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-align-bottom',
caption : me.textShapeAlignBottom, caption : me.textShapeAlignBottom,
toggleGroup : 'popuptablecellalign', toggleGroup : 'popuptablecellalign',
checkmark : false,
checkable : true, checkable : true,
checked : false, checked : false,
valign : Asc.c_oAscVertAlignJc.Bottom valign : Asc.c_oAscVertAlignJc.Bottom
@ -2736,10 +2768,12 @@ define([
}); });
var menuTableAdvanced = new Common.UI.MenuItem({ var menuTableAdvanced = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-menu-table',
caption : me.advancedTableText caption : me.advancedTableText
}).on('click', _.bind(me.advancedTableClick, me)); }).on('click', _.bind(me.advancedTableClick, me));
var menuParagraphAdvancedInTable = new Common.UI.MenuItem({ var menuParagraphAdvancedInTable = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-paragraph',
caption : me.advancedParagraphText caption : me.advancedParagraphText
}).on('click', _.bind(me.advancedParagraphClick, me)); }).on('click', _.bind(me.advancedParagraphClick, me));
@ -2816,6 +2850,7 @@ define([
/** coauthoring begin **/ /** coauthoring begin **/
var menuAddCommentTable = new Common.UI.MenuItem({ var menuAddCommentTable = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-menu-comments',
caption : me.addCommentText caption : me.addCommentText
}).on('click', _.bind(me.addComment, me)); }).on('click', _.bind(me.addComment, me));
/** coauthoring end **/ /** coauthoring end **/
@ -2851,6 +2886,7 @@ define([
].join('')); ].join(''));
me.langTableMenu = new Common.UI.MenuItem({ me.langTableMenu = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-ic-doclang',
caption : me.langText, caption : me.langText,
menu : new Common.UI.MenuSimple({ menu : new Common.UI.MenuSimple({
cls: 'lang-menu', cls: 'lang-menu',
@ -2896,6 +2932,7 @@ define([
}); });
me.menuSpellCheckTable = new Common.UI.MenuItem({ me.menuSpellCheckTable = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-ic-docspell',
caption : me.spellcheckText, caption : me.spellcheckText,
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
menuAlign: 'tl-tr', menuAlign: 'tl-tr',
@ -2913,11 +2950,13 @@ define([
}); });
var menuTableCopy = new Common.UI.MenuItem({ var menuTableCopy = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-copy',
caption : me.textCopy, caption : me.textCopy,
value : 'copy' value : 'copy'
}).on('click', _.bind(me.onCutCopyPaste, me)); }).on('click', _.bind(me.onCutCopyPaste, me));
var menuTablePaste = new Common.UI.MenuItem({ var menuTablePaste = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-paste',
caption : me.textPaste, caption : me.textPaste,
value : 'paste' value : 'paste'
}).on('click', _.bind(me.onCutCopyPaste, me)); }).on('click', _.bind(me.onCutCopyPaste, me));
@ -2928,6 +2967,7 @@ define([
}).on('click', _.bind(me.onCutCopyPaste, me)); }).on('click', _.bind(me.onCutCopyPaste, me));
var menuTablePrint = new Common.UI.MenuItem({ var menuTablePrint = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-print',
caption : me.txtPrintSelection caption : me.txtPrintSelection
}).on('click', _.bind(me.onPrintSelection, me)); }).on('click', _.bind(me.onPrintSelection, me));
@ -3370,21 +3410,27 @@ define([
menuAlign: 'tl-tr', menuAlign: 'tl-tr',
items : [ items : [
me.menuParagraphTop = new Common.UI.MenuItem({ me.menuParagraphTop = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-align-top',
caption : me.textShapeAlignTop, caption : me.textShapeAlignTop,
checkmark : false,
checkable : true, checkable : true,
checked : false, checked : false,
toggleGroup : 'popupparagraphvalign', toggleGroup : 'popupparagraphvalign',
valign : Asc.c_oAscVAlign.Top valign : Asc.c_oAscVAlign.Top
}).on('click', _.bind(paragraphVAlign, me)), }).on('click', _.bind(paragraphVAlign, me)),
me.menuParagraphCenter = new Common.UI.MenuItem({ me.menuParagraphCenter = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-align-middle',
caption : me.textShapeAlignMiddle, caption : me.textShapeAlignMiddle,
checkmark : false,
checkable : true, checkable : true,
checked : false, checked : false,
toggleGroup : 'popupparagraphvalign', toggleGroup : 'popupparagraphvalign',
valign : Asc.c_oAscVAlign.Center valign : Asc.c_oAscVAlign.Center
}).on('click', _.bind(paragraphVAlign, me)), }).on('click', _.bind(paragraphVAlign, me)),
me.menuParagraphBottom = new Common.UI.MenuItem({ me.menuParagraphBottom = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-align-bottom',
caption : me.textShapeAlignBottom, caption : me.textShapeAlignBottom,
checkmark : false,
checkable : true, checkable : true,
checked : false, checked : false,
toggleGroup : 'popupparagraphvalign', toggleGroup : 'popupparagraphvalign',
@ -3440,6 +3486,7 @@ define([
}); });
var menuParagraphAdvanced = new Common.UI.MenuItem({ var menuParagraphAdvanced = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-paragraph',
caption : me.advancedParagraphText caption : me.advancedParagraphText
}).on('click', _.bind(me.advancedParagraphClick, me)); }).on('click', _.bind(me.advancedParagraphClick, me));
@ -3453,6 +3500,7 @@ define([
}); });
var menuAddCommentPara = new Common.UI.MenuItem({ var menuAddCommentPara = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-menu-comments',
caption : me.addCommentText caption : me.addCommentText
}).on('click', _.bind(me.addComment, me)); }).on('click', _.bind(me.addComment, me));
/** coauthoring end **/ /** coauthoring end **/
@ -3518,6 +3566,7 @@ define([
}); });
me.langParaMenu = new Common.UI.MenuItem({ me.langParaMenu = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-ic-doclang',
caption : me.langText, caption : me.langText,
menu : new Common.UI.MenuSimple({ menu : new Common.UI.MenuSimple({
cls: 'lang-menu', cls: 'lang-menu',
@ -3559,11 +3608,13 @@ define([
}); });
var menuParaCopy = new Common.UI.MenuItem({ var menuParaCopy = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-copy',
caption : me.textCopy, caption : me.textCopy,
value : 'copy' value : 'copy'
}).on('click', _.bind(me.onCutCopyPaste, me)); }).on('click', _.bind(me.onCutCopyPaste, me));
var menuParaPaste = new Common.UI.MenuItem({ var menuParaPaste = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-paste',
caption : me.textPaste, caption : me.textPaste,
value : 'paste' value : 'paste'
}).on('click', _.bind(me.onCutCopyPaste, me)); }).on('click', _.bind(me.onCutCopyPaste, me));
@ -3574,6 +3625,7 @@ define([
}).on('click', _.bind(me.onCutCopyPaste, me)); }).on('click', _.bind(me.onCutCopyPaste, me));
var menuParaPrint = new Common.UI.MenuItem({ var menuParaPrint = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-print',
caption : me.txtPrintSelection caption : me.txtPrintSelection
}).on('click', _.bind(me.onPrintSelection, me)); }).on('click', _.bind(me.onPrintSelection, me));

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

@ -195,7 +195,8 @@ define([
btn.updateHint( me.tipContents ); btn.updateHint( me.tipContents );
var _menu = new Common.UI.Menu({ var _menu = new Common.UI.Menu({
cls: 'toc-menu', cls: 'toc-menu shifted-left',
custom: true,
items: [ items: [
{template: contentsTemplate, offsety: 0, value: 0}, {template: contentsTemplate, offsety: 0, value: 0},
{template: contentsTemplate, offsety: 72, value: 1}, {template: contentsTemplate, offsety: 72, value: 1},
@ -208,7 +209,8 @@ define([
}); });
me.contentsMenu = new Common.UI.Menu({ me.contentsMenu = new Common.UI.Menu({
cls: 'toc-menu', cls: 'toc-menu shifted-left',
custom: true,
items: [ items: [
{template: contentsTemplate, offsety: 0, value: 0}, {template: contentsTemplate, offsety: 0, value: 0},
{template: contentsTemplate, offsety: 72, value: 1}, {template: contentsTemplate, offsety: 72, value: 1},

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

@ -260,15 +260,17 @@ define([
iconCls: 'toolbar__icon btn-fontcolor', iconCls: 'toolbar__icon btn-fontcolor',
split: true, split: true,
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
items: [ items: [
{ {
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 -7px; background-color: #000;"></span><%= caption %></a>') 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>')
}, },
{caption: '--'}, {caption: '--'},
{template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>')}, {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" style="">' + this.textNewColor + '</a>')}
] ]
}) })
}); });
@ -436,8 +438,10 @@ define([
iconCls: 'toolbar__icon btn-inserttable', iconCls: 'toolbar__icon btn-inserttable',
caption: me.capBtnInsTable, caption: me.capBtnInsTable,
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>')}, {template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 12px;"></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}
@ -992,6 +996,8 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-colorschemas', iconCls: 'toolbar__icon btn-colorschemas',
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
items: [], items: [],
restoreHeight: true restoreHeight: true
}) })
@ -1645,9 +1651,11 @@ define([
this.btnMarkers.setMenu( this.btnMarkers.setMenu(
new Common.UI.Menu({ new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
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 16px;"></div>')}, {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 139px; margin: 0 12px;"></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,
@ -1659,8 +1667,10 @@ define([
this.btnNumbers.setMenu( this.btnNumbers.setMenu(
new Common.UI.Menu({ new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 16px;"></div>')}, {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 12px;"></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,
@ -1672,9 +1682,11 @@ define([
this.btnMultilevels.setMenu( this.btnMultilevels.setMenu(
new Common.UI.Menu({ new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
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 16px;"></div>')}, {template: _.template('<div id="id-toolbar-menu-multilevels" class="menu-markers" style="width: 93px; margin: 0 12px;"></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,

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

@ -329,15 +329,17 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
iconCls : 'toolbar__icon btn-fontcolor', iconCls : 'toolbar__icon btn-fontcolor',
hint : this.textColor, hint : this.textColor,
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
items: [ items: [
{ {
id: 'watermark-auto-color', id: 'watermark-auto-color',
caption: this.textAuto, caption: this.textAuto,
template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 -7px; background-color: #000;"></span><%= caption %></a>') 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>')
}, },
{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" style="padding-left:12px;">' + this.textNewColor + '</a>') } { template: _.template('<a id="watermark-menu-textcolor-new">' + this.textNewColor + '</a>') }
] ]
}) })
}); });