Merge pull request #1465 from ONLYOFFICE/feature/resize-toolbar

Feature/resize toolbar

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

@@ -52,6 +52,7 @@ define([
         var $scrollL;
         var optsFold = {timeout: 2000};
         var config = {};
+        var btnsMore = [];
 
         var onScrollTabs = function(opts, e) {
             var sv = $boxTabs.scrollLeft();
@@ -126,7 +127,9 @@ define([
 
                 $boxTabs = me.$('.tabs > ul');
                 me.$tabs = $boxTabs.find('> li');
-                me.$panels = me.$('.box-panels > .panel');
+                me.$boxpanels = me.$('.box-panels');
+                me.$panels = me.$boxpanels.find('> .panel');
+
                 optsFold.$bar = me.$('.toolbar');
                 var $scrollR = me.$('.tabs .scroll.right');
                 $scrollL = me.$('.tabs .scroll.left');
@@ -234,7 +237,7 @@ define([
                 if ( $boxTabs.parent().hasClass('short') ) {
                     $boxTabs.parent().removeClass('short');
                 }
-
+                this.hideMoreBtns();
                 this.processPanelVisible();
             },
 
@@ -261,7 +264,7 @@ define([
                             me._timerSetTab = false;
                         }, 500);
                         me.setTab(tab);
-                        me.processPanelVisible(null, true);
+                        // me.processPanelVisible(null, true);
                         if ( !me.isFolded ) {
                             if ( me.dblclick_timer ) clearTimeout(me.dblclick_timer);
                             me.dblclick_timer = setTimeout(function () {
@@ -286,11 +289,14 @@ define([
                 if ( tab ) {
                     me.$tabs.removeClass('active');
                     me.$panels.removeClass('active');
+                    me.hideMoreBtns();
 
                     var panel = this.$panels.filter('[data-tab=' + tab + ']');
                     if ( panel.length ) {
                         this.lastPanel = tab;
                         panel.addClass('active');
+                        me.setMoreButton(tab, panel);
+                        me.processPanelVisible(null, true, true);
                     }
 
                     if ( panel.length ) {
@@ -375,7 +381,7 @@ define([
              * hide button's caption to decrease panel width
              * ##adopt-panel-width
             **/
-            processPanelVisible: function(panel, now) {
+            processPanelVisible: function(panel, now, force) {
                 var me = this;
                 if ( me._timer_id ) clearTimeout(me._timer_id);
 
@@ -387,6 +393,7 @@ define([
                             _rightedge = data.rightedge,
                             _btns = data.buttons,
                             _flex = data.flex;
+                        var more_section = $active.find('.more-box');
 
                         if ( !_rightedge ) {
                             _rightedge = $active.get(0).getBoundingClientRect().right;
@@ -407,44 +414,53 @@ define([
                             data.flex = _flex;
                         }
 
-                        if ( _rightedge > _maxright) {
+                        if ( (_rightedge > _maxright)) {
-                            if (_flex.length>0) {
+                            if (!more_section.is(':visible') ) {
-                                for (var i=0; i<_flex.length; i++) {
+                                if (_flex.length>0) {
-                                    var item = _flex[i].el;
+                                    for (var i=0; i<_flex.length; i++) {
-                                    if (item.outerWidth() > parseInt(item.css('min-width')))
+                                        var item = _flex[i].el;
-                                        return;
-                                    else
-                                        item.css('width', item.css('min-width'));
-                                }
-                            }
-                            for (var i=_btns.length-1; i>=0; i--) {
-                                var btn = _btns[i];
-                                if ( !btn.hasClass('compactwidth') ) {
-                                    btn.addClass('compactwidth');
-                                    _rightedge = $active.get(0).getBoundingClientRect().right;
-                                    if (_rightedge <= _maxright)
-                                        break;
-                                }
-                            }
-                            data.rightedge = _rightedge;
-                        } else {
-                            for (var i=0; i<_btns.length; i++) {
-                                var btn = _btns[i];
-                                if ( btn.hasClass('compactwidth') ) {
-                                    btn.removeClass('compactwidth');
-                                    _rightedge = $active.get(0).getBoundingClientRect().right;
-                                    if ( _rightedge > _maxright) {
-                                        btn.addClass('compactwidth');
                                         _rightedge = $active.get(0).getBoundingClientRect().right;
-                                        break;
+                                        if (item.outerWidth() > parseInt(item.css('min-width'))) {
+                                            data.rightedge = _rightedge;
+                                            return;
+                                        } else
+                                            item.css('width', item.css('min-width'));
                                     }
                                 }
+                                for (var i=_btns.length-1; i>=0; i--) {
+                                    var btn = _btns[i];
+                                    if ( !btn.hasClass('compactwidth') && !btn.hasClass('slot-btn-more')) {
+                                        btn.addClass('compactwidth');
+                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        if (_rightedge <= _maxright)
+                                            break;
+                                    }
+                                }
+                                data.rightedge = _rightedge;
                             }
-                            data.rightedge = _rightedge;
+                            me.resizeToolbar(force);
-                            if (_flex.length>0 && $active.find('.btn-slot.compactwidth').length<1) {
+                        } else {
-                                for (var i=0; i<_flex.length; i++) {
+                            more_section.is(':visible') && me.resizeToolbar(force);
-                                    var item = _flex[i];
+                            if (!more_section.is(':visible')) {
-                                    item.el.css('width', item.width);
+                                for (var i=0; i<_btns.length; i++) {
+                                    var btn = _btns[i];
+                                    if ( btn.hasClass('compactwidth') ) {
+                                        btn.removeClass('compactwidth');
+                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        if ( _rightedge > _maxright) {
+                                            btn.addClass('compactwidth');
+                                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                                            break;
+                                        }
+                                    }
+                                }
+                                data.rightedge = _rightedge;
+                                if (_flex.length>0 && $active.find('.btn-slot.compactwidth').length<1) {
+                                    for (var i=0; i<_flex.length; i++) {
+                                        var item = _flex[i];
+                                        item.el.css('width', item.width);
+                                        data.rightedge = $active.get(0).getBoundingClientRect().right;
+                                    }
                                 }
                             }
                         }
@@ -477,6 +493,295 @@ define([
                     this.$tabs.find('> a[data-tab=' + tab + ']').parent().css('display', visible ? '' : 'none');
                     this.onResize();
                 }
+            },
+
+            setMoreButton: function(tab, panel) {
+                var me = this;
+                if (!btnsMore[tab]) {
+                    var box = $('<div class="more-box" style="position: absolute;right: 0; padding-left: 12px;padding-right: 6px;display: none;">' +
+                        '<div class="separator long" style="position: relative;display: table-cell;"></div>' +
+                        '<div class="group" style=""><span class="btn-slot text x-huge slot-btn-more"></span></div>' +
+                        '</div>');
+                    panel.append(box);
+                    btnsMore[tab] = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top dropdown-manual',
+                        caption: Common.Locale.get("textMoreButton",{name:"Common.Translation", default: "More"}),
+                        iconCls: 'toolbar__icon btn-more',
+                        enableToggle: true
+                    });
+                    btnsMore[tab].render(box.find('.slot-btn-more'));
+                    btnsMore[tab].on('toggle', function(btn, state, e) {
+                        (state) ? me.onMoreShow(btn, e) : me.onMoreHide(btn, e);
+                        Common.NotificationCenter.trigger('more:toggle', btn, state);
+                    });
+                    var moreContainer = $('<div class="dropdown-menu more-container" data-tab="' + tab + '"><div style="display: inline;"></div></div>');
+                    optsFold.$bar.append(moreContainer);
+                    btnsMore[tab].panel = moreContainer.find('div');
+                }
+                this.$moreBar = btnsMore[tab].panel;
+            },
+
+            resizeToolbar: function(reset) {
+                var $active = this.$panels.filter('.active'),
+                    more_section = $active.find('.more-box'),
+                    more_section_width = parseInt(more_section.css('width')) || 0,
+                    box_controls_width = $active.parents('.box-controls').width(),
+                    _maxright = box_controls_width,
+                    _rightedge = $active.get(0).getBoundingClientRect().right,
+                    delta = (this._prevBoxWidth) ? (_maxright - this._prevBoxWidth) : -1,
+                    hideAllMenus = false;
+                this._prevBoxWidth = _maxright;
+                more_section.is(':visible') && (_maxright -= more_section_width);
+
+                if (this.$moreBar && this.$moreBar.parent().is(':visible')) {
+                    this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
+                }
+
+                if ( (reset || delta<0) && (_rightedge > _maxright)) { // from toolbar to more section
+                    if (!more_section.is(':visible') ) {
+                        more_section.css('display', "");
+                        _maxright -= parseInt(more_section.css('width'));
+                    }
+                    var last_separator = null,
+                        last_group = null,
+                        prevchild = this.$moreBar.children().filter("[data-hidden-tb-item!=true]");
+                    if (prevchild.length>0) {
+                        prevchild = $(prevchild[0]);
+                        if (prevchild.hasClass('separator'))
+                            last_separator = prevchild;
+                        if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
+                            last_group = prevchild;
+                    }
+                    var items = $active.find('> div:not(.more-box)');
+                    var need_break = false;
+                    for (var i=items.length-1; i>=0; i--) {
+                        var item = $(items[i]);
+                        if (!item.is(':visible')) { // move invisible items as is and set special attr
+                            item.attr('data-hidden-tb-item', true);
+                            this.$moreBar.prepend(item);
+                            hideAllMenus = true;
+                        } else if (item.hasClass('group')) {
+                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                            if (_rightedge <= _maxright) // stop moving items
+                                break;
+
+                            var offset = item.offset(),
+                                item_width = item.outerWidth(),
+                                children = item.children();
+                            if (!item.attr('inner-width') && item.attr('group-state') !== 'open') {
+                                item.attr('inner-width', item_width);
+                                for (var j=children.length-1; j>=0; j--) {
+                                    var child = $(children[j]);
+                                    child.attr('inner-width', child.outerWidth());
+                                }
+                            }
+                            if ((offset.left > _maxright || children.length==1) && item.attr('group-state') != 'open') {
+                                // move group
+                                this.$moreBar.prepend(item);
+                                if (last_separator) {
+                                    last_separator.css('display', '');
+                                }
+                                hideAllMenus = true;
+                            } else if ( offset.left+item_width > _maxright ) {
+                                // move buttons from group
+                                for (var j=children.length-1; j>=0; j--) {
+                                    var child = $(children[j]);
+                                    if (child.hasClass('elset')) {
+                                        this.$moreBar.prepend(item);
+                                        if (last_separator) {
+                                            last_separator.css('display', '');
+                                        }
+                                        hideAllMenus = true;
+                                        break;
+                                    } else {
+                                        var child_offset = child.offset(),
+                                            child_width = child.outerWidth();
+                                        if (child_offset.left+child_width>_maxright) {
+                                            if (!last_group) {
+                                                last_group = $('<div></div>');
+                                                last_group.addClass(items[i].className);
+                                                var attrs = items[i].attributes;
+                                                for (var k = 0; k < attrs.length; k++) {
+                                                    last_group.attr(attrs[k].name, attrs[k].value);
+                                                }
+                                                this.$moreBar.prepend(last_group);
+                                                if (last_separator) {
+                                                    last_separator.css('display', '');
+                                                }
+                                            }
+                                            last_group.prepend(child);
+                                            hideAllMenus = true;
+                                        } else {
+                                            need_break = true;
+                                            break;
+                                        }
+                                    }
+                                }
+                                if (item.children().length<1) { // all buttons are moved
+                                    item.remove();
+                                    last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
+                                    last_group = null;
+                                } else {
+                                    last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
+                                }
+                                if (need_break)
+                                    break;
+                            } else {
+                                break;
+                            }
+                            last_separator = null;
+                        } else if (item.hasClass('separator')) {
+                            this.$moreBar.prepend(item);
+                            item.css('display', 'none');
+                            last_separator = item;
+                            hideAllMenus = true;
+                        }
+                    }
+                } else if ((reset || delta>0) && more_section.is(':visible')) {
+                    var last_separator = null,
+                        last_group = null,
+                        prevchild = $active.find('> div:not(.more-box)');
+                    var last_width = 0;
+                    if (prevchild.length>0) {
+                        prevchild = $(prevchild[prevchild.length-1]);
+                        if (prevchild.hasClass('separator')) {
+                            last_separator = prevchild;
+                            last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
+                        }
+                        if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
+                            last_group = prevchild;
+                    }
+
+                    var items = this.$moreBar.children();
+                    if (items.length>0) {
+                        // from more panel to toolbar
+                        for (var i=0; i<items.length; i++) {
+                            var item = $(items[i]);
+                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                            if (!item.is(':visible') && item.attr('data-hidden-tb-item')) { // move invisible items as is
+                                item.removeAttr('data-hidden-tb-item');
+                                more_section.before(item);
+                                if (this.$moreBar.children().filter('.group').length == 0) {
+                                    this.hideMoreBtns();
+                                    more_section.css('display', "none");
+                                }
+                            } else if (item.hasClass('group')) {
+                                var islast = false;
+                                if (this.$moreBar.children().filter('.group').length == 1) {
+                                    _maxright = box_controls_width; // try to move last group
+                                    islast = true;
+                                }
+
+                                var item_width = parseInt(item.attr('inner-width') || 0);
+                                if (_rightedge + last_width + item_width < _maxright && item.attr('group-state') != 'open') {
+                                    // move group
+                                    more_section.before(item);
+                                    if (last_separator) {
+                                        last_separator.css('display', '');
+                                    }
+                                    if (this.$moreBar.children().filter('.group').length == 0) {
+                                        this.hideMoreBtns();
+                                        more_section.css('display', "none");
+                                    }
+                                    hideAllMenus = true;
+                                } else if ( _rightedge + last_width < _maxright) {
+                                    // move buttons from group
+                                    var children = item.children();
+                                    _maxright = box_controls_width - more_section_width;
+                                    for (var j=0; j<children.length; j++) {
+                                        if (islast && j==children.length-1)
+                                             _maxright = box_controls_width; // try to move last item from last group
+                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        var child = $(children[j]);
+                                        if (child.hasClass('elset')) { // don't add group - no enough space
+                                            need_break = true;
+                                            break;
+                                        } else {
+                                            var child_width = parseInt(child.attr('inner-width') || 0) + (!last_group ? parseInt(item.css('padding-left')) : 0); // if new group is started add left-padding
+                                            if (_rightedge+last_width+child_width < _maxright) {
+                                                if (!last_group) {
+                                                    last_group = $('<div></div>');
+                                                    last_group.addClass(items[i].className);
+                                                    var attrs = items[i].attributes;
+                                                    for (var k = 0; k < attrs.length; k++) {
+                                                        last_group.attr(attrs[k].name, attrs[k].value);
+                                                    }
+                                                    if (last_group.hasClass('flex')) { // need to update flex groups list
+                                                        $active.data().flex = null;
+                                                    }
+                                                    more_section.before(last_group);
+                                                    if (last_separator) {
+                                                        last_separator.css('display', '');
+                                                    }
+                                                }
+                                                last_group.append(child);
+                                                hideAllMenus = true;
+                                            } else {
+                                                need_break = true;
+                                                break;
+                                            }
+                                        }
+                                    }
+                                    if (item.children().length<1) { // all buttons are moved
+                                        item.remove();
+                                        last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
+                                        last_group = null;
+                                        if (this.$moreBar.children().filter('.group').length == 0) {
+                                            this.hideMoreBtns();
+                                            more_section.css('display', "none");
+                                        }
+                                    } else {
+                                        last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
+                                    }
+                                    if (need_break)
+                                        break;
+                                } else {
+                                    break;
+                                }
+                                last_separator = null; last_width = 0;
+                            } else if (item.hasClass('separator')) {
+                                more_section.before(item);
+                                item.css('display', 'none');
+                                last_separator = item;
+                                last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
+                                hideAllMenus = true;
+                            }
+                        }
+                    } else {
+                        this.hideMoreBtns();
+                        more_section.css('display', "none");
+                    }
+                }
+                hideAllMenus && Common.UI.Menu.Manager.hideAll();
+            },
+
+            onMoreHide: function(btn, e) {
+                var moreContainer = btn.panel.parent();
+                if (btn.pressed) {
+                    btn.toggle(false, true);
+                }
+                if (moreContainer.is(':visible')) {
+                    moreContainer.hide();
+                    Common.NotificationCenter.trigger('edit:complete', this.toolbar, btn);
+                }
+            },
+
+            onMoreShow: function(btn, e) {
+                var moreContainer = btn.panel.parent(),
+                    parentxy = moreContainer.parent().offset(),
+                    target = btn.$el,
+                    showxy = target.offset(),
+                    right = Common.Utils.innerWidth() - (showxy.left - parentxy.left + target.width()),
+                    top = showxy.top - parentxy.top + target.height() + 10;
+
+                moreContainer.css({right: right, left: 'auto', top : top});
+                moreContainer.show();
+            },
+
+            hideMoreBtns: function() {
+                for (var btn in btnsMore) {
+                    btnsMore[btn] && btnsMore[btn].toggle(false);
+                }
             }
         };
     }()));

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

@@ -342,9 +342,14 @@
     .combo-template(60px);
 
     top: -7px;
-    padding-right: 24px;
+    padding-right: 12px;
     position: absolute;
 
+    .more-container & {
+        padding-right: 0;
+        position: static;
+    }
+
     .view .dataview, .dropdown-menu {
         padding: 1px;
     }

apps/common/main/resources/less/toolbar.less

@@ -177,13 +177,14 @@
     .box-panels {
         flex-grow: 1;
         -ms-flex: 1;
+        padding-right: 6px;
 
         .panel:not(.active) {
             display: none;
         }
 
         /* ##adopt-panel-width */
-        .panel:not(#plugns-panel) .compactwidth {
+        .panel .compactwidth {
             .btn-group, .btn-toolbar {
                 &.x-huge {
                     .caption {
@@ -204,6 +205,40 @@
         /**/
     }
 
+    .more-container {
+        background-color: @background-toolbar-ie;
+        background-color: @background-toolbar;
+        min-width:auto;
+        padding: 12px 10px 7px 0;
+        border-radius: 0;
+        z-index:999;
+        .compactwidth {
+            .btn-group, .btn-toolbar {
+                &.x-huge {
+                    .caption {
+                        display: none;
+                    }
+
+                    .inner-box-caption {
+                        justify-content: center;
+                        align-items: center;
+                    }
+                    .compact-caret {
+                        display: block;
+                    }
+                }
+            }
+        }
+        &[data-tab=pivot] {
+            padding: 5px 10px 0 0;
+        }
+    }
+
+    .more-box {
+        background-color: @background-toolbar-ie;
+        background-color: @background-toolbar;
+    }
+
     background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     @minus-px: calc(-1 * @scaled-one-px-value);
@@ -218,10 +253,6 @@
         padding-left: 6px;
         font-size: 0;
 
-        &:last-child {
-            padding-right: 6px;
-        }
-
         &.small {
             padding-left: 10px;
 
@@ -769,3 +800,6 @@
     min-width: 46px;
 }
 
+section .field-styles {
+    width: 100%;
+}

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

@@ -3082,6 +3082,7 @@ define([
             if (disable && mask.length>0 || !disable && mask.length==0) return;
 
             var toolbar = this.toolbar;
+            toolbar.hideMoreBtns();
             if(disable) {
                 if (reviewmode) {
                     mask = $("<div class='toolbar-group-mask'>").appendTo(toolbar.$el.find('.toolbar section.panel .group:not(.no-mask):not(.no-group-mask.review):not(.no-group-mask.inner-elset)'));

apps/documenteditor/main/app/template/Toolbar.template

@@ -78,7 +78,7 @@
                         <span class="btn-slot" id="slot-btn-mailrecepients" data-layout-name="toolbar-home-mailmerge"></span>
                     </div>
                 </div>
-                <div class="group small" id="slot-field-styles"></div>
+                <div class="group small flex field-styles" id="slot-field-styles" style="min-width: 160px;width: 100%; " data-group-width="100%"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">

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

@@ -1311,6 +1311,7 @@ define([
                         cls: 'combo-styles',
                         itemWidth: itemWidth,
                         itemHeight: itemHeight,
+                        style: 'min-width:150px;',
 //                hint        : this.tipParagraphStyle,
                         dataHint: '1',
                         dataHintDirection: 'bottom',
@@ -1403,7 +1404,6 @@ define([
                             ]
                         });
                     }
-
                     this.on('render:after', _.bind(this.onToolbarAfterRender, this));
                 } else {
                     Common.UI.Mixtbar.prototype.initialize.call(this, {

apps/documenteditor/main/locale/en.json

@@ -124,6 +124,7 @@
   "Common.Translation.warnFileLocked": "You can't edit this file because it's being edited in another app.",
   "Common.Translation.warnFileLockedBtnEdit": "Create a copy",
   "Common.Translation.warnFileLockedBtnView": "Open for viewing",
+  "Common.Translation.textMoreButton": "More",
   "Common.UI.ButtonColored.textAutoColor": "Automatic",
   "Common.UI.ButtonColored.textNewColor": "Add New Custom Color",
   "Common.UI.Calendar.textApril": "April",

apps/documenteditor/main/locale/ru.json

@@ -124,6 +124,7 @@
   "Common.Translation.warnFileLocked": "Вы не можете редактировать этот файл, потому что он уже редактируется в другом приложении.",
   "Common.Translation.warnFileLockedBtnEdit": "Создать копию",
   "Common.Translation.warnFileLockedBtnView": "Открыть на просмотр",
+  "Common.Translation.textMoreButton": "Больше",
   "Common.UI.ButtonColored.textAutoColor": "Автоматический",
   "Common.UI.ButtonColored.textNewColor": "Пользовательский цвет",
   "Common.UI.Calendar.textApril": "Апрель",

apps/documenteditor/main/resources/less/toolbar.less

@@ -165,11 +165,6 @@
     margin-left: 2px;
 }
 
-#slot-field-styles {
-    width: 100%;
-    min-width: 160px;
-}
-
 #special-paste-container {
     position: absolute;
     z-index: @zindex-dropdown - 20;

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

@@ -2454,6 +2454,7 @@ define([
             if (disable && mask.length>0 || !disable && mask.length==0) return;
 
             var toolbar = this.toolbar;
+            toolbar.hideMoreBtns();
             toolbar.$el.find('.toolbar').toggleClass('masked', disable);
 
             if (toolbar.btnsAddSlide) // toolbar buttons are rendered

apps/presentationeditor/main/app/template/Toolbar.template

@@ -101,7 +101,7 @@
                         <span class="btn-slot split" id="slot-btn-slidesize"></span>
                     </div>
                 </div>
-                <div class="group flex small" id="slot-field-styles" style="width: 100%; min-width: 145px;" data-group-width="100%"></div>
+                <div class="group flex small field-styles" id="slot-field-styles" style="width: 100%; min-width: 140px;" data-group-width="100%"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">
@@ -143,7 +143,7 @@
                 </div>
             </section>
             <section id="transitions-panel" class="panel" data-tab="transit">
-                <div class="group flex small" id="transit-field-effects" style="width: 900px; max-width: 900px; min-width: 140px;" data-group-width="900px"></div>
+                <div class="group flex small" id="transit-field-effects" style="width: 900px; max-width: 900px; min-width: 120px;" data-group-width="900px"></div>
 
                 <div class="group small">
                     <span class="btn-slot text x-huge" id="transit-button-parameters"></span>
@@ -219,8 +219,7 @@
                 </div>
             </section>
             <section id="animation-panel" class="panel" data-tab="animate">
-                <div class="group flex small" id="animation-field-effects" style="width: 700px; max-width: 700px; min-width: 140px;" data-group-width="700px"></div>
+                <div class="group flex small" id="animation-field-effects" style="width: 700px; max-width: 700px; min-width: 210px;" data-group-width="700px"></div>
-
                 <div class="group small">
                     <span class="btn-slot text x-huge" id="animation-button-parameters"></span>
                 </div>
@@ -238,18 +237,18 @@
                 <div class="separator long"></div>
                 <div class="group small">
                     <div class="elset font-normal">
-                        <label id="animation-label-start"></label>
+                        <label id="animation-label-start" style="margin-right: 10px;"></label>
                         <div class="btn-slot" style="width: 96px; " id="animation-start"></div>
                     </div>
                     <div class="elset font-normal">
-                         <label id="animation-delay"></label>
+                         <label id="animation-delay" style="margin-right: 10px;"></label>
                          <span id="animation-spin-delay" class="btn-slot text spinner" ></span>
                     </div>
                 </div>
                 <div class="separator long"></div>
                 <div class="group small">
                     <div class="elset font-normal">
-                        <label id="animation-duration"></label>
+                        <label id="animation-duration" style="margin-right: 10px;"></label>
                         <span id="animation-spin-duration" class="btn-slot text spinner" ></span>
                     </div>
                     <div class="elset font-normal">
@@ -259,7 +258,7 @@
                 <div class="separator long"></div>
                 <div class="group small">
                     <div class="elset font-normal">
-                        <label id="animation-repeat"></label>
+                        <label id="animation-repeat" style="margin-right: 10px;"></label>
                         <span id="animation-spin-repeat" class="btn-slot text spinner" ></span>
                     </div>
                     <div class="elset font-normal">

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

@@ -170,6 +170,7 @@ define([
                     cls: 'combo-transitions combo-animation',
                     itemWidth: itemWidth,
                     itemHeight: itemHeight,
+                    style: 'min-width:200px;',
                     itemTemplate: _.template([
                         '<div  class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
                             '<div class = "icon toolbar__icon <%= iconCls %>"></div>',

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

@@ -1023,6 +1023,7 @@ define([
                         itemWidth: 88,
                         enableKeyEvents: true,
                         itemHeight: 40,
+                        style: 'min-width:130px;',
                         lock: [_set.themeLock, _set.lostConnect, _set.noSlides],
                         dataHint: '1',
                         dataHintDirection: 'bottom',
@@ -1072,11 +1073,11 @@ define([
 
                     this.cmbInsertShape = new Common.UI.ComboDataViewShape({
                         cls: 'combo-styles shapes',
-                        style: 'min-width: 140px;',
                         itemWidth: 20,
                         itemHeight: 20,
                         menuMaxHeight: 640,
                         menuWidth: 362,
+                        style: 'width: 140px;',
                         enableKeyEvents: true,
                         lock: [PE.enumLock.slideDeleted, PE.enumLock.lostConnect, PE.enumLock.noSlides, PE.enumLock.disableOnStart],
                         dataHint: '1',

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

@@ -142,6 +142,7 @@ define([
                     cls: 'combo-transitions',
                     itemWidth: itemWidth,
                     itemHeight: itemHeight,
+                    style: 'min-width:110px;',
                     itemTemplate: _.template([
                         '<div  class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
                             '<div class = "icon toolbar__icon <%= imageUrl %>"></div>',

apps/presentationeditor/main/locale/en.json

@@ -239,6 +239,7 @@
   "Common.Translation.warnFileLocked": "The file is being edited in another app. You can continue editing and save it as a copy.",
   "Common.Translation.warnFileLockedBtnEdit": "Create a copy",
   "Common.Translation.warnFileLockedBtnView": "Open for viewing",
+  "Common.Translation.textMoreButton": "More",
   "Common.UI.ButtonColored.textAutoColor": "Automatic",
   "Common.UI.ButtonColored.textNewColor": "Add New Custom Color",
   "Common.UI.ComboBorderSize.txtNoBorders": "No borders",

apps/presentationeditor/main/resources/less/animation.less

@@ -1,26 +1,3 @@
-#animation-panel  {
-  label {
-    margin-right: 10px;
-  }
-
-}
-.a-table{
-  display: table;
-  width: 100%;
-}
-.a-tr{
-  display: table-row;
-  height: 20px;
-  border-top: 2px solid transparent;
-  &.bottom {
-    border-top: 4px solid transparent;
-  }
-  .a-td
-  {
-    display: table-cell;
-  }
-}
-
 .combo-animation {
   .menu-picker-container .dataview {
     padding: 10px 0 0 2px;

apps/spreadsheeteditor/main/app/controller/PivotTable.js

@@ -87,6 +87,7 @@ define([
 
             Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             Common.NotificationCenter.on('api:disconnect', _.bind(this.SetDisabled, this));
+            Common.NotificationCenter.on('more:toggle', _.bind(this.onMoreToggle, this));
         },
 
         setConfig: function (config) {
@@ -426,6 +427,17 @@ define([
             });
         },
 
+        onMoreToggle: function(btn, state, e) {
+            if (this.view && this.view.toolbar && this.view.toolbar.isTabActive('pivot') && state) {
+                var styles = this.view.pivotStyles;
+                if (styles && styles.needFillComboView &&  styles.menuPicker.store.length > 0 && styles.rendered){
+                    var styleRec;
+                    if (this._state.TemplateName) styleRec = styles.menuPicker.store.findWhere({name: this._state.TemplateName});
+                    styles.fillComboView((styleRec) ? styleRec : styles.menuPicker.store.at(0), true);
+                }
+            }
+        },
+
         strSheet        : 'Sheet'
 
     }, SSE.Controllers.PivotTable || {}));

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

@@ -3700,6 +3700,7 @@ define([
             if (disable && mask.length>0 || !disable && mask.length==0) return;
 
             var toolbar = this.toolbar;
+            toolbar.hideMoreBtns();
             toolbar.$el.find('.toolbar').toggleClass('masked', disable);
 
             this.toolbar.lockToolbar(SSE.enumLock.menuFileOpen, disable);

apps/spreadsheeteditor/main/app/template/Toolbar.template

@@ -116,7 +116,7 @@
                         <span class="btn-slot split" id="slot-btn-table-tpl"></span>
                     </div>
                 </div>
-                <div class="group small" id="slot-field-styles" style="width: 100%; min-width: 168px;"></div>
+                <div class="group small flex field-styles" id="slot-field-styles" style="min-width: 168px;width: 100%;" data-group-width="100%"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">

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

@@ -87,7 +87,7 @@ define([
                         '<span class="btn-slot text" id="slot-chk-banded-column"></span>' +
                     '</div>' +
                 '</div>' +
-                '<div class="group flex small" id="slot-field-pivot-styles" style="width: 336px;max-width: 336px;min-width: 115px;" data-group-width="336px">' +
+                '<div class="group flex small" id="slot-field-pivot-styles" style="width: 324px;max-width: 324px;min-width: 105px;" data-group-width="324px">' +
                 '</div>' +
             '</section>';
 

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

@@ -935,6 +935,7 @@ define([
                     enableKeyEvents : true,
                     itemWidth       : 112,
                     itemHeight      : 40,
+                    style: 'min-width:158px;',
                     menuMaxHeight   : 226,
                     lock            : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set['FormatCells']],
                     dataHint        : '1',
@@ -985,6 +986,7 @@ define([
 
                 me.cmbNumberFormat = new Common.UI.ComboBox({
                     cls         : 'input-group-nr',
+                    style       : 'width: 113px;',
                     menuStyle   : 'min-width: 180px;',
                     hint        : me.tipNumFormat,
                     lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.selRangeEdit, _set.lostConnect, _set.coAuth, _set['FormatCells']],