Auto change width for an integer number of elements for ComboDataView

apps/common/main/lib/component/ComboDataView.js

@@ -56,6 +56,7 @@ define([
             itemWidth           : 80,
             itemHeight          : 40,
             menuMaxHeight       : 300,
+            autoWidth           : false,
             enableKeyEvents     : false,
             beforeOpenHandler   : null,
             additionalMenuItems  : null,
@@ -87,11 +88,13 @@ define([
             this.menuMaxHeight = this.options.menuMaxHeight;
             this.beforeOpenHandler = this.options.beforeOpenHandler;
             this.showLast    = this.options.showLast;
+            this.wrapWidth   = 0;
             this.rootWidth   = 0;
             this.rootHeight  = 0;
             this.rendered    = false;
             this.needFillComboView = false;
             this.minWidth = this.options.minWidth;
+            this.autoWidth = this.options.autoWidth;
             this.delayRenderTips = this.options.delayRenderTips || false;
             this.itemTemplate   = this.options.itemTemplate || _.template([
                 '<div class="style" id="<%= id %>">',
@@ -102,6 +105,11 @@ define([
                 '</div>'
             ].join(''));
 
+
+            if(this.autoWidth) {
+                this.style += ' position:absolute; top:50%; bottom:50%; margin: auto 0;';
+            }
+
             this.fieldPicker = new Common.UI.DataView({
                 cls: 'field-picker',
                 allowScrollbar: false,
@@ -223,6 +231,16 @@ define([
 
         checkSize: function() {
             if (this.cmpEl && this.cmpEl.is(':visible')) {
+                if(this.autoWidth) {
+                    this.autoChangeWidth();
+                    // var wrapWidth = this.$el.width();
+                    // if(wrapWidth != this.wrapWidth){
+                    //     this.wrapWidth = wrapWidth;
+                    //     this.autoChangeWidth();
+                    //     console.log(wrapWidth);
+                    // }
+                }
+                
                 var me = this,
                     width  = this.cmpEl.width(),
                     height = this.cmpEl.height();
@@ -265,7 +283,32 @@ define([
             if (!this.isSuspendEvents)
                 this.trigger('resize', this);
         },
+    
+        autoChangeWidth: function() {
+            var self = this;
+            if(self.fieldPicker.dataViewItems[0]){
+                var wrapEl = self.$el;
+                var wrapWidth = parseFloat(wrapEl.css('width')) - parseFloat(wrapEl.css('padding-left'));
 
+                var itemEl = self.fieldPicker.dataViewItems[0].$el;
+                var itemWidth = parseFloat(itemEl.css('width'));
+                var itemBorder = parseFloat(itemEl.css('border-width'));
+
+                var fieldPickerPadding = parseFloat(self.fieldPicker.$el.css('padding-right'));
+                
+                var itemsCount =  Math.floor((wrapWidth - fieldPickerPadding) / itemWidth);
+                if(itemsCount > this.store.length) 
+                    itemsCount = this.store.length;
+
+                var widthCalc = itemsCount * itemWidth - (itemsCount-2) * itemBorder + fieldPickerPadding;
+                var maxWidth = self.cmpEl.css('max-width');
+                if(widthCalc > maxWidth)
+                    widthCalc = maxWidth;
+                    
+                self.cmpEl.css('width', widthCalc);
+            }
+        },
+        
         onBeforeShowMenu: function(e) {
             var me = this;
 

apps/common/main/resources/less/combo-dataview.less

@@ -91,7 +91,7 @@
 
     .view {
         margin-right: -@combo-dataview-button-width;
-        padding-right: @combo-dataview-button-width;
+        padding-right: calc(@combo-dataview-button-width - @scaled-two-px-value);
 
         .border-left-radius(0);
 

apps/documenteditor/main/app/view/Toolbar.js

@@ -1483,7 +1483,7 @@ define([
                             _set.viewFormMode, _set.lostConnect, _set.disableOnStart],
                         itemWidth: itemWidth,
                         itemHeight: itemHeight,
-                        style: 'min-width:150px;',
+                        style: 'min-width:139px;',
 //                hint        : this.tipParagraphStyle,
                         dataHint: '1',
                         dataHintDirection: 'bottom',
@@ -1491,6 +1491,7 @@ define([
                         enableKeyEvents: true,
                         additionalMenuItems: [this.listStylesAdditionalMenuItem],
                         delayRenderTips: true,
+                        autoWidth:       true,
                         itemTemplate: _.template([
                             '<div class="style" id="<%= id %>">',
                                 '<div style="background-image: url(<%= imageUrl %>); width: ' + itemWidth + 'px; height: ' + itemHeight + 'px;"></div>',

apps/presentationeditor/main/app/view/Toolbar.js

@@ -1058,12 +1058,13 @@ define([
                         itemWidth: 88,
                         enableKeyEvents: true,
                         itemHeight: 40,
-                        style: 'min-width:130px;',
+                        style: 'min-width:123px;',
                         lock: [_set.themeLock, _set.lostConnect, _set.noSlides],
                         dataHint: '1',
                         dataHintDirection: 'bottom',
                         dataHintOffset: '-16, -4',
                         delayRenderTips: true,
+                        autoWidth:       true,
                         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>',

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -1303,7 +1303,7 @@ define([
                     enableKeyEvents : true,
                     itemWidth       : 100,
                     itemHeight      : 20,
-                    style: 'min-width:158px; max-width:663px;',
+                    style: 'min-width:135px; max-width: 660px;',
                     groups: new Common.UI.DataViewGroupStore([
                         {id: 'menu-style-group-custom',     caption: this.textCustom },
                         {id: 'menu-style-group-color',      caption: this.textGoodBadAndNeutral },
@@ -1319,6 +1319,7 @@ define([
                     dataHintDirection: 'bottom',
                     dataHintOffset  : '-16, -4',
                     delayRenderTips: true,
+                    autoWidth:      true,
                     beforeOpenHandler: function(e) {
                         var cmp = this,
                             menu = cmp.openButton.menu;