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

Refactoring ComboDataView

Browse source
This commit is contained in:
Julia Radzhabova 2021-12-03 11:07:31 +03:00
parent 645e5f8e4c
commit 08ccff10ab
5 changed files with 53 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -236,14 +236,14 @@ define([
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big',
delayRenderTips: true
});
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
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(''));
].join(''))
});
this.cmbWrapType.render($('#chart-combo-wrap'));
this.cmbWrapType.openButton.menu.cmpEl.css({
'min-width': 178,

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

@ -140,14 +140,14 @@ define([
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-10, 0',
delayRenderTips: true
});
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
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(''));
].join(''))
});
this.cmbWrapType.render($('#image-combo-wrap'));
this.cmbWrapType.openButton.menu.cmpEl.css({
'min-width': 178,

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

@ -1265,23 +1265,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,
@ -1637,14 +1639,14 @@ define([
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big',
delayRenderTips: true
});
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
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(''));
].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);

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

@ -133,10 +133,18 @@ define([
{title: this.textZoom, imageUrl: "transition-zoom", value: Asc.c_oAscSlideTransitionTypes.Zoom, id: Common.UI.getId()}
];
var itemWidth = 87,
itemHeight = 40;
this.listEffects = new Common.UI.ComboDataView({
cls: 'combo-styles',
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',
@ -169,14 +177,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,