[SSE] Draw list preview in sdk

This commit is contained in:
Julia Radzhabova 2021-04-03 10:44:20 +03:00
parent c3fc27031f
commit 926a3c436d
3 changed files with 45 additions and 19 deletions

View file

@ -3441,8 +3441,13 @@ define([
view.paraBulletsPicker = new Common.UI.DataView({
el : $('#id-docholder-menu-bullets'),
parentMenu : view.menuParagraphBullets.menu,
groups : view.paraBulletsPicker.groups,
store : view.paraBulletsPicker.store,
itemTemplate: _.template('<div id="<%= id %>" class="item-markerlist" style="background-position: 0 -<%= offsety %>px;"></div>')
itemTemplate: _.template('<% if (type==0) { %>' +
'<div id="<%= id %>" class="item-markerlist"></div>' +
'<% } else if (type==1) { %>' +
'<div id="<%= id %>" class="item-multilevellist"></div>' +
'<% } %>')
});
view.paraBulletsPicker.on('item:click', _.bind(this.onSelectBullets, this));
_conf && view.paraBulletsPicker.selectRecord(_conf.rec, true);

View file

@ -925,7 +925,7 @@ define([
cls: 'shifted-right',
menuAlign: 'tl-tr',
items : [
{ template: _.template('<div id="id-docholder-menu-bullets" class="menu-layouts" style="width: 184px; margin: 0 4px;"></div>') },
{ template: _.template('<div id="id-docholder-menu-bullets" class="menu-layouts" style="width: 372px; margin: 4px 6px;"></div>') },
{caption: '--'},
me.menuParagraphBulletNone = new Common.UI.MenuItem({
caption : me.textNone,
@ -940,24 +940,29 @@ define([
]
})
});
me.paraBulletsPicker = {
conf: {rec: null},
store : new Common.UI.DataViewStore([
{offsety: 38, type: 0, subtype: 1},
{offsety: 76, type: 0, subtype: 2},
{offsety: 114, type: 0, subtype: 3},
{offsety: 152, type: 0, subtype: 4},
{offsety: 190, type: 0, subtype: 5},
{offsety: 228, type: 0, subtype: 6},
{offsety: 266, type: 0, subtype: 7},
{offsety: 684, type: 0, subtype: 8},
{offsety: 570, type: 1, subtype: 4},
{offsety: 532, type: 1, subtype: 5},
{offsety: 608, type: 1, subtype: 6},
{offsety: 418, type: 1, subtype: 1},
{offsety: 456, type: 1, subtype: 2},
{offsety: 494, type: 1, subtype: 3},
{offsety: 646, type: 1, subtype: 7}
{group: 'menu-list-bullet-group', id: 'id-markers-' + Common.UI.getId(), type: 0, subtype: 1},
{group: 'menu-list-bullet-group', id: 'id-markers-' + Common.UI.getId(), type: 0, subtype: 2},
{group: 'menu-list-bullet-group', id: 'id-markers-' + Common.UI.getId(), type: 0, subtype: 3},
{group: 'menu-list-bullet-group', id: 'id-markers-' + Common.UI.getId(), type: 0, subtype: 4},
{group: 'menu-list-bullet-group', id: 'id-markers-' + Common.UI.getId(), type: 0, subtype: 5},
{group: 'menu-list-bullet-group', id: 'id-markers-' + Common.UI.getId(), type: 0, subtype: 6},
{group: 'menu-list-bullet-group', id: 'id-markers-' + Common.UI.getId(), type: 0, subtype: 7},
{group: 'menu-list-bullet-group', id: 'id-markers-' + Common.UI.getId(), type: 0, subtype: 8},
{group: 'menu-list-number-group', id: 'id-numbers-' + Common.UI.getId(), type: 1, subtype: 4},
{group: 'menu-list-number-group', id: 'id-numbers-' + Common.UI.getId(), type: 1, subtype: 5},
{group: 'menu-list-number-group', id: 'id-numbers-' + Common.UI.getId(), type: 1, subtype: 6},
{group: 'menu-list-number-group', id: 'id-numbers-' + Common.UI.getId(), type: 1, subtype: 1},
{group: 'menu-list-number-group', id: 'id-numbers-' + Common.UI.getId(), type: 1, subtype: 2},
{group: 'menu-list-number-group', id: 'id-numbers-' + Common.UI.getId(), type: 1, subtype: 3},
{group: 'menu-list-number-group', id: 'id-numbers-' + Common.UI.getId(), type: 1, subtype: 7}
]),
groups: new Common.UI.DataViewGroupStore([
{id: 'menu-list-bullet-group', caption: this.textBullets},
{id: 'menu-list-number-group', caption: this.textNumbering}
]),
selectRecord: function (rec) {
this.conf.rec = rec;
@ -1240,7 +1245,9 @@ define([
textVar: 'Var',
textMore: 'More functions',
txtCustomSort: 'Custom sort',
txtCondFormat: 'Conditional Formatting'
txtCondFormat: 'Conditional Formatting',
textBullets: 'Bullets',
textNumbering: 'Numbering',
}, SSE.Views.DocumentHolder || {}));
});

View file

@ -133,11 +133,25 @@
}
.item-markerlist {
.background-ximage-v2('toolbar/bullets-and-numbering.png', 38px);
width: 38px;
height: 38px;
}
.item-multilevellist {
width: 80px;
height: 80px;
}
#menu-list-number-group {
.item {
margin-right: 9px;
margin-bottom: 9px;
}
.group-items-container {
margin-bottom: 0;
}
}
#slot-field-zoom {
float: left;
min-width: 46px;