Merge pull request #1789 from ONLYOFFICE/fix/left-menu-refactoring

Fix/left menu refactoring
This commit is contained in:
Julia Radzhabova 2022-06-09 00:40:33 +03:00 committed by GitHub
commit 36d8b85807
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 71 additions and 98 deletions

View file

@ -68,11 +68,14 @@ define([
initialize: function(options) {
_.extend(this, options);
Common.UI.BaseView.prototype.initialize.call(this, arguments);
var filter = Common.localStorage.getKeysFilter();
this.appPrefix = (filter && filter.length) ? filter.split(',')[0] : '';
},
render: function(el) {
el = el || this.el;
$(el).html(this.template({scope: this})).width( (parseInt(Common.localStorage.getItem('de-mainmenu-width')) || MENU_SCALE_PART) - SCALE_MIN);
$(el).html(this.template({scope: this})).width( (parseInt(Common.localStorage.getItem(this.appPrefix + 'mainmenu-width')) || MENU_SCALE_PART) - SCALE_MIN);
this.viewHistoryList = new Common.UI.DataView({
el: $('#history-list'),

View file

@ -688,7 +688,6 @@ define([
if (this.leftMenu.btnComments.isActive()) {
this.leftMenu.btnComments.toggle(false);
this.leftMenu.onBtnMenuClick(this.leftMenu.btnComments);
// focus to sdk
this.api.asc_enableKeyEvents(true);
} else if (this.leftMenu.btnThumbnails.isActive()) {
@ -768,7 +767,6 @@ define([
// if (!this.leftMenu.isOpened()) return true;
var btnSearch = this.getApplication().getController('Viewport').header.btnSearch;
btnSearch.pressed && btnSearch.toggle(false);
this.leftMenu._state.isSearchOpen && (this.leftMenu._state.isSearchOpen = false);
if ( this.leftMenu.menuFile.isVisible() ) {
if (Common.UI.HintManager.needCloseFileMenu())
@ -879,11 +877,10 @@ define([
var mode = this.mode.isEdit && !this.viewmode ? undefined : 'no-replace';
this.leftMenu.panelSearch.setSearchMode(mode);
}
this.leftMenu._state.isSearchOpen = show;
},
isSearchPanelVisible: function () {
return this.leftMenu._state.isSearchOpen;
return this.leftMenu && this.leftMenu.panelSearch && this.leftMenu.panelSearch.isVisible();
},
isCommentsVisible: function() {

View file

@ -283,7 +283,11 @@ define([
return;
}
if (!this.searchBar) {
this.searchBar = new Common.UI.SearchBar({});
var isVisible = leftMenu && leftMenu.leftMenu && leftMenu.leftMenu.isVisible();
this.searchBar = new Common.UI.SearchBar( !isVisible ? {
showOpenPanel: false,
width: 303
} : {});
this.searchBar.on('hide', _.bind(function () {
this.header.btnSearch.toggle(false, true);
}, this));

View file

@ -69,17 +69,6 @@ define([
// Delegated events for creating new items, and clearing completed ones.
events: function() {
return {
/** coauthoring begin **/
'click #left-btn-comments': _.bind(this.onCoauthOptions, this),
'click #left-btn-chat': _.bind(this.onCoauthOptions, this),
/** coauthoring end **/
'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
'click #left-btn-navigation': _.bind(this.onCoauthOptions, this),
'click #left-btn-thumbnails': _.bind(this.onCoauthOptions, this),
'click #left-btn-searchbar': _.bind(function () {
this.onCoauthOptions();
this.fireEvent('search:aftershow', this.leftMenu);
}, this),
'click #left-btn-support': function() {
var config = this.mode.customization;
config && !!config.feedback && !!config.feedback.url ?
@ -105,6 +94,7 @@ define([
enableToggle: true,
toggleGroup: 'leftMenuGroup'
});
this.btnSearchBar.on('click', this.onBtnMenuClick.bind(this));
this.btnAbout = new Common.UI.Button({
action: 'about',
@ -114,6 +104,7 @@ define([
disabled: true,
toggleGroup: 'leftMenuGroup'
});
this.btnAbout.on('toggle', this.onBtnMenuToggle.bind(this));
this.btnSupport = new Common.UI.Button({
action: 'support',
@ -130,6 +121,8 @@ define([
disabled: true,
toggleGroup: 'leftMenuGroup'
});
this.btnComments.on('click', this.onBtnMenuClick.bind(this));
this.btnComments.on('toggle', this.onBtnCommentsToggle.bind(this));
this.btnChat = new Common.UI.Button({
el: $markup.elementById('#left-btn-chat'),
@ -138,13 +131,11 @@ define([
disabled: true,
toggleGroup: 'leftMenuGroup'
});
this.btnChat.on('click', this.onBtnMenuClick.bind(this));
this.btnComments.hide();
this.btnChat.hide();
this.btnComments.on('click', this.onBtnMenuClick.bind(this));
this.btnComments.on('toggle', this.onBtnCommentsToggle.bind(this));
this.btnChat.on('click', this.onBtnMenuClick.bind(this));
/** coauthoring end **/
this.btnPlugins = new Common.UI.Button({
@ -166,9 +157,6 @@ define([
});
this.btnNavigation.on('click', this.onBtnMenuClick.bind(this));
this.btnSearchBar.on('click', this.onBtnMenuClick.bind(this));
this.btnAbout.on('toggle', this.onBtnMenuToggle.bind(this));
this.menuFile = new DE.Views.FileMenu();
this.btnAbout.panel = new Common.Views.About({el: '#about-menu-panel', appName: this.txtEditor});
@ -180,7 +168,6 @@ define([
toggleGroup: 'leftMenuGroup'
});
this.btnThumbnails.hide();
this.btnThumbnails.on('click', this.onBtnMenuClick.bind(this));
this.$el.html($markup);
@ -210,19 +197,19 @@ define([
this.supressEvents = true;
this.btnAbout.toggle(false);
if (btn.options.action == 'search') {
} else {
if (btn.pressed) {
if (!(this.$el.width() > SCALE_MIN)) {
this.$el.width(parseInt(Common.localStorage.getItem('de-mainmenu-width')) || MENU_SCALE_PART);
}
} else if (!this._state.pluginIsRunning) {
Common.localStorage.setItem('de-mainmenu-width',this.$el.width());
this.$el.width(SCALE_MIN);
if (btn.pressed) {
if (!(this.$el.width() > SCALE_MIN)) {
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());
this.$el.width(SCALE_MIN);
}
this.supressEvents = false;
this.onCoauthOptions();
(btn.options.action == 'advancedsearch') && this.fireEvent('search:aftershow', this);
Common.NotificationCenter.trigger('layout:changed', 'leftmenu');
},
@ -388,7 +375,6 @@ define([
!this.btnChat.isDisabled() && !this.btnChat.pressed) {
this.btnChat.toggle(true);
this.onBtnMenuClick(this.btnChat);
this.onCoauthOptions();
this.panelChat.focus();
}
} else
@ -397,21 +383,18 @@ define([
!this.btnComments.isDisabled() && !this.btnComments.pressed) {
this.btnComments.toggle(true);
this.onBtnMenuClick(this.btnComments);
this.onCoauthOptions();
}
} else if (menu == 'navigation') {
if (this.btnNavigation.isVisible() &&
!this.btnNavigation.isDisabled() && !this.btnNavigation.pressed) {
this.btnNavigation.toggle(true);
this.onBtnMenuClick(this.btnNavigation);
this.onCoauthOptions();
}
} else if (menu == 'advancedsearch') {
if (this.btnSearchBar.isVisible() &&
!this.btnSearchBar.isDisabled() && !this.btnSearchBar.pressed) {
this.btnSearchBar.toggle(true);
this.onBtnMenuClick(this.btnSearchBar);
this.onCoauthOptions();
this.panelSearch.focus();
!suspendAfter && this.fireEvent('search:aftershow', this);
}
@ -514,6 +497,11 @@ define([
}
this.limitHint && this.limitHint.css('top', top);
},
isVisible: function () {
return this.$el && this.$el.is(':visible');
},
/** coauthoring begin **/
tipComments : 'Comments',
tipChat : 'Chat',

View file

@ -614,7 +614,6 @@ define([
// if (!this.leftMenu.isOpened()) return true;
var btnSearch = this.getApplication().getController('Viewport').header.btnSearch;
btnSearch.pressed && btnSearch.toggle(false);
this.leftMenu._state.isSearchOpen && (this.leftMenu._state.isSearchOpen = false);
// TODO:
if ( this.leftMenu.menuFile.isVisible() ) {
@ -724,11 +723,10 @@ define([
var mode = this.mode.isEdit && !this.viewmode ? undefined : 'no-replace';
this.leftMenu.panelSearch.setSearchMode(mode);
}
this.leftMenu._state.isSearchOpen = show;
},
isSearchPanelVisible: function () {
return this.leftMenu._state.isSearchOpen;
return this.leftMenu && this.leftMenu.panelSearch && this.leftMenu.panelSearch.isVisible();
},
showHistory: function() {

View file

@ -345,7 +345,11 @@ define([
return;
}
if (!this.searchBar) {
this.searchBar = new Common.UI.SearchBar({});
var isVisible = leftMenu && leftMenu.leftMenu && leftMenu.leftMenu.isVisible();
this.searchBar = new Common.UI.SearchBar( !isVisible ? {
showOpenPanel: false,
width: 303
} : {});
this.searchBar.on('hide', _.bind(function () {
this.header.btnSearch.toggle(false, true);
}, this));

View file

@ -67,15 +67,6 @@ define([
// Delegated events for creating new items, and clearing completed ones.
events: function() {
return {
/** coauthoring begin **/
'click #left-btn-comments': _.bind(this.onCoauthOptions, this),
'click #left-btn-chat': _.bind(this.onCoauthOptions, this),
'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
/** coauthoring end **/
'click #left-btn-searchbar': _.bind(function () {
this.onCoauthOptions();
this.fireEvent('search:aftershow', this.leftMenu);
}, this),
'click #left-btn-support': function() {
var config = this.mode.customization;
config && !!config.feedback && !!config.feedback.url ?
@ -101,6 +92,7 @@ define([
enableToggle: true,
toggleGroup: 'leftMenuGroup'
});
this.btnSearchBar.on('click', _.bind(this.onBtnMenuClick, this));
this.btnThumbs = new Common.UI.Button({
action: 'thumbs',
@ -110,6 +102,7 @@ define([
disabled: true,
toggleGroup: 'leftMenuGroup'
});
this.btnThumbs.on('click', _.bind(this.onBtnMenuClick, this));
this.btnAbout = new Common.UI.Button({
action: 'about',
@ -119,6 +112,8 @@ define([
disabled: true,
toggleGroup: 'leftMenuGroup'
});
this.btnAbout.on('toggle', _.bind(this.onBtnMenuToggle, this));
this.btnAbout.on('click', _.bind(this.onFullMenuClick, this));
this.btnSupport = new Common.UI.Button({
action: 'support',
@ -135,6 +130,7 @@ define([
disabled: true,
toggleGroup: 'leftMenuGroup'
});
this.btnComments.on('click', this.onBtnMenuClick.bind(this));
this.btnChat = new Common.UI.Button({
el: $markup.elementById('#left-btn-chat'),
@ -143,12 +139,11 @@ define([
disabled: true,
toggleGroup: 'leftMenuGroup'
});
this.btnChat.on('click', this.onBtnMenuClick.bind(this));
this.btnComments.hide();
this.btnChat.hide();
this.btnComments.on('click', this.onBtnMenuClick.bind(this));
this.btnChat.on('click', this.onBtnMenuClick.bind(this));
/** coauthoring end **/
this.btnPlugins = new Common.UI.Button({
@ -160,10 +155,6 @@ define([
});
this.btnPlugins.hide();
this.btnPlugins.on('click', _.bind(this.onBtnMenuClick, this));
this.btnSearchBar.on('click', _.bind(this.onBtnMenuClick, this));
this.btnThumbs.on('click', _.bind(this.onBtnMenuClick, this));
this.btnAbout.on('toggle', _.bind(this.onBtnMenuToggle, this));
this.btnAbout.on('click', _.bind(this.onFullMenuClick, this));
this.menuFile = new PE.Views.FileMenu({});
this.btnAbout.panel = (new Common.Views.About({el: '#about-menu-panel', appName: this.txtEditor}));
@ -185,13 +176,8 @@ define([
},
onBtnMenuClick: function(btn, e) {
var full_menu_pressed = this.btnAbout.pressed;
if (this.btnAbout.pressed) this.btnAbout.toggle(false);
if (btn.options.action == 'search') {
full_menu_pressed && this.fireEvent('panel:show', [this.btnAbout, 'files', false]);
return;
} else
if (btn.options.action == 'thumbs') {
if (!btn.pressed && this._state.pluginIsRunning) {
this.$el.width(Common.localStorage.getItem('pe-mainmenu-width') || MENU_SCALE_PART);
@ -209,12 +195,14 @@ define([
this.$el.width(Common.localStorage.getItem('pe-mainmenu-width') || MENU_SCALE_PART);
}
} else if (!this._state.pluginIsRunning){
Common.localStorage.setItem('pe-mainmenu-width',this.$el.width());
this.isVisible() && Common.localStorage.setItem('pe-mainmenu-width',this.$el.width());
this.$el.width(SCALE_MIN);
}
this.onCoauthOptions();
}
this.fireEvent('panel:show', [this, btn.options.action, btn.pressed]);
(btn.options.action == 'advancedsearch') && this.fireEvent('search:aftershow', this);
Common.NotificationCenter.trigger('layout:changed', 'leftmenu');
},
@ -348,7 +336,6 @@ define([
!this.btnChat.isDisabled() && !this.btnChat.pressed) {
this.btnChat.toggle(true);
this.onBtnMenuClick(this.btnChat);
this.onCoauthOptions();
this.panelChat.focus();
}
} else
@ -357,14 +344,12 @@ define([
!this.btnComments.isDisabled() && !this.btnComments.pressed) {
this.btnComments.toggle(true);
this.onBtnMenuClick(this.btnComments);
this.onCoauthOptions();
}
} else if (menu == 'advancedsearch') {
if (this.btnSearchBar.isVisible() &&
!this.btnSearchBar.isDisabled() && !this.btnSearchBar.pressed) {
this.btnSearchBar.toggle(true);
this.onBtnMenuClick(this.btnSearchBar);
this.onCoauthOptions();
!suspendAfter && this.fireEvent('search:aftershow', this);
}
}
@ -468,6 +453,10 @@ define([
Common.NotificationCenter.trigger('layout:changed', 'history');
},
isVisible: function () {
return this.$el && this.$el.is(':visible');
},
/** coauthoring begin **/
tipComments : 'Comments',
tipChat : 'Chat',

View file

@ -740,7 +740,6 @@ define([
case 'escape':
var btnSearch = this.getApplication().getController('Viewport').header.btnSearch;
btnSearch.pressed && btnSearch.toggle(false);
this.leftMenu._state.isSearchOpen && (this.leftMenu._state.isSearchOpen = false);
if ( this.leftMenu.menuFile.isVisible() ) {
if (Common.UI.HintManager.needCloseFileMenu())
@ -865,11 +864,10 @@ define([
var mode = this.mode.isEdit && !this.viewmode ? undefined : 'no-replace';
this.leftMenu.panelSearch.setSearchMode(mode);
}
this.leftMenu._state.isSearchOpen = show;
},
isSearchPanelVisible: function () {
return this.leftMenu._state.isSearchOpen;
return this.leftMenu && this.leftMenu.panelSearch && this.leftMenu.panelSearch.isVisible();
},
onMenuChange: function (value) {

View file

@ -311,7 +311,11 @@ define([
return;
}
if (!this.searchBar) {
this.searchBar = new Common.UI.SearchBar({});
var isVisible = leftMenu && leftMenu.leftMenu && leftMenu.leftMenu.isVisible();
this.searchBar = new Common.UI.SearchBar( !isVisible ? {
showOpenPanel: false,
width: 303
} : {});
this.searchBar.on('hide', _.bind(function () {
this.header.btnSearch.toggle(false, true);
}, this));

View file

@ -59,13 +59,6 @@ define([
// Delegated events for creating new items, and clearing completed ones.
events: function() {
return {
/** coauthoring begin **/
'click #left-btn-comments': _.bind(this.onCoauthOptions, this),
'click #left-btn-chat': _.bind(this.onCoauthOptions, this),
/** coauthoring end **/
'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
'click #left-btn-spellcheck': _.bind(this.onCoauthOptions, this),
'click #left-btn-searchbar': _.bind(this.onCoauthOptions, this),
'click #left-btn-support': function() {
var config = this.mode.customization;
config && !!config.feedback && !!config.feedback.url ?
@ -91,6 +84,7 @@ define([
enableToggle: true,
toggleGroup: 'leftMenuGroup'
});
this.btnSearchBar.on('click', _.bind(this.onBtnMenuClick, this));
this.btnAbout = new Common.UI.Button({
action: 'about',
@ -100,6 +94,7 @@ define([
disabled: true,
toggleGroup: 'leftMenuGroup'
});
this.btnAbout.on('toggle', _.bind(this.onBtnMenuToggle, this));
this.btnSupport = new Common.UI.Button({
action: 'support',
@ -116,6 +111,8 @@ define([
disabled: true,
toggleGroup: 'leftMenuGroup'
});
this.btnComments.on('toggle', this.onBtnCommentsToggle.bind(this));
this.btnComments.on('click', this.onBtnMenuClick.bind(this));
this.btnChat = new Common.UI.Button({
el: $markup.elementById('#left-btn-chat'),
@ -124,13 +121,10 @@ define([
disabled: true,
toggleGroup: 'leftMenuGroup'
});
this.btnChat.on('click', this.onBtnMenuClick.bind(this));
this.btnComments.hide();
this.btnChat.hide();
this.btnComments.on('toggle', this.onBtnCommentsToggle.bind(this));
this.btnComments.on('click', this.onBtnMenuClick.bind(this));
this.btnChat.on('click', this.onBtnMenuClick.bind(this));
/** coauthoring end **/
this.btnPlugins = new Common.UI.Button({
@ -153,9 +147,6 @@ define([
this.btnSpellcheck.hide();
this.btnSpellcheck.on('click', _.bind(this.onBtnMenuClick, this));
this.btnSearchBar.on('click', _.bind(this.onBtnMenuClick, this));
this.btnAbout.on('toggle', _.bind(this.onBtnMenuToggle, this));
this.menuFile = new SSE.Views.FileMenu({});
this.btnAbout.panel = (new Common.Views.About({el: '#about-menu-panel', appName: this.txtEditor}));
this.$el.html($markup);
@ -183,19 +174,16 @@ define([
onBtnMenuClick: function(btn, e) {
this.btnAbout.toggle(false);
if (btn.options.action == 'search') {
} else {
if (btn.pressed) {
if (!(this.$el.width() > SCALE_MIN)) {
this.$el.width(Common.localStorage.getItem('sse-mainmenu-width') || MENU_SCALE_PART);
}
} else if (!this._state.pluginIsRunning){
Common.localStorage.setItem('sse-mainmenu-width',this.$el.width());
this.$el.width(SCALE_MIN);
if (btn.pressed) {
if (!(this.$el.width() > SCALE_MIN)) {
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());
this.$el.width(SCALE_MIN);
}
// this.btnChat.id == btn.id && !this.btnChat.pressed && this.fireEvent('chat:hide', this);
this.onCoauthOptions();
(btn.options.action == 'advancedsearch') && this.fireEvent('search:aftershow', this);
Common.NotificationCenter.trigger('layout:changed', 'leftmenu');
},
@ -228,7 +216,6 @@ define([
if (this.panelSearch) {
if (this.btnSearchBar.pressed) {
this.panelSearch.show();
this.fireEvent('search:aftershow', this);
} else {
this.panelSearch.hide();
}
@ -335,7 +322,6 @@ define([
!this.btnChat.isDisabled() && !this.btnChat.pressed) {
this.btnChat.toggle(true);
this.onBtnMenuClick(this.btnChat);
this.onCoauthOptions();
this.panelChat.focus();
}
} else
@ -344,7 +330,6 @@ define([
!this.btnComments.isDisabled() && !this.btnComments.pressed) {
this.btnComments.toggle(true);
this.onBtnMenuClick(this.btnComments);
this.onCoauthOptions();
this.btnComments.$el.focus();
}
} else if (menu == 'advancedsearch') {
@ -352,7 +337,6 @@ define([
!this.btnSearchBar.isDisabled() && !this.btnSearchBar.pressed) {
this.btnSearchBar.toggle(true);
this.onBtnMenuClick(this.btnSearchBar);
this.onCoauthOptions();
}
}
/** coauthoring end **/
@ -455,6 +439,10 @@ define([
Common.NotificationCenter.trigger('layout:changed', 'history');
},
isVisible: function () {
return this.$el && this.$el.is(':visible');
},
/** coauthoring begin **/
tipComments : 'Comments',
tipChat : 'Chat',