[SSE] Add layout tab

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

@@ -2323,7 +2323,7 @@ define([
             textTabFile: 'File',
             textTabHome: 'Home',
             textTabInsert: 'Insert',
-            textTabLayout: 'Page Layout',
+            textTabLayout: 'Layout',
             textTabReview: 'Review',
             capBtnInsShape: 'Shape',
             capBtnInsTextbox: 'Text Box',
@@ -2338,12 +2338,12 @@ define([
             tipImgAlign: 'Align objects',
             tipImgGroup: 'Group objects',
             tipImgWrapping: 'Wrap text',
-            tipSendForward: 'Send forward',
+            tipSendForward: 'Bring forward',
             tipSendBackward: 'Send backward',
             capImgAlign: 'Align',
             capImgGroup: 'Group',
-            capImgForward: 'Move forward',
+            capImgForward: 'Bring Forward',
-            capImgBackward: 'Move backward',
+            capImgBackward: 'Send Backward',
             capImgWrapping: 'Wrapping',
             capBtnComment: 'Comment',
             textColumnsCustom: 'Custom Columns',

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

@@ -1791,6 +1791,7 @@ define([
                 Common.Utils.InternalSettings.set("sse-settings-unit", value);
                 this.getApplication().getController('RightMenu').updateMetricUnit();
                 this.getApplication().getController('Print').getView('MainSettingsPrint').updateMetricUnit();
+                this.getApplication().getController('Toolbar').getView('Toolbar').updateMetricUnit();
             },
 
             _compareActionStrong: function(obj1, obj2){

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

@@ -203,6 +203,7 @@ define([
                 if (this._changedProps[index])
                     this.api.asc_setPageOptions(this._changedProps[index], index);
             }
+            Common.NotificationCenter.trigger('page:settings');
         },
 
         onShowMainSettingsPrint: function() {

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

@@ -117,6 +117,8 @@ define([
                     }
                 }
             });
+            Common.NotificationCenter.on('page:settings', _.bind(this.onApiSheetChanged, this));
+
             this.editMode = true;
             this._isAddingShape = false;
             this._state = {
@@ -155,7 +157,10 @@ define([
                 numformatinfo: undefined,
                 numformattype: undefined,
                 numformat: undefined,
-                langId: undefined
+                langId: undefined,
+                pgsize: [0, 0],
+                pgmargins: undefined,
+                pgorient: undefined
             };
 
             var checkInsertAutoshape =  function(e, action) {
@@ -343,6 +348,15 @@ define([
                 $('#id-toolbar-menu-new-fontcolor').on('click',             _.bind(this.onNewTextColor, this));
                 $('#id-toolbar-menu-new-paracolor').on('click',             _.bind(this.onNewBackColor, this));
                 $('#id-toolbar-menu-new-bordercolor').on('click',           _.bind(this.onNewBorderColor, this));
+                toolbar.btnPageOrient.menu.on('item:click',                 _.bind(this.onPageOrientSelect, this));
+                toolbar.btnPageMargins.menu.on('item:click',                _.bind(this.onPageMarginsSelect, this));
+                toolbar.mnuPageSize.on('item:click',                        _.bind(this.onPageSizeClick, this));
+                toolbar.btnImgGroup.menu.on('item:click',                   _.bind(this.onImgGroupSelect, this));
+                toolbar.btnImgBackward.menu.on('item:click',                _.bind(this.onImgArrangeSelect, this));
+                toolbar.btnImgForward.menu.on('item:click',                 _.bind(this.onImgArrangeSelect, this));
+                toolbar.btnImgAlign.menu.on('item:click',                   _.bind(this.onImgAlignSelect, this));
+                toolbar.btnImgForward.on('click',                           this.onImgArrangeSelect.bind(this, 'forward'));
+                toolbar.btnImgBackward.on('click',                          this.onImgArrangeSelect.bind(this, 'backward'));
 
                 this.onSetupCopyStyleButton();
             }
@@ -1669,7 +1683,68 @@ define([
 
         onApiZoomChange: function(zf, type){},
 
-        onApiSheetChanged: function() {},
+        onApiSheetChanged: function() {
+            if (!this.toolbar.mode.isEdit) return;
+
+            var props = this.api.asc_getPageOptions(this.api.asc_getActiveWorksheetIndex()),
+                opt = props.asc_getPageSetup();
+
+            this.onApiPageOrient(opt.asc_getOrientation());
+            this.onApiPageSize(opt.asc_getWidth(), opt.asc_getHeight());
+            this.onApiPageMargins(props.asc_getPageMargins());
+        },
+
+        onApiPageSize: function(w, h) {
+            if (this._state.pgorient===undefined) return;
+
+            if (Math.abs(this._state.pgsize[0] - w) > 0.01 ||
+                Math.abs(this._state.pgsize[1] - h) > 0.01) {
+                this._state.pgsize = [w, h];
+                if (this.toolbar.mnuPageSize) {
+                    this.toolbar.mnuPageSize.clearAll();
+                    _.each(this.toolbar.mnuPageSize.items, function(item){
+                        if (item.value && typeof(item.value) == 'object' &&
+                            Math.abs(item.value[0] - w) < 0.01 && Math.abs(item.value[1] - h) < 0.01) {
+                            item.setChecked(true);
+                            return false;
+                        }
+                    }, this);
+                }
+            }
+        },
+
+        onApiPageMargins: function(props) {
+            if (props) {
+                var left = props.asc_getLeft(),
+                    top = props.asc_getTop(),
+                    right = props.asc_getRight(),
+                    bottom = props.asc_getBottom();
+
+                if (!this._state.pgmargins || Math.abs(this._state.pgmargins[0] - top) > 0.01 ||
+                    Math.abs(this._state.pgmargins[1] - left) > 0.01 || Math.abs(this._state.pgmargins[2] - bottom) > 0.01 ||
+                    Math.abs(this._state.pgmargins[3] - right) > 0.01) {
+                    this._state.pgmargins = [top, left, bottom, right];
+                    if (this.toolbar.btnPageMargins.menu) {
+                        this.toolbar.btnPageMargins.menu.clearAll();
+                        _.each(this.toolbar.btnPageMargins.menu.items, function(item){
+                            if (item.value && typeof(item.value) == 'object' &&
+                                Math.abs(item.value[0] - top) < 0.01 && Math.abs(item.value[1] - left) < 0.01 &&
+                                Math.abs(item.value[2] - bottom) < 0.01 && Math.abs(item.value[3] - right) < 0.01) {
+                                item.setChecked(true);
+                                return false;
+                            }
+                        }, this);
+                    }
+                }
+            }
+        },
+
+        onApiPageOrient: function(orient) {
+            if (this._state.pgorient !== orient) {
+                this.toolbar.btnPageOrient.menu.items[orient].setChecked(true);
+                this._state.pgorient = orient;
+            }
+        },
 
         onApiEditorSelectionChanged: function(fontobj) {
             if (!this.editMode) return;
@@ -1819,6 +1894,12 @@ define([
             }
             */
 
+            need_disable = (selectionType == Asc.c_oAscSelectionType.RangeCells || selectionType == Asc.c_oAscSelectionType.RangeCol ||
+                selectionType == Asc.c_oAscSelectionType.RangeRow || selectionType == Asc.c_oAscSelectionType.RangeMax);
+            toolbar.lockToolbar(SSE.enumLock.selRange, need_disable, { array: [toolbar.btnImgAlign, toolbar.btnImgBackward, toolbar.btnImgForward, toolbar.btnImgGroup]});
+            toolbar.btnImgGroup.menu.items[0].setDisabled(!this.api.asc_canGroupGraphicsObjects());
+            toolbar.btnImgGroup.menu.items[1].setDisabled(!this.api.asc_canUnGroupGraphicsObjects());
+
             if (editOptionsDisabled) return;
 
             /* read font params */
@@ -2901,7 +2982,7 @@ define([
             this.onApiEditCell(this.api.isRangeSelection ? Asc.c_oAscCellEditorState.editStart : Asc.c_oAscCellEditorState.editEnd);
 
             var toolbar = this.toolbar;
-            toolbar.lockToolbar(SSE.enumLock.selRange, this.api.isRangeSelection);
+            toolbar.lockToolbar(SSE.enumLock.selRangeEdit, this.api.isRangeSelection);
 
             this.setDisabledComponents([toolbar.btnUndo], this.api.isRangeSelection || !this.api.asc_getCanUndo());
             this.setDisabledComponents([toolbar.btnRedo], this.api.isRangeSelection || !this.api.asc_getCanRedo());
@@ -2971,7 +3052,7 @@ define([
                             tab = {action: 'pivot', caption: me.textPivot};
                             $panel = me.getApplication().getController('PivotTable').createToolbarPanel();
                             if ($panel) {
-                                me.toolbar.addTab(tab, $panel, 3);
+                                me.toolbar.addTab(tab, $panel, 4);
                                 me.toolbar.setVisible('pivot', true);
                             }
                         }
@@ -2979,7 +3060,7 @@ define([
                         var tab = {action: 'review', caption: me.toolbar.textTabCollaboration};
                         var $panel = me.getApplication().getController('Common.Controllers.ReviewChanges').createToolbarPanel();
                         if ( $panel )
-                            me.toolbar.addTab(tab, $panel, 4);
+                            me.toolbar.addTab(tab, $panel, 5);
 
                         if ( config.isDesktopApp ) {
                             // hide 'print' and 'save' buttons group and next separator
@@ -2996,7 +3077,7 @@ define([
                                 tab = {action: 'protect', caption: me.toolbar.textTabProtect};
                                 $panel = me.getApplication().getController('Common.Controllers.Protection').createToolbarPanel();
                                 if ($panel)
-                                    me.toolbar.addTab(tab, $panel, 5);
+                                    me.toolbar.addTab(tab, $panel, 6);
                             }
                         }
                     }
@@ -3056,6 +3137,96 @@ define([
             }
         },
 
+        onPageSizeClick: function(menu, item, state) {
+            if (this.api && state) {
+                this._state.pgsize = [0, 0];
+                // this.api.change_DocSize(item.value[0], item.value[1]);
+
+                Common.component.Analytics.trackEvent('ToolBar', 'Page Size');
+            }
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
+        onPageMarginsSelect: function(menu, item) {
+            if (this.api) {
+                this._state.pgmargins = undefined;
+                if (item.value !== 'advanced') {
+                    // var props = new Asc.CDocumentSectionProps();
+                    // props.put_TopMargin(item.value[0]);
+                    // props.put_LeftMargin(item.value[1]);
+                    // props.put_BottomMargin(item.value[2]);
+                    // props.put_RightMargin(item.value[3]);
+                    // this.api.asc_SetSectionProps(props);
+                } else {
+                    // var win, props,
+                    //     me = this;
+                    // win = new SSE.Views.PageMarginsDialog({
+                    //     handler: function(dlg, result) {
+                    //         if (result == 'ok') {
+                    //             props = dlg.getSettings();
+                    //             var mnu = me.toolbar.btnPageMargins.menu.items[0];
+                    //             mnu.setVisible(true);
+                    //             mnu.setChecked(true);
+                    //             mnu.options.value = mnu.value = [props.get_TopMargin(), props.get_LeftMargin(), props.get_BottomMargin(), props.get_RightMargin()];
+                    //             $(mnu.el).html(mnu.template({id: Common.UI.getId(), caption : mnu.caption, options : mnu.options}));
+                    //             Common.localStorage.setItem("sse-pgmargins-top", props.asc_getTopn());
+                    //             Common.localStorage.setItem("sse-pgmargins-left", props.asc_getLeft());
+                    //             Common.localStorage.setItem("sse-pgmargins-bottom", props.asc_getBottom());
+                    //             Common.localStorage.setItem("sse-pgmargins-right", props.asc_getRight());
+                    //
+                    //             me.api.asc_SetSectionProps(props);
+                    //             Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                    //         }
+                    //     }
+                    // });
+                    // win.show();
+                    // win.setSettings(me.api.asc_getPageOptions(me.api.asc_getActiveWorksheetIndex()));
+                }
+
+                Common.component.Analytics.trackEvent('ToolBar', 'Page Margins');
+            }
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
+        onPageOrientSelect: function(menu, item) {
+            this._state.pgorient = undefined;
+            if (this.api && item.checked) {
+                // this.api.change_PageOrient(item.value);
+            }
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+            Common.component.Analytics.trackEvent('ToolBar', 'Page Orientation');
+        },
+
+        onImgGroupSelect: function(menu, item) {
+            if (this.api)
+                this.api[(item.value == 'grouping') ? 'asc_groupGraphicsObjects' : 'asc_unGroupGraphicsObjects']();
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+            Common.component.Analytics.trackEvent('ToolBar', 'Objects Group');
+        },
+
+        onImgArrangeSelect: function(menu, item) {
+            if (this.api) {
+                if ( menu == 'forward' )
+                    this.api.asc_setSelectedDrawingObjectLayer(Asc.c_oAscDrawingLayerType.BringForward);
+                else if ( menu == 'backward' )
+                    this.api.asc_setSelectedDrawingObjectLayer(Asc.c_oAscDrawingLayerType.SendBackward);
+                else
+                    this.api.asc_setSelectedDrawingObjectLayer(item.value);
+            }
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+            Common.component.Analytics.trackEvent('ToolBar', 'Objects Arrange');
+        },
+
+        onImgAlignSelect: function(menu, item) {
+            if (this.api)
+                // this.api.asc_setSelectedDrawingObjectLayer(item.value);
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+            Common.component.Analytics.trackEvent('ToolBar', 'Objects Align');
+        },
+
         textEmptyImgUrl     : 'You need to specify image URL.',
         warnMergeLostData   : 'Operation can destroy data in the selected cells.<br>Continue?',
         textWarning         : 'Warning',

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

@@ -136,6 +136,20 @@
                     <span class="btn-slot text x-huge" id="slot-btn-insequation"></span>
                 </div>
             </section>
+            <section class="panel" data-tab="layout">
+                <div class="group">
+                    <span class="btn-slot text x-huge" id="slot-btn-pagemargins"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-pageorient"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-pagesize"></span>
+                </div>
+                <div class="separator long"></div>
+                <div class="group">
+                    <span class="btn-slot text x-huge" id="slot-img-align"></span>
+                    <span class="btn-slot text x-huge" id="slot-img-group"></span>
+                    <span class="btn-slot text x-huge" id="slot-img-movefrwd"></span>
+                    <span class="btn-slot text x-huge" id="slot-img-movebkwd"></span>
+                </div>
+            </section>
         </section>
     </section>
 </section>

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

@@ -945,7 +945,13 @@ define([
         txtPercentage:      'Percentage',
         txtFraction:        'Fraction',
         txtText:            'Text',
-        textMoreFormats: 'More formats'
+        textMoreFormats: 'More formats',
+        textShapeAlignLeft      : 'Align Left',
+        textShapeAlignRight     : 'Align Right',
+        textShapeAlignCenter    : 'Align Center',
+        textShapeAlignTop       : 'Align Top',
+        textShapeAlignBottom    : 'Align Bottom',
+        textShapeAlignMiddle    : 'Align Middle'
 
     }, SSE.Views.DocumentHolder || {}));
 });

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

@@ -119,12 +119,12 @@ define([    'text!spreadsheeteditor/main/app/template/PrintSettings.template',
                     {value:'215.9|279.4',    displayValue:'US Letter (21,59cm x 27,94cm)', caption: 'US Letter'},
                     {value:'215.9|355.6',    displayValue:'US Legal (21,59cm x 35,56cm)', caption: 'US Legal'},
                     {value:'210|297',        displayValue:'A4 (21cm x 29,7cm)', caption: 'A4'},
-                    {value:'148.1|209.9',    displayValue:'A5 (14,81cm x 20,99cm)', caption: 'A5'},
+                    {value:'148|210',        displayValue:'A5 (14,8cm x 21cm)', caption: 'A5'},
-                    {value:'176|250.1',      displayValue:'B5 (17,6cm x 25,01cm)', caption: 'B5'},
+                    {value:'176|250',        displayValue:'B5 (17,6cm x 25cm)', caption: 'B5'},
                     {value:'104.8|241.3',    displayValue:'Envelope #10 (10,48cm x 24,13cm)', caption: 'Envelope #10'},
-                    {value:'110.1|220.1',    displayValue:'Envelope DL (11,01cm x 22,01cm)', caption: 'Envelope DL'},
+                    {value:'110|220',        displayValue:'Envelope DL (11cm x 22cm)', caption: 'Envelope DL'},
-                    {value:'279.4|431.7',    displayValue:'Tabloid (27,94cm x 43,17cm)', caption: 'Tabloid'},
+                    {value:'279.4|431.8',    displayValue:'Tabloid (27,94cm x 43,18cm)', caption: 'Tabloid'},
-                    {value:'297|420.1',      displayValue:'A3 (29,7cm x 42,01cm)', caption: 'A3'},
+                    {value:'297|420',        displayValue:'A3 (29,7cm x 42cm)', caption: 'A3'},
                     {value:'304.8|457.1',    displayValue:'Tabloid Oversize (30,48cm x 45,71cm)', caption: 'Tabloid Oversize'},
                     {value:'196.8|273',      displayValue:'ROC 16K (19,68cm x 27,3cm)', caption: 'ROC 16K'},
                     {value:'119.9|234.9',    displayValue:'Envelope Choukei 3 (11,99cm x 23,49cm)', caption: 'Envelope Choukei 3'},

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

@@ -69,6 +69,7 @@ define([
         selChart:       'sel-chart',
         selChartText:   'sel-chart-txt',
         selRange:       'sel-range',
+        selRangeEdit:   'sel-range-edit',
         lostConnect:    'disconnect',
         coAuth:         'co-auth',
         coAuthText:     'co-auth-text',
@@ -232,7 +233,7 @@ define([
                     cls         : 'btn-toolbar',
                     iconCls     : 'btn-formula',
                     split       : true,
-                    lock        : [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRange, _set.lostConnect, _set.coAuth],
+                    lock        : [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth],
                     menu        : new Common.UI.Menu({
                         style : 'min-width: 110px',
                         items : [
@@ -279,7 +280,7 @@ define([
                     cls         : 'input-group-nr',
                     menuStyle   : 'min-width: 180px;',
                     hint        : me.tipNumFormat,
-                    lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRange, _set.lostConnect, _set.coAuth],
+                    lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth],
                     itemsTemplate: formatTemplate,
                     editable    : false,
                     data        : me.numFormatData
@@ -338,7 +339,8 @@ define([
                     tabs: [
                         { caption: me.textTabFile, action: 'file', extcls: 'canedit', haspanel:false},
                         { caption: me.textTabHome, action: 'home', extcls: 'canedit'},
-                        { caption: me.textTabInsert, action: 'ins', extcls: 'canedit'}
+                        { caption: me.textTabInsert, action: 'ins', extcls: 'canedit'},
+                        {caption: me.textTabLayout, action: 'layout', extcls: 'canedit'}
                     ]}
                 );
 
@@ -346,7 +348,7 @@ define([
                     cls         : 'input-group-nr',
                     menuStyle   : 'min-width: 55px;',
                     hint        : me.tipFontSize,
-                    lock        : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect],
+                    lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.coAuth, _set.coAuthText, _set.lostConnect],
                     data        : [
                         { value: 8, displayValue: "8" },
                         { value: 9, displayValue: "9" },
@@ -372,7 +374,7 @@ define([
                     menuCls     : 'scrollable-menu',
                     menuStyle   : 'min-width: 325px;',
                     hint        : me.tipFontName,
-                    lock        : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect],
+                    lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.coAuth, _set.coAuthText, _set.lostConnect],
                     store       : new Common.Collections.Fonts()
                 });
 
@@ -395,21 +397,21 @@ define([
                     id          : 'id-toolbar-btn-incfont',
                     cls         : 'btn-toolbar',
                     iconCls     : 'btn-incfont',
-                    lock        : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect]
+                    lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.coAuth, _set.coAuthText, _set.lostConnect]
                 });
 
                 me.btnDecFontSize = new Common.UI.Button({
                     id          : 'id-toolbar-btn-decfont',
                     cls         : 'btn-toolbar',
                     iconCls     : 'btn-decfont',
-                    lock        : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect]
+                    lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.coAuth, _set.coAuthText, _set.lostConnect]
                 });
 
                 me.btnBold = new Common.UI.Button({
                     id          : 'id-toolbar-btn-bold',
                     cls         : 'btn-toolbar',
                     iconCls     : 'btn-bold',
-                    lock        : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect],
+                    lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.coAuth, _set.coAuthText, _set.lostConnect],
                     enableToggle: true
                 });
 
@@ -417,7 +419,7 @@ define([
                     id          : 'id-toolbar-btn-italic',
                     cls         : 'btn-toolbar',
                     iconCls     : 'btn-italic',
-                    lock        : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect],
+                    lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.coAuth, _set.coAuthText, _set.lostConnect],
                     enableToggle: true
                 });
 
@@ -425,7 +427,7 @@ define([
                     id          : 'id-toolbar-btn-underline',
                     cls         : 'btn-toolbar',
                     iconCls     : 'btn-underline',
-                    lock        : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect],
+                    lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.coAuth, _set.coAuthText, _set.lostConnect],
                     enableToggle: true
                 });
 
@@ -433,7 +435,7 @@ define([
                     id: 'id-toolbar-btn-strikeout',
                     cls: 'btn-toolbar',
                     iconCls: 'btn-strikeout',
-                    lock        : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect],
+                    lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.coAuth, _set.coAuthText, _set.lostConnect],
                     enableToggle: true
                 });
 
@@ -444,7 +446,7 @@ define([
                     icls     : 'btn-subscript',
                     split       : true,
                     enableToggle: true,
-                    lock        : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect],
+                    lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.coAuth, _set.coAuthText, _set.lostConnect],
                     menu        : new Common.UI.Menu({
                         items: [
                             {
@@ -475,7 +477,7 @@ define([
                     cls         : 'btn-toolbar',
                     iconCls     : 'btn-fontcolor',
                     split       : true,
-                    lock        : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect],
+                    lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.coAuth, _set.coAuthText, _set.lostConnect],
                     menu        : new Common.UI.Menu({
                         items: [
                             { template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
@@ -832,7 +834,7 @@ define([
                     cls         : 'input-group-nr',
                     menuStyle   : 'min-width: 180px;',
                     hint        : me.tipNumFormat,
-                    lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRange, _set.lostConnect, _set.coAuth],
+                    lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth],
                     itemsTemplate: formatTemplate,
                     editable    : false,
                     data        : me.numFormatData
@@ -899,7 +901,7 @@ define([
                     cls         : 'btn-toolbar',
                     iconCls     : 'btn-formula',
                     split       : true,
-                    lock        : [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRange, _set.lostConnect, _set.coAuth],
+                    lock        : [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth],
                     menu        : new Common.UI.Menu({
                         style : 'min-width: 110px',
                         items : [
@@ -920,7 +922,7 @@ define([
                     id          : 'id-toolbar-btn-insertrange',
                     cls         : 'btn-toolbar',
                     iconCls     : 'btn-named-range',
-                    lock        : [_set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.selRange],
+                    lock        : [_set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.selRangeEdit],
                     menu        : new Common.UI.Menu({
                         style : 'min-width: 110px',
                         items : [
@@ -946,7 +948,7 @@ define([
                     id          : 'id-toolbar-btn-clear',
                     cls         : 'btn-toolbar',
                     iconCls     : 'btn-clearstyle',
-                    lock        : [_set.lostConnect, _set.coAuth, _set.selRange],
+                    lock        : [_set.lostConnect, _set.coAuth, _set.selRangeEdit],
                     menu        : new Common.UI.Menu({
                         style : 'min-width: 110px',
                         items : [
@@ -1202,6 +1204,237 @@ define([
                 var hidetip = Common.localStorage.getItem("sse-hide-synch");
                 me.showSynchTip = !(hidetip && parseInt(hidetip) == 1);
                 // me.needShowSynchTip = false;
+
+                me.btnPageOrient = new Common.UI.Button({
+                    id: 'tlbtn-pageorient',
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-pageorient',
+                    caption: me.capBtnPageOrient,
+                    lock        : [_set.lostConnect, _set.coAuth],
+                    menu: new Common.UI.Menu({
+                        cls: 'ppm-toolbar',
+                        items: [
+                            {
+                                caption: me.textPortrait,
+                                iconCls: 'mnu-orient-portrait',
+                                checkable: true,
+                                toggleGroup: 'menuOrient',
+                                value: true
+                            },
+                            {
+                                caption: me.textLandscape,
+                                iconCls: 'mnu-orient-landscape',
+                                checkable: true,
+                                toggleGroup: 'menuOrient',
+                                value: false
+                            }
+                        ]
+                    })
+                });
+
+                var pageMarginsTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                    '<% if (options.value !== null) { %><div style="display: inline-block;margin-right: 20px;min-width: 80px;">' +
+                    '<label style="display: block;">' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
+                    '<label style="display: block;">' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div><div style="display: inline-block;">' +
+                    '<label style="display: block;">' + this.textBottom + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
+                    '<label style="display: block;">' + this.textRight + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
+                    '<% } %></a>');
+
+                me.btnPageMargins = new Common.UI.Button({
+                    id: 'tlbtn-pagemargins',
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-pagemargins',
+                    caption: me.capBtnMargins,
+                    lock        : [_set.lostConnect, _set.coAuth],
+                    menu: new Common.UI.Menu({
+                        items: [
+                            {
+                                caption: me.textMarginsLast,
+                                checkable: true,
+                                template: pageMarginsTemplate,
+                                toggleGroup: 'menuPageMargins'
+                            }, //top,left,bottom,right
+                            {
+                                caption: me.textMarginsNormal,
+                                checkable: true,
+                                template: pageMarginsTemplate,
+                                toggleGroup: 'menuPageMargins',
+                                value: [19.1, 17.8, 19.1, 17.8]
+                            },
+                            {
+                                caption: me.textMarginsNarrow,
+                                checkable: true,
+                                template: pageMarginsTemplate,
+                                toggleGroup: 'menuPageMargins',
+                                value: [19.1, 6.4, 19.1, 6.4]
+                            },
+                            {
+                                caption: me.textMarginsWide,
+                                checkable: true,
+                                template: pageMarginsTemplate,
+                                toggleGroup: 'menuPageMargins',
+                                value: [25.4, 25.4, 25.4, 25.4]
+                            },
+                            {caption: '--'},
+                            {caption: me.textPageMarginsCustom, value: 'advanced'}
+                        ]
+                    })
+                });
+
+                var pageSizeTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                    '<div><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
+                    '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>');
+
+                me.btnPageSize = new Common.UI.Button({
+                    id: 'tlbtn-pagesize',
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-pagesize',
+                    caption: me.capBtnPageSize,
+                    lock        : [_set.lostConnect, _set.coAuth],
+                    menu: new Common.UI.Menu({
+                        items: [
+                            {
+                                caption: 'US Letter',
+                                subtitle: '21,59cm x 27,94cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [215.9, 279.4]
+                            },
+                            {
+                                caption: 'US Legal',
+                                subtitle: '21,59cm x 35,56cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [215.9, 355.6]
+                            },
+                            {
+                                caption: 'A4',
+                                subtitle: '21cm x 29,7cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [210, 297],
+                                checked: true
+                            },
+                            {
+                                caption: 'A5',
+                                subtitle: '14,81cm x 20,99cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [148, 210]
+                            },
+                            {
+                                caption: 'B5',
+                                subtitle: '17,6cm x 25,01cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [176, 250]
+                            },
+                            {
+                                caption: 'Envelope #10',
+                                subtitle: '10,48cm x 24,13cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [104.8, 241.3]
+                            },
+                            {
+                                caption: 'Envelope DL',
+                                subtitle: '11,01cm x 22,01cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [110, 220]
+                            },
+                            {
+                                caption: 'Tabloid',
+                                subtitle: '27,94cm x 43,17cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [279.4, 431.8]
+                            },
+                            {
+                                caption: 'A3',
+                                subtitle: '29,7cm x 42,01cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [297, 420]
+                            },
+                            {
+                                caption: 'Tabloid Oversize',
+                                subtitle: '30,48cm x 45,71cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [304.8, 457.1]
+                            },
+                            {
+                                caption: 'ROC 16K',
+                                subtitle: '19,68cm x 27,3cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [196.8, 273]
+                            },
+                            {
+                                caption: 'Envelope Choukei 3',
+                                subtitle: '11,99cm x 23,49cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [119.9, 234.9]
+                            },
+                            {
+                                caption: 'Super B/A3',
+                                subtitle: '33,02cm x 48,25cm',
+                                template: pageSizeTemplate,
+                                checkable: true,
+                                toggleGroup: 'menuPageSize',
+                                value: [330.2, 482.5]
+                            }
+                        ]
+                    })
+                });
+                me.mnuPageSize = me.btnPageSize.menu;
+
+                me.btnImgAlign = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-img-align',
+                    caption: me.capImgAlign,
+                    lock        : [_set.selRange, _set.selRangeEdit, _set.lostConnect, _set.coAuth],
+                    menu: true
+                });
+
+                me.btnImgGroup = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-img-group',
+                    caption: me.capImgGroup,
+                    lock        : [_set.selRange, _set.selRangeEdit, _set.lostConnect, _set.coAuth],
+                    menu: true
+                });
+                me.btnImgForward = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-img-frwd',
+                    caption: me.capImgForward,
+                    split: true,
+                    lock        : [_set.selRange, _set.selRangeEdit, _set.lostConnect, _set.coAuth],
+                    menu: true
+                });
+                me.btnImgBackward = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-img-bkwd',
+                    caption: me.capImgBackward,
+                    lock        : [_set.selRange, _set.selRangeEdit, _set.lostConnect, _set.coAuth],
+                    split: true,
+                    menu: true
+                });
+
             } else {
                 Common.UI.Mixtbar.prototype.initialize.call(this, {
                         template: _.template(template_view),
@@ -1240,7 +1473,8 @@ define([
                     me.cmbNumberFormat, me.btnBorders, me.btnInsertImage, me.btnInsertHyperlink,
                     me.btnInsertChart, me.btnColorSchemas,
                     me.btnAutofilter, me.btnCopy, me.btnPaste, me.listStyles, me.btnPrint,
-                    /*me.btnSave,*/ me.btnClearStyle, me.btnCopyStyle
+                    /*me.btnSave,*/ me.btnClearStyle, me.btnCopyStyle,
+                    me.btnPageMargins, me.btnPageSize, me.btnPageOrient, me.btnImgAlign, me.btnImgBackward, me.btnImgForward, me.btnImgGroup
                 ];
 
                 var _temp_array = [me.cmbFontName, me.cmbFontSize, me.btnAlignLeft,me.btnAlignCenter,me.btnAlignRight,me.btnAlignJust,me.btnAlignTop,
@@ -1300,8 +1534,21 @@ define([
                 }
             });
 
-            if ( mode.isEdit )
+            if ( mode.isEdit ) {
+                var top = Common.localStorage.getItem("sse-pgmargins-top"),
+                    left = Common.localStorage.getItem("sse-pgmargins-left"),
+                    bottom = Common.localStorage.getItem("sse-pgmargins-bottom"),
+                    right = Common.localStorage.getItem("sse-pgmargins-right");
+                if ( top!==null && left!==null && bottom!==null && right!==null ) {
+                    var mnu = this.btnPageMargins.menu.items[0];
+                    mnu.options.value = mnu.value = [parseFloat(top), parseFloat(left), parseFloat(bottom), parseFloat(right)];
+                    mnu.setVisible(true);
+                    $(mnu.el).html(mnu.template({id: Common.UI.getId(), caption : mnu.caption, options : mnu.options}));
+                } else
+                    this.btnPageMargins.menu.items[0].setVisible(false);
+
                 me.setTab('home');
+            }
             if ( me.isCompactView )
                 me.setFolded(true);
 
@@ -1391,6 +1638,14 @@ define([
             _injectComponent('#slot-btn-inschart',       this.btnInsertChart);
             _injectComponent('#slot-field-styles',       this.listStyles);
             _injectComponent('#slot-btn-chart',          this.btnEditChart);
+            _injectComponent('#slot-btn-pageorient',    this.btnPageOrient);
+            _injectComponent('#slot-btn-pagemargins',   this.btnPageMargins);
+            _injectComponent('#slot-btn-pagesize',      this.btnPageSize);
+            _injectComponent('#slot-img-align',         this.btnImgAlign);
+            _injectComponent('#slot-img-group',         this.btnImgGroup);
+            _injectComponent('#slot-img-movefrwd',      this.btnImgForward);
+            _injectComponent('#slot-img-movebkwd',      this.btnImgBackward);
+
             // replacePlacholder('#id-toolbar-short-placeholder-btn-halign',                this.btnHorizontalAlign);
             // replacePlacholder('#id-toolbar-short-placeholder-btn-valign',                this.btnVerticalAlign);
             // replacePlacholder('#id-toolbar-short-placeholder-btn-filter',                this.btnAutofilter);
@@ -1459,6 +1714,9 @@ define([
             _updateHint(this.btnHorizontalAlign, this.tipHAligh);
             _updateHint(this.btnVerticalAlign, this.tipVAligh);
             _updateHint(this.btnAutofilter, this.tipAutofilter);
+            _updateHint(this.btnPageOrient, this.tipPageOrient);
+            _updateHint(this.btnPageSize, this.tipPageSize);
+            _updateHint(this.btnPageMargins, this.tipPageMargins);
 
             // set menus
             if (this.btnBorders && this.btnBorders.rendered) {
@@ -1649,6 +1907,8 @@ define([
                     itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
                 });
             }
+
+            this.updateMetricUnit();
         },
 
         onToolbarAfterRender: function(toolbar) {
@@ -1674,6 +1934,35 @@ define([
             }
         },
 
+        updateMetricUnit: function () {
+            var items = this.btnPageMargins.menu.items;
+            for (var i = 0; i < items.length; i++) {
+                var mnu = items[i];
+                if (mnu.checkable) {
+                    var checked = mnu.checked;
+                    $(mnu.el).html(mnu.template({
+                        id: Common.UI.getId(),
+                        caption: mnu.caption,
+                        options: mnu.options
+                    }));
+                    if (checked) mnu.setChecked(checked);
+                }
+            }
+            items = this.btnPageSize.menu.items;
+            for (var i = 0; i < items.length; i++) {
+                var mnu = items[i];
+                if (mnu.checkable) {
+                    var checked = mnu.checked;
+                    $(mnu.el).html(mnu.template({
+                        id: Common.UI.getId(),
+                        caption: mnu.caption,
+                        options: mnu.options
+                    }));
+                    if (checked) mnu.setChecked(checked);
+                }
+            }
+        },
+
         setApi: function(api) {
             this.api = api;
 
@@ -1839,6 +2128,76 @@ define([
         },
 
         onAppReady: function (config) {
+            var me = this;
+            var _holder_view = SSE.getController('DocumentHolder').getView('DocumentHolder');
+            me.btnImgForward.updateHint(me.tipSendForward);
+            me.btnImgForward.setMenu(new Common.UI.Menu({
+                items: [{
+                    caption : _holder_view.textArrangeFront,
+                    iconCls : 'mnu-arrange-front',
+                    value  : Asc.c_oAscDrawingLayerType.BringToFront
+                }, {
+                    caption : _holder_view.textArrangeForward,
+                    iconCls : 'mnu-arrange-forward',
+                    value  : Asc.c_oAscDrawingLayerType.BringForward
+                }
+                ]})
+            );
+
+            me.btnImgBackward.updateHint(me.tipSendBackward);
+            me.btnImgBackward.setMenu(new Common.UI.Menu({
+                items: [{
+                    caption : _holder_view.textArrangeBack,
+                    iconCls : 'mnu-arrange-back',
+                    value  : Asc.c_oAscDrawingLayerType.SendToBack
+                }, {
+                    caption : _holder_view.textArrangeBackward,
+                    iconCls : 'mnu-arrange-backward',
+                    value  : Asc.c_oAscDrawingLayerType.SendBackward
+                }]
+            }));
+
+            me.btnImgAlign.updateHint(me.tipImgAlign);
+            me.btnImgAlign.setMenu(new Common.UI.Menu({
+                items: [{
+                    caption : _holder_view.textShapeAlignLeft,
+                    iconCls : 'mnu-img-align-left',
+                    // halign  : Asc.c_oAscAlignH.Left
+                }, {
+                    caption : _holder_view.textShapeAlignCenter,
+                    iconCls : 'mnu-img-align-center',
+                    // halign  : Asc.c_oAscAlignH.Center
+                }, {
+                    caption : _holder_view.textShapeAlignRight,
+                    iconCls : 'mnu-img-align-right',
+                    // halign  : Asc.c_oAscAlignH.Right
+                }, {
+                    caption : _holder_view.textShapeAlignTop,
+                    iconCls : 'mnu-img-align-top',
+                    // valign  : Asc.c_oAscAlignV.Top
+                }, {
+                    caption : _holder_view.textShapeAlignMiddle,
+                    iconCls : 'mnu-img-align-middle',
+                    // valign  : Asc.c_oAscAlignV.Center
+                }, {
+                    caption : _holder_view.textShapeAlignBottom,
+                    iconCls : 'mnu-img-align-bottom',
+                    // valign  : Asc.c_oAscAlignV.Bottom
+                }]
+            }));
+
+            me.btnImgGroup.updateHint(me.tipImgGroup);
+            me.btnImgGroup.setMenu(new Common.UI.Menu({
+                items: [{
+                    caption : _holder_view.txtGroup,
+                    iconCls : 'mnu-group',
+                    value: 'grouping'
+                }, {
+                    caption : _holder_view.txtUngroup,
+                    iconCls : 'mnu-ungroup',
+                    value: 'ungrouping'
+                }]
+            }));
 
         },
 
@@ -2032,6 +2391,35 @@ define([
         textSurface: 'Surface',
         tipChangeChart: 'Change Chart Type',
         textTabCollaboration: 'Collaboration',
-        textTabProtect: 'Protection'
+        textTabProtect: 'Protection',
+        textTabLayout: 'Layout',
+        capBtnPageOrient: 'Orientation',
+        capBtnMargins: 'Margins',
+        capBtnPageSize: 'Size',
+        tipImgAlign: 'Align objects',
+        tipImgGroup: 'Group objects',
+        tipSendForward: 'Bring forward',
+        tipSendBackward: 'Send backward',
+        capImgAlign: 'Align',
+        capImgGroup: 'Group',
+        capImgForward: 'Bring Forward',
+        capImgBackward: 'Send Backward',
+        tipPageSize: 'Page Size',
+        tipPageOrient: 'Page Orientation',
+        tipPageMargins: 'Page Margins',
+        textMarginsLast: 'Last Custom',
+        textMarginsNormal: 'Normal',
+        textMarginsNarrow: 'Narrow',
+        textMarginsWide: 'Wide',
+        textPageMarginsCustom: 'Custom margins',
+        textTop: 'Top: ',
+        textLeft: 'Left: ',
+        textBottom: 'Bottom: ',
+        textRight: 'Right: ',
+        textPageSizeCustom: 'Custom Page Size',
+        textPortrait: 'Portrait',
+        textLandscape: 'Landscape'
+
+
     }, SSE.Views.Toolbar || {}));
 });