[PE] Add settings for hiding left/right panels to view tab

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,8 @@ 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);
+            this.isThumbsShown = !Common.localStorage.getBool('pe-hidden-leftmenu');
+            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;
@@ -669,6 +672,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();
@@ -702,6 +706,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);
@@ -770,7 +775,30 @@ define([
         isCommentsVisible: function() {
             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

@@ -1310,6 +1310,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,26 @@ define([
                 });
                 this.lockedControls.push(this.btnGridlines);
 
+                this.chRightMenu = new Common.UI.CheckBox({
+                    lock: [_set.disableOnStart],
+                    labelText: this.textRightMenu,
+                    value: !Common.localStorage.getBool("pe-hidden-rightmenu"),
+                    dataHint    : '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chRightMenu);
+
+                this.chLeftMenu = new Common.UI.CheckBox({
+                    lock: [_set.disableOnStart],
+                    labelText: this.textLeftMenu,
+                    value: !Common.localStorage.getBool("pe-hidden-leftmenu"),
+                    dataHint    : '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chLeftMenu);
+
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             },
 
@@ -329,6 +363,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 +407,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) {
@@ -472,7 +523,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,20 @@ 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);
+            if ( Common.localStorage.getBool('pe-hidden-rightmenu') )
+                me._rightMenu.hide();
+        },
+
+        applyCommonMode: function() {
             if ( Common.localStorage.getBool('pe-hidden-status') )
                 PE.getController('Statusbar').getView('Statusbar').setVisible(false);
+
+            if ( Common.localStorage.getBool('pe-hidden-leftmenu') )
+                PE.getController('LeftMenu').getView('LeftMenu').hide();
         },
 
         setMode: function(mode, delay) {