Merge branch 'feature/new-toolbar' into feature/new-toolbar-pivot-table

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

@@ -119,18 +119,20 @@ define([
 ], function () {
     'use strict';
 
+    var templateBtnIcon =
+            '<% if ( iconImg ) { %>' +
+                '<img src="<%= iconImg %>">' +
+            '<% } else { %>' +
+                '<% if (/svgicon/.test(iconCls)) {' +
+                    'print(\'<svg width="26" height="26" class=\"icon\"><use href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use></svg>\');' +
+                '} else ' +
+                    'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); %>' +
+            '<% } %>';
+
     var templateHugeCaption =
-            '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">' +
+            '<button type="button" class="btn <%= cls %>">' +
                 '<div class="inner-box-icon">' +
-                '<% if ( iconImg ) { %>' +
+                    templateBtnIcon +
-                    '<img src="<%= iconImg %>">' +
-                '<% } else { %>' +
-                    '<% if (/svgicon/.test(iconCls)) {' +
-                        'print(\'<svg class=\"icon\"><use xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use></svg>\');' +
-                    '} else ' +
-                        'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); %>' +
-                    // '<i class="icon <%= iconCls %>">&nbsp;</i>' +
-                '<% } %>' +
                 '</div>' +
                 '<span class="caption"><%= caption %></span>' +
             '</button>';
@@ -139,11 +141,7 @@ define([
         '<div class="btn-group icon-top" id="<%= id %>" style="<%= style %>">' +
             '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">' +
                 '<div class="inner-box-icon">' +
-                '<% if ( iconImg ) { %>' +
+                    templateBtnIcon +
-                    '<img src="<%= iconImg %>">' +
-                '<% } else { %>' +
-                    '<i class="icon <%= iconCls %>">&nbsp;</i>' +
-                '<% } %>' +
                 '</div>' +
                 '<div class="inner-box-caption">' +
                     '<span class="caption"><%= caption %></span>' +
@@ -155,11 +153,7 @@ define([
     var templateHugeSplitCaption =
         '<div class="btn-group x-huge split icon-top" id="<%= id %>" style="<%= style %>">' +
             '<button type="button" class="btn <%= cls %> inner-box-icon">' +
-                '<% if ( iconImg ) { %>' +
+                templateBtnIcon +
-                    '<img src="<%= iconImg %>">' +
-                '<% } else { %>' +
-                    '<i class="icon <%= iconCls %>">&nbsp;</i>' +
-                '<% } %>' +
             '</button>' +
             '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
                 '<span class="caption"><%= caption %></span>' +

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

@@ -248,8 +248,8 @@ define([
             Common.UI.Menu.Manager.hideAll();
             var zoom = (event instanceof jQuery.Event) ? Common.Utils.zoom() : 1;
             this.dragging.enabled = true;
-            this.dragging.initx = event.pageX*zoom - parseInt(this.$window.css('left'));
+            this.dragging.initx = event.pageX*zoom - this.getLeft();
-            this.dragging.inity = event.pageY*zoom - parseInt(this.$window.css('top'));
+            this.dragging.inity = event.pageY*zoom - this.getTop();
 
             if (window.innerHeight == undefined) {
                 var main_width  = document.documentElement.offsetWidth;
@@ -259,8 +259,8 @@ define([
                 main_height = Common.Utils.innerHeight();
             }
 
-            this.dragging.maxx  = main_width - parseInt(this.$window.css("width"));
+            this.dragging.maxx  = main_width - this.getWidth();
-            this.dragging.maxy  = main_height - parseInt(this.$window.css("height"));
+            this.dragging.maxy  = main_height - this.getHeight();
 
             $(document).on('mousemove', this.binding.drag);
             $(document).on('mouseup', this.binding.dragStop);
@@ -298,16 +298,16 @@ define([
         function _resizestart(event) {
             Common.UI.Menu.Manager.hideAll();
             var el = $(event.target),
-                left = parseInt(this.$window.css('left')),
+                left = this.getLeft(),
-                top = parseInt(this.$window.css('top'));
+                top = this.getTop();
 
             this.resizing.enabled = true;
             this.resizing.initpage_x = event.pageX*Common.Utils.zoom();
             this.resizing.initpage_y = event.pageY*Common.Utils.zoom();
             this.resizing.initx = this.resizing.initpage_x - left;
             this.resizing.inity = this.resizing.initpage_y - top;
-            this.resizing.initw = parseInt(this.$window.css("width"));
+            this.resizing.initw = this.getWidth();
-            this.resizing.inith = parseInt(this.$window.css("height"));
+            this.resizing.inith = this.getHeight();
             this.resizing.type = [el.hasClass('left') ? -1 : (el.hasClass('right') ? 1 : 0), el.hasClass('top') ? -1 : (el.hasClass('bottom') ? 1 : 0)];
 
             var main_width  = (window.innerHeight == undefined) ? document.documentElement.offsetWidth : Common.Utils.innerWidth(),
@@ -827,6 +827,14 @@ define([
                 return this.$window.find('> .header > .title').text();
             },
 
+            getLeft: function() {
+                return parseInt(this.$window.css('left'));
+            },
+
+            getTop: function() {
+                return parseInt(this.$window.css('top'));
+            },
+
             isVisible: function() {
                 return this.$window && this.$window.is(':visible');
             },

apps/common/main/lib/view/Plugins.js

@@ -296,9 +296,10 @@ define([
 
             var header_footer = (_options.buttons && _.size(_options.buttons)>0) ? 85 : 34;
             if (!_options.header) header_footer -= 34;
-            _options.width = (Common.Utils.innerWidth()-_options.width)<0 ? Common.Utils.innerWidth(): _options.width,
+            this.bordersOffset = 25;
+            _options.width = (Common.Utils.innerWidth()-this.bordersOffset*2-_options.width)<0 ? Common.Utils.innerWidth()-this.bordersOffset*2: _options.width;
             _options.height += header_footer;
-            _options.height = (Common.Utils.innerHeight()-_options.height)<0 ? Common.Utils.innerHeight(): _options.height;
+            _options.height = (Common.Utils.innerHeight()-this.bordersOffset*2-_options.height)<0 ? Common.Utils.innerHeight()-this.bordersOffset*2: _options.height;
             _options.cls += ' advanced-settings-dlg';
 
             this.template = [
@@ -355,6 +356,14 @@ define([
             this.on('resizing', function(args){
                 me.boxEl.css('height', parseInt(me.$window.css('height')) - me._headerFooterHeight);
             });
+
+            var onMainWindowResize = function(){
+                me.onWindowResize();
+            };
+            $(window).on('resize', onMainWindowResize);
+            this.on('close', function() {
+                $(window).off('resize', onMainWindowResize);
+            });
         },
 
         _onLoad: function() {
@@ -366,11 +375,12 @@ define([
         setInnerSize: function(width, height) {
             var maxHeight = Common.Utils.innerHeight(),
                 maxWidth = Common.Utils.innerWidth(),
-                borders_width = (parseInt(this.$window.css('border-left-width')) + parseInt(this.$window.css('border-right-width')));
+                borders_width = (parseInt(this.$window.css('border-left-width')) + parseInt(this.$window.css('border-right-width'))),
-            if (maxHeight<height + this._headerFooterHeight)
+                bordersOffset = this.bordersOffset*2;
-                height = maxHeight - this._headerFooterHeight;
+            if (maxHeight - bordersOffset<height + this._headerFooterHeight)
-            if (maxWidth<width + borders_width)
+                height = maxHeight - bordersOffset - this._headerFooterHeight;
-                width = maxWidth - borders_width;
+            if (maxWidth - bordersOffset<width + borders_width)
+                width = maxWidth - bordersOffset - borders_width;
 
             this.boxEl.css('height', height);
 
@@ -381,6 +391,35 @@ define([
             this.$window.css('top',((maxHeight - height - this._headerFooterHeight) / 2) * 0.9);
         },
 
+        onWindowResize: function() {
+            var main_width  = Common.Utils.innerWidth(),
+                main_height = Common.Utils.innerHeight(),
+                win_width = this.getWidth(),
+                win_height = this.getHeight(),
+                bordersOffset = (this.resizable) ? 0 : this.bordersOffset;
+            if (win_height<main_height-bordersOffset*2+0.1 && win_width<main_width-bordersOffset*2+0.1) {
+                var left = this.getLeft(),
+                    top = this.getTop();
+
+                if (top<bordersOffset) this.$window.css('top', bordersOffset);
+                else if (top+win_height>main_height-bordersOffset)
+                    this.$window.css('top', main_height-bordersOffset - win_height);
+                if (left<bordersOffset) this.$window.css('left', bordersOffset);
+                else if (left+win_width>main_width-bordersOffset)
+                    this.$window.css('left', main_width-bordersOffset-win_width);
+            } else {
+                if (win_height>main_height-bordersOffset*2) {
+                    this.setHeight(Math.max(main_height-bordersOffset*2, this.initConfig.minheight));
+                    this.boxEl.css('height', Math.max(main_height-bordersOffset*2, this.initConfig.minheight) - this._headerFooterHeight);
+                    this.$window.css('top', bordersOffset);
+                }
+                if (win_width>main_width-bordersOffset*2) {
+                    this.setWidth(Math.max(main_width-bordersOffset*2, this.initConfig.minwidth));
+                    this.$window.css('left', bordersOffset);
+                }
+            }
+        },
+
         textLoading : 'Loading'
     }, Common.Views.PluginDlg || {}));
 });

apps/common/main/resources/less/asc-mixins.less

@@ -103,10 +103,16 @@
     button.disabled > .@{icon-class} {background-position-x: -3*@icon-size !important; --bgX: -(3*@icon-size);}
 }
 
+.mx-button-otherstates-icon2(@icon-size) {
+    &.active   .icon,
+    &:active   .icon {background-position-x: -1*@icon-size; --bgX: -(1*@icon-size);}
+    &.disabled .icon {background-position-x: -2*@icon-size; --bgX: -(2*@icon-size);}
+}
+
 .button-otherstates-icon2(@icon-class, @icon-size) {
-    button.@{icon-class}.active   .icon,
+    button.@{icon-class} {
-    button.@{icon-class}:active   .icon {background-position-x: -1*@icon-size; --bgX: -(1*@icon-size);}
+        .mx-button-otherstates-icon2(@icon-size);
-    button.@{icon-class}.disabled .icon {background-position-x: -2*@icon-size; --bgX: -(2*@icon-size);}
+    }
 }
 
 .menu-icon-normal(@icon-class, @index, @icon-size) {

apps/common/main/resources/less/buttons.less

@@ -85,7 +85,7 @@
     }
 }
 
-.icon-top {
+.btn.icon-top, .btn-group.icon-top {
     display: inline-flex;
     flex-direction: column;
 
@@ -100,12 +100,24 @@
 
     &.x-huge,
       .x-huge {
+        @icon-size: 26px;
+
         min-width: 45px;
         height: 45px;
 
         img {
             height: 27px;
         }
+
+        .inner-box-caption {
+            line-height: 18px;
+        }
+
+        .icon {
+            width: @icon-size;
+            height: @icon-size;
+            min-width: 0;
+        }
     }
 
     .inner-box-icon {
@@ -114,6 +126,8 @@
         align-items: center;
         justify-content: center;
         line-height: 20px;
+        max-height: 26px;
+        height: 26px;
     }
 
     .inner-box-caption {
@@ -122,11 +136,14 @@
     }
 }
 
-.btn-group {
+.icon-top {
-    .x-huge {
+    &.x-huge  {
-        .inner-box-caption {
+        @icon-size: 26px;
-            line-height: 18px;
+
+        .btn&, .btn-group& .btn-toolbar {
+            .mx-button-otherstates-icon2(@icon-size);
         }
+
     }
 }
 
@@ -169,11 +186,28 @@
         margin: 0;
         display: inline-block;
         background-repeat: no-repeat;
-        .background-ximage('@{app-image-path}/toolbar-menu.png', '@{app-image-path}/toolbar-menu@2x.png', 60px);
 
-        width: 20px;
+        &:not(.x-huge) {
-        height: 20px;
+            width: 20px;
-        line-height: 20px;
+            height: 20px;
+            line-height: 20px;
+        }
+
+        &:not(svg):not(.x-huge){
+            .background-ximage('@{app-image-path}/toolbar-menu.png', '@{app-image-path}/toolbar-menu@2x.png', 60px);
+        }
+    }
+
+    &.x-huge, .btn-group.x-huge > & {
+        :not(svg).icon {
+            .background-ximage('@{common-image-path}/controls/toolbarbig.png', '@{common-image-path}/controls/toolbarbig@2x.png', 96px);
+        }
+    }
+
+    &:not(.x-huge) {
+        .icon {
+            //.background-ximage('@{app-image-path}/toolbar-menu.png', '@{app-image-path}/toolbar-menu@2x.png', 60px);
+        }
     }
 
     &.dropdown-toggle {

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

@@ -31,6 +31,7 @@
 
     .box-tabs {
         height: @height-tabs;
+        font-size: 12px;
 
         display: flex;
         align-items: stretch;
@@ -100,10 +101,9 @@
         padding: 1px 12px;
         text-decoration: none;
         cursor: default;
-        font-size: 11px;
+        font-size: 12px;
         text-align: center;
         color: #fff;
-          letter-spacing: 0.7px;
 
           position: relative;
       }

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

@@ -561,7 +561,7 @@ define([
                     this.showSearchDlg(true,s);
                     this.leftMenu.btnSearch.toggle(true,true);
                     this.leftMenu.btnAbout.toggle(false);
-                    this.leftMenu.menuFile.hide();
+                    // this.leftMenu.menuFile.hide();
                     return false;
                 case 'save':
                     if (this.mode.canDownload || this.mode.canDownloadOrigin) {

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

@@ -570,8 +570,6 @@ define([
                     var cansave = this.api.asc_isDocumentCanSave(),
                         forcesave = this.appOptions.forcesave;
                     var isSyncButton = $('.icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch');
-                    if (toolbarView.btnSave.isDisabled() !== (!cansave && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1))
-                        toolbarView.btnSave.setDisabled(!cansave && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1);
                     if (toolbarView.btnSave.isDisabled() !== (!cansave && !isSyncButton && !forcesave || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1 && !forcesave))
                         toolbarView.btnSave.setDisabled(!cansave && !isSyncButton && !forcesave || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1 && !forcesave);
                 }
@@ -594,15 +592,14 @@ define([
                 if (action) {
                     this.setLongActionView(action)
                 } else {
+                    var me = this;
                     if (id==Asc.c_oAscAsyncAction['Save'] || id==Asc.c_oAscAsyncAction['ForceSaveButton']) {
                         if (this._state.fastCoauth && this._state.usersCount>1) {
-                            var me = this;
                             me._state.timerSave = setTimeout(function () {
-                                appHeader.setSaveStatus('end');
+                                me.getApplication().getController('Statusbar').setStatusCaption(me.textChangesSaved, false, 3000);
-                                delete me._state.timerSave;
                             }, 500);
                         } else
-                            appHeader.setSaveStatus('end');
+                            me.getApplication().getController('Statusbar').setStatusCaption(me.textChangesSaved, false, 3000);
                     } else
                         this.getApplication().getController('Statusbar').setStatusCaption('');
                 }
@@ -634,8 +631,8 @@ define([
                     case Asc.c_oAscAsyncAction['ForceSaveButton']:
                         clearTimeout(this._state.timerSave);
                         force = true;
-                        // title   = this.saveTitleText;
+                        title   = this.saveTitleText;
-                        // text    = this.saveTextText;
+                        text    = this.saveTextText;
                         break;
 
                     case Asc.c_oAscAsyncAction['LoadDocumentFonts']:
@@ -717,11 +714,8 @@ define([
 
                     if (!this.isShowOpenDialog)
                         this.loadMask.show();
-                } else
-                if ( action.id == Asc.c_oAscAsyncAction.Save || action.id == Asc.c_oAscAsyncAction['ForceSaveButton']) {
-                    appHeader.setSaveStatus('begin');
                 } else {
-                    this.getApplication().getController('Statusbar').setStatusCaption(text);
+                    this.getApplication().getController('Statusbar').setStatusCaption(text, force);
                 }
             },
 
@@ -1395,9 +1389,6 @@ define([
 
                 this.updateWindowTitle();
 
-                this.api.isDocumentModified() &&
-                    appHeader.setSaveStatus('changed');
-
                 var toolbarView = this.getApplication().getController('Toolbar').getView();
 
                 if (toolbarView) {
@@ -2092,6 +2083,7 @@ define([
             errorAccessDeny: 'You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator.',
             titleServerVersion: 'Editor updated',
             errorServerVersion: 'The editor version has been updated. The page will be reloaded to apply the changes.',
+            textChangesSaved: 'All changes saved',
             errorBadImageUrl: 'Image url is incorrect',
             txtStyle_Normal: 'Normal',
             txtStyle_No_Spacing: 'No Spacing',

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

@@ -246,7 +246,6 @@ define([
             toolbar.mnuInsertTable.on('item:click',                     _.bind(this.onInsertTableClick, this));
             toolbar.mnuInsertImage.on('item:click',                     _.bind(this.onInsertImageClick, this));
             toolbar.btnInsertText.on('click',                           _.bind(this.onBtnInsertTextClick, this));
-            toolbar.btnInsertText.menu.on('item:click',                 _.bind(this.onInsertTextClick, this));
             toolbar.btnInsertShape.menu.on('hide:after',                _.bind(this.onInsertShapeHide, this));
             toolbar.btnDropCap.menu.on('item:click',                    _.bind(this.onDropCapSelect, this));
             toolbar.mnuDropCapAdvanced.on('click',                      _.bind(this.onDropCapAdvancedClick, this));
@@ -699,8 +698,7 @@ define([
             toolbar.btnInsertImage.setDisabled(need_disable);
             toolbar.btnInsertShape.setDisabled(need_disable);
             toolbar.btnInsertText.setDisabled(need_disable);
-
+            toolbar.btnInsertTextArt.setDisabled(need_disable || in_image);
-            toolbar.mnuInsertTextArt.setDisabled(need_disable || in_image);
 
             if (in_chart !== this._state.in_chart) {
                 toolbar.btnInsertChart.updateHint(in_chart ? toolbar.tipChangeChart : toolbar.tipInsertChart);
@@ -1381,20 +1379,6 @@ define([
             Common.component.Analytics.trackEvent('ToolBar', 'Add Text');
         },
 
-        onInsertTextClick: function(menu, item, e) {
-            if (item.value === 'text') {
-                if (this.api)
-                    this._addAutoshape(true, 'textRect');
-                this.toolbar.btnInsertText.toggle(true, true);
-
-                if (this.toolbar.btnInsertShape.pressed)
-                    this.toolbar.btnInsertShape.toggle(false, true);
-
-                Common.NotificationCenter.trigger('edit:complete', this.toolbar, this.toolbar.btnInsertShape);
-                Common.component.Analytics.trackEvent('ToolBar', 'Add Text');
-            }
-        },
-
         onInsertShapeHide: function(btn, e) {
             if (this.toolbar.btnInsertShape.pressed && !this._isAddingShape) {
                 this.toolbar.btnInsertShape.toggle(false, true);
@@ -2520,7 +2504,7 @@ define([
         },
 
         fillTextArt: function() {
-            if (!this.toolbar.btnInsertText.rendered) return;
+            if (!this.toolbar.btnInsertTextArt.rendered) return;
             
             var me = this;
             if (this.toolbar.mnuTextArtPicker) {
@@ -2538,7 +2522,7 @@ define([
                 this.toolbar.mnuTextArtPicker = new Common.UI.DataView({
                     el: $('#id-toolbar-menu-insart'),
                     store: this.getApplication().getCollection('Common.Collections.TextArt'),
-                    parentMenu: this.toolbar.mnuInsertTextArt.menu,
+                    parentMenu: this.toolbar.btnInsertTextArt.menu,
                     showLast: false,
                     itemTemplate: _.template('<div class="item-art"><img src="<%= imageUrl %>" id="<%= id %>" style="width:50px;height:50px;"></div>')
                 });
@@ -2552,8 +2536,8 @@ define([
                             me.toolbar.btnInsertShape.toggle(false, true);
 
                          if (e.type !== 'click')
-                             me.toolbar.btnInsertText.menu.hide();
+                             me.toolbar.btnInsertTextArt.menu.hide();
-                        Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertText);
+                        Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertTextArt);
                         Common.component.Analytics.trackEvent('ToolBar', 'Add Text Art');
                     }
                 });

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

@@ -132,29 +132,25 @@
                 <div class="separator long"></div>
                 <div class="group">
                     <span class="btn-slot text x-huge" id="slot-btn-inshyperlink"></span>
-                </div>
+                    <span class="btn-slot text x-huge" id="slot-btn-notes"></span>
-                <div class="group">
+                    <span class="btn-slot text x-huge slot-comment"></span>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-btn-notes"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text slot-comment"></span>
-                    </div>
                 </div>
                 <div class="separator long"></div>
                 <div class="group">
                     <span class="btn-slot text x-huge" id="slot-btn-instext"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-instextart"></span>
                 </div>
+                <div class="separator long"></div>
+                <div class="group">
+                    <span class="btn-slot text x-huge" id="slot-btn-insequation"></span>
+                </div>
+                <div class="separator long"></div>
                 <div class="group">
                     <div class="elset">
                         <span class="btn-slot text" id="slot-btn-dropcap"></span>
                     </div>
                     <div class="elset"></div>
                 </div>
-                <div class="separator long"></div>
-                <div class="group">
-                    <span class="btn-slot text x-huge" id="slot-btn-insequation"></span>
-                </div>
             </section>
             <section class="panel" data-tab="layout">
                 <div class="group">

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

@@ -501,26 +501,22 @@ define([
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'btn-text',
                     caption: me.capBtnInsTextbox,
-                    enableToggle: true,
+                    enableToggle: true
-                    split: true,
+                });
+                this.paragraphControls.push(this.btnInsertText);
+                this.btnInsertTextArt = new Common.UI.Button({
+                    id: 'tlb-btn-instextart',
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-textart',
+                    caption: me.capBtnInsTextart,
                     menu: new Common.UI.Menu({
+                        cls: 'menu-shapes',
                         items: [
-                            {caption: this.textInsText, value: 'text'},
+                            {template: _.template('<div id="id-toolbar-menu-insart" style="width: 239px; margin-left: 5px;"></div>')}
-                            this.mnuInsertTextArt = new Common.UI.MenuItem({
-                                caption: this.textInsTextArt,
-                                value: 'art',
-                                menu: new Common.UI.Menu({
-                                    menuAlign: 'tl-tr',
-                                    cls: 'menu-shapes',
-                                    items: [
-                                        {template: _.template('<div id="id-toolbar-menu-insart" style="width: 239px; margin-left: 5px;"></div>')}
-                                    ]
-                                })
-                            })
                         ]
                     })
                 });
-                this.paragraphControls.push(this.btnInsertText);
+                this.paragraphControls.push(this.btnInsertTextArt);
 
                 this.btnInsertHyperlink = new Common.UI.Button({
                     id: 'tlb-btn-inshyperlink',
@@ -929,7 +925,7 @@ define([
 
                 this.btnNotes = new Common.UI.Button({
                     id: 'id-toolbar-btn-notes',
-                    cls: 'btn-toolbar',
+                    cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'btn-notes',
                     caption: me.capBtnInsFootnote,
                     split: true,
@@ -1270,6 +1266,7 @@ define([
                 _injectComponent('#slot-btn-insimage', this.btnInsertImage);
                 _injectComponent('#slot-btn-inschart', this.btnInsertChart);
                 _injectComponent('#slot-btn-instext', this.btnInsertText);
+                _injectComponent('#slot-btn-instextart', this.btnInsertTextArt);
                 _injectComponent('#slot-btn-dropcap', this.btnDropCap);
                 _injectComponent('#slot-btn-columns', this.btnColumns);
                 _injectComponent('#slot-btn-inshyperlink', this.btnInsertHyperlink);
@@ -1519,6 +1516,7 @@ define([
                 this.btnInsertImage.updateHint(this.tipInsertImage);
                 this.btnInsertChart.updateHint(this.tipInsertChart);
                 this.btnInsertText.updateHint(this.tipInsertText);
+                this.btnInsertTextArt.updateHint(this.tipInsertTextArt);
                 this.btnInsertHyperlink.updateHint(this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
                 this.btnEditHeader.updateHint(this.tipEditHeader);
                 this.btnInsertShape.updateHint(this.tipInsertShape);
@@ -2100,6 +2098,7 @@ define([
                     this.btnInsertImage.setDisabled(true);
                     this.btnInsertChart.setDisabled(true);
                     this.btnInsertText.setDisabled(true);
+                    this.btnInsertTextArt.setDisabled(true);
                     this.btnDropCap.setDisabled(true);
                     this.btnColumns.setDisabled(true);
                     this.btnInsertHyperlink.setDisabled(true);
@@ -2377,6 +2376,7 @@ define([
             textStock: 'Stock',
             tipColorSchemas: 'Change Color Scheme',
             tipInsertText: 'Insert Text',
+            tipInsertTextArt: 'Insert Text Art',
             tipHAligh: 'Horizontal Align',
             tipViewSettings: 'View Settings',
             tipAdvSettings: 'Advanced Settings',
@@ -2428,8 +2428,6 @@ define([
             textStyleMenuRestoreAll: 'Restore all to default styles',
             textStyleMenuDeleteAll: 'Delete all custom styles',
             textStyleMenuNew: 'New style from selection',
-            textInsText: 'Insert text box',
-            textInsTextArt: 'Insert Text Art',
             tipColumns: 'Insert columns',
             textColumnsOne: 'One',
             textColumnsTwo: 'Two',
@@ -2471,6 +2469,7 @@ define([
             textTabReview: 'Review',
             capBtnInsShape: 'Shape',
             capBtnInsTextbox: 'Text',
+            capBtnInsTextart: 'Text Art',
             capBtnInsDropcap: 'Drop Cap',
             capBtnInsFootnote: 'Footnotes',
             capBtnInsEquation: 'Equation',

apps/documenteditor/main/locale/en.json

@@ -291,7 +291,7 @@
   "DE.Controllers.Main.splitMaxRowsErrorText": "The number of rows must be less than %1.",
   "DE.Controllers.Main.textAnonymous": "Anonymous",
   "DE.Controllers.Main.textBuyNow": "Visit website",
-  "del_DE.Controllers.Main.textChangesSaved": "All changes saved",
+  "DE.Controllers.Main.textChangesSaved": "All changes saved",
   "DE.Controllers.Main.textCloseTip": "Click to close the tip",
   "DE.Controllers.Main.textContactUs": "Contact sales",
   "DE.Controllers.Main.textLoadingDocument": "Loading document",
@@ -1534,8 +1534,8 @@
   "DE.Views.Toolbar.textInsertPageNumber": "Insert page number",
   "DE.Views.Toolbar.textInsPageBreak": "Insert Page Break",
   "DE.Views.Toolbar.textInsSectionBreak": "Insert Section Break",
-  "DE.Views.Toolbar.textInsText": "Insert text box",
+  "del_DE.Views.Toolbar.textInsText": "Insert text box",
-  "DE.Views.Toolbar.textInsTextArt": "Insert Text Art",
+  "del_DE.Views.Toolbar.textInsTextArt": "Insert Text Art",
   "DE.Views.Toolbar.textInText": "In Text",
   "DE.Views.Toolbar.textItalic": "Italic",
   "DE.Views.Toolbar.textLandscape": "Landscape",
@@ -1603,6 +1603,7 @@
   "DE.Views.Toolbar.tipInsertShape": "Insert Autoshape",
   "DE.Views.Toolbar.tipInsertTable": "Insert Table",
   "DE.Views.Toolbar.tipInsertText": "Insert Text",
+  "DE.Views.Toolbar.tipInsertTextArt": "Insert Text Art",
   "DE.Views.Toolbar.tipLineSpace": "Paragraph Line Spacing",
   "DE.Views.Toolbar.tipMailRecepients": "Mail Merge",
   "DE.Views.Toolbar.tipMarkers": "Bullets",
@@ -1636,6 +1637,7 @@
   "DE.Views.Toolbar.capBtnInsLink": "Hyperlink",
   "DE.Views.Toolbar.capBtnInsShape": "Shape",
   "DE.Views.Toolbar.capBtnInsTextbox": "Text",
+  "DE.Views.Toolbar.capBtnInsTextart": "Text Art",
   "DE.Views.Toolbar.capBtnInsDropcap": "Drop Cap",
   "DE.Views.Toolbar.capBtnInsFootnote": "Footnotes",
   "DE.Views.Toolbar.capBtnInsEquation": "Equation",

apps/documenteditor/main/resources/less/statusbar.less

@@ -214,7 +214,4 @@
 
 .button-normal-icon(btn-ic-zoomtowidth, 55, @toolbar-icon-size);
 .button-normal-icon(btn-ic-zoomtopage,  56, @toolbar-icon-size);
-.button-normal-icon(btn-ic-review,      61, @toolbar-icon-size);
-.button-normal-icon(btn-ic-doclang,     67, @toolbar-icon-size);
-.button-normal-icon(btn-ic-docspell,    69, @toolbar-icon-size);
 .button-normal-icon(btn-ic-changes,     68, @toolbar-icon-size);

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

@@ -225,6 +225,7 @@
 }
 
 @toolbar-icon-size: 20px;
+@toolbar-big-icon-size: 26px;
 .button-normal-icon(btn-align-center,     0, @toolbar-icon-size);
 .button-normal-icon(btn-align-just,       1, @toolbar-icon-size);
 .button-normal-icon(btn-align-left,       2, @toolbar-icon-size);
@@ -241,8 +242,6 @@
 .button-normal-icon(btn-fontcolor,        14, @toolbar-icon-size);
 .button-normal-icon(btn-incoffset,        15, @toolbar-icon-size);
 .button-normal-icon(btn-incfont,          16, @toolbar-icon-size);
-.button-normal-icon(btn-insertimage,      17, @toolbar-icon-size);
-.button-normal-icon(btn-inserttable,      18, @toolbar-icon-size);
 .button-normal-icon(btn-italic,           19, @toolbar-icon-size);
 .button-normal-icon(btn-linespace,        20, @toolbar-icon-size);
 .button-normal-icon(btn-setmarkers,       21, @toolbar-icon-size);
@@ -261,34 +260,27 @@
 .button-normal-icon(btn-underline,        35, @toolbar-icon-size);
 .button-normal-icon(btn-undo,             36, @toolbar-icon-size);
 .button-normal-icon(btn-hidenchars,       37, @toolbar-icon-size);
-.button-normal-icon(btn-inserthyperlink,  38, @toolbar-icon-size);
 .button-normal-icon(btn-editheader,       39, @toolbar-icon-size);
 .button-normal-icon(btn-mailrecepients,   40, @toolbar-icon-size);
 .button-normal-icon(btn-synch,            42, @toolbar-icon-size);
 .button-normal-icon(btn-save-coauth,      41, @toolbar-icon-size);
-.button-normal-icon(btn-insertshape,      43, @toolbar-icon-size);
 .button-normal-icon(btn-colorschemas,     44, @toolbar-icon-size);
-.button-normal-icon(btn-insertchart,      45, @toolbar-icon-size);
-.button-normal-icon(btn-text,             46, @toolbar-icon-size);
 .button-normal-icon(btn-hidebars,         47, @toolbar-icon-size);
 .button-normal-icon(btn-settings,         48, @toolbar-icon-size);
 .button-normal-icon(btn-dropcap,          50, @toolbar-icon-size);
-.button-normal-icon(btn-insertequation,   53, @toolbar-icon-size);
 //.toolbar-btn-icon(btn-bold,             5, @toolbar-icon-size);
 .button-normal-icon(btn-zoomup,           57, @toolbar-icon-size);
 .button-normal-icon(btn-zoomdown,         58, @toolbar-icon-size);
 
+.button-normal-icon(btn-ic-review,        61, @toolbar-icon-size);
+.button-normal-icon(btn-ic-docspell,    69, @toolbar-icon-size);
+
 .button-normal-icon(mmerge-next,          71, @toolbar-icon-size);
 .button-normal-icon(mmerge-last,          72, @toolbar-icon-size);
 .button-normal-icon(mmerge-prev,          73, @toolbar-icon-size);
 .button-normal-icon(mmerge-first,         74, @toolbar-icon-size);
 .button-normal-icon(btn-columns,          75, @toolbar-icon-size);
 .button-normal-icon(btn-pagemargins,      76, @toolbar-icon-size);
-.button-normal-icon(btn-notes,            78, @toolbar-icon-size);
-.button-normal-icon(review-prev,          79, @toolbar-icon-size);
-.button-normal-icon(review-next,          80, @toolbar-icon-size);
-.button-normal-icon(review-save,          81, @toolbar-icon-size);
-.button-normal-icon(review-deny,          82, @toolbar-icon-size);
 .button-normal-icon(btn-img-frwd,         83, @toolbar-icon-size);
 .button-normal-icon(btn-img-bkwd,         84, @toolbar-icon-size);
 .button-normal-icon(btn-img-wrap,         85, @toolbar-icon-size);
@@ -296,6 +288,38 @@
 .button-normal-icon(btn-img-align,        87, @toolbar-icon-size);
 .button-normal-icon(btn-goback,           88, @toolbar-icon-size);
 
+//.button-normal-icon(btn-insertimage,      17, @toolbar-icon-size);
+//.button-normal-icon(btn-inserttable,      18, @toolbar-icon-size);
+//.button-normal-icon(btn-inserthyperlink,  38, @toolbar-icon-size);
+//.button-normal-icon(btn-insertshape,      43, @toolbar-icon-size);
+//.button-normal-icon(btn-insertchart,      45, @toolbar-icon-size);
+//.button-normal-icon(btn-insertequation,   53, @toolbar-icon-size);
+//.button-normal-icon(btn-text,             46, @toolbar-icon-size);
+//.button-normal-icon(btn-ic-doclang,     67, @toolbar-icon-size);
+//.button-normal-icon(btn-notes,            78, @toolbar-icon-size);
+//.button-normal-icon(review-prev,          79, @toolbar-icon-size);
+//.button-normal-icon(review-next,          80, @toolbar-icon-size);
+//.button-normal-icon(review-save,          81, @toolbar-icon-size);
+//.button-normal-icon(review-deny,          82, @toolbar-icon-size);
+
+.button-normal-icon(btn-inserttable,      0, @toolbar-big-icon-size);
+.button-normal-icon(btn-insertimage,      1, @toolbar-big-icon-size);
+.button-normal-icon(btn-insertshape,      2, @toolbar-big-icon-size);
+.button-normal-icon(btn-text,             3, @toolbar-big-icon-size);
+.button-normal-icon(btn-inserthyperlink,  4, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-menu-comments', 5, @toolbar-big-icon-size);
+.button-normal-icon(btn-textart,          6, @toolbar-big-icon-size);
+.button-normal-icon(btn-insertequation,   7, @toolbar-big-icon-size);
+.button-normal-icon(btn-insertchart,      9, @toolbar-big-icon-size);
+.button-normal-icon(btn-notes,            8, @toolbar-big-icon-size);
+.button-normal-icon(btn-ic-doclang,       11, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-ic-docspell', 12, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-ic-review', 13, @toolbar-big-icon-size);
+.button-normal-icon(review-save,          14, @toolbar-big-icon-size);
+.button-normal-icon(review-deny,          15, @toolbar-big-icon-size);
+.button-normal-icon(review-next,          16, @toolbar-big-icon-size);
+.button-normal-icon(review-prev,          17, @toolbar-big-icon-size);
+
 @menu-icon-size: 22px;
 .menu-icon-normal(mnu-wrap-inline,          0, @menu-icon-size);
 .menu-icon-normal(mnu-wrap-square,          1, @menu-icon-size);