[SSE] Show view tab in view/commenting mode

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

@@ -1406,14 +1406,12 @@ define([
                 Common.Utils.Metric.setCurrentMetric(value);
                 Common.Utils.InternalSettings.set("sse-settings-unit", value);
 
+                var toolbarController   = application.getController('Toolbar');
+                toolbarController   && toolbarController.setApi(me.api);
+
                 if (this.appOptions.isRestrictedEdit) {
-                    var toolbarController   = application.getController('Toolbar');
-                    toolbarController   && toolbarController.setApi(me.api);
                     application.getController('WBProtection').setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api);
                 } else if (this.appOptions.isEdit) { // set api events for toolbar in the Restricted Editing mode
-                    var toolbarController   = application.getController('Toolbar');
-                    toolbarController   && toolbarController.setApi(me.api);
-
                     var statusbarController = application.getController('Statusbar'),
                         rightmenuController = application.getController('RightMenu'),
                         fontsControllers    = application.getController('Common.Controllers.Fonts');

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

@@ -3810,12 +3810,19 @@ define([
                         me.toolbar.addTab(tab, $panel, 7);
                         Array.prototype.push.apply(me.toolbar.lockControls, wbtab.getView('WBProtection').getButtons());
                     }
-
-                    var viewtab = me.getApplication().getController('ViewTab');
-                    viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
-                    Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
                 }
             }
+            if ( !config.isEditDiagram && !config.isEditMailMerge ) {
+                tab = {caption: me.toolbar.textTabView, action: 'view', extcls: config.isEdit ? 'canedit' : '', layoutname: 'toolbar-view', dataHintTitle: 'W'};
+                var viewtab = me.getApplication().getController('ViewTab');
+                viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
+                $panel = viewtab.createToolbarPanel();
+                if ($panel) {
+                    me.toolbar.addTab(tab, $panel, 8);
+                    me.toolbar.setVisible('view', Common.UI.LayoutManager.isElementVisible('toolbar-view'));
+                }
+                config.isEdit && Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
+            }
         },
 
         onAppReady: function (config) {

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

@@ -84,26 +84,6 @@ define([
                 mode: mode,
                 compactToolbar: this.toolbar.toolbar.isCompactView
             });
-            if (mode.canBrandingExt && mode.customization && mode.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
-                this.view.chStatusbar.$el.remove();
-            }
-
-            if (!mode.isEdit && !mode.isEditDiagram && !mode.isEditMailMerge) { // if view tab will be visible in view/restricted-editing mode
-                this.view.chToolbar.hide();
-                var me = this;
-                Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
-                    if ((action=='plugins' || action=='review') && visible) {
-                        me.view.chToolbar.show();
-                    }
-                }, this));
-            }
-
-            if (!mode.isEdit) {
-                this.view.chHeadings.hide();
-                this.view.chGridlines.hide();
-                this.view.btnFreezePanes.hide();
-                this.view.btnFreezePanes.$el.parents('.group').hide().prev().hide();
-            }
 
             this.addListeners({
                 'ViewTab': {
@@ -141,6 +121,10 @@ define([
             this.view && this.view.SetDisabled(state);
         },
 
+        createToolbarPanel: function() {
+            return this.view.getPanel();
+        },
+
         getView: function(name) {
             return !name && this.view ?
                 this.view : Backbone.Controller.prototype.getView.call(this, name);

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

@@ -245,62 +245,6 @@
                     <!--</div>-->
                 <!--</div>-->
             </section>
-            <section class="panel" data-tab="view">
-                <div class="group sheet-views">
-                    <span class="btn-slot text x-huge" id="slot-btn-sheet-view"></span>
-                </div>
-                <div class="group sheet-views small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-createview"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-closeview"></span>
-                    </div>
-                </div>
-                <div class="separator long sheet-views"></div>
-                <div class="group small">
-                    <div class="elset" style="display: flex;">
-                        <span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>
-                    </div>
-                    <div class="elset" style="text-align: center;">
-                        <span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>
-                    </div>
-                </div>
-                <div class="separator long"></div>
-                <div class="group">
-                    <span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>
-                </div>
-                <div class="separator long"></div>
-                <div class="group">
-                    <span class="btn-slot text x-huge" id="slot-btn-freeze"></span>
-                </div>
-                <div class="separator long"></div>
-                <div class="group small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-formula"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-heading"></span>
-                    </div>
-                </div>
-                <div class="group small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-gridlines"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-zeros"></span>
-                    </div>
-                </div>
-                <div class="separator long"></div>
-                <div class="group small">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-toolbar"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-chk-statusbar"></span>
-                    </div>
-                </div>
-            </section>
         </section>
     </section>
 </section>

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

@@ -390,9 +390,8 @@ define([
                         { caption: me.textTabInsert, action: 'ins', extcls: 'canedit', dataHintTitle: 'I'},
                         {caption: me.textTabLayout, action: 'layout', extcls: 'canedit', layoutname: 'toolbar-layout', dataHintTitle: 'L'},
                         {caption: me.textTabFormula, action: 'formula', extcls: 'canedit', dataHintTitle: 'O'},
-                        {caption: me.textTabData, action: 'data', extcls: 'canedit', dataHintTitle: 'D'},
+                        {caption: me.textTabData, action: 'data', extcls: 'canedit', dataHintTitle: 'D'}
-                        undefined, undefined, undefined,
+                        // undefined, undefined, undefined, undefined
-                        {caption: me.textTabView, action: 'view', extcls: 'canedit', layoutname: 'toolbar-view', dataHintTitle: 'W'}
                     ]}
                 );
 

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

@@ -46,9 +46,66 @@ define([
     'use strict';
 
     SSE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){
+        var template = '<section class="panel" data-tab="view">' +
+            '<div class="group sheet-views">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-sheet-view"></span>' +
+            '</div>' +
+            '<div class="group sheet-views small">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-createview"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-closeview"></span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="separator long sheet-views"></div>' +
+            '<div class="group small">' +
+                '<div class="elset" style="display: flex;">' +
+                    '<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>' +
+                '</div>' +
+                '<div class="elset" style="text-align: center;">' +
+                    '<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="separator long"></div>' +
+            '<div class="group">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>' +
+            '</div>' +
+            '<div class="separator long"></div>' +
+            '<div class="group sheet-freeze">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-freeze"></span>' +
+            '</div>' +
+            '<div class="separator long sheet-freeze"></div>' +
+            '<div class="group small sheet-formula">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-formula"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-heading"></span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="group small sheet-gridlines">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-gridlines"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-zeros"></span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="separator long separator-formula"></div>' +
+            '<div class="group small">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-toolbar"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-statusbar"></span>' +
+                '</div>' +
+            '</div>' +
+        '</section>';
+
         function setEvents() {
             var me = this;
-            if ( me.appConfig.canFeatureViews ) {
+            if ( me.appConfig.canFeatureViews && me.appConfig.isEdit) {
                 me.btnCloseView.on('click', function (btn, e) {
                     me.fireEvent('viewtab:openview', [{name: 'default', value: 'default'}]);
                 });
@@ -57,7 +114,7 @@ define([
                 });
             }
 
-            me.btnFreezePanes.menu.on('item:click', function (menu, item, e) {
+            me.btnFreezePanes && me.btnFreezePanes.menu.on('item:click', function (menu, item, e) {
                 if (item.value === 'shadow') {
                     me.fireEvent('viewtab:freezeshadow', [item.checked]);
                 } else {
@@ -67,13 +124,13 @@ define([
             this.chFormula.on('change', function (field, value) {
                 me.fireEvent('viewtab:formula', [0, value=='checked']);
             });
-            this.chHeadings.on('change', function (field, value) {
+            this.chHeadings && this.chHeadings.on('change', function (field, value) {
                 me.fireEvent('viewtab:headings', [1, value=='checked']);
             });
-            this.chGridlines.on('change', function (field, value) {
+            this.chGridlines && this.chGridlines.on('change', function (field, value) {
                 me.fireEvent('viewtab:gridlines', [2, value=='checked']);
             });
-            this.chZeros.on('change', function (field, value) {
+            this.chZeros && this.chZeros.on('change', function (field, value) {
                 me.fireEvent('viewtab:zeros', [3, value=='checked']);
             });
             this.chToolbar.on('change', function (field, value) {
@@ -105,12 +162,10 @@ define([
                 this.lockedControls = [];
 
                 var me = this,
-                    $host = me.toolbar.$el,
                     _set = Common.enumLock;
 
-                if ( me.appConfig.canFeatureViews ) {
+                if ( me.appConfig.canFeatureViews && me.appConfig.isEdit ) {
                     this.btnSheetView = new Common.UI.Button({
-                        parentEl: $host.find('#slot-btn-sheet-view'),
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-sheet-view',
                         caption: me.capBtnSheetView,
@@ -133,7 +188,6 @@ define([
                         dataHintOffset: 'big'
                     });
                     this.lockedControls.push(this.btnCreateView);
-                    Common.Utils.injectComponent($host.find('#slot-createview'), this.btnCreateView);
 
                     this.btnCloseView = new Common.UI.Button({
                         id          : 'id-toolbar-btn-closeview',
@@ -146,29 +200,55 @@ define([
                         dataHintOffset: 'big'
                     });
                     this.lockedControls.push(this.btnCloseView);
-                    Common.Utils.injectComponent($host.find('#slot-closeview'), this.btnCloseView);
                 }
 
-                this.btnFreezePanes = new Common.UI.Button({
+                if (me.appConfig.isEdit) {
-                    parentEl: $host.find('#slot-btn-freeze'),
+                    this.btnFreezePanes = new Common.UI.Button({
-                    cls: 'btn-toolbar x-huge icon-top',
+                        cls: 'btn-toolbar x-huge icon-top',
-                    iconCls: 'toolbar__icon btn-freeze-panes',
+                        iconCls: 'toolbar__icon btn-freeze-panes',
-                    caption: this.capBtnFreeze,
+                        caption: this.capBtnFreeze,
-                    menu: true,
+                        menu: true,
-                    lock: [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
+                        lock: [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
-                    dataHint: '1',
+                        dataHint: '1',
-                    dataHintDirection: 'bottom',
+                        dataHintDirection: 'bottom',
-                    dataHintOffset: 'small'
+                        dataHintOffset: 'small'
-                });
+                    });
-                this.lockedControls.push(this.btnFreezePanes);
+                    this.lockedControls.push(this.btnFreezePanes);
+
+                    this.chHeadings = new Common.UI.CheckBox({
+                        labelText: this.textHeadings,
+                        lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
+                        dataHint    : '1',
+                        dataHintDirection: 'left',
+                        dataHintOffset: 'small'
+                    });
+                    this.lockedControls.push(this.chHeadings);
+
+                    this.chGridlines = new Common.UI.CheckBox({
+                        labelText: this.textGridlines,
+                        lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
+                        dataHint    : '1',
+                        dataHintDirection: 'left',
+                        dataHintOffset: 'small'
+                    });
+                    this.lockedControls.push(this.chGridlines);
+
+                    this.chZeros = new Common.UI.CheckBox({
+                        labelText: this.textZeros,
+                        lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
+                        dataHint    : '1',
+                        dataHintDirection: 'left',
+                        dataHintOffset: 'small'
+                    });
+                    this.lockedControls.push(this.chZeros);
+                }
 
                 this.cmbZoom = new Common.UI.ComboBox({
-                    el          : $host.find('#slot-field-zoom'),
                     cls         : 'input-group-nr',
                     menuStyle   : 'min-width: 55px;',
                     hint        : me.tipFontSize,
                     editable    : true,
-                    lock        : [_set.coAuth, _set.lostConnect, _set.editCell],
+                    lock        : [_set.lostConnect, _set.editCell],
                     data        : [
                         { displayValue: "50%", value: 50 },
                         { displayValue: "75%", value: 75 },
@@ -185,52 +265,9 @@ define([
                     dataHintDirection: 'top',
                     dataHintOffset: 'small'
                 });
-                this.cmbZoom.setValue(100);
                 this.lockedControls.push(this.cmbZoom);
 
-                this.chFormula = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-formula'),
-                    labelText: this.textFormula,
-                    value: !Common.localStorage.getBool('sse-hidden-formula'),
-                    lock        : [_set.lostConnect, _set.coAuth, _set.editCell],
-                    dataHint    : '1',
-                    dataHintDirection: 'left',
-                    dataHintOffset: 'small'
-                });
-                this.lockedControls.push(this.chFormula);
-
-                this.chHeadings = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-heading'),
-                    labelText: this.textHeadings,
-                    lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
-                    dataHint    : '1',
-                    dataHintDirection: 'left',
-                    dataHintOffset: 'small'
-                });
-                this.lockedControls.push(this.chHeadings);
-
-                this.chGridlines = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-gridlines'),
-                    labelText: this.textGridlines,
-                    lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
-                    dataHint    : '1',
-                    dataHintDirection: 'left',
-                    dataHintOffset: 'small'
-                });
-                this.lockedControls.push(this.chGridlines);
-
-                this.chZeros = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-zeros'),
-                    labelText: this.textZeros,
-                    lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
-                    dataHint    : '1',
-                    dataHintDirection: 'left',
-                    dataHintOffset: 'small'
-                });
-                this.lockedControls.push(this.chZeros);
-
                 this.btnInterfaceTheme = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-interface-theme'),
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'toolbar__icon day',
                     caption: this.textInterfaceTheme,
@@ -241,11 +278,20 @@ define([
                 });
                 this.lockedControls.push(this.btnInterfaceTheme);
 
+                this.chFormula = new Common.UI.CheckBox({
+                    labelText: this.textFormula,
+                    value: !Common.localStorage.getBool('sse-hidden-formula'),
+                    lock        : [_set.lostConnect, _set.editCell],
+                    dataHint    : '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chFormula);
+
                 this.chStatusbar = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-statusbar'),
                     labelText: this.textCombineSheetAndStatusBars,
                     value       : Common.localStorage.getBool('sse-compact-statusbar', true),
-                    lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
+                    lock        : [_set.lostConnect, _set.editCell],
                     dataHint    : '1',
                     dataHintDirection: 'left',
                     dataHintOffset: 'small'
@@ -253,31 +299,51 @@ define([
                 this.lockedControls.push(this.chStatusbar);
 
                 this.chToolbar = new Common.UI.CheckBox({
-                    el: $host.findById('#slot-chk-toolbar'),
                     labelText: this.textAlwaysShowToolbar,
                     value       : !options.compactToolbar,
-                    lock        : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
+                    lock        : [_set.lostConnect, _set.editCell],
                     dataHint    : '1',
                     dataHintDirection: 'left',
                     dataHintOffset: 'small'
                 });
                 this.lockedControls.push(this.chToolbar);
 
-                $host.find('#slot-lbl-zoom').text(this.textZoom);
-
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             },
 
             render: function (el) {
+                if ( el ) el.html( this.getPanel() );
+
                 return this;
             },
 
+            getPanel: function () {
+                this.$el = $(_.template(template)( {} ));
+                var $host = this.$el;
+
+                this.btnSheetView && this.btnSheetView.render($host.find('#slot-btn-sheet-view'));
+                this.btnCreateView && this.btnCreateView.render($host.find('#slot-createview'));
+                this.btnCloseView && this.btnCloseView.render($host.find('#slot-closeview'));
+                this.btnFreezePanes && this.btnFreezePanes.render($host.find('#slot-btn-freeze'));
+                this.cmbZoom.render($host.find('#slot-field-zoom'));
+                this.cmbZoom.setValue(100);
+                $host.find('#slot-lbl-zoom').text(this.textZoom);
+                this.btnInterfaceTheme.render($host.find('#slot-btn-interface-theme'));
+                this.chFormula.render($host.find('#slot-chk-formula'));
+                this.chStatusbar.render($host.find('#slot-chk-statusbar'));
+                this.chToolbar.render($host.find('#slot-chk-toolbar'));
+                this.chHeadings && this.chHeadings.render($host.find('#slot-chk-heading'));
+                this.chGridlines && this.chGridlines.render($host.find('#slot-chk-gridlines'));
+                this.chZeros && this.chZeros.render($host.find('#slot-chk-zeros'));
+                return this.$el;
+            },
+
             onAppReady: function (config) {
                 var me = this;
                 (new Promise(function (accept, reject) {
                     accept();
                 })).then(function(){
-                    if (!config.canFeatureViews) {
+                    if (!(config.canFeatureViews && me.appConfig.isEdit)) {
                         me.toolbar && me.toolbar.$el.find('.group.sheet-views').hide();
                         me.toolbar && me.toolbar.$el.find('.separator.sheet-views').hide();
                     } else {
@@ -287,31 +353,49 @@ define([
                         me.btnCreateView.updateHint(me.tipCreate);
                         me.btnCloseView.updateHint(me.tipClose);
                     }
-                    me.btnFreezePanes.setMenu(new Common.UI.Menu({
-                        items: [
-                            {
-                                caption: me.toolbar && me.toolbar.api && !!me.toolbar.api.asc_getSheetViewSettings().asc_getIsFreezePane() ? me.textUnFreeze : me.capBtnFreeze,
-                                value: undefined
-                            },
-                            {
-                                caption: me.textFreezeRow,
-                                value: Asc.c_oAscFrozenPaneAddType.firstRow
-                            },
-                            {
-                                caption: me.textFreezeCol,
-                                value: Asc.c_oAscFrozenPaneAddType.firstCol
-                            },
-                            { caption: '--' },
-                            {
-                                caption: me.textShowFrozenPanesShadow,
-                                value: 'shadow',
-                                checkable: true,
-                                checked: Common.localStorage.getBool('sse-freeze-shadow', true)
-                            }
-                        ]
-                    }));
-                    me.btnFreezePanes.updateHint(me.tipFreeze);
 
+                    if (config.isEdit) {
+                        me.btnFreezePanes.setMenu(new Common.UI.Menu({
+                            items: [
+                                {
+                                    caption: me.toolbar && me.toolbar.api && !!me.toolbar.api.asc_getSheetViewSettings().asc_getIsFreezePane() ? me.textUnFreeze : me.capBtnFreeze,
+                                    value: undefined
+                                },
+                                {
+                                    caption: me.textFreezeRow,
+                                    value: Asc.c_oAscFrozenPaneAddType.firstRow
+                                },
+                                {
+                                    caption: me.textFreezeCol,
+                                    value: Asc.c_oAscFrozenPaneAddType.firstCol
+                                },
+                                { caption: '--' },
+                                {
+                                    caption: me.textShowFrozenPanesShadow,
+                                    value: 'shadow',
+                                    checkable: true,
+                                    checked: Common.localStorage.getBool('sse-freeze-shadow', true)
+                                }
+                            ]
+                        }));
+                        me.btnFreezePanes.updateHint(me.tipFreeze);
+                    } else {
+                        me.toolbar && me.toolbar.$el.find('.group.sheet-freeze').hide();
+                        me.toolbar && me.toolbar.$el.find('.separator.sheet-freeze').hide();
+                        me.toolbar && me.toolbar.$el.find('.group.sheet-gridlines').hide();
+                    }
+
+                    if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
+                        me.chStatusbar.$el.remove();
+                        if (!config.isEdit) {
+                            var slotChkFormula = me.chFormula.$el,
+                                groupFormula = slotChkFormula.closest('.group'),
+                                groupToolbar = me.chToolbar.$el.closest('.group');
+                            groupToolbar.find('.elset')[1].append(slotChkFormula[0]);
+                            groupFormula.remove();
+                            me.$el.find('.separator-formula').remove();
+                        }
+                    }
                     var menuItems = [],
                         currentTheme = Common.UI.Themes.currentThemeId() || Common.UI.Themes.defaultThemeId();
                     for (var t in Common.UI.Themes.map()) {