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

[SSE] Change the width of the template menu in the right menu to match the width of the window

Browse source
This commit is contained in:
Alexei Koshelev 2022-09-14 14:40:47 +03:00
parent 6e5de0c8c1
commit c130f79e7f
1 changed files with 39 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
apps/spreadsheeteditor/main/app/view/TableSettings.js
View file

@ -524,14 +524,13 @@ define([
cls : 'btn-large-dataview sheet-template-table', cls : 'btn-large-dataview sheet-template-table',
iconCls : 'icon-template-table', iconCls : 'icon-template-table',
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
style: 'width: 505px;',
items: [ items: [
{ template: _.template('<div id="id-table-menu-template" class="menu-table-template" style="margin: 5px 5px 5px 10px;"></div>') } { template: _.template('<div id="id-table-menu-template" class="menu-table-template" style="margin: 0 4px;"></div>') }
] ]
}), }),
dataHint : '1', dataHint : '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big' dataHintOffset: 'big',
}); });
this.btnTableTemplate.on('render:after', function(btn) { this.btnTableTemplate.on('render:after', function(btn) {
self.mnuTableTemplatePicker = new Common.UI.DataView({ self.mnuTableTemplatePicker = new Common.UI.DataView({
@ -540,11 +539,47 @@ define([
restoreHeight: 325, restoreHeight: 325,
groups: new Common.UI.DataViewGroupStore(), groups: new Common.UI.DataViewGroupStore(),
store: new Common.UI.DataViewStore(), store: new Common.UI.DataViewStore(),
itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="44" width="60"></div>'), itemTemplate: _.template('<div id="<%= id %>" class="item-template"><img src="<%= imageUrl %>" height="44" width="60"></div>'),
style: 'max-height: 325px;', style: 'max-height: 325px;',
delayRenderTips: true delayRenderTips: true
}); });
}); });
this.btnTableTemplate.menu.on('show:before', function(menu) {
if (menu && self.mnuTableTemplatePicker) {
var picker = self.mnuTableTemplatePicker,
columnCount = 7;
if (picker.cmpEl) {
var itemEl = $(picker.cmpEl.find('.dataview.inner .item-template').get(0)).parent(),
itemMargin = 8,
itemWidth = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) : 60;
var menuWidth = columnCount * (itemMargin + itemWidth) + 11, // for scroller
menuMargins = parseFloat(picker.cmpEl.css('margin-left')) + parseFloat(picker.cmpEl.css('margin-right'));
if (menuWidth + menuMargins>Common.Utils.innerWidth())
menuWidth = Math.max(Math.floor((Common.Utils.innerWidth()-menuMargins-11)/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth) + 11;
picker.cmpEl.css({
'width': menuWidth
});
menu.alignPosition();
}
}
var scroller = self.mnuTableTemplatePicker.scroller;
if (scroller) {
scroller.update({alwaysVisibleY: true});
scroller.scrollTop(0);
}
var val = self.mnuTableTemplatePicker.store.findWhere({name: self._state.tablestylename});
if (val)
self.mnuTableTemplatePicker.selectRecord(val);
else
self.mnuTableTemplatePicker.deselectAll();
});
this.btnTableTemplate.render($('#table-btn-template')); this.btnTableTemplate.render($('#table-btn-template'));
this.lockedControls.push(this.btnTableTemplate); this.lockedControls.push(this.btnTableTemplate);
this.mnuTableTemplatePicker.on('item:click', _.bind(this.onTableTemplateSelect, this, this.btnTableTemplate)); this.mnuTableTemplatePicker.on('item:click', _.bind(this.onTableTemplateSelect, this, this.btnTableTemplate));