From 645e5f8e4c1f2b5527ca187db3a9694c824bb36b Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 2 Dec 2021 23:42:54 +0300
Subject: [PATCH 1/3] [Common] ComboDataView: add groups for DataView,
 refactoring item template

---
 .../main/lib/component/ComboDataView.js       | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js
index fb0b1af65..6597591ba 100644
--- a/apps/common/main/lib/component/ComboDataView.js
+++ b/apps/common/main/lib/component/ComboDataView.js
@@ -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
             });
 

From 08ccff10aba9df0296aaaf1f4d39badc93121bc4 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Fri, 3 Dec 2021 11:07:31 +0300
Subject: [PATCH 2/3] Refactoring ComboDataView

---
 .../main/app/view/ChartSettings.js            | 14 ++++-----
 .../main/app/view/ImageSettings.js            | 14 ++++-----
 .../main/app/view/ShapeSettings.js            | 30 ++++++++++---------
 apps/documenteditor/main/app/view/Toolbar.js  | 29 ++++++++----------
 .../main/app/view/Transitions.js              | 20 ++++++-------
 5 files changed, 53 insertions(+), 54 deletions(-)

diff --git a/apps/documenteditor/main/app/view/ChartSettings.js b/apps/documenteditor/main/app/view/ChartSettings.js
index 1470e4092..d95285e1c 100644
--- a/apps/documenteditor/main/app/view/ChartSettings.js
+++ b/apps/documenteditor/main/app/view/ChartSettings.js
@@ -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,
diff --git a/apps/documenteditor/main/app/view/ImageSettings.js b/apps/documenteditor/main/app/view/ImageSettings.js
index 3e763c838..5379ffd4d 100644
--- a/apps/documenteditor/main/app/view/ImageSettings.js
+++ b/apps/documenteditor/main/app/view/ImageSettings.js
@@ -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,
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 8b7cc35d2..fb9213b78 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -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
+                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,
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 5c91c58cd..b791faebc 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -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);
 
diff --git a/apps/presentationeditor/main/app/view/Transitions.js b/apps/presentationeditor/main/app/view/Transitions.js
index 07a57cc83..a2278dc40 100644
--- a/apps/presentationeditor/main/app/view/Transitions.js
+++ b/apps/presentationeditor/main/app/view/Transitions.js
@@ -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,

From 72d4d76172a79f2f4dcccce17ea049cde7593684 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Sat, 11 Dec 2021 19:16:03 +0300
Subject: [PATCH 3/3] Refactoring ComboDataView

---
 .../main/app/view/ShapeSettings.js            | 16 ++++++++------
 .../main/app/view/SlideSettings.js            | 22 ++++++++++---------
 .../main/app/view/TextArtSettings.js          | 16 ++++++++------
 .../main/app/view/Toolbar.js                  | 16 +++++---------
 .../main/app/view/CellSettings.js             | 22 ++++++++++---------
 .../main/app/view/ShapeSettings.js            | 16 ++++++++------
 .../main/app/view/TextArtSettings.js          | 16 ++++++++------
 7 files changed, 65 insertions(+), 59 deletions(-)

diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index c9183dd01..5035236f8 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -1171,23 +1171,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,
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index f7a7e23da..2b4005fdc 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -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,
diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js
index 611f8cbd8..3819358a7 100644
--- a/apps/presentationeditor/main/app/view/TextArtSettings.js
+++ b/apps/presentationeditor/main/app/view/TextArtSettings.js
@@ -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,
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js
index 7ddb05a46..9ab8a6952 100644
--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@@ -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,
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index f9a587fcb..12106c690 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -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,
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index b67072029..4b6658650 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -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,
diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
index 87d413834..651d4fcbc 100644
--- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
@@ -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,