Merge pull request #2030 from ONLYOFFICE/feature/view-tab-settings

Feature/view tab settings

apps/api/documents/api.js

@@ -175,9 +175,12 @@
                         },
                         leftMenu: {
                             navigation: false/true,
-                            spellcheck: false/true // spellcheck button in sse
+                            spellcheck: false/true // spellcheck button in sse,
+                            mode: false/true // init value for left panel, true - is visible, false - is hidden, used for option "Left panel" on the View Tab
                         } / false / true, // use instead of customization.leftMenu
-                        rightMenu: false/true, // use instead of customization.rightMenu
+                        rightMenu: {
+                            mode: false/true // init value for right panel, true - is visible, false - is hidden, used for option "Right panel" on the View Tab
+                        } / false/true, // use instead of customization.rightMenu
                         statusBar: {
                             textLang: false/true // text language button in de/pe
                             docLang: false/true // document language button in de/pe

apps/common/main/lib/controller/LayoutManager.js

@@ -47,14 +47,16 @@ if (Common.UI === undefined) {
 }
 
 Common.UI.LayoutManager = new(function() {
-    var _config;
+    var _config,
-    var _init = function(config) {
+        _licensed;
+    var _init = function(config, licensed) {
         _config = config;
+        _licensed = licensed;
     };
 
     var _applyCustomization = function(config, el, prefix) {
         !config && (config = _config);
-        if (!config) return;
+        if (!_licensed || !config) return;
 
         for (var name in config) {
             if(config.hasOwnProperty(name)) {
@@ -71,7 +73,7 @@ Common.UI.LayoutManager = new(function() {
 
     var _isElementVisible = function(value, config, prefix) {
         !config && (config = _config);
-        if (!config) return true;
+        if (!_licensed || !config) return true;
 
         var res = true;
         for (var name in config) {
@@ -89,10 +91,31 @@ Common.UI.LayoutManager = new(function() {
         return res;
     };
 
+    var _getInitValue = function(name) {
+        if (_licensed && _config) {
+            var arr = name.split('-'),
+                i = 0,
+                obj = _config;
+            for (i=0; i<arr.length; i++) {
+                if (typeof obj[arr[i]] === 'object' && obj[arr[i]]) {
+                    obj = obj[arr[i]];
+                } else
+                    break;
+            }
+            if (i===arr.length) {
+                if (typeof obj === 'object' && obj)
+                    return obj.mode;
+                else
+                    return obj;
+            }
+        }
+    };
+
     return {
         init: _init,
         applyCustomization: _applyCustomization,
-        isElementVisible: _isElementVisible
+        isElementVisible: _isElementVisible,
+        getInitValue: _getInitValue
     }
 })();
 

apps/documenteditor/main/app/controller/LeftMenu.js

@@ -100,7 +100,8 @@ define([
                     'collaboration:chat': _.bind(this.onShowHideChat, this)
                 },
                 'ViewTab': {
-                    'viewtab:navigation': _.bind(this.onShowHideNavigation, this)
+                    'viewtab:navigation': _.bind(this.onShowHideNavigation, this),
+                    'leftmenu:hide': _.bind(this.onLeftMenuHide, this)
                 },
                 'SearchBar': {
                     'search:show': _.bind(this.onShowHideSearch, this)
@@ -831,6 +832,7 @@ define([
         onPluginOpen: function(panel, type, action) {
             if ( type == 'onboard' ) {
                 if ( action == 'open' ) {
+                    this.tryToShowLeftMenu();
                     this.leftMenu.close();
                     this.leftMenu.panelPlugins.show();
                     this.leftMenu.onBtnMenuClick({pressed:true, options: {action: 'plugins'}});
@@ -857,6 +859,7 @@ define([
             if (this.mode.canCoAuthoring && this.mode.canChat && !this.mode.isLightVersion) {
                 if (state) {
                     Common.UI.Menu.Manager.hideAll();
+                    this.tryToShowLeftMenu();
                     this.leftMenu.showMenu('chat');
                 } else {
                     this.leftMenu.btnChat.toggle(false, true);
@@ -868,6 +871,7 @@ define([
         onShowHideNavigation: function(state) {
             if (state) {
                 Common.UI.Menu.Manager.hideAll();
+                this.tryToShowLeftMenu();
                 this.leftMenu.showMenu('navigation');
             } else {
                 this.leftMenu.btnNavigation.toggle(false, true);
@@ -912,6 +916,24 @@ define([
             }
         },
 
+        onLeftMenuHide: function (view, status) {
+            if (this.leftMenu) {
+                !status && this.leftMenu.close();
+                status ? this.leftMenu.show() : this.leftMenu.hide();
+                Common.localStorage.setBool('de-hidden-leftmenu', !status);
+
+                !view && this.leftMenu.fireEvent('view:hide', [this, !status]);
+            }
+
+            Common.NotificationCenter.trigger('layout:changed', 'main');
+            Common.NotificationCenter.trigger('edit:complete', this.leftMenu);
+        },
+
+        tryToShowLeftMenu: function() {
+            if ((!this.mode.canBrandingExt || !this.mode.customization || this.mode.customization.leftMenu !== false) && Common.UI.LayoutManager.isElementVisible('leftMenu'))
+                this.onLeftMenuHide(null, true);
+        },
+
         textNoTextFound         : 'Text not found',
         newDocumentTitle        : 'Unnamed document',
         requestEditRightsText   : 'Requesting editing rights...',

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

@@ -1566,7 +1566,7 @@ define([
                 this.appOptions.canRename && appHeader.setCanRename(true);
                 this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);
                 this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions, this.api);
-                this.appOptions.canBrandingExt && this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout);
+                this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt);
                 this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);
 
                 if (this.appOptions.canComments)
@@ -1663,6 +1663,8 @@ define([
                 toolbarController.setMode(this.appOptions);
                 documentHolder.setMode(this.appOptions);
 
+                viewport.applyCommonMode();
+
                 this.api.asc_registerCallback('asc_onSendThemeColors', _.bind(this.onSendThemeColors, this));
                 this.api.asc_registerCallback('asc_onDownloadUrl',     _.bind(this.onDownloadUrl, this));
                 this.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(this.onAuthParticipantsChanged, this));

apps/documenteditor/main/app/controller/RightMenu.js

@@ -65,6 +65,9 @@ define([
             this.addListeners({
                 'RightMenu': {
                     'rightmenuclick': this.onRightMenuClick
+                },
+                'ViewTab': {
+                    'rightmenu:hide': _.bind(this.onRightMenuHide, this)
                 }
             });
 
@@ -491,6 +494,17 @@ define([
                         this.onFocusObject(selectedElements);
                 }
             }
+        },
+
+        onRightMenuHide: function (view, status) {
+            if (this.rightmenu) {
+                !status && this.rightmenu.clearSelection();
+                status ? this.rightmenu.show() : this.rightmenu.hide();
+                Common.localStorage.setBool('de-hidden-rightmenu', !status);
+            }
+
+            Common.NotificationCenter.trigger('layout:changed', 'main');
+            Common.NotificationCenter.trigger('edit:complete', this.rightmenu);
         }
     });
 });

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

@@ -98,6 +98,11 @@ define([
                     'view:hide': _.bind(function (statusbar, state) {
                         this.view.chStatusbar.setValue(!state, true);
                     }, this)
+                },
+                'LeftMenu': {
+                    'view:hide': _.bind(function (leftmenu, state) {
+                        this.view.chLeftMenu.setValue(!state, true);
+                    }, this)
                 }
             });
         },
@@ -131,18 +136,35 @@ define([
                         me.view.btnInterfaceTheme.$el.closest('.group').remove();
                         me.view.$el.find('.separator-theme').remove();
                     }
+                    var emptyGroup = [];
                     if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
+                        emptyGroup.push(me.view.chStatusbar.$el.closest('.elset'));
                         me.view.chStatusbar.$el.remove();
-                        var slotChkRulers = me.view.chRulers.$el,
-                            groupRulers = slotChkRulers.closest('.group'),
-                            groupToolbar = me.view.chToolbar.$el.closest('.group');
-                        groupToolbar.find('.elset')[1].append(slotChkRulers[0]);
-                        groupRulers.remove();
-                        me.view.$el.find('.separator-rulers').remove();
                     }
 
-                    if (!config.isEdit) { // if view tab will be visible in view/restricted-editing mode
+                    if (config.canBrandingExt && config.customization && config.customization.leftMenu === false || !Common.UI.LayoutManager.isElementVisible('leftMenu')) {
-                        me.view.chRulers.hide();
+                        emptyGroup.push(me.view.chLeftMenu.$el.closest('.elset'));
+                        me.view.chLeftMenu.$el.remove();
+                    } else if (emptyGroup.length>0) {
+                        emptyGroup.push(me.view.chLeftMenu.$el.closest('.elset'));
+                        emptyGroup.shift().append(me.view.chLeftMenu.$el[0]);
+                    }
+
+                    if (!config.isEdit || config.canBrandingExt && config.customization && config.customization.rightMenu === false || !Common.UI.LayoutManager.isElementVisible('rightMenu')) {
+                        emptyGroup.push(me.view.chRightMenu.$el.closest('.elset'));
+                        me.view.chRightMenu.$el.remove();
+                    } else if (emptyGroup.length>0) {
+                        emptyGroup.push(me.view.chRightMenu.$el.closest('.elset'));
+                        emptyGroup.shift().append(me.view.chRightMenu.$el[0]);
+                    }
+
+                    if (emptyGroup.length>1) { // remove empty group
+                        emptyGroup[emptyGroup.length-1].closest('.group').remove();
+                    }
+
+                    if (!config.isEdit) {
+                        me.view.chRulers.$el.closest('.group').remove();
+                        me.view.chRulers.$el.remove();
                         me.view.$el.find('.separator-rulers').remove();
                     }
 

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

@@ -202,7 +202,8 @@ define([
                     this.$el.width(parseInt(Common.localStorage.getItem('de-mainmenu-width')) || MENU_SCALE_PART);
                 }
             } else if (!this._state.pluginIsRunning) {
-                this.isVisible() && Common.localStorage.setItem('de-mainmenu-width',this.$el.width());
+                var width = this.$el.width();
+                this.isVisible() && (width>SCALE_MIN) && Common.localStorage.setItem('de-mainmenu-width', width);
                 this.$el.width(SCALE_MIN);
             }
 
@@ -327,7 +328,7 @@ define([
                 }
                 if (this.panelNavigation) {
                     this.panelNavigation['hide']();
-                    this.btnNavigation.toggle(false, true);
+                    this.btnNavigation.toggle(false);
                 }
                 if (this.panelSearch) {
                     this.panelSearch['hide']();

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

@@ -82,6 +82,14 @@ define([
                     '<span class="btn-slot text" id="slot-chk-statusbar"></span>' +
                 '</div>' +
             '</div>' +
+            '<div class="group small">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-leftmenu"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-rightmenu"></span>' +
+                '</div>' +
+            '</div>' +
             '<div class="separator long separator-rulers"></div>' +
             '<div class="group small">' +
                 '<div class="elset">' +
@@ -114,6 +122,12 @@ define([
                 me.chRulers.on('change', _.bind(function (checkbox, state) {
                     me.fireEvent('rulers:change', [me.chRulers, state === 'checked']);
                 }, me));
+                me.chLeftMenu.on('change', _.bind(function (checkbox, state) {
+                    me.fireEvent('leftmenu:hide', [me.chLeftMenu, state === 'checked']);
+                }, me));
+                me.chRightMenu.on('change', _.bind(function (checkbox, state) {
+                    me.fireEvent('rightmenu:hide', [me.chRightMenu, state === 'checked']);
+                }, me));
                 me.btnDarkDocument.on('click', _.bind(function () {
                     me.fireEvent('darkmode:change');
                 }, me));
@@ -237,6 +251,24 @@ define([
                 });
                 this.lockedControls.push(this.chToolbar);
 
+                this.chRightMenu = new Common.UI.CheckBox({
+                    lock: [_set.lostConnect, _set.disableOnStart],
+                    labelText: this.textRightMenu,
+                    dataHint    : '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chRightMenu);
+
+                this.chLeftMenu = new Common.UI.CheckBox({
+                    lock: [_set.lostConnect, _set.disableOnStart],
+                    labelText: this.textLeftMenu,
+                    dataHint    : '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chLeftMenu);
+
                 this.chRulers = new Common.UI.CheckBox({
                     lock: [_set.lostConnect, _set.disableOnStart],
                     labelText: this.textRulers,
@@ -271,6 +303,8 @@ define([
                 this.chStatusbar.render($host.find('#slot-chk-statusbar'));
                 this.chToolbar.render($host.find('#slot-chk-toolbar'));
                 this.chRulers.render($host.find('#slot-chk-rulers'));
+                this.chLeftMenu.render($host.find('#slot-chk-leftmenu'));
+                this.chRightMenu.render($host.find('#slot-chk-rightmenu'));
                 return this.$el;
             },
 
@@ -280,6 +314,14 @@ define([
                 this.btnFitToWidth.updateHint(this.tipFitToWidth);
                 this.btnInterfaceTheme.updateHint(this.tipInterfaceTheme);
                 this.btnDarkDocument.updateHint(this.tipDarkDocument);
+
+                var value = Common.UI.LayoutManager.getInitValue('leftMenu');
+                value = (value!==undefined) ? !value : false;
+                this.chLeftMenu.setValue(!Common.localStorage.getBool("de-hidden-leftmenu", value));
+
+                value = Common.UI.LayoutManager.getInitValue('rightMenu');
+                value = (value!==undefined) ? !value : false;
+                this.chRightMenu.setValue(!Common.localStorage.getBool("de-hidden-rightmenu", value));
             },
 
             show: function () {
@@ -327,7 +369,9 @@ define([
             tipFitToPage: 'Fit to page',
             tipFitToWidth: 'Fit to width',
             tipInterfaceTheme: 'Interface theme',
-            tipDarkDocument: 'Dark document'
+            tipDarkDocument: 'Dark document',
+            textLeftMenu: 'Left panel',
+            textRightMenu: 'Right panel'
         }
     }()), DE.Views.ViewTab || {}));
 });

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

@@ -141,9 +141,18 @@ define([
                 rightMenuView   = DE.getController('RightMenu').getView('RightMenu');
 
             me._rightMenu   = rightMenuView.render(this.mode);
+            var value = Common.UI.LayoutManager.getInitValue('rightMenu');
+            value = (value!==undefined) ? !value : false;
+            Common.localStorage.getBool("de-hidden-rightmenu", value) && me._rightMenu.hide();
+        },
 
+        applyCommonMode: function() {
             if ( Common.localStorage.getBool('de-hidden-status') )
                 DE.getController('Statusbar').getView('Statusbar').setVisible(false);
+
+            var value = Common.UI.LayoutManager.getInitValue('leftMenu');
+            value = (value!==undefined) ? !value : false;
+            Common.localStorage.getBool("de-hidden-leftmenu", value) && DE.getController('LeftMenu').getView('LeftMenu').hide();
         },
 
         setMode: function(mode) {

apps/documenteditor/main/locale/en.json

@@ -3160,6 +3160,8 @@
   "DE.Views.ViewTab.tipFitToWidth": "Fit to width",
   "DE.Views.ViewTab.tipHeadings": "Headings",
   "DE.Views.ViewTab.tipInterfaceTheme": "Interface theme",
+  "DE.Views.ViewTab.textLeftMenu": "Left panel",
+  "DE.Views.ViewTab.textRightMenu": "Right panel",
   "DE.Views.WatermarkSettingsDialog.textAuto": "Auto",
   "DE.Views.WatermarkSettingsDialog.textBold": "Bold",
   "DE.Views.WatermarkSettingsDialog.textColor": "Text color",

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

@@ -100,6 +100,9 @@ define([
                 },
                 'SearchBar': {
                     'search:show': _.bind(this.onShowHideSearch, this)
+                },
+                'ViewTab': {
+                    'leftmenu:hide': _.bind(this.onLeftMenuHide, this)
                 }
             });
             Common.NotificationCenter.on('leftmenu:change', _.bind(this.onMenuChange, this));
@@ -112,7 +115,6 @@ define([
         onLaunch: function() {
             this.leftMenu = this.createView('LeftMenu').render();
             this.leftMenu.btnThumbs.on('toggle', _.bind(this.onShowTumbnails, this));
-            this.isThumbsShown = true;
             this.leftMenu.btnSearchBar.on('toggle', _.bind(this.onMenuSearchBar, this));
 
             Common.util.Shortcuts.delegateShortcuts({
@@ -162,7 +164,11 @@ define([
             this.leftMenu.getMenu('file').setApi(api);
             if (this.mode.canUseHistory)
                 this.getApplication().getController('Common.Controllers.History').setApi(this.api).setMode(this.mode);
-            this.leftMenu.btnThumbs.toggle(true);
+
+            var value = Common.UI.LayoutManager.getInitValue('leftMenu');
+            value = (value!==undefined) ? !value : false;
+            this.isThumbsShown = !Common.localStorage.getBool("pe-hidden-leftmenu", value);
+            this.leftMenu.btnThumbs.toggle(this.isThumbsShown);
             this.getApplication().getController('Search').setApi(this.api).setMode(this.mode);
             this.leftMenu.setOptionsPanel('advancedsearch', this.getApplication().getController('Search').getView('Common.Views.SearchPanel'));
             return this;
@@ -665,6 +671,7 @@ define([
         onPluginOpen: function(panel, type, action) {
             if (type == 'onboard') {
                 if (action == 'open') {
+                    this.tryToShowLeftMenu();
                     this.leftMenu.close();
                     this.leftMenu.btnThumbs.toggle(false, false);
                     this.leftMenu.panelPlugins.show();
@@ -698,6 +705,7 @@ define([
             if (this.mode.canCoAuthoring && this.mode.canChat && !this.mode.isLightVersion) {
                 if (state) {
                     Common.UI.Menu.Manager.hideAll();
+                    this.tryToShowLeftMenu();
                     this.leftMenu.showMenu('chat');
                 } else {
                     this.leftMenu.btnChat.toggle(false, true);
@@ -767,6 +775,29 @@ define([
             return this.leftMenu && this.leftMenu.panelComments && this.leftMenu.panelComments.isVisible();
         },
 
+        onLeftMenuHide: function (view, status) {
+            if (this.leftMenu) {
+                if (status) {
+                    this.leftMenu.show();
+                } else {
+                    this.menuExpand(this, 'thumbs', false);
+                    this.leftMenu.close();
+                    this.leftMenu.hide();
+                }
+                Common.localStorage.setBool('pe-hidden-leftmenu', !status);
+
+                !view && this.leftMenu.fireEvent('view:hide', [this, !status]);
+            }
+
+            Common.NotificationCenter.trigger('layout:changed', 'main');
+            Common.NotificationCenter.trigger('edit:complete', this.leftMenu);
+        },
+
+        tryToShowLeftMenu: function() {
+            if ((!this.mode.canBrandingExt || !this.mode.customization || this.mode.customization.leftMenu !== false) && Common.UI.LayoutManager.isElementVisible('leftMenu'))
+                this.onLeftMenuHide(null, true);
+        },
+
         textNoTextFound         : 'Text not found',
         newDocumentTitle        : 'Unnamed document',
         requestEditRightsText   : 'Requesting editing rights...',

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

@@ -1223,7 +1223,7 @@ define([
                 this.appOptions.canRename && appHeader.setCanRename(true);
                 this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);
                 this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions);
-                this.appOptions.canBrandingExt && this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout);
+                this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt);
                 this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);
 
                 // change = true by default in editor
@@ -1306,6 +1306,7 @@ define([
                 statusbarView && statusbarView.setMode(this.appOptions);
                 toolbarController.setMode(this.appOptions);
                 documentHolder.setMode(this.appOptions);
+                viewport.applyCommonMode();
 
                 this.api.asc_registerCallback('asc_onSendThemeColors', _.bind(this.onSendThemeColors, this));
                 this.api.asc_registerCallback('asc_onDownloadUrl',     _.bind(this.onDownloadUrl, this));

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

@@ -61,6 +61,9 @@ define([
             this.addListeners({
                 'RightMenu': {
                     'rightmenuclick': this.onRightMenuClick
+                },
+                'ViewTab': {
+                    'rightmenu:hide': _.bind(this.onRightMenuHide, this)
                 }
             });
         },
@@ -384,6 +387,17 @@ define([
                 case Asc.c_oAscTypeSelectElement.Chart:
                     return Common.Utils.documentSettingsType.Chart;
             }
+        },
+
+        onRightMenuHide: function (view, status) {
+            if (this.rightmenu) {
+                !status && this.rightmenu.clearSelection();
+                status ? this.rightmenu.show() : this.rightmenu.hide();
+                Common.localStorage.setBool('pe-hidden-rightmenu', !status);
+            }
+
+            Common.NotificationCenter.trigger('layout:changed', 'main');
+            Common.NotificationCenter.trigger('edit:complete', this.rightmenu);
         }
     });
 });

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

@@ -127,6 +127,11 @@ define([
                     'gridlines:spacing': _.bind(this.onGridlinesSpacing, this),
                     'gridlines:custom': _.bind(this.onGridlinesCustom, this),
                     'rulers:change': _.bind(this.onChangeRulers, this)
+                },
+                'LeftMenu': {
+                    'view:hide': _.bind(function (leftmenu, state) {
+                        this.view.chLeftMenu.setValue(!state, true);
+                    }, this)
                 }
             });
         },

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

@@ -182,8 +182,9 @@ define([
                 if (!btn.pressed && this._state.pluginIsRunning) {
                     this.$el.width(Common.localStorage.getItem('pe-mainmenu-width') || MENU_SCALE_PART);
                 } else {
-                    if (this.$el.width() > SCALE_MIN) {
+                    var width = this.$el.width();
-                        Common.localStorage.setItem('pe-mainmenu-width',this.$el.width());
+                    if (width > SCALE_MIN) {
+                        Common.localStorage.setItem('pe-mainmenu-width',width);
                         this.$el.width(SCALE_MIN);
                     }
                     if (this._state.pluginIsRunning) // hide comments or chat panel when plugin is running
@@ -195,7 +196,8 @@ define([
                         this.$el.width(Common.localStorage.getItem('pe-mainmenu-width') || MENU_SCALE_PART);
                     }
                 } else if (!this._state.pluginIsRunning){
-                    this.isVisible() && Common.localStorage.setItem('pe-mainmenu-width',this.$el.width());
+                    var width = this.$el.width();
+                    this.isVisible() && (width>SCALE_MIN) && Common.localStorage.setItem('pe-mainmenu-width',width);
                     this.$el.width(SCALE_MIN);
                 }
                 this.onCoauthOptions();

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

@@ -90,6 +90,14 @@ define([
                         '<span class="btn-slot text" id="slot-chk-statusbar"></span>' +
                     '</div>' +
                 '</div>' +
+                '<div class="group small">' +
+                    '<div class="elset">' +
+                        '<span class="btn-slot text" id="slot-chk-leftmenu"></span>' +
+                    '</div>' +
+                    '<div class="elset">' +
+                        '<span class="btn-slot text" id="slot-chk-rightmenu"></span>' +
+                    '</div>' +
+                '</div>' +
             '</section>';
         return {
             options: {},
@@ -159,6 +167,12 @@ define([
                 me.btnGridlines.menu.on('show:after', _.bind(function(btn, state) {
                     me.fireEvent('gridlines:aftershow');
                 }, me));
+                me.chLeftMenu.on('change', _.bind(function (checkbox, state) {
+                    me.fireEvent('leftmenu:hide', [me.chLeftMenu, state === 'checked']);
+                }, me));
+                me.chRightMenu.on('change', _.bind(function (checkbox, state) {
+                    me.fireEvent('rightmenu:hide', [me.chRightMenu, state === 'checked']);
+                }, me));
             },
 
             initialize: function (options) {
@@ -305,6 +319,24 @@ define([
                 });
                 this.lockedControls.push(this.btnGridlines);
 
+                this.chRightMenu = new Common.UI.CheckBox({
+                    lock: [_set.disableOnStart],
+                    labelText: this.textRightMenu,
+                    dataHint    : '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chRightMenu);
+
+                this.chLeftMenu = new Common.UI.CheckBox({
+                    lock: [_set.disableOnStart],
+                    labelText: this.textLeftMenu,
+                    dataHint    : '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chLeftMenu);
+
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             },
 
@@ -329,6 +361,8 @@ define([
                 this.chNotes.render($host.find('#slot-chk-notes'));
                 this.btnGuides.render($host.find('#slot-btn-guides'));
                 this.btnGridlines.render($host.find('#slot-btn-gridlines'));
+                this.chLeftMenu.render($host.find('#slot-chk-leftmenu'));
+                this.chRightMenu.render($host.find('#slot-chk-rightmenu'));
                 return this.$el;
             },
 
@@ -371,18 +405,33 @@ define([
                         me.btnInterfaceTheme.$el.closest('.group').remove();
                         me.$el.find('.separator-theme').remove();
                     }
-                    if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
-                        me.chStatusbar.$el.remove();
 
-                        if (!config.isEdit) {
+                    var emptyGroup = [];
-                            var slotChkNotes = me.chNotes.$el,
+                    if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
-                                groupRulers = slotChkNotes.closest('.group'),
+                        emptyGroup.push(me.chStatusbar.$el.closest('.elset'));
-                                groupToolbar = me.chToolbar.$el.closest('.group');
+                        me.chStatusbar.$el.remove();
-                            groupToolbar.find('.elset')[1].append(slotChkNotes[0]);
+                    }
-                            groupRulers.remove();
+
-                            me.$el.find('.separator-rulers').remove();
+                    if (config.canBrandingExt && config.customization && config.customization.leftMenu === false || !Common.UI.LayoutManager.isElementVisible('leftMenu')) {
-                        }
+                        emptyGroup.push(me.chLeftMenu.$el.closest('.elset'));
-                    } else if (!config.isEdit) {
+                        me.chLeftMenu.$el.remove();
+                    } else if (emptyGroup.length>0) {
+                        emptyGroup.push(me.chLeftMenu.$el.closest('.elset'));
+                        emptyGroup.shift().append(me.chLeftMenu.$el[0]);
+                    }
+
+                    if (!config.isEdit || config.canBrandingExt && config.customization && config.customization.rightMenu === false || !Common.UI.LayoutManager.isElementVisible('rightMenu')) {
+                        emptyGroup.push(me.chRightMenu.$el.closest('.elset'));
+                        me.chRightMenu.$el.remove();
+                    } else if (emptyGroup.length>0) {
+                        emptyGroup.push(me.chRightMenu.$el.closest('.elset'));
+                        emptyGroup.shift().append(me.chRightMenu.$el[0]);
+                    }
+                    if (emptyGroup.length>1) { // remove empty group
+                        emptyGroup[emptyGroup.length-1].closest('.group').remove();
+                    }
+
+                    if (!config.isEdit) {
                         me.chRulers.hide();
                     }
                     if (!config.isEdit) {
@@ -418,6 +467,14 @@ define([
                         }
                     }
 
+                    var value = Common.UI.LayoutManager.getInitValue('leftMenu');
+                    value = (value!==undefined) ? !value : false;
+                    me.chLeftMenu.setValue(!Common.localStorage.getBool("pe-hidden-leftmenu", value));
+
+                    value = Common.UI.LayoutManager.getInitValue('rightMenu');
+                    value = (value!==undefined) ? !value : false;
+                    me.chRightMenu.setValue(!Common.localStorage.getBool("pe-hidden-rightmenu", value));
+
                     me.setEvents();
                 });
             },
@@ -472,7 +529,9 @@ define([
             textShowGridlines: 'Show Gridlines',
             textSnapObjects: 'Snap Object to Grid',
             textCm: 'cm',
-            textCustom: 'Custom'
+            textCustom: 'Custom',
+            textLeftMenu: 'Left panel',
+            textRightMenu: 'Right panel'
 
         }
     }()), PE.Views.ViewTab || {}));

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

@@ -138,10 +138,22 @@ define([
         },
 
         applyEditorMode: function() {
-            PE.getController('RightMenu').getView('RightMenu').render(this.mode);
+            var me              = this,
+                rightMenuView   = PE.getController('RightMenu').getView('RightMenu');
 
+            me._rightMenu   = rightMenuView.render(this.mode);
+            var value = Common.UI.LayoutManager.getInitValue('rightMenu');
+            value = (value!==undefined) ? !value : false;
+            Common.localStorage.getBool("pe-hidden-rightmenu", value) && me._rightMenu.hide();
+        },
+
+        applyCommonMode: function() {
             if ( Common.localStorage.getBool('pe-hidden-status') )
                 PE.getController('Statusbar').getView('Statusbar').setVisible(false);
+
+            var value = Common.UI.LayoutManager.getInitValue('leftMenu');
+            value = (value!==undefined) ? !value : false;
+            Common.localStorage.getBool("pe-hidden-leftmenu", value) && PE.getController('LeftMenu').getView('LeftMenu').hide();
         },
 
         setMode: function(mode, delay) {

apps/presentationeditor/main/locale/en.json

@@ -2605,5 +2605,7 @@
   "PE.Views.ViewTab.tipFitToWidth": "Fit to width",
   "PE.Views.ViewTab.tipGridlines": "Show gridlines",
   "PE.Views.ViewTab.tipGuides": "Show Guides",
-  "PE.Views.ViewTab.tipInterfaceTheme": "Interface theme"
+  "PE.Views.ViewTab.tipInterfaceTheme": "Interface theme",
+  "PE.Views.ViewTab.textLeftMenu": "Left panel",
+  "PE.Views.ViewTab.textRightMenu": "Right panel"
 }

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

@@ -93,6 +93,9 @@ define([
                 },
                 'SearchBar': {
                     'search:show': _.bind(this.onShowHideSearch, this)
+                },
+                'ViewTab': {
+                    'leftmenu:hide': _.bind(this.onLeftMenuHide, this)
                 }
             });
             Common.NotificationCenter.on('app:comment:add', _.bind(this.onAppAddComment, this));
@@ -826,6 +829,7 @@ define([
         onPluginOpen: function(panel, type, action) {
             if (type == 'onboard') {
                 if (action == 'open') {
+                    this.tryToShowLeftMenu();
                     this.leftMenu.close();
                     this.leftMenu.panelPlugins.show();
                     this.leftMenu.onBtnMenuClick({pressed: true, options: {action: 'plugins'}});
@@ -841,6 +845,7 @@ define([
             if (this.mode.canCoAuthoring && this.mode.canChat && !this.mode.isLightVersion) {
                 if (state) {
                     Common.UI.Menu.Manager.hideAll();
+                    this.tryToShowLeftMenu();
                     this.leftMenu.showMenu('chat');
                 } else {
                     this.leftMenu.btnChat.toggle(false, true);
@@ -904,6 +909,24 @@ define([
             return this.leftMenu && this.leftMenu.panelComments && this.leftMenu.panelComments.isVisible();
         },
 
+        onLeftMenuHide: function (view, status) {
+            if (this.leftMenu) {
+                !status && this.leftMenu.close();
+                status ? this.leftMenu.show() : this.leftMenu.hide();
+                Common.localStorage.setBool('sse-hidden-leftmenu', !status);
+
+                !view && this.leftMenu.fireEvent('view:hide', [this, !status]);
+            }
+
+            Common.NotificationCenter.trigger('layout:changed', 'main');
+            Common.NotificationCenter.trigger('edit:complete', this.leftMenu);
+        },
+
+        tryToShowLeftMenu: function() {
+            if ((!this.mode.canBrandingExt || !this.mode.customization || this.mode.customization.leftMenu !== false) && Common.UI.LayoutManager.isElementVisible('leftMenu'))
+                this.onLeftMenuHide(null, true);
+        },
+
         textNoTextFound        : 'Text not found',
         newDocumentTitle        : 'Unnamed document',
         textItemEntireCell      : 'Entire cell contents',

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

@@ -1320,7 +1320,7 @@ define([
                 if (!this.appOptions.isEditDiagram && !this.appOptions.isEditMailMerge && !this.appOptions.isEditOle) {
                     this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);
                     this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions);
-                    this.appOptions.canBrandingExt && this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout);
+                    this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt);
                     this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);
                 }
 
@@ -1412,6 +1412,8 @@ define([
                 app.getController('Toolbar').setMode(this.appOptions);
                 app.getController('DocumentHolder').setMode(this.appOptions);
 
+                viewport && viewport.applyCommonMode();
+
                 if (this.appOptions.isEditMailMerge || this.appOptions.isEditDiagram) {
                     statusbarView.hide();
                 }

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

@@ -69,6 +69,9 @@ define([
                 },
                 'PivotTable': {
                     'insertpivot': this.onInsertPivot
+                },
+                'ViewTab': {
+                    'rightmenu:hide': this.onRightMenuHide.bind(this)
                 }
             });
 
@@ -466,6 +469,17 @@ define([
                 this._state.wsLock = props.wsLock;
             }
             this.onSelectionChanged(this.api.asc_getCellInfo());
+        },
+
+        onRightMenuHide: function (view, status) {
+            if (this.rightmenu) {
+                !status && this.rightmenu.clearSelection();
+                status ? this.rightmenu.show() : this.rightmenu.hide();
+                Common.localStorage.setBool('sse-hidden-rightmenu', !status);
+            }
+
+            Common.NotificationCenter.trigger('layout:changed', 'main');
+            Common.NotificationCenter.trigger('edit:complete', this.rightmenu);
         }
     });
 });

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

@@ -111,6 +111,11 @@ define([
                     'view:compact': _.bind(function (toolbar, state) {
                         this.view.chToolbar.setValue(!state, true);
                     }, this)
+                },
+                'LeftMenu': {
+                    'view:hide': _.bind(function (leftmenu, state) {
+                        this.view.chLeftMenu.setValue(!state, true);
+                    }, this)
                 }
             });
             Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this));

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

@@ -179,7 +179,8 @@ define([
                     this.$el.width(Common.localStorage.getItem('sse-mainmenu-width') || MENU_SCALE_PART);
                 }
             } else if (!this._state.pluginIsRunning){
-                this.isVisible() && Common.localStorage.setItem('sse-mainmenu-width',this.$el.width());
+                var width = this.$el.width();
+                this.isVisible() && (width>SCALE_MIN) && Common.localStorage.setItem('sse-mainmenu-width',width);
                 this.$el.width(SCALE_MIN);
             }
             this.onCoauthOptions();

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

@@ -101,6 +101,14 @@ define([
                     '<span class="btn-slot text" id="slot-chk-statusbar"></span>' +
                 '</div>' +
             '</div>' +
+            '<div class="group small">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-leftmenu"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-chk-rightmenu"></span>' +
+                '</div>' +
+            '</div>' +
         '</section>';
 
         function setEvents() {
@@ -149,6 +157,12 @@ define([
                 me.fireEvent('editcomplete', me);
             }).on('combo:focusin', _.bind(this.onComboOpen, this, false))
               .on('show:after', _.bind(this.onComboOpen, this, true));
+            me.chLeftMenu.on('change', _.bind(function (checkbox, state) {
+                me.fireEvent('leftmenu:hide', [me.chLeftMenu, state === 'checked']);
+            }, me));
+            me.chRightMenu.on('change', _.bind(function (checkbox, state) {
+                me.fireEvent('rightmenu:hide', [me.chRightMenu, state === 'checked']);
+            }, me));
         }
 
         return {
@@ -307,6 +321,25 @@ define([
                     dataHintOffset: 'small'
                 });
                 this.lockedControls.push(this.chToolbar);
+
+                this.chRightMenu = new Common.UI.CheckBox({
+                    lock: [_set.lostConnect],
+                    labelText: this.textRightMenu,
+                    dataHint    : '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chRightMenu);
+
+                this.chLeftMenu = new Common.UI.CheckBox({
+                    lock: [_set.lostConnect],
+                    labelText: this.textLeftMenu,
+                    dataHint    : '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chLeftMenu);
+
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             },
 
@@ -334,6 +367,8 @@ define([
                 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'));
+                this.chLeftMenu.render($host.find('#slot-chk-leftmenu'));
+                this.chRightMenu.render($host.find('#slot-chk-rightmenu'));
                 return this.$el;
             },
 
@@ -391,17 +426,31 @@ define([
                         me.$el.find('.separator-theme').remove();
                     }
 
+                    var emptyGroup = [];
                     if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
+                        emptyGroup.push(me.chStatusbar.$el.closest('.elset'));
                         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();
-                        }
                     }
+
+                    if (config.canBrandingExt && config.customization && config.customization.leftMenu === false || !Common.UI.LayoutManager.isElementVisible('leftMenu')) {
+                        emptyGroup.push(me.chLeftMenu.$el.closest('.elset'));
+                        me.chLeftMenu.$el.remove();
+                    } else if (emptyGroup.length>0) {
+                        emptyGroup.push(me.chLeftMenu.$el.closest('.elset'));
+                        emptyGroup.shift().append(me.chLeftMenu.$el[0]);
+                    }
+
+                    if (!config.isEdit || config.canBrandingExt && config.customization && config.customization.rightMenu === false || !Common.UI.LayoutManager.isElementVisible('rightMenu')) {
+                        emptyGroup.push(me.chRightMenu.$el.closest('.elset'));
+                        me.chRightMenu.$el.remove();
+                    } else if (emptyGroup.length>0) {
+                        emptyGroup.push(me.chRightMenu.$el.closest('.elset'));
+                        emptyGroup.shift().append(me.chRightMenu.$el[0]);
+                    }
+                    if (emptyGroup.length>1) { // remove empty group
+                        emptyGroup[emptyGroup.length-1].closest('.group').remove();
+                    }
+
                     if (Common.UI.Themes.available()) {
                         function _fill_themes() {
                             var btn = this.btnInterfaceTheme;
@@ -430,6 +479,15 @@ define([
                             }, me));
                         }
                     }
+
+                    var value = Common.UI.LayoutManager.getInitValue('leftMenu');
+                    value = (value!==undefined) ? !value : false;
+                    me.chLeftMenu.setValue(!Common.localStorage.getBool("sse-hidden-leftmenu", value));
+
+                    value = Common.UI.LayoutManager.getInitValue('rightMenu');
+                    value = (value!==undefined) ? !value : false;
+                    me.chRightMenu.setValue(!Common.localStorage.getBool("sse-hidden-rightmenu", value));
+
                     setEvents.call(me);
                 });
             },
@@ -531,7 +589,9 @@ define([
             textAlwaysShowToolbar: 'Always show toolbar',
             textInterfaceTheme: 'Interface theme',
             textShowFrozenPanesShadow: 'Show frozen panes shadow',
-            tipInterfaceTheme: 'Interface theme'
+            tipInterfaceTheme: 'Interface theme',
+            textLeftMenu: 'Left panel',
+            textRightMenu: 'Right panel'
         }
     }()), SSE.Views.ViewTab || {}));
 });

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

@@ -162,6 +162,15 @@ define([
                 rightMenuView   = SSE.getController('RightMenu').getView('RightMenu');
 
             me._rightMenu   = rightMenuView.render(this.mode);
+            var value = Common.UI.LayoutManager.getInitValue('rightMenu');
+            value = (value!==undefined) ? !value : false;
+            Common.localStorage.getBool("sse-hidden-rightmenu", value) && me._rightMenu.hide();
+        },
+
+        applyCommonMode: function() {
+            var value = Common.UI.LayoutManager.getInitValue('leftMenu');
+            value = (value!==undefined) ? !value : false;
+            Common.localStorage.getBool("sse-hidden-leftmenu", value) && SSE.getController('LeftMenu').getView('LeftMenu').hide();
         },
 
         setMode: function(mode, delay) {

apps/spreadsheeteditor/main/locale/en.json

@@ -3917,6 +3917,8 @@
   "SSE.Views.ViewTab.tipFreeze": "Freeze panes",
   "SSE.Views.ViewTab.tipInterfaceTheme": "Interface theme",
   "SSE.Views.ViewTab.tipSheetView": "Sheet view",
+  "SSE.Views.ViewTab.textLeftMenu": "Left panel",
+  "SSE.Views.ViewTab.textRightMenu": "Right panel",
   "SSE.Views.WatchDialog.closeButtonText": "Close",
   "SSE.Views.WatchDialog.textAdd": "Add watch",
   "SSE.Views.WatchDialog.textBook": "Book",