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

Merge branch 'feature/combo-data-view-refactoring' into develop

Browse source
This commit is contained in:
Julia Radzhabova 2021-12-11 19:24:01 +03:00
parent 100a69251e 72d4d76172
commit 05c73a8c2d
13 changed files with 130 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
apps/common/main/lib/component/ComboDataView.js
View file

@ -81,6 +81,7 @@ define([
this.style = this.options.style;
this.hint = this.options.hint;
this.store = this.options.store || new Common.UI.DataViewStore();
this.groups = this.options.groups;
this.itemWidth = this.options.itemWidth;
this.itemHeight = this.options.itemHeight;
this.menuMaxHeight = this.options.menuMaxHeight;
@ -92,18 +93,19 @@ define([
this.needFillComboView = false;
this.minWidth = this.options.minWidth;
this.delayRenderTips = this.options.delayRenderTips || false;
this.itemTemplate = this.options.itemTemplate || _.template([
'<div class="style" id="<%= id %>">',
'<img src="<%= imageUrl %>" width="' + this.itemWidth + '" height="' + this.itemHeight + '"/>',
'<% if (typeof title !== "undefined") {%>',
'<span class="title"><%= title %></span>',
'<% } %>',
'</div>'
].join(''));
this.fieldPicker = new Common.UI.DataView({
cls: 'field-picker',
allowScrollbar: false,
itemTemplate : _.template([
'<div class="style" id="<%= id %>">',
'<img src="<%= imageUrl %>" width="' + this.itemWidth + '" height="' + this.itemHeight + '"/>',
'<% if (typeof title !== "undefined") {%>',
'<span class="title"><%= title %></span>',
'<% } %>',
'</div>'
].join('')),
itemTemplate : this.itemTemplate,
delayRenderTips: this.delayRenderTips
});
@ -128,15 +130,9 @@ define([
restoreHeight: this.menuMaxHeight,
style: 'max-height: '+this.menuMaxHeight+'px;',
enableKeyEvents: this.options.enableKeyEvents,
groups: this.groups,
store: this.store,
itemTemplate : _.template([
'<div class="style" id="<%= id %>">',
'<img src="<%= imageUrl %>" width="' + this.itemWidth + '" height="' + this.itemHeight + '"/>',
'<% if (typeof title !== "undefined") {%>',
'<span class="title"><%= title %></span>',
'<% } %>',
'</div>'
].join('')),
itemTemplate : this.itemTemplate,
delayRenderTips: this.delayRenderTips
});

14
apps/documenteditor/main/app/view/ChartSettings.js
View file

@ -236,14 +236,14 @@ define([
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big',
delayRenderTips: true
delayRenderTips: true,
itemTemplate: _.template([
'<div class="item-icon-box" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>" ',
'</div>'
].join(''))
});
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="item-icon-box" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>" ',
'</div>'
].join(''));
this.cmbWrapType.render($('#chart-combo-wrap'));
this.cmbWrapType.openButton.menu.cmpEl.css({
'min-width': 178,

14
apps/documenteditor/main/app/view/ImageSettings.js
View file

@ -140,14 +140,14 @@ define([
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-10, 0',
delayRenderTips: true
delayRenderTips: true,
itemTemplate: _.template([
'<div class="item-icon-box" id="<%= id %>" style="">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>"',
'</div>'
].join(''))
});
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="item-icon-box" id="<%= id %>" style="">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>"',
'</div>'
].join(''));
this.cmbWrapType.render($('#image-combo-wrap'));
this.cmbWrapType.openButton.menu.cmpEl.css({
'min-width': 178,

30
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -1267,23 +1267,25 @@ define([
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this.fillControls.push(this.cmbFillSrc);
var itemWidth = 28,
itemHeight = 28;
this.cmbPattern = new Common.UI.ComboDataView({
itemWidth: 28,
itemHeight: 28,
itemWidth: itemWidth,
itemHeight: itemHeight,
menuMaxHeight: 300,
enableKeyEvents: true,
cls: 'combo-pattern',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
dataHintOffset: 'big',
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
'width="' + itemWidth + '" height="' + itemHeight + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''));
].join(''))
});
this.cmbPattern.render($('#shape-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178,
@ -1639,14 +1641,14 @@ define([
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big',
delayRenderTips: true
delayRenderTips: true,
itemTemplate: _.template([
'<div class="item-icon-box" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>"',
'</div>'
].join(''))
});
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="item-icon-box" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>"',
'</div>'
].join(''));
this.cmbWrapType.render($('#shape-combo-wrap'));
this.cmbWrapType.openButton.menu.cmpEl.css({
'min-width': 178,

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

@ -1303,16 +1303,23 @@ define([
caption: me.textStyleMenuNew
});
var itemWidth = 104,
itemHeight = 40;
this.listStyles = new Common.UI.ComboDataView({
cls: 'combo-styles',
itemWidth: 104,
itemHeight: 40,
itemWidth: itemWidth,
itemHeight: itemHeight,
// hint : this.tipParagraphStyle,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-16, -4',
enableKeyEvents: true,
additionalMenuItems: [this.listStylesAdditionalMenuItem],
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<div style="background-image: url(<%= imageUrl %>); width: ' + itemWidth + 'px; height: ' + itemHeight + 'px;"></div>',
'</div>'
].join('')),
beforeOpenHandler: function (e) {
var cmp = this,
menu = cmp.openButton.menu,
@ -1322,22 +1329,22 @@ define([
var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent();
var itemMargin = /*parseInt($(itemEl.get(0)).parent().css('margin-right'))*/-1;
Common.Utils.applicationPixelRatio() > 1 && Common.Utils.applicationPixelRatio() < 2 && (itemMargin = -1 / Common.Utils.applicationPixelRatio());
var itemWidth = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) :
var _width = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) :
(cmp.itemWidth + parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) +
parseFloat(itemEl.css('border-left-width')) + parseFloat(itemEl.css('border-right-width')));
var minCount = cmp.menuPicker.store.length >= minMenuColumn ? minMenuColumn : cmp.menuPicker.store.length,
columnCount = Math.min(cmp.menuPicker.store.length, Math.round($('.dataview', $(cmp.fieldPicker.el)).width() / (itemMargin + itemWidth) + 0.5));
columnCount = Math.min(cmp.menuPicker.store.length, Math.round($('.dataview', $(cmp.fieldPicker.el)).width() / (itemMargin + _width) + 0.5));
columnCount = columnCount < minCount ? minCount : columnCount;
menu.menuAlignEl = cmp.cmpEl;
menu.menuAlign = 'tl-tl';
var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - columnCount * (itemMargin + itemWidth) - 1;
var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - columnCount * (itemMargin + _width) - 1;
menu.setOffset(Math.min(offset, 0));
menu.cmpEl.css({
'width': columnCount * (itemWidth + itemMargin),
'width': columnCount * (_width + itemMargin),
'min-height': cmp.cmpEl.height()
});
}
@ -1353,16 +1360,6 @@ define([
}
});
this.listStyles.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">',
'<div style="background-image: url(<%= imageUrl %>); width: ' + this.listStyles.itemWidth + 'px; height: ' + this.listStyles.itemHeight + 'px;"></div>',
'</div>'
].join(''));
this.listStyles.menuPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">',
'<div style="background-image: url(<%= imageUrl %>); width: ' + this.listStyles.itemWidth + 'px; height: ' + this.listStyles.itemHeight + 'px;"></div>',
'</div>'
].join(''));
this.paragraphControls.push(this.listStyles);
this.textOnlyControls.push(this.listStyles);

