[SSE] Show File and Plugins tabs in view mode

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

@@ -930,7 +930,7 @@ define([
                 statusbarView && statusbarView.setMode(this.appOptions);
 //                this.getStatusInfo().setDisabled(false);
 //                this.getCellInfo().setMode(this.appOptions);
-
+                app.getController('Toolbar').setMode(this.appOptions);
                 app.getController('DocumentHolder').setMode(this.appOptions);
 
                 if (this.appOptions.isEditMailMerge || this.appOptions.isEditDiagram) {

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

@@ -217,6 +217,11 @@ define([
             Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
         },
 
+        setMode: function(mode) {
+            this.mode = mode;
+            this.toolbar.applyLayout(mode);
+        },
+
         attachUIEvents: function(toolbar) {
             var me = this;
 
@@ -1453,7 +1458,7 @@ define([
         },
 
         onChangeViewMode: function(item, compact) {
-            this.toolbar.setFolded(compact);
+            this.toolbar.setFolded(compact, 1);
             this.toolbar.fireEvent('view:compact', [this, compact]);
 
             Common.localStorage.setBool('sse-compact-toolbar', compact);
@@ -2919,7 +2924,7 @@ define([
         },
 
         applyFormulaSettings: function() {
-            if (this.toolbar.btnInsertFormula.rendered) {
+            if (this.toolbar.btnInsertFormula && this.toolbar.btnInsertFormula.rendered) {
                 var formulas = this.toolbar.btnInsertFormula.menu.items;
                 for (var i=0; i<Math.min(4,formulas.length); i++) {
                     formulas[i].setCaption(this.api.asc_getFormulaLocaleName(formulas[i].value));
@@ -2940,13 +2945,12 @@ define([
                     compactview = true;
             }
 
-            me.toolbar.applyLayout(config);
             me.toolbar.render(_.extend({isCompactView: compactview}, config));
 
             Common.Utils.asyncCall(function () {
+                if ( config.isEdit ) {
                     me.toolbar.setMode(config);
 
-                if ( config.isEdit ) {
                     me.toolbar.btnSave && me.toolbar.btnSave.on('disabled', _.bind(me.onBtnChangeState, me, 'save:disabled'));
                     me.toolbar.btnUndo && me.toolbar.btnUndo.on('disabled', _.bind(me.onBtnChangeState, me, 'undo:disabled'));
                     me.toolbar.btnRedo && me.toolbar.btnRedo.on('disabled', _.bind(me.onBtnChangeState, me, 'redo:disabled'));

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

@@ -179,6 +179,14 @@ define([
                     checkable   : true,
                     value       : 'toolbar'
                 });
+                if (!config.isEdit && !config.isEditDiagram && !config.isEditMailMerge) {
+                    me.header.mnuitemCompactToolbar.hide();
+                    Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
+                        if (action=='plugins' && visible) {
+                            me.header.mnuitemCompactToolbar.show();
+                        }
+                    }, this));
+                }
 
                 var mnuitemHideFormulaBar = new Common.UI.MenuItem({
                     caption     : me.textHideFBar,

apps/spreadsheeteditor/main/app/template/ToolbarView.template

@@ -0,0 +1,26 @@
+<section class="toolbar">
+    <section class="box-tabs">
+        <div class="extra left"></div>
+        <section class="tabs">
+            <a href="#" class="scroll left">
+                <i class="icon">&lt;</i>
+            </a>
+            <ul>
+                <% for(var i in tabs) { %>
+                <li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
+                    <a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
+                </li>
+                <% } %>
+            </ul>
+            <a href="#" class="scroll right">
+                <i class="icon">&gt;</i>
+            </a>
+        </section>
+        <div class="extra right">
+        </div>
+    </section>
+    <section class="box-controls">
+        <section class="box-panels">
+        </section>
+    </section>
+</section>

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

@@ -245,7 +245,7 @@ define([
                                                                                        this.mode.sharingSettingsUrl&&this.mode.sharingSettingsUrl.length))?'show':'hide']();
 
             this.miSettings[(this.mode.isEdit || this.mode.canComments)?'show':'hide']();
-            this.miSettings.$el.find('+.devider')[(this.mode.isEdit || this.mode.canComments)?'show':'hide']();
+            this.miSettings.$el.prev()[(this.mode.isEdit || this.mode.canComments)?'show':'hide']();
 
             this.mode.canBack ? this.$el.find('#fm-btn-back').show().prev().show() :
                                     this.$el.find('#fm-btn-back').hide().prev().hide();

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

@@ -162,7 +162,7 @@ define([
             } else {
                 btn.panel['hide']();
             }
-            if (this.mode.isEdit) SSE.getController('Toolbar').DisableToolbar(state==true);
+            SSE.getController('Toolbar').DisableToolbar(state==true);
             Common.NotificationCenter.trigger('layout:changed', 'leftmenu');
         },
 

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

@@ -42,6 +42,7 @@ define([
     'backbone',
     'text!spreadsheeteditor/main/app/template/Toolbar.template',
     'text!spreadsheeteditor/main/app/template/ToolbarAnother.template',
+    'text!spreadsheeteditor/main/app/template/ToolbarView.template',
     'common/main/lib/collection/Fonts',
     'common/main/lib/component/Button',
     'common/main/lib/component/ComboBox',
@@ -55,7 +56,7 @@ define([
     'common/main/lib/component/ComboDataView'
     ,'common/main/lib/component/SynchronizeTip'
     ,'common/main/lib/component/Mixtbar'
-], function (Backbone, template, simple) { 'use strict';
+], function (Backbone, template, simple, template_view) { 'use strict';
 
     SSE.enumLock = {
         editCell:       'cell-editing',
@@ -138,38 +139,6 @@ define([
                 { value: Asc.c_oAscNumFormatType.Text,      format: this.ascFormatOptions.Text,        displayValue: this.txtText,         exampleval: '100' }
             ];
 
-            var _set = SSE.enumLock;
-            me.btnCopy = new Common.UI.Button({
-                id          : 'id-toolbar-btn-copy',
-                cls         : 'btn-toolbar',
-                iconCls     : 'btn-copy'
-            });
-
-            me.btnPaste = new Common.UI.Button({
-                id          : 'id-toolbar-btn-paste',
-                cls         : 'btn-toolbar',
-                iconCls     : 'btn-paste',
-                lock        : [/*_set.editCell,*/ _set.coAuth, _set.lostConnect]
-            });
-
-            me.btnUndo = new Common.UI.Button({
-                id          : 'id-toolbar-btn-undo',
-                cls         : 'btn-toolbar',
-                iconCls     : 'btn-undo',
-                disabled    : true,
-                lock        : [_set.lostConnect],
-                signals     : ['disabled']
-            });
-
-            me.btnRedo = new Common.UI.Button({
-                id          : 'id-toolbar-btn-redo',
-                cls         : 'btn-toolbar',
-                iconCls     : 'btn-redo',
-                disabled    : true,
-                lock        : [_set.lostConnect],
-                signals     : ['disabled']
-            });
-
             return this;
         },
 
@@ -223,6 +192,38 @@ define([
             }
 
             var _set = SSE.enumLock;
+
+            me.btnCopy = new Common.UI.Button({
+                id          : 'id-toolbar-btn-copy',
+                cls         : 'btn-toolbar',
+                iconCls     : 'btn-copy'
+            });
+
+            me.btnPaste = new Common.UI.Button({
+                id          : 'id-toolbar-btn-paste',
+                cls         : 'btn-toolbar',
+                iconCls     : 'btn-paste',
+                lock        : [/*_set.editCell,*/ _set.coAuth, _set.lostConnect]
+            });
+
+            me.btnUndo = new Common.UI.Button({
+                id          : 'id-toolbar-btn-undo',
+                cls         : 'btn-toolbar',
+                iconCls     : 'btn-undo',
+                disabled    : true,
+                lock        : [_set.lostConnect],
+                signals     : ['disabled']
+            });
+
+            me.btnRedo = new Common.UI.Button({
+                id          : 'id-toolbar-btn-redo',
+                cls         : 'btn-toolbar',
+                iconCls     : 'btn-redo',
+                disabled    : true,
+                lock        : [_set.lostConnect],
+                signals     : ['disabled']
+            });
+
             if ( config.isEditDiagram ) {
                 me.$layout = $(_.template(simple)(config));
 
@@ -330,7 +331,8 @@ define([
                     iconCls     : 'btn-clear-filter',
                     lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleDelFilter, _set.editPivot]
                 });
-            } else {
+            } else
+            if ( config.isEdit ) {
                 Common.UI.Mixtbar.prototype.initialize.call(this, {
                     template: _.template(template),
                     tabs: [
@@ -1200,8 +1202,33 @@ define([
                 var hidetip = Common.localStorage.getItem("sse-hide-synch");
                 me.showSynchTip = !(hidetip && parseInt(hidetip) == 1);
                 // me.needShowSynchTip = false;
+            } else {
+                Common.UI.Mixtbar.prototype.initialize.call(this, {
+                        template: _.template(template_view),
+                        tabs: [
+                            {caption: me.textTabFile, action: 'file', extcls: ''}
+                        ]
+                    }
+                );
+                Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
+                    if (action=='plugins' && visible) {
+                        var compactview = false;
+                        if ( Common.localStorage.itemExists("sse-compact-toolbar") ) {
+                            compactview = Common.localStorage.getBool("sse-compact-toolbar");
+                        } else if ( config.customization && config.customization.compactToolbar )
+                            compactview = true;
+
+                        if (!compactview) {
+                            me.setFolded(false, 1);
+                            me.setTab('plugins');
+                            me.fireEvent('view:compact', [me, compactview]);
+                            Common.NotificationCenter.trigger('layout:changed', 'toolbar');
+                        }
+                    }
+                }, this));
             }
 
+            if (config.isEdit) {
                 me.lockControls = [
                     me.cmbFontName, me.cmbFontSize, me.btnIncFontSize, me.btnDecFontSize, me.btnBold,
                     me.btnItalic, me.btnUnderline, me.btnStrikeout, me.btnSubscript, me.btnTextColor, me.btnHorizontalAlign, me.btnAlignLeft,
@@ -1233,6 +1260,8 @@ define([
                 });
 
                 this.on('render:after', _.bind(this.onToolbarAfterRender, this));
+            }
+            return this;
         },
 
         render: function (mode) {
@@ -1271,6 +1300,7 @@ define([
                 }
             });
 
+            if ( mode.isEdit )
                 me.setTab('home');
             if ( me.isCompactView )
                 me.setFolded(true);