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

[SSE] Add icon sets presets

Browse source
This commit is contained in:
Julia Radzhabova 2021-02-25 23:15:05 +03:00
parent f6e15bda2a
commit 8e282825f1
2 changed files with 75 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
apps/common/main/resources/less/toolbar.less
View file

@ -668,3 +668,23 @@
width: 20px; width: 20px;
height: 21px; height: 21px;
} }
.menu-iconsets {
margin: 5px 5px 0 10px;
.group-items-container > div {
margin-right: 8px !important;
&:not(:hover),
&:not(.selected) {
.box-shadow(none);
}
}
.item-iconset {
img {
margin: 2px;
}
width: 100px;
height: 20px;
}
}

58
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -1665,9 +1665,57 @@ define([
]; ];
picker.setStore(new Common.UI.DataViewStore(arr)); picker.setStore(new Common.UI.DataViewStore(arr));
this.toolbar.mnuIconSets.menu.addItem(new Common.UI.MenuItem({ menuItem = this.toolbar.mnuIconSets;
template: _.template('<div id="id-toolbar-menu-iconsets" class="menu-shapes" style="margin-left: 5px;"></div>') menuItem.menu.addItem(new Common.UI.MenuItem({
template: _.template('<div id="id-toolbar-menu-iconsets" class="menu-iconsets" style="width: 227px;"></div>')
})); }));
arr = [];
var indexes = [Asc.EIconSetType.Arrows3, Asc.EIconSetType.Arrows3Gray, Asc.EIconSetType.Triangles3, Asc.EIconSetType.Arrows4Gray, Asc.EIconSetType.Arrows4, Asc.EIconSetType.Arrows5Gray, Asc.EIconSetType.Arrows5];
for (var i=0; i<indexes.length; i++) {
var item = collection.at(indexes[i]);
arr.push({group: 'menu-iconset-group-direct', data: {index: item.get('data'), icons: item.get('icons')}});
}
indexes = [Asc.EIconSetType.Traffic3Lights1, Asc.EIconSetType.Traffic3Lights2, Asc.EIconSetType.Signs3, Asc.EIconSetType.Traffic4Lights, Asc.EIconSetType.RedToBlack4];
for (var i=0; i<indexes.length; i++) {
var item = collection.at(indexes[i]);
arr.push({group: 'menu-iconset-group-shape', data: {index: item.get('data'), icons: item.get('icons')}});
}
indexes = [Asc.EIconSetType.Symbols3, Asc.EIconSetType.Symbols3_2, Asc.EIconSetType.Flags3];
for (var i=0; i<indexes.length; i++) {
var item = collection.at(indexes[i]);
arr.push({group: 'menu-iconset-group-indicator', data: {index: item.get('data'), icons: item.get('icons')}});
}
indexes = [Asc.EIconSetType.Stars3, Asc.EIconSetType.Rating4, Asc.EIconSetType.Quarters5, Asc.EIconSetType.Rating5, Asc.EIconSetType.Boxes5];
for (var i=0; i<indexes.length; i++) {
var item = collection.at(indexes[i]);
arr.push({group: 'menu-iconset-group-rating', data: {index: item.get('data'), icons: item.get('icons')}});
}
picker = new Common.UI.DataView({
el: $('#id-toolbar-menu-iconsets', menuItem.$el),
parentMenu: menuItem.menu,
groups: new Common.UI.DataViewGroupStore([
{id: 'menu-iconset-group-direct', caption: this.textDirectional},
{id: 'menu-iconset-group-shape', caption: this.textShapes},
{id: 'menu-iconset-group-indicator', caption: this.textIndicator},
{id: 'menu-iconset-group-rating', caption: this.textRating}
]),
store: new Common.UI.DataViewStore(arr),
itemTemplate: _.template('<div class="item-iconset" id="<%= id %>">' +
'<% _.each(data.icons, function(icon) { %>' +
'<img src="<%= icon %>" style="width:16px;height:16px;">' +
'<% }) %>' +
'</div>')
});
picker.on('item:click', function(picker, item, record, e) {
if (me.api) {
if (record) {
me.api.asc_setCF([], [], [Asc.c_oAscCFRuleTypeSettings.icons, record.get('data').index]);
}
if (e.type !== 'click')
me.toolbar.btnCondFormat.menu.hide();
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnCondFormat);
}
});
}, },
onCondFormatMenu: function(menu, item) { onCondFormatMenu: function(menu, item) {
@ -4235,7 +4283,11 @@ define([
textInsert: 'Insert', textInsert: 'Insert',
txtInsertCells: 'Insert Cells', txtInsertCells: 'Insert Cells',
txtDeleteCells: 'Delete Cells', txtDeleteCells: 'Delete Cells',
errorComboSeries: 'To create a combination chart, select at least two series of data.' errorComboSeries: 'To create a combination chart, select at least two series of data.',
textDirectional: 'Directional',
textShapes: 'Shapes',
textIndicator: 'Indicators',
textRating: 'Ratings'
}, SSE.Controllers.Toolbar || {})); }, SSE.Controllers.Toolbar || {}));
}); });