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

This commit is contained in:
Julia Radzhabova 2022-10-19 23:29:32 +03:00
parent 95e265d018
commit ab7da2fbcc
7 changed files with 132 additions and 19 deletions

View file

@ -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...',

View file

@ -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));

View file

@ -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);
}
});
});

View file

@ -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)
}
});
},

View file

@ -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) {
Common.localStorage.setItem('pe-mainmenu-width',this.$el.width());
var 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();

View file

@ -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 slotChkNotes = me.chNotes.$el,
groupRulers = slotChkNotes.closest('.group'),
groupToolbar = me.chToolbar.$el.closest('.group');
groupToolbar.find('.elset')[1].append(slotChkNotes[0]);
groupRulers.remove();
me.$el.find('.separator-rulers').remove();
}
} else if (!config.isEdit) {
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.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 (!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 || {}));

View file

@ -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) {