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

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

@ -236,14 +236,14 @@ define([
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big', 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.render($('#chart-combo-wrap'));
this.cmbWrapType.openButton.menu.cmpEl.css({ this.cmbWrapType.openButton.menu.cmpEl.css({
'min-width': 178, 'min-width': 178,

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

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

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

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

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

@ -1303,16 +1303,23 @@ define([
caption: me.textStyleMenuNew caption: me.textStyleMenuNew
}); });
var itemWidth = 104,
itemHeight = 40;
this.listStyles = new Common.UI.ComboDataView({ this.listStyles = new Common.UI.ComboDataView({
cls: 'combo-styles', cls: 'combo-styles',
itemWidth: 104, itemWidth: itemWidth,
itemHeight: 40, itemHeight: itemHeight,
// hint : this.tipParagraphStyle, // hint : this.tipParagraphStyle,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-16, -4', dataHintOffset: '-16, -4',
enableKeyEvents: true, enableKeyEvents: true,
additionalMenuItems: [this.listStylesAdditionalMenuItem], 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) { beforeOpenHandler: function (e) {
var cmp = this, var cmp = this,
menu = cmp.openButton.menu, menu = cmp.openButton.menu,
@ -1322,22 +1329,22 @@ define([
var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent(); var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent();
var itemMargin = /*parseInt($(itemEl.get(0)).parent().css('margin-right'))*/-1; var itemMargin = /*parseInt($(itemEl.get(0)).parent().css('margin-right'))*/-1;
Common.Utils.applicationPixelRatio() > 1 && Common.Utils.applicationPixelRatio() < 2 && (itemMargin = -1 / Common.Utils.applicationPixelRatio()); 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')) + (cmp.itemWidth + parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) +
parseFloat(itemEl.css('border-left-width')) + parseFloat(itemEl.css('border-right-width'))); parseFloat(itemEl.css('border-left-width')) + parseFloat(itemEl.css('border-right-width')));
var minCount = cmp.menuPicker.store.length >= minMenuColumn ? minMenuColumn : cmp.menuPicker.store.length, 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; columnCount = columnCount < minCount ? minCount : columnCount;
menu.menuAlignEl = cmp.cmpEl; menu.menuAlignEl = cmp.cmpEl;
menu.menuAlign = 'tl-tl'; 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.setOffset(Math.min(offset, 0));
menu.cmpEl.css({ menu.cmpEl.css({
'width': columnCount * (itemWidth + itemMargin), 'width': columnCount * (_width + itemMargin),
'min-height': cmp.cmpEl.height() '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.paragraphControls.push(this.listStyles);
this.textOnlyControls.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()} {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({ this.listEffects = new Common.UI.ComboDataView({
cls: 'combo-styles', cls: 'combo-styles',
itemWidth: 87, itemWidth: itemWidth,
itemHeight: 40, 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, enableKeyEvents: true,
lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock], lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
dataHint: '1', dataHint: '1',
@ -169,14 +177,6 @@ define([
this.lockedControls.push(this.listEffects); this.lockedControls.push(this.listEffects);
this.listEffects.menuPicker.store.add(this._arrEffectName); 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({ this.btnPreview = new Common.UI.Button({
cls: 'btn-toolbar', // x-huge icon-top', cls: 'btn-toolbar', // x-huge icon-top',
caption: this.txtPreview, caption: this.txtPreview,