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(),
menu = new Common.UI.Menu({
id: id,
cls: 'shifted-left',
custom: true,
additionalAlign: options.additionalAlign,
items: (options.additionalItems ? options.additionalItems : []).concat([
{ 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;

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

@ -150,11 +150,12 @@ define([
offset : [0, 0],
cyclic : true,
search : false,
scrollAlwaysVisible: true
scrollAlwaysVisible: true,
custom : false
},
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('')),
initialize : function(options) {
@ -620,11 +621,12 @@ define([
offset : [0, 0],
cyclic : true,
search : false,
scrollAlwaysVisible: true
scrollAlwaysVisible: true,
custom : false
},
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) { %>',
'<% if (!item.id) item.id = Common.UI.getId(); %>',
'<% 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);
},
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) {
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: [{
id: 'control-settings-system-color',
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: '--'}],
additionalAlign: this.menuAddAlign,

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

@ -1986,11 +1986,13 @@ define([
var me = this;
var menuViewCopy = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-copy',
caption: me.textCopy,
value: 'copy'
}).on('click', _.bind(me.onCutCopyPaste, me));
var menuViewUndo = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-undo',
caption: me.textUndo
}).on('click', function () {
me.api.Undo();
@ -2001,6 +2003,7 @@ define([
});
var menuViewAddComment = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-menu-comments',
caption: me.addCommentText
}).on('click', _.bind(me.addComment, me));
@ -2011,6 +2014,7 @@ define([
var menuViewSignSeparator = new Common.UI.MenuItem({caption: '--' });
var menuViewPrint = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-print',
caption : me.txtPrintSelection
}).on('click', _.bind(me.onPrintSelection, me));
@ -2246,6 +2250,7 @@ define([
});
this.menuImageWrap = new Common.UI.MenuItem({
iconCls: 'menu__icon wrap-inline',
caption : me.textWrap,
menu : (function(){
function onItemClick(item, e) {
@ -2339,6 +2344,7 @@ define([
});
var menuImageAdvanced = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-menu-image',
caption : me.advancedText
}).on('click', function(item, e) {
var elType, elValue;
@ -2444,11 +2450,13 @@ define([
});
var menuImgCopy = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-copy',
caption : me.textCopy,
value : 'copy'
}).on('click', _.bind(me.onCutCopyPaste, me));
var menuImgPaste = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-paste',
caption : me.textPaste,
value : 'paste'
}).on('click', _.bind(me.onCutCopyPaste, me));
@ -2459,6 +2467,7 @@ define([
}).on('click', _.bind(me.onCutCopyPaste, me));
var menuImgPrint = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-print',
caption : me.txtPrintSelection
}).on('click', _.bind(me.onPrintSelection, me));
@ -2472,19 +2481,23 @@ define([
menuAlign: 'tl-tr',
items: [
new Common.UI.MenuItem({
iconCls: 'menu__icon btn-rotate-90',
caption: this.textRotate90,
value : 1
}).on('click', _.bind(me.onImgRotate, me)),
new Common.UI.MenuItem({
iconCls: 'menu__icon btn-rotate-270',
caption: this.textRotate270,
value : 0
}).on('click', _.bind(me.onImgRotate, me)),
{ caption: '--' },
new Common.UI.MenuItem({
iconCls: 'menu__icon btn-flip-hor',
caption: this.textFlipH,
value : 1
}).on('click', _.bind(me.onImgFlip, me)),
new Common.UI.MenuItem({
iconCls: 'menu__icon btn-flip-vert',
caption: this.textFlipV,
value : 0
}).on('click', _.bind(me.onImgFlip, me))
@ -2525,50 +2538,63 @@ define([
me.menuImageWrap._originalProps = value.imgProps.value;
var cls = 'menu__icon ';
if (notflow) {
for (var i = 0; i < 6; i++) {
me.menuImageWrap.menu.items[i].setChecked(false);
}
cls += 'wrap-inline';
} else {
switch (wrapping) {
case Asc.c_oAscWrapStyle2.Inline:
me.menuImageWrap.menu.items[0].setChecked(true);
cls += 'wrap-inline';
break;
case Asc.c_oAscWrapStyle2.Square:
me.menuImageWrap.menu.items[1].setChecked(true);
cls += 'wrap-square';
break;
case Asc.c_oAscWrapStyle2.Tight:
me.menuImageWrap.menu.items[2].setChecked(true);
cls += 'wrap-tight';
break;
case Asc.c_oAscWrapStyle2.Through:
me.menuImageWrap.menu.items[3].setChecked(true);
cls += 'wrap-through';
break;
case Asc.c_oAscWrapStyle2.TopAndBottom:
me.menuImageWrap.menu.items[4].setChecked(true);
cls += 'wrap-topandbottom';
break;
case Asc.c_oAscWrapStyle2.Behind:
me.menuImageWrap.menu.items[6].setChecked(true);
cls += 'wrap-behind';
break;
case Asc.c_oAscWrapStyle2.InFront:
me.menuImageWrap.menu.items[5].setChecked(true);
cls += 'wrap-infront';
break;
default:
for (var i = 0; i < 6; i++) {
me.menuImageWrap.menu.items[i].setChecked(false);
}
cls += 'wrap-infront';
break;
}
}
me.menuImageWrap.setIconCls(cls);
_.each(me.menuImageWrap.menu.items, function(item) {
item.setDisabled(notflow);
});
var onlyCommonProps = ( value.imgProps.isImg && value.imgProps.isChart || value.imgProps.isImg && value.imgProps.isShape ||
value.imgProps.isShape && value.imgProps.isChart);
if (onlyCommonProps)
if (onlyCommonProps) {
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.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);
@ -2711,22 +2737,28 @@ define([
menuAlign: 'tl-tr',
items : [
me.menuTableCellTop = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-align-top',
caption : me.textShapeAlignTop,
toggleGroup : 'popuptablecellalign',
checkmark : false,
checkable : true,
checked : false,
valign : Asc.c_oAscVertAlignJc.Top
}).on('click', _.bind(tableCellsVAlign, me)),
me.menuTableCellCenter = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-align-middle',
caption : me.textShapeAlignMiddle,
toggleGroup : 'popuptablecellalign',
checkmark : false,
checkable : true,
checked : false,
valign : Asc.c_oAscVertAlignJc.Center
}).on('click', _.bind(tableCellsVAlign, me)),
me.menuTableCellBottom = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-align-bottom',
caption : me.textShapeAlignBottom,
toggleGroup : 'popuptablecellalign',
checkmark : false,
checkable : true,
checked : false,
valign : Asc.c_oAscVertAlignJc.Bottom
@ -2736,10 +2768,12 @@ define([
});
var menuTableAdvanced = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-menu-table',
caption : me.advancedTableText
}).on('click', _.bind(me.advancedTableClick, me));
var menuParagraphAdvancedInTable = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-paragraph',
caption : me.advancedParagraphText
}).on('click', _.bind(me.advancedParagraphClick, me));
@ -2816,6 +2850,7 @@ define([
/** coauthoring begin **/
var menuAddCommentTable = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-menu-comments',
caption : me.addCommentText
}).on('click', _.bind(me.addComment, me));
/** coauthoring end **/
@ -2851,6 +2886,7 @@ define([
].join(''));
me.langTableMenu = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-ic-doclang',
caption : me.langText,
menu : new Common.UI.MenuSimple({
cls: 'lang-menu',
@ -2896,6 +2932,7 @@ define([
});
me.menuSpellCheckTable = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-ic-docspell',
caption : me.spellcheckText,
menu : new Common.UI.Menu({
menuAlign: 'tl-tr',
@ -2913,11 +2950,13 @@ define([
});
var menuTableCopy = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-copy',
caption : me.textCopy,
value : 'copy'
}).on('click', _.bind(me.onCutCopyPaste, me));
var menuTablePaste = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-paste',
caption : me.textPaste,
value : 'paste'
}).on('click', _.bind(me.onCutCopyPaste, me));
@ -2928,6 +2967,7 @@ define([
}).on('click', _.bind(me.onCutCopyPaste, me));
var menuTablePrint = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-print',
caption : me.txtPrintSelection
}).on('click', _.bind(me.onPrintSelection, me));
@ -3370,21 +3410,27 @@ define([
menuAlign: 'tl-tr',
items : [
me.menuParagraphTop = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-align-top',
caption : me.textShapeAlignTop,
checkmark : false,
checkable : true,
checked : false,
toggleGroup : 'popupparagraphvalign',
valign : Asc.c_oAscVAlign.Top
}).on('click', _.bind(paragraphVAlign, me)),
me.menuParagraphCenter = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-align-middle',
caption : me.textShapeAlignMiddle,
checkmark : false,
checkable : true,
checked : false,
toggleGroup : 'popupparagraphvalign',
valign : Asc.c_oAscVAlign.Center
}).on('click', _.bind(paragraphVAlign, me)),
me.menuParagraphBottom = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-align-bottom',
caption : me.textShapeAlignBottom,
checkmark : false,
checkable : true,
checked : false,
toggleGroup : 'popupparagraphvalign',
@ -3440,6 +3486,7 @@ define([
});
var menuParagraphAdvanced = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-paragraph',
caption : me.advancedParagraphText
}).on('click', _.bind(me.advancedParagraphClick, me));
@ -3453,6 +3500,7 @@ define([
});
var menuAddCommentPara = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-menu-comments',
caption : me.addCommentText
}).on('click', _.bind(me.addComment, me));
/** coauthoring end **/
@ -3518,6 +3566,7 @@ define([
});
me.langParaMenu = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-ic-doclang',
caption : me.langText,
menu : new Common.UI.MenuSimple({
cls: 'lang-menu',
@ -3559,11 +3608,13 @@ define([
});
var menuParaCopy = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-copy',
caption : me.textCopy,
value : 'copy'
}).on('click', _.bind(me.onCutCopyPaste, me));
var menuParaPaste = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-paste',
caption : me.textPaste,
value : 'paste'
}).on('click', _.bind(me.onCutCopyPaste, me));
@ -3574,6 +3625,7 @@ define([
}).on('click', _.bind(me.onCutCopyPaste, me));
var menuParaPrint = new Common.UI.MenuItem({
iconCls: 'menu__icon btn-print',
caption : me.txtPrintSelection
}).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 );
var _menu = new Common.UI.Menu({
cls: 'toc-menu',
cls: 'toc-menu shifted-left',
custom: true,
items: [
{template: contentsTemplate, offsety: 0, value: 0},
{template: contentsTemplate, offsety: 72, value: 1},
@ -208,7 +209,8 @@ define([
});
me.contentsMenu = new Common.UI.Menu({
cls: 'toc-menu',
cls: 'toc-menu shifted-left',
custom: true,
items: [
{template: contentsTemplate, offsety: 0, value: 0},
{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',
split: true,
menu: new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
items: [
{
id: 'id-toolbar-menu-auto-fontcolor',
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: '--'},
{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',
caption: me.capBtnInsTable,
menu: new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
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.mniDrawTable, value: 'draw', checkable: true},
{caption: this.mniEraseTable, value: 'erase', checkable: true}
@ -992,6 +996,8 @@ define([
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-colorschemas',
menu: new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
items: [],
restoreHeight: true
})
@ -1645,9 +1651,11 @@ define([
this.btnMarkers.setMenu(
new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
style: 'min-width: 139px',
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({
caption: this.textListSettings,
disabled: (this.mnuMarkersPicker.conf.index || 0)==0,
@ -1659,8 +1667,10 @@ define([
this.btnNumbers.setMenu(
new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
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({
caption: this.textListSettings,
disabled: (this.mnuNumbersPicker.conf.index || 0)==0,
@ -1672,9 +1682,11 @@ define([
this.btnMultilevels.setMenu(
new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
style: 'min-width: 90px',
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({
caption: this.textListSettings,
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',
hint : this.textColor,
menu : new Common.UI.Menu({
cls: 'shifted-left',
custom: true,
items: [
{
id: 'watermark-auto-color',
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: '--'},
{ 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>') }
]
})
});