[PE] Show File and Plugins tabs in view mode

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

@@ -423,7 +423,7 @@ define([
                     toolbarView = application.getController('Toolbar').getView('Toolbar');
 
                 application.getController('DocumentHolder').getView('DocumentHolder').focus();
-                if (this.api && this.api.asc_isDocumentCanSave) {
+                if (this.api && this.appOptions.isEdit && this.api.asc_isDocumentCanSave) {
                     var cansave = this.api.asc_isDocumentCanSave(),
                         forcesave = this.appOptions.forcesave,
                         isSyncButton = (toolbarView.btnCollabChanges.rendered) ? toolbarView.btnCollabChanges.$icon.hasClass('btn-synch') : false,
@@ -889,14 +889,15 @@ define([
                 var app             = this.getApplication(),
                     viewport        = app.getController('Viewport').getView('Viewport'),
                     statusbarView   = app.getController('Statusbar').getView('Statusbar'),
-                    documentHolder  = app.getController('DocumentHolder').getView('DocumentHolder');
+                    documentHolder  = app.getController('DocumentHolder').getView('DocumentHolder'),
+                    toolbarController = app.getController('Toolbar');
 
                 // appHeader.setHeaderCaption(this.appOptions.isEdit ? 'Presentation Editor' : 'Presentation Viewer');
                 // appHeader.setVisible(!this.appOptions.nativeApp && !value && !this.appOptions.isDesktopApp);
 
                 viewport && viewport.setMode(this.appOptions, true);
                 statusbarView && statusbarView.setMode(this.appOptions);
-
+                toolbarController.setMode(this.appOptions);
                 documentHolder.setMode(this.appOptions);
 
                 this.api.asc_registerCallback('asc_onSendThemeColors', _.bind(this.onSendThemeColors, this));
@@ -936,20 +937,17 @@ define([
 
                     viewport.applyEditorMode();
 
-                    var toolbarView = (toolbarController) ? toolbarController.getView('Toolbar') : null;
+                    var rightmenuView = rightmenuController.getView('RightMenu');
-
+                    if (rightmenuView) {
-                    _.each([
+                        rightmenuView.setApi(me.api);
-                        toolbarView,
+                        rightmenuView.on('editcomplete', _.bind(me.onEditComplete, me));
-                        rightmenuController.getView('RightMenu')
+                        rightmenuView.setMode(me.appOptions);
-                    ], function(view) {
-                        if (view) {
-                            view.setApi(me.api);
-                            view.on('editcomplete', _.bind(me.onEditComplete, me));
-                            view.setMode(me.appOptions);
                     }
-                    });
 
+                    var toolbarView = (toolbarController) ? toolbarController.getView('Toolbar') : null;
                     if (toolbarView) {
+                        toolbarView.setApi(me.api);
+                        toolbarView.on('editcomplete', _.bind(me.onEditComplete, me));
                         toolbarView.on('insertimage', _.bind(me.onInsertImage, me));
                         toolbarView.on('inserttable', _.bind(me.onInsertTable, me));
                         toolbarView.on('insertshape', _.bind(me.onInsertShape, me));

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

@@ -222,9 +222,6 @@ define([
 
             // Create toolbar view
             me.toolbar = me.createView('Toolbar');
-            me.toolbar.btnSave.on('disabled', _.bind(this.onBtnChangeState, this, 'save:disabled'));
-            me.toolbar.btnUndo.on('disabled', _.bind(this.onBtnChangeState, this, 'undo:disabled'));
-            me.toolbar.btnRedo.on('disabled', _.bind(this.onBtnChangeState, this, 'redo:disabled'));
 
             Common.NotificationCenter.on('app:ready', me.onAppReady.bind(me));
             Common.NotificationCenter.on('app:face', me.onAppShowed.bind(me));
@@ -242,6 +239,11 @@ define([
             });
         },
 
+        setMode: function(mode) {
+            this.mode = mode;
+            this.toolbar.applyLayout(mode);
+        },
+
         attachUIEvents: function(toolbar) {
             /**
              * UI Events
@@ -253,8 +255,11 @@ define([
             toolbar.btnPreview.menu.on('item:click',                    _.bind(this.onPreviewItemClick, this));
             toolbar.btnPrint.on('click',                                _.bind(this.onPrint, this));
             toolbar.btnSave.on('click',                                 _.bind(this.onSave, this));
+            toolbar.btnSave.on('disabled',                              _.bind(this.onBtnChangeState, this, 'save:disabled'));
             toolbar.btnUndo.on('click',                                 _.bind(this.onUndo, this));
+            toolbar.btnUndo.on('disabled',                              _.bind(this.onBtnChangeState, this, 'undo:disabled'));
             toolbar.btnRedo.on('click',                                 _.bind(this.onRedo, this));
+            toolbar.btnRedo.on('disabled',                              _.bind(this.onBtnChangeState, this, 'redo:disabled'));
             toolbar.btnCopy.on('click',                                 _.bind(this.onCopyPaste, this, true));
             toolbar.btnPaste.on('click',                                _.bind(this.onCopyPaste, this, false));
             toolbar.btnBold.on('click',                                 _.bind(this.onBold, this));
@@ -349,7 +354,7 @@ define([
         },
 
         onChangeCompactView: function(view, compact) {
-            this.toolbar.setFolded(compact);
+            this.toolbar.setFolded(compact, 1);
             this.toolbar.fireEvent('view:compact', [this.toolbar, compact]);
 
             Common.localStorage.setBool('pe-compact-toolbar', compact);
@@ -1963,6 +1968,7 @@ define([
             var toolbar = this.toolbar;
             toolbar.$el.find('.toolbar').toggleClass('masked', disable);
 
+            if (toolbar.btnsAddSlide) // toolbar buttons are rendered
                 this.toolbar.lockToolbar(PE.enumLock.menuFileOpen, disable, {array: toolbar.btnsAddSlide.concat(toolbar.btnChangeSlide, toolbar.btnPreview)});
             if(disable) {
                 mask = $("<div class='toolbar-mask'>").appendTo(toolbar.$el.find('.toolbar'));
@@ -1993,6 +1999,8 @@ define([
             me.toolbar.render(_.extend({compactview: compactview}, config));
 
             if ( config.isEdit ) {
+                me.toolbar.setMode(config);
+
                 var tab = {action: 'review', caption: me.toolbar.textTabCollaboration};
                 var $panel = me.getApplication().getController('Common.Controllers.ReviewChanges').createToolbarPanel();
                 if ( $panel )
@@ -2053,12 +2061,6 @@ define([
                     this.toolbar.lockToolbar(PE.enumLock.noSlides, this._state.no_slides, { array: this.btnsComment });
                 }
             }
-
-            Common.Utils.asyncCall(function () {
-                if ( config.isEdit ) {
-                    me.toolbar.onAppReady(config);
-                }
-            });
         },
 
         onFileMenu: function (opts) {

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

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

apps/presentationeditor/main/app/template/ToolbarView.template

@@ -0,0 +1,26 @@
+<div class="toolbar">
+    <div class="box-tabs">
+        <div class="extra left"></div>
+        <section class="tabs">
+            <a 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 class="scroll right">
+                <i class="icon">&gt;</i>
+            </a>
+        </section>
+        <div class="extra right">
+        </div>
+    </div>
+    <section class="box-controls">
+        <section class="box-panels">
+        </section>
+    </section>
+</div>

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

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

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

@@ -43,6 +43,7 @@
 define([
     'backbone',
     'text!presentationeditor/main/app/template/Toolbar.template',
+    'text!documenteditor/main/app/template/ToolbarView.template',
     'common/main/lib/collection/Fonts',
     'common/main/lib/component/Button',
     'common/main/lib/component/ComboBox',
@@ -56,7 +57,7 @@ define([
     'common/main/lib/component/ComboDataView'
     ,'common/main/lib/component/SynchronizeTip'
     ,'common/main/lib/component/Mixtbar'
-], function (Backbone, template) {
+], function (Backbone, template, template_view) {
     'use strict';
 
     PE.enumLock = {
@@ -96,15 +97,6 @@ define([
             initialize: function () {
                 var me = this;
 
-                Common.UI.Mixtbar.prototype.initialize.call(this, {
-                    template: _.template(template),
-                    tabs: [
-                        { caption: me.textTabFile, action: 'file', extcls: 'canedit'},
-                        { caption: me.textTabHome, action: 'home', extcls: 'canedit'},
-                        { caption: me.textTabInsert, action: 'ins', extcls: 'canedit'}
-                    ]}
-                );
-
                 me.paragraphControls = [];
                 me.shapeControls = [];
                 me.slideOnlyControls = [];
@@ -121,6 +113,25 @@ define([
                 me._state = {
                     hasCollaborativeChanges: undefined
                 };
+
+                Common.NotificationCenter.on('app:ready', me.onAppReady.bind(this));
+                return this;
+            },
+
+            applyLayout: function (config) {
+                var me = this;
+
+                if ( config.isEdit ) {
+                    Common.UI.Mixtbar.prototype.initialize.call(this, {
+                            template: _.template(template),
+                            tabs: [
+                                {caption: me.textTabFile, action: 'file', extcls: 'canedit'},
+                                {caption: me.textTabHome, action: 'home', extcls: 'canedit'},
+                                {caption: me.textTabInsert, action: 'ins', extcls: 'canedit'}
+                            ]
+                        }
+                    );
+
                     me.btnSaveCls = 'btn-save';
                     me.btnSaveTip = this.tipSave + Common.Utils.String.platformKey('Ctrl+S');
 
@@ -775,8 +786,32 @@ define([
                                 cmp.setDisabled(true);
                         });
                     this.lockToolbar(PE.enumLock.disableOnStart, true, {array: me.slideOnlyControls.concat(me.shapeControls)});
-
                     this.on('render:after', _.bind(this.onToolbarAfterRender, this));
+                } 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("pe-compact-toolbar") ) {
+                                compactview = Common.localStorage.getBool("pe-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));
+                }
 
                 return this;
             },
@@ -837,21 +872,21 @@ define([
                 } else {
                     me.$layout.find('.canedit').hide();
                     me.$layout.addClass('folded');
-
                     me.$el.html(me.$layout);
                 }
 
                 this.fireEvent('render:after', [this]);
                 Common.UI.Mixtbar.prototype.afterRender.call(this);
 
-
                 Common.NotificationCenter.on({
                     'window:resize': function() {
                         Common.UI.Mixtbar.prototype.onResize.apply(me, arguments);
                     }
                 });
 
+                if ( mode.isEdit )
                     me.setTab('home');
+
                 if ( me.isCompactView )
                     me.setFolded(true);