pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-02-10 18:05:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

[DE PE SSE] Fix plugins in right panel

Browse Source
This commit is contained in:
Julia.Svinareva
2023-11-29 21:08:30 +03:00
parent 1c0661d3a1
commit 3eb25f816b
11 changed files with 67 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/common/main/lib/component/SideMenu.js
View File

@ -257,13 +257,13 @@ define([
return pressed;
},
togglePluginButtons: function (toggle) {
toggleActivePluginButton: function (toggle) {
for (var i=0; i<this.buttons.length; i++) {
if (this.buttons[i].options.type === 'plugin' && this.buttons[i].pressed) {
this.buttons[i].toggle(toggle, true);
}
}
},
}
}
}()));
});

23
apps/common/main/lib/controller/Plugins.js
View File

@ -550,7 +550,7 @@ define([
this.api.asc_pluginRun(record.get('guid'), 0, '');
},
addPluginToSideMenu: function (plugin, langName, panel) {
addPluginToSideMenu: function (plugin, langName, menu) {
function createUniqueName (name) {
var n = name.toLowerCase().replace(/\s/g, '-'),
panelId = 'left-panel-plugins-' + name;
@ -563,31 +563,32 @@ define([
var pluginGuid = plugin.get_Guid(),
model = this.viewPlugins.storePlugins.findWhere({guid: pluginGuid}),
name = createUniqueName(plugin.get_Name('en'));
model.set({panel: panel});
model.set({menu: menu});
var $button = $('<div id="slot-btn-plugins' + name + '"></div>'),
button = new Common.UI.Button({
parentEl: $button,
cls: 'btn-category plugin-buttons',
hint: langName,
enableToggle: true,
toggleGroup: panel === 'right' ? 'tabpanelbtnsGroup' : 'leftMenuGroup',
toggleGroup: menu === 'right' ? 'tabpanelbtnsGroup' : 'leftMenuGroup',
iconImg: model.get('baseUrl') + model.get('parsedIcons')['normal'],
onlyIcon: true,
value: pluginGuid,
type: 'plugin'
});
var $panel = $('<div id="panel-plugins-' + name + '" class="" style="display: none; height: 100%;"></div>');
this.viewPlugins.fireEvent(panel === 'right' ? 'plugins:addtoright' : 'plugins:addtoleft', [button, $button, $panel]);
var $panel = $('<div id="panel-plugins-' + name + '" class="plugin-panel" style="height: 100%;"></div>');
this.viewPlugins.fireEvent(menu === 'right' ? 'plugins:addtoright' : 'plugins:addtoleft', [button, $button, $panel]);
this.viewPlugins.pluginPanels[pluginGuid] = new Common.Views.PluginPanel({
el: '#panel-plugins-' + name
el: '#panel-plugins-' + name,
menu: menu
});
this.viewPlugins.pluginPanels[pluginGuid].on('render:after', _.bind(this.onAfterRender, this, this.viewPlugins.pluginPanels[pluginGuid], pluginGuid));
},
openUIPlugin: function (guid) {
var model = this.viewPlugins.storePlugins.findWhere({guid: guid}),
panel = model.get('panel');
this.viewPlugins.fireEvent(panel === 'right' ? 'pluginsright:open' : 'pluginsleft:open', [guid]);
menu = model.get('menu');
this.viewPlugins.fireEvent(menu === 'right' ? 'pluginsright:open' : 'pluginsleft:open', [guid]);
},
onPluginShow: function(plugin, variationIndex, frameId, urlAddition) {
@ -601,8 +602,8 @@ define([
if (variation.get_InsideMode()) {
var guid = plugin.get_Guid(),
langName = plugin.get_Name(lang),
panel = 'right'//variation.get_Panel() || 'left';
this.addPluginToSideMenu(plugin, langName, panel);
menu = 'right'//variation.get_Menu();
this.addPluginToSideMenu(plugin, langName, menu);
if (!this.viewPlugins.pluginPanels[guid].openInsideMode(langName, url, frameId, plugin.get_Guid()))
this.api.asc_pluginButtonClick(-1, plugin.get_Guid());
} else {
@ -681,7 +682,7 @@ define([
this.viewPlugins.pluginPanels[guid].$el.remove();
delete this.viewPlugins.pluginPanels[guid];
var model = this.viewPlugins.storePlugins.findWhere({guid: guid});
this.viewPlugins.fireEvent(model.get('panel') === 'right' ? 'pluginsright:close' : 'pluginsleft:close', [guid]);
this.viewPlugins.fireEvent(model.get('menu') === 'right' ? 'pluginsright:close' : 'pluginsleft:close', [guid]);
}
}
if (!isIframePlugin) {

3
apps/common/main/lib/view/PluginPanel.js
View File

@ -63,6 +63,9 @@ define([
initialize: function(options) {
_.extend(this, options);
this._state = {};
if (!this.menu) {
this.menu = 'left';
}
Common.UI.BaseView.prototype.initialize.call(this, arguments);
},

13
apps/common/main/lib/view/Plugins.js
View File

@ -401,15 +401,18 @@ define([
},
showPluginPanel: function (show, guid) {
var model = this.storePlugins.findWhere({guid: guid}),
menu = model.get('menu');
if (show) {
for (var key in this.pluginPanels) {
this.pluginPanels[key].hide();
if (this.pluginPanels[key].menu === menu) {
this.pluginPanels[key].$el.removeClass('active');
}
}
this.pluginPanels[guid].show();
this.pluginPanels[guid].$el.addClass('active');
} else {
this.pluginPanels[guid].hide();
var model = this.storePlugins.findWhere({guid: guid});
this.fireEvent(model.get('panel') === 'right' ? 'pluginsright:hide' : 'pluginsleft:hide', this);
this.pluginPanels[guid].$el.removeClass('active');
this.fireEvent(menu === 'right' ? 'pluginsright:hide' : 'pluginsleft:hide', this);
}
//this.updateLeftPluginButton(guid);
},

21
apps/common/main/resources/less/common.less
View File

@ -146,10 +146,11 @@ label {
}
.right-panel {
width: 220px;
min-width: 220px;
max-width: 260px;
height: 100%;
display: none;
padding: 0 10px 0 15px;
//padding: 0 10px 0 15px;
position: relative;
overflow: hidden;
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
@ -159,7 +160,7 @@ label {
.rtl & {
border-right: @scaled-one-px-value solid @border-toolbar;
border-left: 0 none;
padding: 0 15px 0 10px;
//padding: 0 15px 0 10px;
}
}
@ -214,8 +215,14 @@ label {
.settings-panel {
display: none;
width: 220px;
overflow: visible;
margin-top: 7px;
padding: 0 10px 0 15px;
.rtl & {
padding: 0 15px 0 10px;
}
& > table {
width: 100%;
@ -277,6 +284,14 @@ label {
}
}
.plugin-panel {
display: none;
width: 260px;
&.active {
display: block;
}
}
.dropdown-menu {
> li > a {
color: @text-normal-ie;

6
apps/documenteditor/main/app/controller/RightMenu.js
View File

@ -575,7 +575,9 @@ define([
closePlugin: function (guid) {
this.rightmenu.closePlugin(guid);
this.rightmenu.onPluginBtnMenuClick();
this.rightmenu.onBtnMenuClick();
Common.NotificationCenter.trigger('layout:changed', 'rightmenu');
this.rightmenu.fireEvent('editcomplete', this.rightmenu);
},
onHidePlugins: function() {
@ -584,7 +586,7 @@ define([
onBtnCategoryClick: function (btn) {
if (btn.options.type === 'plugin' && !btn.isDisabled()) {
this.rightmenu.onPluginBtnMenuClick(btn);
this.rightmenu.onBtnMenuClick(btn);
if (btn.pressed) {
this.rightmenu.fireEvent('plugins:showpanel', [btn.options.value]); // show plugin panel
} else {

2
apps/documenteditor/main/app/view/LeftMenu.js
View File

@ -320,7 +320,7 @@ define([
this.panelThumbnails['hide']();
this.btnThumbnails.toggle(false, true);
}
this.togglePluginButtons(false);
this.toggleActivePluginButton(false);
}
},

48
apps/documenteditor/main/app/view/RightMenu.js
View File

@ -39,6 +39,7 @@
var SCALE_MIN = 40;
var MENU_SCALE_PART = 260;
var MENU_MAX_SCALE_PART = 300;
define([
'text!documenteditor/main/app/template/RightMenu.template',
@ -75,6 +76,7 @@ define([
initialize: function () {
this.minimizedMode = true;
this.maximizedMode = false;
this.btnText = new Common.UI.Button({
hint: this.txtParagraphSettings,
@ -287,19 +289,25 @@ define([
},
onBtnMenuClick: function(btn, e) {
var target_pane = $("#" + this._settings[btn.options.asctype].panel);
var target_pane_parent = target_pane.parent();
var target_pane,
target_pane_parent = $(this.el).find('.right-panel'),
isPlugin = btn && btn.options.type === 'plugin',
width = !isPlugin ? MENU_SCALE_PART : MENU_MAX_SCALE_PART;
if (btn && !isPlugin) {
target_pane = $("#" + this._settings[btn.options.asctype].panel);
}
if (btn.pressed) {
if ( this.minimizedMode ) {
$(this.el).width(MENU_SCALE_PART);
if (btn && btn.pressed) {
if ( this.minimizedMode || (!isPlugin && this.maximizedMode) || (isPlugin && !this.maximizedMode) ) {
$(this.el).width(width);
target_pane_parent.css("display", "inline-block" );
this.minimizedMode = false;
this.maximizedMode = isPlugin;
Common.localStorage.setItem("de-hide-right-settings", 0);
Common.Utils.InternalSettings.set("de-hide-right-settings", false);
}
target_pane_parent.find('> .active').removeClass('active');
target_pane.addClass("active");
target_pane && target_pane.addClass("active");
if (this.scroller) {
this.scroller.scrollTop(0);
@ -308,36 +316,12 @@ define([
target_pane_parent.css("display", "none" );
$(this.el).width(SCALE_MIN);
this.minimizedMode = true;
this.maximizedMode = false;
Common.localStorage.setItem("de-hide-right-settings", 1);
Common.Utils.InternalSettings.set("de-hide-right-settings", true);
}
this.fireEvent('rightmenuclick', [this, btn.options.asctype, this.minimizedMode, e]);
},
onPluginBtnMenuClick: function(btn) {
var pane_parent = $('.right-panel');
if (btn && btn.pressed) {
if ( this.minimizedMode ) {
$(this.el).width(MENU_SCALE_PART);
pane_parent.css("display", "inline-block" );
this.minimizedMode = false;
Common.localStorage.setItem("de-hide-right-settings", 0);
Common.Utils.InternalSettings.set("de-hide-right-settings", false);
}
pane_parent.find('> .active').removeClass('active');
if (this.scroller) {
this.scroller.scrollTop(0);
}
} else {
pane_parent.css("display", "none" );
$(this.el).width(SCALE_MIN);
this.minimizedMode = true;
Common.localStorage.setItem("de-hide-right-settings", 1);
Common.Utils.InternalSettings.set("de-hide-right-settings", true);
}
btn && !isPlugin && this.fireEvent('rightmenuclick', [this, btn.options.asctype, this.minimizedMode, e]);
},
SetActivePane: function(type, open) {

2
apps/pdfeditor/main/app/view/LeftMenu.js
View File

@ -316,7 +316,7 @@ define([
this.panelThumbnails['hide']();
this.btnThumbnails.toggle(false, true);
}
this.togglePluginButtons(false);
this.toggleActivePluginButton(false);
}
},

2
apps/presentationeditor/main/app/view/LeftMenu.js
View File

@ -289,7 +289,7 @@ define([
this.btnSearchBar.toggle(false, true);
}
this.fireEvent('panel:show', [this, '', false]);
this.togglePluginButtons(false);
this.toggleActivePluginButton(false);
},
isOpened: function() {

2
apps/spreadsheeteditor/main/app/view/LeftMenu.js
View File

@ -273,7 +273,7 @@ define([
this.panelSearch['hide']();
this.btnSearchBar.toggle(false, true);
}
this.togglePluginButtons(false);
this.toggleActivePluginButton(false);
},
isOpened: function() {