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

2017-07-18 15:49:14 +03:00 · 2017-07-18 15:49:14 +03:00 · a2e75a00e1
parent 43f716beed 30c65658ec
commit a2e75a00e1
51 changed files with 344 additions and 286 deletions
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@ -134,7 +134,9 @@ define([
                '<div class="inner-box-icon">' +
                    templateBtnIcon +
                '</div>' +
+                '<div class="inner-box-caption">' +
                    '<span class="caption"><%= caption %></span>' +
+                '</div>' +
            '</button>';

    var templateHugeMenuCaption =
@ -145,7 +147,7 @@ define([
                '</div>' +
                '<div class="inner-box-caption">' +
                    '<span class="caption"><%= caption %></span>' +
-                    '<span class="caret img-commonctrl"></span>' +
+                    '<i class="caret img-commonctrl"></i>' +
                '</div>' +
            '</button>' +
        '</div>';
@ -157,7 +159,7 @@ define([
            '</button>' +
            '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
                '<span class="caption"><%= caption %></span>' +
-                '<span class="caret img-commonctrl"></span>' +
+                '<i class="caret img-commonctrl"></i>' +
            '</button>' +
        '</div>';

@ -198,7 +200,9 @@ define([
                    '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">',
                        '<% applyicon() %>',
                        '<span class="caption"><%= caption %></span>',
-                        '<span class="caret img-commonctrl"></span>',
+                        '<span class="inner-box-caret">' +
+                            '<i class="caret img-commonctrl"></i>' +
+                        '</span>',
                    '</button>',
                '</div>',
            '<% } else { %>',
@ -208,7 +212,7 @@ define([
                        '<span class="caption"><%= caption %></span>',
                    '</button>',
                    '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">',
-                        '<span class="caret img-commonctrl"></span>',
+                        '<i class="caret img-commonctrl"></i>',
                        '<span class="sr-only"></span>',
                    '</button>',
                '</div>',
--- a/apps/common/main/lib/component/Menu.js
+++ b/apps/common/main/lib/component/Menu.js
@ -454,6 +454,7 @@ define([
                        Common.UI.Menu.Manager.hideAll();
                    if ( $(e.currentTarget).closest('li').hasClass('dropdown-submenu')) {
                        e.stopPropagation();
+                        return false;
                    }
                } else if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN)  {
                    this.fromKeyDown = true;
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@ -73,7 +73,7 @@ define([
            if ( this.isFolded ) {
                if ( $(e.target).parents('.toolbar').length ){
                } else {
-                    this.collapseToolbar();
+                    this.collapse();
                }
            }
        }
@ -122,10 +122,10 @@ define([
                if ( this.isFolded ) {
                    if (!optsFold.$box) optsFold.$box = me.$el.find('.box-controls');

-                    optsFold.$bar.addClass('folded');
+                    optsFold.$bar.toggleClass('expanded', true).addClass('folded');
                    optsFold.$box.on({
                        mouseleave: function (e) {
-                            optsFold.timer = setTimeout(me.collapseToolbar, optsFold.timeout);
+                            optsFold.timer = setTimeout(me.collapse, optsFold.timeout);
                        },
                        mouseenter: function (e) {
                            clearTimeout(optsFold.timer);
@ -163,7 +163,7 @@ define([
                }
            },

-            collapseToolbar: function() {
+            collapse: function() {
                if ( this.isFolded && optsFold.$bar ) {
                    optsFold.$bar.removeClass('expanded');
                    optsFold.$bar.find('.tabs .ribtab').removeClass('active');
@ -172,11 +172,11 @@ define([
                Common.UI.Menu.Manager.hideAll();
            },

-            expandToolbar: function() {
+            expand: function() {
                clearTimeout(optsFold.timer);

                optsFold.$bar.addClass('expanded');
-                optsFold.timer = setTimeout(this.collapseToolbar, optsFold.timeout);
+                optsFold.timer = setTimeout(this.collapse, optsFold.timeout);
            },

            onResize: function(e) {
@ -193,7 +193,7 @@ define([
                if ( !tab ) {
                    onShowFullviewPanel.call(this, false);

-                    if ( this.isFolded ) { /*this.collapseToolbar();*/ }
+                    if ( this.isFolded ) { this.collapse(); }
                    else tab = this.lastPanel;
                }

@ -207,17 +207,17 @@ define([
                        panel.addClass('active');
                    }

+                    if ( panel.length ) {
+                        if ( this.isFolded ) this.expand();
+                    } else {
+                        onShowFullviewPanel.call(this, true);
+                        if ( this.isFolded ) this.collapse();
+                    }
+
                    var $tp = this.$tabs.find('> a[data-tab=' + tab + ']').parent();
                    if ( $tp.length ) {
                        $tp.addClass('active');
                    }
-
-                    if ( panel.length ) {
-                        if ( this.isFolded ) this.expandToolbar();
-                    } else {
-                        onShowFullviewPanel.call(this, true);
-                        if ( this.isFolded ) this.collapseToolbar();
-                    }
                }
            },

--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@ -72,7 +72,11 @@ define([
        var templateRightBox = '<section>' +
                            '<label id="rib-doc-name" class="status-label"></label>' +
                            '<a id="rib-save-status" class="status-label locked"><%= textSaveEnd %></a>' +
-                            '<div class="elset">' +
+                            '<div class="hedset">' +
+                                '<div class="btn-slot" id="slot-hbtn-print"></div>' +
+                                '<div class="btn-slot" id="slot-hbtn-download"></div>' +
+                            '</div>' +
+                            '<div class="hedset">' +
                                // '<span class="btn-slot text" id="slot-btn-users"></span>' +
                                '<section id="tlb-box-users" class="box-cousers dropdown"">' +
                                    '<div class="btn-users">' +
@ -85,6 +89,8 @@ define([
                                        '<label id="tlb-change-rights" class="link"><%= txtAccessRights %></label>' +
                                    '</div>' +
                                '</section>'+
+                            '</div>' +
+                            '<div class="hedset">' +
                                '<div class="btn-slot" id="slot-btn-back"></div>' +
                            '</div>' +
                        '</section>';
@ -168,7 +174,6 @@ define([

            $btnUsers.find('.caption')
                .css({'font-size': (count > 1 ? '12px' : '14px'),
-                    'font-weight': (count > 1 ? 'bold' : 'normal'),
                    'margin-top': (count > 1 ? '0' : '-1px')})
                .html(count > 1 ? count : '&plus;');

@ -202,7 +207,7 @@ define([
            var me = this;
            me.btnGoBack.updateHint(me.textBack);
            me.btnGoBack.on('click', function (e) {
-                me.fireEvent('go:back', ['page:new']);
+                Common.NotificationCenter.trigger('goback', true);
            });

            if ( me.logo )
@ -247,6 +252,22 @@ define([
                    $saveStatus.addClass('locked');
                }
            }
+
+            if ( !mode.isEdit ) {
+                if ( me.btnDownload ) {
+                    me.btnDownload.updateHint('Download document');
+                    me.btnDownload.on('click', function (e) {
+                        me.fireEvent('downloadas', ['original']);
+                    });
+                }
+
+                if ( me.btnPrint ) {
+                    me.btnDownload.updateHint('Print');
+                    me.btnPrint.on('click', function (e) {
+                        me.fireEvent('print', me);
+                    });
+                }
+            }
        }

        return {
@ -279,7 +300,7 @@ define([

                me.btnGoBack = new Common.UI.Button({
                    id: 'btn-goback',
-                    cls: 'btn-toolbar',
+                    cls: 'btn-header',
                    iconCls: 'svgicon svg-btn-goback',
                    split: true
                });
@ -291,7 +312,6 @@ define([
                    reset   : onResetUsers
                });

-
                Common.NotificationCenter.on('app:ready', function(mode) {
                    Common.Utils.asyncCall(onAppReady, me, mode);
                });
@ -335,6 +355,28 @@ define([
                        }
                    }

+                    if ( !config.isEdit ) {
+                        if ( (config.canDownload || config.canDownloadOrigin) && !config.isOffline  ) {
+                            this.btnDownload = new Common.UI.Button({
+                                id: 'btn-download',
+                                cls: 'btn-header',
+                                iconCls: 'svgicon svg-btn-download'
+                            });
+
+                            this.btnDownload.render($html.find('#slot-hbtn-download'));
+                        }
+
+                        if ( config.canPrint ) {
+                            this.btnPrint = new Common.UI.Button({
+                                id: 'btn-goback',
+                                cls: 'btn-header',
+                                iconCls: 'svgicon svg-btn-print'
+                            });
+
+                            this.btnPrint.render($html.find('#slot-hbtn-print'));
+                        }
+                    }
+
                    if ( this.documentCaption ) {
                        $html.find('#rib-doc-name').text(
                            Common.Utils.String.htmlEncode(this.documentCaption) );
--- a/apps/common/main/resources/img/controls/toolbarbig.png
+++ b/apps/common/main/resources/img/controls/toolbarbig.png
--- a/apps/common/main/resources/img/header/buttons.svg
+++ b/apps/common/main/resources/img/header/buttons.svg
@ -0,0 +1,35 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        width="20px" height="60px" viewBox="0 0 20 60" enable-background="new 0 0 20 60" xml:space="preserve">
+    <symbol id="svg-btn-comments" viewBox="0 0 20 20">
+        <path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4zM16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
+        <rect x="6" y="7" width="8" height="1"/>
+        <rect x="6" y="9" width="8" height="1"/>
+        <rect x="6" y="11" width="8" height="1"/>
+    </symbol>
+    <symbol id="svg-btn-goback" viewBox="0 20 20 20">
+        <path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
+        <polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 	"/>
+    </symbol>
+    <symbol id="svg-btn-users" viewBox="0 0 20 20">
+        <path d="M16.469,14.184l-0.161-1.113c0.658-0.479,1.118-1.524,1.118-2.319c0-1.092-0.863-2.013-1.926-2.013c-1.063,0-1.925,0.868-1.925,1.961c0,0.795,0.46,1.766,1.118,2.242l-0.162,1.247c-0.461,0.039-0.863,0.108-1.214,0.215
+    c-0.886-1.419-2.496-2.061-3.997-2.226l-0.129-0.844c0.903-0.804,1.559-2.239,1.559-3.48c0-1.85-1.458-3.354-3.25-3.354S4.25,5.985,4.25,7.811c0,1.23,0.644,2.616,1.562,3.419l-0.135,0.952C3.459,12.427,1,13.705,1,17h18
+    C19,16,18.387,14.345,16.469,14.184z M2.517,16c0.136-1.908,1.116-2.647,3.642-2.86l0.397-0.033l0.328-2.317L6.64,10.612C5.86,10.048,5.25,8.816,5.25,7.811C5.25,6.536,6.26,5.5,7.5,5.5s2.25,1.056,2.25,2.354c0,1.024-0.624,2.312-1.391,2.868L8.113,10.9
+    l0.337,2.202l0.393,0.033c2.525,0.213,3.505,0.952,3.641,2.864H2.517z"/>
+    </symbol>
+    <symbol id="svg-btn-download" viewBox="0 0 20 20">
+        <rect x="4" y="16" width="12" height="1"/>
+        <polygon points="14.243,7.585 11,10.829 11,4 9,4 9,10.827 5.758,7.585 4.344,9 10.001,14.656 15.657,9 "/>
+    </symbol>
+    <symbol id="svg-btn-print" viewBox="0 0 20 20">
+        <rect x="7" y="12" width="5" height="1"/>
+        <rect x="7" y="14" width="5" height="1"/>
+        <path d="M16,7h-2V5c0-0.552-0.447-1-1-1H6C5.448,4,5,4.448,5,5v2H3C2.448,7,2,7.448,2,8v5c0,0.553,0.448,1,1,1h2v2
+            c0,0.553,0.448,1,1,1h7c0.553,0,1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1V8C17,7.448,16.553,7,16,7z M6,5h7v2H6V5z M5,13H3v-2h2V13z
+            M13,16H6v-5h7V16z M16,13h-2v-2h2V13z M3,10V8h13v2H3z"/>
+    </symbol>
+    <symbol id="svg-btn-edit" viewBox="0 0 20 20">
+        <polygon points="11.738,7.891 6.434,13.195 5.02,14.859 4.5,17.5 7,17.5 8.555,15.566 13.859,10.137"/>	
+	<path d="M15.273,8.598l-2.121-2.121l1.414-1.414c0.391-0.391,1.023-0.391,1.414,0l0.707,0.707
+		c0.391,0.391,0.391,1.023,0,1.414L15.273,8.598z"/>
+    </symbol>
+</svg>
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@ -1,3 +1,5 @@
+@x-huge-btn-height: 46px;
+
 .btn {
    border-radius: 1px;
    color: @gray-deep;
@ -25,7 +27,7 @@
    }

    &.x-huge {
-        .btnsize(45px);
+        .btnsize(@x-huge-btn-height);
    }

    &[disabled] {
@ -98,12 +100,11 @@
        }
    }

-    &.x-huge,
-      .x-huge {
+    &.x-huge {
        @icon-size: 26px;

        min-width: 45px;
-        height: 45px;
+        height: @x-huge-btn-height;

        img {
            height: 27px;
@ -127,8 +128,6 @@
        align-items: center;
        justify-content: center;
        line-height: 20px;
-        max-height: 26px;
-        height: 26px;
    }

    .inner-box-caption {
@ -290,10 +289,8 @@
    }

    > .dropdown-toggle:first-child {
-        padding: 0 2px 0 0;
-
-        .caption {
-            padding-right: 4px;
+        .inner-box-caret {
+            padding: 0 2px;
        }
    }

--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@ -28,13 +28,13 @@

 .toolbar {
    .extra {
-        .elset:not(:first-child) {
-            margin-top: 0;
-        }
-
        svg.icon {
            fill: #fff;
        }
+
+        .btn-slot {
+            width: auto;
+        }
    }
 }

@ -51,8 +51,8 @@
    }

    &.right {
+        flex-grow: 1;
        min-width: 100px;
-        padding-right: 12px;

        .desktop {
            padding: 10px 0;
@ -68,10 +68,17 @@
        color: #fff;
    }

-    .btn-toolbar {
-        &:hover, &:active {
+    .btn-users,
+    .btn-header {
+        &:hover {
            &:not(.disabled) {
-                background-color: transparent;
+                background-color: rgba(255,255,255,0.2);
+            }
+        }
+
+        &:active {
+            &:not(.disabled) {
+                background-color: rgba(0,0,0,0.2);
            }
        }
    }
@ -82,7 +89,7 @@
        text-overflow: ellipsis;
        overflow: hidden;
        min-width: 50px;
-        text-align: right;
+        text-align: center;
    }

    #rib-save-status {
@ -118,22 +125,17 @@
 }

 #tlb-box-users {
-    display: inline-block;
-    margin-right: 10px;
+    height: @height-tabs;
 }

 #tlb-change-rights {
    margin-top: 15px;
 }

-#slot-btn-back {
-    float: right;
-}
-
 .btn-users {
    display: inline-flex;
    cursor: pointer;
-    padding: 0 7px;
+    padding: 6px 12px;

    .icon {
        display: inline-block;
@ -204,3 +206,19 @@
        }
    }
 }
+
+.hedset {
+    font-size: 0;
+}
+
+.btn-header {
+    border: 0 none;
+    height: @height-tabs;
+    background-color: transparent;
+    padding: 6px 12px;
+
+    .icon {
+        width: 20px;
+        height: 20px;
+    }
+}
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@ -52,7 +52,7 @@
    }

    .tabs {
-        flex-grow: 1;
+        //flex-grow: 1;
        background-color: @tabs-bg-color;
        position: relative;
        overflow: hidden;
@ -171,6 +171,7 @@
        vertical-align: middle;
        white-space: nowrap;
        padding-left: 12px;
+        font-size: 0;

        &:last-child {
            padding-right: 12px;
@ -207,10 +208,6 @@
        width: 20px;
        height: auto;

-        &:not(:first-child) {
-            margin-left: 1px;
-        }
-
        &.split {
            width: 31px;
        }
@ -288,3 +285,14 @@
 .button-normal-icon(review-next,          16, @toolbar-big-icon-size);
 .button-normal-icon(review-prev,          17, @toolbar-big-icon-size);
 .button-normal-icon(btn-dropcap,          18, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-pagebreak', 19, @toolbar-big-icon-size);
+
+.button-normal-icon(btn-pageorient,       21, @toolbar-big-icon-size);
+.button-normal-icon(btn-pagemargins,      22, @toolbar-big-icon-size);
+.button-normal-icon(btn-pagesize,         23, @toolbar-big-icon-size);
+.button-normal-icon(btn-columns,          24, @toolbar-big-icon-size);
+.button-normal-icon(btn-img-align,        25, @toolbar-big-icon-size);
+.button-normal-icon(btn-img-group,        26, @toolbar-big-icon-size);
+.button-normal-icon(btn-img-bkwd,         27, @toolbar-big-icon-size);
+.button-normal-icon(btn-img-frwd,         28, @toolbar-big-icon-size);
+.button-normal-icon(btn-img-wrap,         29, @toolbar-big-icon-size);
--- a/apps/documenteditor/main/app/controller/Main.js
+++ b/apps/documenteditor/main/app/controller/Main.js
@ -593,7 +593,7 @@ define([
                    this.setLongActionView(action)
                } else {
                    var me = this;
-                    if (id==Asc.c_oAscAsyncAction['Save'] || id==Asc.c_oAscAsyncAction['ForceSaveButton']) {
+                    if ((id==Asc.c_oAscAsyncAction['Save'] || id==Asc.c_oAscAsyncAction['ForceSaveButton']) && !this.appOptions.isOffline) {
                        if (this._state.fastCoauth && this._state.usersCount>1) {
                            me._state.timerSave = setTimeout(function () {
                                me.getApplication().getController('Statusbar').setStatusCaption(me.textChangesSaved, false, 3000);
@ -631,8 +631,8 @@ define([
                    case Asc.c_oAscAsyncAction['ForceSaveButton']:
                        clearTimeout(this._state.timerSave);
                        force = true;
-                        title   = this.saveTitleText;
-                        text    = this.saveTextText;
+                        title   = (!this.appOptions.isOffline) ? this.saveTitleText : '';
+                        text    = (!this.appOptions.isOffline) ? this.saveTextText : '';
                        break;

                    case Asc.c_oAscAsyncAction['LoadDocumentFonts']:
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@ -112,6 +112,12 @@ define([
                'FileMenu': {
                    'menu:hide': this.onFileMenu.bind(this, 'hide'),
                    'menu:show': this.onFileMenu.bind(this, 'show')
+                },
+                'Common.Views.Header': {
+                    'print': this.onPrint.bind(this),
+                    'downloadas': function (opts) {
+                        this.api.asc_DownloadOrigin();
+                    }.bind(this)
                }
            });

@ -347,7 +353,7 @@ define([
        },

        onContextMenu: function() {
-            this.toolbar.collapseToolbar();
+            this.toolbar.collapse();
        },

        onApiFontSize: function(size) {
--- a/apps/documenteditor/main/app/controller/Viewport.js
+++ b/apps/documenteditor/main/app/controller/Viewport.js
@ -77,12 +77,6 @@ define([
                    'view:compact'  : function (toolbar, state) {
                        me.viewport.vlayout.panels[0].height = state ? 32 : 32+67;
                    }
-                },
-                'Common.Views.Header': {
-                    'go:back': function (opts) {
-                        Common.NotificationCenter.trigger('goback', /new/.test(opts));
-                        // Common.component.Analytics.trackEvent('Back to Folder');
-                    }
                }
            });
        },
--- a/apps/documenteditor/main/app/template/Toolbar.template
+++ b/apps/documenteditor/main/app/template/Toolbar.template
@ -145,51 +145,19 @@
            </section>
            <section class="panel" data-tab="layout">
                <div class="group">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-btn-pageorient"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-btn-pagesize"></span>
-                    </div>
-                </div>
-                <div class="group">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-btn-pagemargins"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-btn-columns"></span>
-                    </div>
-                </div>
-                <div class="group">
-                    <div class="elset">
-                        <span class="btn-slot text btn-pagebreak"></span>
-                    </div>
-                    <div class="elset">
-                    </div>
+                    <span class="btn-slot text x-huge btn-pagebreak"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-pageorient"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-pagemargins"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-pagesize"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-columns"></span>
                </div>
                <div class="separator long"></div>
                <div class="group">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-img-align"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-img-group"></span>
-                    </div>
-                </div>
-                <div class="group">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-img-movefrwd"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-img-movebkwd"></span>
-                    </div>
-                </div>
-                <div class="group">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-img-wrapping"></span>
-                    </div>
-                    <div class="elset">
-                    </div>
+                    <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>
+                    <span class="btn-slot text x-huge" id="slot-img-wrapping"></span>
                </div>
            </section>
        </section>
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@ -80,7 +80,7 @@ define([
                Common.UI.Mixtbar.prototype.initialize.call(this, {
                        template: _.template(template),
                        tabs: [
-                            { caption: me.textTabFile, action: 'file'},
+                            { caption: me.textTabFile, action: 'file', extcls: 'canedit'},
                            { caption: me.textTabHome, action: 'home', extcls: 'canedit'},
                            { caption: me.textTabInsert, action: 'ins', extcls: 'canedit'},
                            { caption: me.textTabLayout, action: 'layout', extcls: 'canedit'}
@ -608,7 +608,7 @@ define([

                this.btnColumns = new Common.UI.Button({
                    id: 'tlb-btn-columns',
-                    cls: 'btn-toolbar',
+                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'btn-columns',
                    caption: me.capBtnColumns,
                    menu: new Common.UI.Menu({
@ -658,7 +658,7 @@ define([

                this.btnPageOrient = new Common.UI.Button({
                    id: 'tlb-btn-pageorient',
-                    cls: 'btn-toolbar',
+                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'btn-pageorient',
                    caption: me.capBtnPageOrient,
                    menu: new Common.UI.Menu({
@ -694,7 +694,7 @@ define([

                this.btnPageMargins = new Common.UI.Button({
                    id: 'tlb-btn-pagemargins',
-                    cls: 'btn-toolbar',
+                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'btn-pagemargins',
                    caption: me.capBtnMargins,
                    menu: new Common.UI.Menu({
@ -753,7 +753,7 @@ define([

                this.btnPageSize = new Common.UI.Button({
                    id: 'tlb-btn-pagesize',
-                    cls: 'btn-toolbar',
+                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'btn-pagesize',
                    caption: me.capBtnPageSize,
                    menu: new Common.UI.Menu({
@ -967,34 +967,34 @@ define([
                this.toolbarControls.push(this.btnAdvSettings);

                me.btnImgAlign = new Common.UI.Button({
-                    cls: 'btn-toolbar',
+                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'btn-img-align',
                    caption: me.capImgAlign,
                    menu: true
                });

                me.btnImgGroup = new Common.UI.Button({
-                    cls: 'btn-toolbar',
+                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'btn-img-group',
                    caption: me.capImgGroup,
                    menu: true
                });
                me.btnImgForward = new Common.UI.Button({
-                    cls: 'btn-toolbar',
+                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'btn-img-frwd',
                    caption: me.capImgForward,
                    split: true,
                    menu: true
                });
                me.btnImgBackward = new Common.UI.Button({
-                    cls: 'btn-toolbar',
+                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'btn-img-bkwd',
                    caption: me.capImgBackward,
                    split: true,
                    menu: true
                });
                me.btnImgWrapping = new Common.UI.Button({
-                    cls: 'btn-toolbar',
+                    cls: 'btn-toolbar x-huge icon-top',
                    iconCls: 'btn-img-wrap',
                    caption: me.capImgWrapping,
                    menu: true
@ -1205,7 +1205,7 @@ define([
                });

                if ( me.isCompactView )
-                    me.setFolded(true); else
+                    me.setFolded(true), me.collapse(); else
                    me.setTab('home');

                var top = Common.localStorage.getItem("de-pgmargins-top"),
@ -1304,8 +1304,11 @@ define([

                    var $slots = $host.find('.btn-slot.btn-pagebreak');
                    $slots.each(function(index, el) {
+                        var _cls = 'btn-toolbar';
+                        /x-huge/.test(el.className) && (_cls += ' x-huge icon-top');
+
                        var button = new Common.UI.Button({
-                            cls: 'btn-toolbar',
+                            cls: _cls,
                            iconCls: 'btn-pagebreak',
                            caption: me.capBtnInsPagebreak,
                            split: true,
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@ -260,24 +260,12 @@
 <body>
    <div id="viewport"></div>

-    <svg style="display: none;">
-        <symbol id="svg-btn-comments" viewBox="0 0 20 20">
-            <path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4zM16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
-            <rect x="6" y="7" width="8" height="1"/>
-            <rect x="6" y="9" width="8" height="1"/>
-            <rect x="6" y="11" width="8" height="1"/>
-        </symbol>
-        <symbol id="svg-btn-goback" viewBox="0 20 20 20">
-            <path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
-            <polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 	"/>
-        </symbol>
-        <symbol id="svg-btn-users" viewBox="0 0 20 20">
-            <path d="M16.469,14.184l-0.161-1.113c0.658-0.479,1.118-1.524,1.118-2.319c0-1.092-0.863-2.013-1.926-2.013c-1.063,0-1.925,0.868-1.925,1.961c0,0.795,0.46,1.766,1.118,2.242l-0.162,1.247c-0.461,0.039-0.863,0.108-1.214,0.215
-    c-0.886-1.419-2.496-2.061-3.997-2.226l-0.129-0.844c0.903-0.804,1.559-2.239,1.559-3.48c0-1.85-1.458-3.354-3.25-3.354S4.25,5.985,4.25,7.811c0,1.23,0.644,2.616,1.562,3.419l-0.135,0.952C3.459,12.427,1,13.705,1,17h18
-    C19,16,18.387,14.345,16.469,14.184z M2.517,16c0.136-1.908,1.116-2.647,3.642-2.86l0.397-0.033l0.328-2.317L6.64,10.612C5.86,10.048,5.25,8.816,5.25,7.811C5.25,6.536,6.26,5.5,7.5,5.5s2.25,1.056,2.25,2.354c0,1.024-0.624,2.312-1.391,2.868L8.113,10.9
-    l0.337,2.202l0.393,0.033c2.525,0.213,3.505,0.952,3.641,2.864H2.517z"/>
-        </symbol>
-    </svg>
+    <script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
+    <img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
+    <script>
+        var svgpoints = document.querySelectorAll('img.inline-svg');
+        SVGInjector(svgpoints);
+    </script>

    <!-- debug begin -->
    <script type="text/javascript">var less=less||{};less.env='development';</script>
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/main/index.html.deploy
@ -282,24 +282,7 @@
        };
    </script>

-    <svg style="display: none;">
-        <symbol id="svg-btn-comments" viewBox="0 0 20 20">
-            <path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4zM16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
-            <rect x="6" y="7" width="8" height="1"/>
-            <rect x="6" y="9" width="8" height="1"/>
-            <rect x="6" y="11" width="8" height="1"/>
-        </symbol>
-        <symbol id="svg-btn-goback" viewBox="0 20 20 20">
-            <path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
-            <polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 	"/>
-        </symbol>
-        <symbol id="svg-btn-users" viewBox="0 0 20 20">
-            <path d="M16.469,14.184l-0.161-1.113c0.658-0.479,1.118-1.524,1.118-2.319c0-1.092-0.863-2.013-1.926-2.013c-1.063,0-1.925,0.868-1.925,1.961c0,0.795,0.46,1.766,1.118,2.242l-0.162,1.247c-0.461,0.039-0.863,0.108-1.214,0.215
-    c-0.886-1.419-2.496-2.061-3.997-2.226l-0.129-0.844c0.903-0.804,1.559-2.239,1.559-3.48c0-1.85-1.458-3.354-3.25-3.354S4.25,5.985,4.25,7.811c0,1.23,0.644,2.616,1.562,3.419l-0.135,0.952C3.459,12.427,1,13.705,1,17h18
-    C19,16,18.387,14.345,16.469,14.184z M2.517,16c0.136-1.908,1.116-2.647,3.642-2.86l0.397-0.033l0.328-2.317L6.64,10.612C5.86,10.048,5.25,8.816,5.25,7.811C5.25,6.536,6.26,5.5,7.5,5.5s2.25,1.056,2.25,2.354c0,1.024-0.624,2.312-1.391,2.868L8.113,10.9
-    l0.337,2.202l0.393,0.033c2.525,0.213,3.505,0.952,3.641,2.864H2.517z"/>
-        </symbol>
-    </svg>
+    <inline src="../../common/main/resources/img/header/buttons.svg" />

    <div id="viewport"></div>
    <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
--- a/apps/documenteditor/main/resources/img/toolbar/charttypes.png
+++ b/apps/documenteditor/main/resources/img/toolbar/charttypes.png
--- a/apps/documenteditor/main/resources/img/toolbar/charttypes@2x.png
+++ b/apps/documenteditor/main/resources/img/toolbar/charttypes@2x.png
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@ -229,19 +229,19 @@
 }

 .surface-normal{
-    background-position: -100px -200px;
+    background-position: 0px -300px;
 }

 .surface-wireframe{
-    background-position: -100px -200px;
+    background-position: -50px -300px;
 }

 .contour-normal{
-    background-position: -100px -200px;
+    background-position: -100px -300px;
 }

 .contour-wireframe{
-    background-position: -100px -200px;
+    background-position: -150px -300px;
 }

@toolbar-icon-size: 20px;
@ -266,8 +266,8 @@
 .button-normal-icon(btn-setmarkers,       21, @toolbar-icon-size);
 .button-normal-icon(btn-multilevels,      22, @toolbar-icon-size);
 .button-normal-icon(btn-numbering,        23, @toolbar-icon-size);
-.button-normal-icon(btn-pageorient,       24, @toolbar-icon-size);
-.button-normal-icon(btn-pagesize,         25, @toolbar-icon-size);
+//.button-normal-icon(btn-pageorient,       24, @toolbar-icon-size);
+//.button-normal-icon(btn-pagesize,         25, @toolbar-icon-size);
 .button-normal-icon(btn-paste,            26, @toolbar-icon-size);
 .button-normal-icon(btn-print,            27, @toolbar-icon-size);
 .button-normal-icon(btn-redo,             28, @toolbar-icon-size);
@ -297,13 +297,13 @@
 .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-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);
-.button-normal-icon(btn-img-group,        86, @toolbar-icon-size);
-.button-normal-icon(btn-img-align,        87, @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-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);
+//.button-normal-icon(btn-img-group,        86, @toolbar-icon-size);
+//.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);
--- a/apps/documenteditor/mobile/app/controller/Main.js
+++ b/apps/documenteditor/mobile/app/controller/Main.js
@ -482,8 +482,6 @@ define([

                me.api.asc_setSpellCheck(false); // don't use spellcheck for mobile mode

-                Common.localStorage.setItem("de-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0);
-
                me.api.asc_registerCallback('asc_onStartAction',            _.bind(me.onLongActionBegin, me));
                me.api.asc_registerCallback('asc_onEndAction',              _.bind(me.onLongActionEnd, me));
                me.api.asc_registerCallback('asc_onCoAuthoringDisconnect',  _.bind(me.onCoAuthoringDisconnect, me));
@ -541,6 +539,8 @@ define([
                    me.api.zoomFitToWidth();
                }

+                DE.getController('Toolbar').activateControls();
+
                if (me._state.licenseWarning) {
                    value = Common.localStorage.getItem("de-license-warning");
                    value = (value!==null) ? parseInt(value) : 0;
--- a/apps/documenteditor/mobile/app/controller/Toolbar.js
+++ b/apps/documenteditor/mobile/app/controller/Toolbar.js
@ -157,6 +157,10 @@ define([
                }
            },

+            activateControls: function() {
+                $('#toolbar-edit, #toolbar-add, #toolbar-settings, #toolbar-search, #document-back').removeClass('disabled');
+            },
+
            dlgLeaveTitleText   : 'You leave the application',
            dlgLeaveMsgText     : 'You have unsaved changes in this document. Click \'Stay on this Page\' to await the autosave of the document. Click \'Leave this Page\' to discard all the unsaved changes.',
            leaveButtonText     : 'Leave this Page',
--- a/apps/documenteditor/mobile/app/view/Toolbar.js
+++ b/apps/documenteditor/mobile/app/view/Toolbar.js
@ -92,6 +92,7 @@ define([
                }));

                $('.view-main .navbar').on('addClass removeClass', _.bind(me.onDisplayMainNavbar, me));
+                $('#toolbar-edit, #toolbar-add, #toolbar-settings, #toolbar-search, #document-back').addClass('disabled');

                return me;
            },
--- a/apps/presentationeditor/main/app/controller/Main.js
+++ b/apps/presentationeditor/main/app/controller/Main.js
@ -413,7 +413,7 @@ define([
                if (action) {
                    this.setLongActionView(action)
                } else {
-                    if (id==Asc.c_oAscAsyncAction['Save'] || id==Asc.c_oAscAsyncAction['ForceSaveButton']) {
+                    if ((id==Asc.c_oAscAsyncAction['Save'] || id==Asc.c_oAscAsyncAction['ForceSaveButton']) && !this.appOptions.isOffline) {
                        if (this._state.fastCoauth && this._state.usersCount>1) {
                            var me = this;
                            me._state.timerSave = setTimeout(function () {
@ -451,8 +451,8 @@ define([
                    case Asc.c_oAscAsyncAction['ForceSaveButton']:
                        clearTimeout(this._state.timerSave);
                        force = true;
-                        // title   = this.saveTitleText;
-                        // text    = this.saveTextText;
+                        // title   = (!this.appOptions.isOffline) ? this.saveTitleText : '';
+                        // text    = (!this.appOptions.isOffline) ? this.saveTextText : '';
                        break;

                    case Asc.c_oAscAsyncAction['ForceSaveTimeout']:
--- a/apps/presentationeditor/main/app/controller/Viewport.js
+++ b/apps/presentationeditor/main/app/controller/Viewport.js
@ -79,12 +79,6 @@ define([
                        me.viewport.vlayout.panels[0].height = state ? 32 : 32+67;
                    }
                },
-                'Common.Views.Header': {
-                    'go:back': function (opts) {
-                        Common.NotificationCenter.trigger('goback', /new/.test(opts));
-                        // Common.component.Analytics.trackEvent('Back to Folder');
-                    }
-                },
                // Events generated by main view
                'Viewport': {

--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@ -138,7 +138,7 @@ define([
                Common.UI.Mixtbar.prototype.initialize.call(this, {
                    template: _.template(template),
                    tabs: [
-                        { caption: 'File', action: 'file'},
+                        { caption: 'File', action: 'file', extcls: 'canedit'},
                        { caption: 'Home', action: 'home', extcls: 'canedit'},
                        { caption: 'Insert', action: 'ins', extcls: 'canedit'}
                    ]}
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@ -259,26 +259,12 @@
 <body>
    <div id="viewport"></div>

-    <svg style="display: none;">
-        <symbol id="svg-btn-comments" viewBox="0 0 20 20">
-            <path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4z
-                            M16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
-            <rect x="6" y="7" width="8" height="1"/>
-            <rect x="6" y="9" width="8" height="1"/>
-            <rect x="6" y="11" width="8" height="1"/>
-        </symbol>
-        <symbol id="svg-btn-goback" viewBox="0 20 20 20">
-            <path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14
-                c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
-            <polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 	"/>
-        </symbol>
-        <symbol id="svg-btn-users" viewBox="0 0 20 20">
-            <path d="M16.469,14.184l-0.161-1.113c0.658-0.479,1.118-1.524,1.118-2.319c0-1.092-0.863-2.013-1.926-2.013c-1.063,0-1.925,0.868-1.925,1.961c0,0.795,0.46,1.766,1.118,2.242l-0.162,1.247c-0.461,0.039-0.863,0.108-1.214,0.215
-    c-0.886-1.419-2.496-2.061-3.997-2.226l-0.129-0.844c0.903-0.804,1.559-2.239,1.559-3.48c0-1.85-1.458-3.354-3.25-3.354S4.25,5.985,4.25,7.811c0,1.23,0.644,2.616,1.562,3.419l-0.135,0.952C3.459,12.427,1,13.705,1,17h18
-    C19,16,18.387,14.345,16.469,14.184z M2.517,16c0.136-1.908,1.116-2.647,3.642-2.86l0.397-0.033l0.328-2.317L6.64,10.612C5.86,10.048,5.25,8.816,5.25,7.811C5.25,6.536,6.26,5.5,7.5,5.5s2.25,1.056,2.25,2.354c0,1.024-0.624,2.312-1.391,2.868L8.113,10.9
-    l0.337,2.202l0.393,0.033c2.525,0.213,3.505,0.952,3.641,2.864H2.517z"/>
-        </symbol>
-    </svg>
+    <script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
+    <img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
+    <script>
+        var svgpoints = document.querySelectorAll('img.inline-svg');
+        SVGInjector(svgpoints);
+    </script>

    <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
--- a/apps/presentationeditor/main/index.html.deploy
+++ b/apps/presentationeditor/main/index.html.deploy
@ -355,26 +355,7 @@
        };
    </script>

-    <svg style="display: none;">
-        <symbol id="svg-btn-comments" viewBox="0 0 20 20">
-            <path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4z
-                            M16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
-            <rect x="6" y="7" width="8" height="1"/>
-            <rect x="6" y="9" width="8" height="1"/>
-            <rect x="6" y="11" width="8" height="1"/>
-        </symbol>
-        <symbol id="svg-btn-goback" viewBox="0 20 20 20">
-            <path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14
-                c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
-            <polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 	"/>
-        </symbol>
-        <symbol id="svg-btn-users" viewBox="0 0 20 20">
-            <path d="M16.469,14.184l-0.161-1.113c0.658-0.479,1.118-1.524,1.118-2.319c0-1.092-0.863-2.013-1.926-2.013c-1.063,0-1.925,0.868-1.925,1.961c0,0.795,0.46,1.766,1.118,2.242l-0.162,1.247c-0.461,0.039-0.863,0.108-1.214,0.215
-    c-0.886-1.419-2.496-2.061-3.997-2.226l-0.129-0.844c0.903-0.804,1.559-2.239,1.559-3.48c0-1.85-1.458-3.354-3.25-3.354S4.25,5.985,4.25,7.811c0,1.23,0.644,2.616,1.562,3.419l-0.135,0.952C3.459,12.427,1,13.705,1,17h18
-    C19,16,18.387,14.345,16.469,14.184z M2.517,16c0.136-1.908,1.116-2.647,3.642-2.86l0.397-0.033l0.328-2.317L6.64,10.612C5.86,10.048,5.25,8.816,5.25,7.811C5.25,6.536,6.26,5.5,7.5,5.5s2.25,1.056,2.25,2.354c0,1.024-0.624,2.312-1.391,2.868L8.113,10.9
-    l0.337,2.202l0.393,0.033c2.525,0.213,3.505,0.952,3.641,2.864H2.517z"/>
-        </symbol>
-    </svg>
+    <inline src="../../common/main/resources/img/header/buttons.svg" />

    <div id="viewport"></div>

--- a/apps/presentationeditor/main/resources/img/toolbar/charttypes.png
+++ b/apps/presentationeditor/main/resources/img/toolbar/charttypes.png
--- a/apps/presentationeditor/main/resources/img/toolbar/charttypes@2x.png
+++ b/apps/presentationeditor/main/resources/img/toolbar/charttypes@2x.png
--- a/apps/presentationeditor/main/resources/less/toolbar.less
+++ b/apps/presentationeditor/main/resources/less/toolbar.less
@ -223,19 +223,19 @@
 }

 .surface-normal{
-    background-position: -100px -200px;
+    background-position: 0px -300px;
 }

 .surface-wireframe{
-    background-position: -100px -200px;
+    background-position: -50px -300px;
 }

 .contour-normal{
-    background-position: -100px -200px;
+    background-position: -100px -300px;
 }

 .contour-wireframe{
-    background-position: -100px -200px;
+    background-position: -150px -300px;
 }

@toolbar-icon-size: 20px;
--- a/apps/presentationeditor/mobile/app/controller/Main.js
+++ b/apps/presentationeditor/mobile/app/controller/Main.js
@ -456,8 +456,6 @@ define([
                var zf = (value!==null) ? parseInt(value) : (me.appOptions.customization && me.appOptions.customization.zoom ? parseInt(me.appOptions.customization.zoom) : -1);
                (zf == -1) ? me.api.zoomFitToPage() : ((zf == -2) ? me.api.zoomFitToWidth() : me.api.zoom(zf>0 ? zf : 100));

-                Common.localStorage.setItem("pe-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0);
-
                me.api.asc_setSpellCheck(false); // don't use spellcheck for mobile mode

                me.api.asc_registerCallback('asc_onStartAction',            _.bind(me.onLongActionBegin, me));
@ -479,8 +477,6 @@ define([
                me.api.asc_SetFastCollaborative(me._state.fastCoauth);
                /** coauthoring end **/

-                Common.localStorage.setItem("pe-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0);
-
                if (me.appOptions.isEdit) {
                    value = me._state.fastCoauth; // Common.localStorage.getItem("de-settings-autosave");
                    value = (!me._state.fastCoauth && value!==null) ? parseInt(value) : (me.appOptions.canCoAuthoring ? 1 : 0);
@ -508,6 +504,8 @@ define([
                    me.api.zoomFitToPage();
                }

+                PE.getController('Toolbar').activateControls();
+
                if (me._state.licenseWarning) {
                    value = Common.localStorage.getItem("de-license-warning");
                    value = (value!==null) ? parseInt(value) : 0;
--- a/apps/presentationeditor/mobile/app/controller/Toolbar.js
+++ b/apps/presentationeditor/mobile/app/controller/Toolbar.js
@ -168,6 +168,10 @@ define([
                }
            },

+            activateControls: function() {
+                $('#toolbar-preview, #toolbar-settings, #toolbar-search, #document-back').removeClass('disabled');
+            },
+
            dlgLeaveTitleText   : 'You leave the application',
            dlgLeaveMsgText     : 'You have unsaved changes in this document. Click \'Stay on this Page\' to await the autosave of the document. Click \'Leave this Page\' to discard all the unsaved changes.',
            leaveButtonText     : 'Leave this Page',
--- a/apps/presentationeditor/mobile/app/view/Toolbar.js
+++ b/apps/presentationeditor/mobile/app/view/Toolbar.js
@ -93,6 +93,7 @@ define([
                }));

                $('.view-main .navbar').on('addClass removeClass', _.bind(me.onDisplayMainNavbar, me));
+                $('#toolbar-preview, #toolbar-edit, #toolbar-add, #toolbar-settings, #toolbar-search, #document-back').addClass('disabled');

                return me;
            },
--- a/apps/spreadsheeteditor/main/app/controller/Viewport.js
+++ b/apps/spreadsheeteditor/main/app/controller/Viewport.js
@ -76,12 +76,6 @@ define([
                    'view:compact'  : function (toolbar, state) {
                        me.viewport.vlayout.panels[0].height = state ? 32 : 32+67;
                    }
-                },
-                'Common.Views.Header': {
-                    'go:back': function (opts) {
-                        Common.NotificationCenter.trigger('goback', /new/.test(opts));
-                        // Common.component.Analytics.trackEvent('Back to Folder');
-                    }
                }
            });

--- a/apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js
@ -100,7 +100,7 @@ define([
                        '<tr>',
                            '<td class="padding-large" style="white-space: nowrap;">',
                                '<label style="vertical-align: middle; margin-right: 4px;">' + me.txtSample + '</label>',
-                                '<label id="format-settings-label-example" style="vertical-align: middle; max-width: 220px; overflow: hidden; text-overflow: ellipsis;>100</label>',
+                                '<label id="format-settings-label-example" style="vertical-align: middle; max-width: 220px; overflow: hidden; text-overflow: ellipsis;">100</label>',
                            '</td>',
                        '</tr>',
                        '<tr>',
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@ -319,7 +319,7 @@ define([
                Common.UI.Mixtbar.prototype.initialize.call(this, {
                    template: _.template(template),
                    tabs: [
-                        { caption: 'File'/*me.textTabFile*/, action: 'file'},
+                        { caption: 'File'/*me.textTabFile*/, action: 'file', extcls: 'canedit'},
                        { caption: 'Home'/*me.textTabHome*/, action: 'home', extcls: 'canedit'},
                        { caption: 'Insert'/*me.textTabInsert*/, action: 'ins', extcls: 'canedit'}
                    ]}
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@ -261,25 +261,12 @@

    <div id="viewport"></div>

-    <svg style="display: none;">
-        <symbol id="svg-btn-comments" viewBox="0 0 20 20">
-            <path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4zM16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
-            <rect x="6" y="7" width="8" height="1"/>
-            <rect x="6" y="9" width="8" height="1"/>
-            <rect x="6" y="11" width="8" height="1"/>
-        </symbol>
-        <symbol id="svg-btn-goback" viewBox="0 20 20 20">
-            <path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
-            <polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 	"/>
-        </symbol>
-        <symbol id="svg-btn-users" viewBox="0 0 20 20">
-            <path d="M16.469,14.184l-0.161-1.113c0.658-0.479,1.118-1.524,1.118-2.319c0-1.092-0.863-2.013-1.926-2.013c-1.063,0-1.925,0.868-1.925,1.961c0,0.795,0.46,1.766,1.118,2.242l-0.162,1.247c-0.461,0.039-0.863,0.108-1.214,0.215
-    c-0.886-1.419-2.496-2.061-3.997-2.226l-0.129-0.844c0.903-0.804,1.559-2.239,1.559-3.48c0-1.85-1.458-3.354-3.25-3.354S4.25,5.985,4.25,7.811c0,1.23,0.644,2.616,1.562,3.419l-0.135,0.952C3.459,12.427,1,13.705,1,17h18
-    C19,16,18.387,14.345,16.469,14.184z M2.517,16c0.136-1.908,1.116-2.647,3.642-2.86l0.397-0.033l0.328-2.317L6.64,10.612C5.86,10.048,5.25,8.816,5.25,7.811C5.25,6.536,6.26,5.5,7.5,5.5s2.25,1.056,2.25,2.354c0,1.024-0.624,2.312-1.391,2.868L8.113,10.9
-    l0.337,2.202l0.393,0.033c2.525,0.213,3.505,0.952,3.641,2.864H2.517z"/>
-        </symbol>
-    </svg>
-
+    <script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
+    <img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
+    <script>
+        var svgpoints = document.querySelectorAll('img.inline-svg');
+        SVGInjector(svgpoints);
+    </script>

    <script type="text/javascript">
        window.g_debug_mode = true;
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@ -281,26 +281,7 @@
        };
    </script>

-    <svg style="display: none;">
-        <symbol id="svg-btn-comments" viewBox="0 0 20 20">
-            <path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4z
-                            M16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
-            <rect x="6" y="7" width="8" height="1"/>
-            <rect x="6" y="9" width="8" height="1"/>
-            <rect x="6" y="11" width="8" height="1"/>
-        </symbol>
-        <symbol id="svg-btn-goback" viewBox="0 20 20 20">
-            <path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14
-                c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
-            <polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 	"/>
-        </symbol>
-        <symbol id="svg-btn-users" viewBox="0 0 20 20">
-            <path d="M16.469,14.184l-0.161-1.113c0.658-0.479,1.118-1.524,1.118-2.319c0-1.092-0.863-2.013-1.926-2.013c-1.063,0-1.925,0.868-1.925,1.961c0,0.795,0.46,1.766,1.118,2.242l-0.162,1.247c-0.461,0.039-0.863,0.108-1.214,0.215
-    c-0.886-1.419-2.496-2.061-3.997-2.226l-0.129-0.844c0.903-0.804,1.559-2.239,1.559-3.48c0-1.85-1.458-3.354-3.25-3.354S4.25,5.985,4.25,7.811c0,1.23,0.644,2.616,1.562,3.419l-0.135,0.952C3.459,12.427,1,13.705,1,17h18
-    C19,16,18.387,14.345,16.469,14.184z M2.517,16c0.136-1.908,1.116-2.647,3.642-2.86l0.397-0.033l0.328-2.317L6.64,10.612C5.86,10.048,5.25,8.816,5.25,7.811C5.25,6.536,6.26,5.5,7.5,5.5s2.25,1.056,2.25,2.354c0,1.024-0.624,2.312-1.391,2.868L8.113,10.9
-    l0.337,2.202l0.393,0.033c2.525,0.213,3.505,0.952,3.641,2.864H2.517z"/>
-        </symbol>
-    </svg>
+    <inline src="../../common/main/resources/img/header/buttons.svg" />

    <div id="viewport"></div>

--- a/apps/spreadsheeteditor/main/resources/img/charttypes.png
+++ b/apps/spreadsheeteditor/main/resources/img/charttypes.png
--- a/apps/spreadsheeteditor/main/resources/img/charttypes@2x.png
+++ b/apps/spreadsheeteditor/main/resources/img/charttypes@2x.png
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@ -314,19 +314,19 @@ button:active:not(.disabled) .btn-change-shape    {background-position: -56px  -
 }

 .surface-normal{
-    background-position: -100px -200px;
+    background-position: 0px -300px;
 }

 .surface-wireframe{
-    background-position: -100px -200px;
+    background-position: -50px -300px;
 }

 .contour-normal{
-    background-position: -100px -200px;
+    background-position: -100px -300px;
 }

 .contour-wireframe{
-    background-position: -100px -200px;
+    background-position: -150px -300px;
 }

 #table-combo-template .combo-dataview{
--- a/apps/spreadsheeteditor/mobile/app/controller/Main.js
+++ b/apps/spreadsheeteditor/mobile/app/controller/Main.js
@ -527,6 +527,7 @@ define([
                    mode: me.appOptions.isEdit ? 'edit' : 'view'
                });

+                SSE.getController('Toolbar').activateControls();

                if (me._state.licenseWarning) {
                    value = Common.localStorage.getItem("sse-license-warning");
--- a/apps/spreadsheeteditor/mobile/app/controller/Toolbar.js
+++ b/apps/spreadsheeteditor/mobile/app/controller/Toolbar.js
@ -191,6 +191,10 @@ define([
                this.getView('Toolbar').disableControl(['add', 'edit'], islocked);
            },

+            activateControls: function() {
+                $('#toolbar-settings, #toolbar-search, #document-back').removeClass('disabled');
+            },
+
            dlgLeaveTitleText   : 'You leave the application',
            dlgLeaveMsgText     : 'You have unsaved changes in this document. Click \'Stay on this Page\' to await the autosave of the document. Click \'Leave this Page\' to discard all the unsaved changes.',
            leaveButtonText     : 'Leave this Page',
--- a/apps/spreadsheeteditor/mobile/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/mobile/app/view/Toolbar.js
@ -82,6 +82,7 @@ define([
                }));

                $('.view-main .navbar').on('addClass removeClass', _.bind(me.onDisplayMainNavbar, me));
+                $('#toolbar-edit, #toolbar-add, #toolbar-settings, #toolbar-search, #document-back').addClass('disabled');

                this.$btnEdit = $el.find('#toolbar-edit');
                this.$btnAdd = $el.find('#toolbar-add');
--- a/build/Gruntfile.js
+++ b/build/Gruntfile.js
@ -23,6 +23,8 @@ module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    grunt.loadNpmTasks('grunt-text-replace');
    grunt.loadNpmTasks('grunt-mocha');
+    grunt.loadNpmTasks('grunt-inline');
+    grunt.loadNpmTasks('grunt-svgmin');

    function doRegisterTask(name, callbackConfig) {
        return grunt.registerTask(name + '-init', function() {
@ -142,7 +144,12 @@ module.exports = function(grunt) {
                options: {
                    force: true
                },
-                files: packageFile['main']['clean']
+                prebuild: {
+                    src: packageFile['main']['clean']
+                },
+                postbuild: {
+                    src: packageFile.main.svgicons.clean
+                }
            },

            less: {
@ -210,6 +217,24 @@ module.exports = function(grunt) {
                'index-page': {
                    files: packageFile['main']['copy']['index-page']
                }
+            },
+
+            inline: {
+                dist: {
+                    src: packageFile.main.copy['index-page'][0].dest,
+                    dest: packageFile.main.copy['index-page'][0].dest
+                }
+            },
+
+            svgmin: {
+                options: {
+                    plugins: [{
+                        cleanupIDs: false
+                    }]
+                },
+                dist: {
+                    files: packageFile.main.svgicons.common
+                }
            }
        });
    });
@ -375,8 +400,8 @@ module.exports = function(grunt) {
    grunt.registerTask('deploy-jsziputils',             ['jsziputils-init', 'clean', 'copy']);
    grunt.registerTask('deploy-requirejs',              ['requirejs-init', 'clean', 'uglify']);

-    grunt.registerTask('deploy-app-main',               ['main-app-init', 'clean', 'imagemin', 'less', 'requirejs', 'concat',
-                                                            'copy', 'replace:writeVersion']);
+    grunt.registerTask('deploy-app-main',               ['main-app-init', 'clean:prebuild', 'imagemin', 'less', 'requirejs', 'concat',
+                                                            'copy', 'svgmin', 'inline', 'replace:writeVersion', 'clean:postbuild']);

    grunt.registerTask('deploy-app-mobile',             ['mobile-app-init', 'clean:deploy', 'cssmin', 'copy:template-backup',
                                                            'htmlmin', 'requirejs', 'concat', 'copy:template-restore',
--- a/build/common.json
+++ b/build/common.json
@ -1,7 +1,7 @@
 {
    "name": "common",
    "version": "4.3.0",
-    "build": 1,
+    "build": 32,
    "homepage": "http://www.onlyoffice.com",
    "private": true,
    "sdk": {
--- a/build/documenteditor.json
+++ b/build/documenteditor.json
@ -1,7 +1,7 @@
 {
    "name": "documenteditor",
    "version": "4.3.0",
-    "build": 1112,
+    "build": 1143,
    "homepage": "http://www.onlyoffice.com",
    "private": true,
    "main": {
@ -164,6 +164,19 @@
                    "dest": "../deploy/web-apps/apps/documenteditor/main/index.html"
                }
            ]
+        },
+        "svgicons": {
+            "common": [
+                {
+                    "expand": true,
+                    "cwd": "../apps/common/main/resources/img",
+                    "src": "**/*.svg",
+                    "dest": "../deploy/web-apps/apps/common/main/resources/img"
+                }
+            ],
+            "clean": [
+                "../deploy/web-apps/apps/common"
+            ]
        }
    },
    "mobile": {
--- a/build/presentationeditor.json
+++ b/build/presentationeditor.json
@ -1,7 +1,7 @@
 {
    "name": "presentationeditor",
    "version": "4.3.0",
-    "build": 774,
+    "build": 776,
    "homepage": "http://www.onlyoffice.com",
    "private": true,
    "main": {
@ -164,6 +164,19 @@
                    "dest": "../deploy/web-apps/apps/presentationeditor/main/index.html"
                }
            ]
+        },
+        "svgicons": {
+            "common": [
+                {
+                    "expand": true,
+                    "cwd": "../apps/common/main/resources/img",
+                    "src": "**/*.svg",
+                    "dest": "../deploy/web-apps/apps/common/main/resources/img"
+                }
+            ],
+            "clean": [
+                "../deploy/web-apps/apps/common"
+            ]
        }
    },
    "mobile": {
--- a/build/spreadsheeteditor.json
+++ b/build/spreadsheeteditor.json
@ -1,7 +1,7 @@
 {
    "name": "spreadsheeteditor",
    "version": "4.3.0",
-    "build": 879,
+    "build": 881,
    "homepage": "http://www.onlyoffice.com",
    "private": true,
    "main": {
@ -178,6 +178,19 @@
                    "dest": "../deploy/web-apps/apps/spreadsheeteditor/main/index.html"
                }
            ]
+        },
+        "svgicons": {
+            "common": [
+                {
+                    "expand": true,
+                    "cwd": "../apps/common/main/resources/img",
+                    "src": "**/*.svg",
+                    "dest": "../deploy/web-apps/apps/common/main/resources/img"
+                }
+            ],
+            "clean": [
+                "../deploy/web-apps/apps/common"
+            ]
        }
    },
    "mobile": {
--- a/vendor/svg-injector/svg-injector.map.js
+++ b/vendor/svg-injector/svg-injector.map.js
--- a/vendor/svg-injector/svg-injector.min.js
+++ b/vendor/svg-injector/svg-injector.min.js
@ -0,0 +1,9 @@
+/**
+ * SVGInjector v1.1.3 - Fast, caching, dynamic inline SVG DOM injection library
+ * https://github.com/iconic/SVGInjector
+ *
+ * Copyright (c) 2014-2015 Waybury <hello@waybury.com>
+ * @license MIT
+ */
+!function(t,e){"use strict";function r(t){t=t.split(" ");for(var e={},r=t.length,n=[];r--;)e.hasOwnProperty(t[r])||(e[t[r]]=1,n.unshift(t[r]));return n.join(" ")}var n="file:"===t.location.protocol,i=e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1"),o=Array.prototype.forEach||function(t,e){if(void 0===this||null===this||"function"!=typeof t)throw new TypeError;var r,n=this.length>>>0;for(r=0;n>r;++r)r in this&&t.call(e,this[r],r,this)},a={},l=0,s=[],u=[],c={},f=function(t){return t.cloneNode(!0)},p=function(t,e){u[t]=u[t]||[],u[t].push(e)},d=function(t){for(var e=0,r=u[t].length;r>e;e++)!function(e){setTimeout(function(){u[t][e](f(a[t]))},0)}(e)},v=function(e,r){if(void 0!==a[e])a[e]instanceof SVGSVGElement?r(f(a[e])):p(e,r);else{if(!t.XMLHttpRequest)return r("Browser does not support XMLHttpRequest"),!1;a[e]={},p(e,r);var i=new XMLHttpRequest;i.onreadystatechange=function(){if(4===i.readyState){if(404===i.status||null===i.responseXML)return r("Unable to load SVG file: "+e),n&&r("Note: SVG injection ajax calls do not work locally without adjusting security setting in your browser. Or consider using a local webserver."),r(),!1;if(!(200===i.status||n&&0===i.status))return r("There was a problem injecting the SVG: "+i.status+" "+i.statusText),!1;if(i.responseXML instanceof Document)a[e]=i.responseXML.documentElement;else if(DOMParser&&DOMParser instanceof Function){var t;try{var o=new DOMParser;t=o.parseFromString(i.responseText,"text/xml")}catch(l){t=void 0}if(!t||t.getElementsByTagName("parsererror").length)return r("Unable to parse SVG file: "+e),!1;a[e]=t.documentElement}d(e)}},i.open("GET",e),i.overrideMimeType&&i.overrideMimeType("text/xml"),i.send()}},h=function(e,n,a,u){var f=e.getAttribute("data-src")||e.getAttribute("src");if(!/\.svg/i.test(f))return void u("Attempted to inject a file with a non-svg extension: "+f);if(!i){var p=e.getAttribute("data-fallback")||e.getAttribute("data-png");return void(p?(e.setAttribute("src",p),u(null)):a?(e.setAttribute("src",a+"/"+f.split("/").pop().replace(".svg",".png")),u(null)):u("This browser does not support SVG and no PNG fallback was defined."))}-1===s.indexOf(e)&&(s.push(e),e.setAttribute("src",""),v(f,function(i){if("undefined"==typeof i||"string"==typeof i)return u(i),!1;var a=e.getAttribute("id");a&&i.setAttribute("id",a);var p=e.getAttribute("title");p&&i.setAttribute("title",p);var d=[].concat(i.getAttribute("class")||[],"injected-svg",e.getAttribute("class")||[]).join(" ");i.setAttribute("class",r(d));var v=e.getAttribute("style");v&&i.setAttribute("style",v);var h=[].filter.call(e.attributes,function(t){return/^data-\w[\w\-]*$/.test(t.name)});o.call(h,function(t){t.name&&t.value&&i.setAttribute(t.name,t.value)});var g,m,b,y,A,w={clipPath:["clip-path"],"color-profile":["color-profile"],cursor:["cursor"],filter:["filter"],linearGradient:["fill","stroke"],marker:["marker","marker-start","marker-mid","marker-end"],mask:["mask"],pattern:["fill","stroke"],radialGradient:["fill","stroke"]};Object.keys(w).forEach(function(t){g=t,b=w[t],m=i.querySelectorAll("defs "+g+"[id]");for(var e=0,r=m.length;r>e;e++){y=m[e].id,A=y+"-"+l;var n;o.call(b,function(t){n=i.querySelectorAll("["+t+'*="'+y+'"]');for(var e=0,r=n.length;r>e;e++)n[e].setAttribute(t,"url(#"+A+")")}),m[e].id=A}}),i.removeAttribute("xmlns:a");for(var x,S,k=i.querySelectorAll("script"),j=[],G=0,T=k.length;T>G;G++)S=k[G].getAttribute("type"),S&&"application/ecmascript"!==S&&"application/javascript"!==S||(x=k[G].innerText||k[G].textContent,j.push(x),i.removeChild(k[G]));if(j.length>0&&("always"===n||"once"===n&&!c[f])){for(var M=0,V=j.length;V>M;M++)new Function(j[M])(t);c[f]=!0}var E=i.querySelectorAll("style");o.call(E,function(t){t.textContent+=""}),e.parentNode.replaceChild(i,e),delete s[s.indexOf(e)],e=null,l++,u(i)}))},g=function(t,e,r){e=e||{};var n=e.evalScripts||"always",i=e.pngFallback||!1,a=e.each;if(void 0!==t.length){var l=0;o.call(t,function(e){h(e,n,i,function(e){a&&"function"==typeof a&&a(e),r&&t.length===++l&&r(l)})})}else t?h(t,n,i,function(e){a&&"function"==typeof a&&a(e),r&&r(1),t=null}):r&&r(0)};"object"==typeof module&&"object"==typeof module.exports?module.exports=exports=g:"function"==typeof define&&define.amd?define(function(){return g}):"object"==typeof t&&(t.SVGInjector=g)}(window,document);
+//# sourceMappingURL=svg-injector.map.js