16
apps/presentationeditor/main/app/view/ShapeSettings.js
View file

@ -1172,23 +1172,25 @@ define([
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this.fillControls.push(this.cmbFillSrc);
var itemWidth = 28,
itemHeight = 28;
this.cmbPattern = new Common.UI.ComboDataView({
itemWidth: 28,
itemHeight: 28,
itemWidth: itemWidth,
itemHeight: itemHeight,
menuMaxHeight: 300,
enableKeyEvents: true,
cls: 'combo-pattern',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
dataHintOffset: 'big',
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
'width="' + itemWidth + '" height="' + itemHeight + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''));
].join(''))
});
this.cmbPattern.render($('#shape-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178,

22
apps/presentationeditor/main/app/view/SlideSettings.js
View file

@ -702,23 +702,25 @@ define([
createDelayedControls: function() {
var me = this;
var itemWidth = 28,
itemHeight = 28;
this.cmbPattern = new Common.UI.ComboDataView({
itemWidth: 28,
itemHeight: 28,
itemWidth: itemWidth,
itemHeight: itemHeight,
menuMaxHeight: 300,
enableKeyEvents: true,
cls: 'combo-pattern',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
dataHintOffset: 'big',
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
'width="' + itemWidth + '" height="' + itemHeight + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''))
});
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''));
this.cmbPattern.render($('#slide-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178,

16
apps/presentationeditor/main/app/view/TextArtSettings.js
View file

@ -1102,23 +1102,25 @@ define([
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this.lockedControls.push(this.cmbFillSrc);
var itemWidth = 28,
itemHeight = 28;
this.cmbPattern = new Common.UI.ComboDataView({
itemWidth: 28,
itemHeight: 28,
itemWidth: itemWidth,
itemHeight: itemHeight,
menuMaxHeight: 300,
enableKeyEvents: true,
cls: 'combo-pattern',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
dataHintOffset: 'big',
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
'width="' + itemWidth + '" height="' + itemHeight + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''));
].join(''))
});
this.cmbPattern.render($('#textart-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178,

16
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -1017,6 +1017,11 @@ define([
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-16, -4',
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<div class="item-theme" style="' + '<% if (typeof imageUrl !== "undefined") { %>' + 'background-image: url(<%= imageUrl %>);' + '<% } %> background-position: 0 -<%= offsety %>px;"></div>',
'</div>'
].join('')),
beforeOpenHandler: function (e) {
var cmp = this,
menu = cmp.openButton.menu,
@ -1055,17 +1060,6 @@ define([
}
});
me.listTheme.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">',
'<div class="item-theme" style="' + '<% if (typeof imageUrl !== "undefined") { %>' + 'background-image: url(<%= imageUrl %>);' + '<% } %> background-position: 0 -<%= offsety %>px;"></div>',
'</div>'
].join(''));
me.listTheme.menuPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">',
'<div class="item-theme" style="' + '<% if (typeof imageUrl !== "undefined") { %>' + 'background-image: url(<%= imageUrl %>);' + '<% } %> background-position: 0 -<%= offsety %>px;"></div>',
'</div>'
].join(''));
this.cmbInsertShape = new Common.UI.ComboDataViewShape({
cls: 'combo-styles shapes',
itemWidth: 20,

20
apps/presentationeditor/main/app/view/Transitions.js
View file

@ -136,10 +136,18 @@ define([
item.tip = item.title;
});
var itemWidth = 87,
itemHeight = 40;
this.listEffects = new Common.UI.ComboDataView({
cls: 'combo-transitions',
itemWidth: 87,
itemHeight: 40,
itemWidth: itemWidth,
itemHeight: itemHeight,
itemTemplate: _.template([
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
'<div class = "icon toolbar__icon <%= imageUrl %>"></div>',
'<div class = "caption"><%= title %></div>',
'</div>'
].join('')),
enableKeyEvents: true,
lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
dataHint: '1',
@ -173,14 +181,6 @@ define([
this.lockedControls.push(this.listEffects);
this.listEffects.menuPicker.store.add(this._arrEffectName);
this.listEffects.fieldPicker.itemTemplate = _.template([
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + (this.listEffects.itemWidth) + 'px;height: ' + (this.listEffects.itemHeight) + 'px;">',
'<div class = "icon toolbar__icon <%= imageUrl %>"></div>',
'<div class = "caption"><%= title %></div>',
'</div>'
].join(''));
this.listEffects.menuPicker.itemTemplate = this.listEffects.fieldPicker.itemTemplate;
this.btnPreview = new Common.UI.Button({
cls: 'btn-toolbar', // x-huge icon-top',
caption: this.txtPreview,

22
apps/spreadsheeteditor/main/app/view/CellSettings.js
View file

@ -320,23 +320,25 @@ define([
});
this.fillControls.push(this.sldrGradient);
var itemWidth = 28,
itemHeight = 28;
this.cmbPattern = new Common.UI.ComboDataView({
itemWidth: 28,
itemHeight: 28,
itemWidth: itemWidth,
itemHeight: itemHeight,
menuMaxHeight: 300,
enableKeyEvents: true,
cls: 'combo-pattern',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
dataHintOffset: 'big',
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
'width="' + itemWidth + '" height="' + itemHeight + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''))
});
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''));
this.cmbPattern.render($('#cell-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178,

16
apps/spreadsheeteditor/main/app/view/ShapeSettings.js
View file

@ -1188,23 +1188,25 @@ define([
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this.fillControls.push(this.cmbFillSrc);
var itemWidth = 28,
itemHeight = 28;
this.cmbPattern = new Common.UI.ComboDataView({
itemWidth: 28,
itemHeight: 28,
itemWidth: itemWidth,
itemHeight: itemHeight,
menuMaxHeight: 300,
enableKeyEvents: true,
cls: 'combo-pattern',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
dataHintOffset: 'big',
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
'width="' + itemWidth + '" height="' + itemHeight + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''));
].join(''))
});
this.cmbPattern.render($('#shape-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178,

16
apps/spreadsheeteditor/main/app/view/TextArtSettings.js
View file

@ -1106,23 +1106,25 @@ define([
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this.lockedControls.push(this.cmbFillSrc);
var itemWidth = 28,
itemHeight = 28;
this.cmbPattern = new Common.UI.ComboDataView({
itemWidth: 28,
itemHeight: 28,
itemWidth: itemWidth,
itemHeight: itemHeight,
menuMaxHeight: 300,
enableKeyEvents: true,
cls: 'combo-pattern',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
dataHintOffset: 'big',
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
'width="' + itemWidth + '" height="' + itemHeight + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''));
].join(''))
});
this.cmbPattern.render($('#textart-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178,