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

Merge pull request 'feature/plugin-dock-right-panel' (#1010) from feature/plugin-dock-right-panel into release/v9.3.0

Browse Source 
Reviewed-on: https://git.onlyoffice.com/ONLYOFFICE/web-apps/pulls/1010
This commit is contained in:
Oleg Korshul
2026-02-20 12:00:18 +00:00
parent c410aeb66b f35e94955a
commit e65edea7f4
18 changed files with 178 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/common/main/lib/component/Layout.js
View File

@ -203,6 +203,14 @@ define([
}
},
hideItemResizer: function(alias, isHide) {
const panel = this.getItem(alias);
if(panel && panel.resize) {
panel.resize.hidden = isHide;
panel.resize.el && (panel.resize.el[isHide ? 'hide' : 'show']());
}
},
onSelectStart: function(e) {
if (e.preventDefault) e.preventDefault();
return false;

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

@ -1223,7 +1223,8 @@ define([
help && window.open(help, '_blank');
},
'docked': function(frameId){
me.api.asc_pluginButtonDockChanged(isPanel ? variation.type : 'panel', variation.guid, frameId, function(){
const docked_place = isPanel ? variation.type : !!variation.dockedPlace ? variation.dockedPlace : 'panelRight';
me.api.asc_pluginButtonDockChanged(docked_place, variation.guid, frameId, function(){
setTimeout(function () {
me.customPluginsDlg[frameId].close();
me.onPluginPanelShow(frameId, variation, lang);

4
apps/common/main/resources/less/colors-table-night.less
View File

@ -181,8 +181,8 @@
--layout-padding-toolbar: 0 10px;
--layout-padding-left-panel: 0px 3px 8px 40px;
--layout-padding-left-panel-rtl: 0px 40px 8px 3px;
--layout-padding-right-panel: 0px 4px 8px 3px;
--layout-padding-right-panel-rtl: 0px 3px 8px 4px;
--layout-padding-right-panel: 0px 44px 8px 3px;
--layout-padding-right-panel-rtl: 0px 3px 8px 44px;
--layout-padding-right-panel-content: 5px 12px 0 12px;
--layout-padding-right-panel-content-rtl: 5px 12px 0 12px;
--layout-padding-x-side-panel: 6px;

4
apps/common/main/resources/less/colors-table-white.less
View File

@ -183,8 +183,8 @@
--layout-padding-toolbar: 0 10px;
--layout-padding-left-panel: 0px 3px 8px 40px;
--layout-padding-left-panel-rtl: 0px 40px 8px 3px;
--layout-padding-right-panel: 0px 4px 8px 3px;
--layout-padding-right-panel-rtl: 0px 3px 8px 4px;
--layout-padding-right-panel: 0px 44px 8px 3px;
--layout-padding-right-panel-rtl: 0px 3px 8px 44px;
--layout-padding-right-panel-content: 5px 12px 0 12px;
--layout-padding-right-panel-content-rtl: 5px 12px 0 12px;
--layout-padding-x-side-panel: 6px;

4
apps/common/main/resources/less/colors-table.less
View File

@ -239,8 +239,8 @@
--layout-padding-toolbar: 0;
--layout-padding-right-panel-content: 7px 10px 0 15px;
--layout-padding-right-panel-content-rtl: 7px 15px 0 10px;
--layout-padding-right-panel: 0;
--layout-padding-right-panel-rtl: 0;
--layout-padding-right-panel: 0 40px 0 0;
--layout-padding-right-panel-rtl: 0 0 0 40px;
--layout-padding-left-panel: 0 0 0 40px;
--layout-padding-left-panel-rtl: 0 40px 0 0;
--layout-padding-x-side-panel: 0;

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

@ -182,7 +182,7 @@ label {
}
.right-panel {
width: 220px;
width: 100%;
height: 100%;
display: none;
padding: @layout-padding-right-panel-ie;

14
apps/documenteditor/main/app/controller/Viewport.js
View File

@ -146,10 +146,20 @@ define([
$(window).on('resize', _.bind(this.onWindowResize, this));
var leftPanel = $('#left-menu'),
histPanel = $('#left-panel-history');
histPanel = $('#left-panel-history'),
rightPanel = $('#right-menu');
this.viewport.hlayout.on('layout:resizedrag', function() {
this.api.Resize();
Common.localStorage.setItem('de-mainmenu-width', histPanel.is(':visible') ? (histPanel.width()+SCALE_MIN) : leftPanel.width() );
const leftPanelWidth = histPanel.is(':visible') ? (histPanel.width()+SCALE_MIN) : leftPanel.width();
if(leftPanelWidth > SCALE_MIN) {
Common.localStorage.setItem('de-mainmenu-width', leftPanelWidth);
}
const rightPanelWidth = rightPanel.width();
if(rightPanelWidth > SCALE_MIN) {
Common.localStorage.setItem('de-rightmenu-width', rightPanelWidth);
}
}, this);
this.boxSdk = $('#editor_sdk');

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

@ -321,6 +321,17 @@ define([
target_pane_parent.find('.content-box > .active').removeClass('active');
target_pane && target_pane.addClass("active");
const viewport = DE.getController('Viewport').getView('Viewport');
viewport.hlayout.hideItemResizer('right', !isPlugin);
const widthFromStorage = Common.localStorage.getItem('de-rightmenu-width');
if(isPlugin && widthFromStorage) {
this.$el.width(parseInt(widthFromStorage));
} else {
this.setInnerWidth(MENU_BASE_WIDTH);
}
Common.NotificationCenter.trigger('layout:changed', 'rightmenu');
if (this.scroller) {
this.scroller.scrollTop(0);
}
@ -399,11 +410,17 @@ define([
this.$el.find('.side-panel .content-box').append($panel);
},
setInnerWidth: function(value) {
const pane = $(this.el).find('.right-panel');
const paddings = parseInt(pane.css('padding-left')) + parseInt(pane.css('padding-right'));
MENU_SCALE_PART = value + paddings;
this.$el.css('width', (!Common.Utils.InternalSettings.get("de-hide-right-settings") ? MENU_SCALE_PART : SCALE_MIN) + 'px');
},
updateWidth: function() {
var pane = $(this.el).find('.right-panel'),
paddings = parseInt(pane.css('padding-left')) + parseInt(pane.css('padding-right'));
pane.css('width', MENU_BASE_WIDTH + paddings + 'px');
MENU_SCALE_PART = SCALE_MIN + MENU_BASE_WIDTH + paddings;
MENU_SCALE_PART = MENU_BASE_WIDTH + paddings;
this.$el.css('width', (!Common.Utils.InternalSettings.get("de-hide-right-settings") ? MENU_SCALE_PART : SCALE_MIN) + 'px');
},

10
apps/documenteditor/main/app/view/Viewport.js
View File

@ -127,7 +127,14 @@ define([
stretch: true
}, { // right menu
el: $(items[2]).hide(),
rely: true
rely: true,
alias: 'right',
resize: {
hidden: false,
autohide: false,
min: -600,
max: -260
}
}
];
@ -135,6 +142,7 @@ define([
iarray[0].resize.min = -600;
iarray[0].resize.max = -300;
[iarray[1].resize.min, iarray[1].resize.max] = [-600, -300];
[iarray[3].resize.min, iarray[3].resize.max] = [260, 600];
[iarray[0], iarray[3]] = [iarray[3], iarray[0]];
[iarray[1], iarray[2]] = [iarray[2], iarray[1]];

14
apps/pdfeditor/main/app/controller/Viewport.js
View File

@ -155,10 +155,20 @@ define([
$(window).on('resize', _.bind(this.onWindowResize, this));
var leftPanel = $('#left-menu'),
histPanel = $('#left-panel-history');
histPanel = $('#left-panel-history'),
rightPanel = $('#right-menu');
this.viewport.hlayout.on('layout:resizedrag', function() {
this.api.Resize();
Common.localStorage.setItem('pdfe-mainmenu-width', histPanel.is(':visible') ? (histPanel.width()+SCALE_MIN) : leftPanel.width() );
const leftPanelWidth = histPanel.is(':visible') ? (histPanel.width()+SCALE_MIN) : leftPanel.width();
if(leftPanelWidth > SCALE_MIN) {
Common.localStorage.setItem('pdfe-mainmenu-width', leftPanelWidth);
}
const rightPanelWidth = rightPanel.width();
if(rightPanelWidth > SCALE_MIN) {
Common.localStorage.setItem('pdfe-rightmenu-width', rightPanelWidth);
}
}, this);
this.boxSdk = $('#editor_sdk');

23
apps/pdfeditor/main/app/view/RightMenu.js
View File

@ -277,6 +277,17 @@ define([
target_pane_parent.find('.content-box > .active').removeClass('active');
target_pane && target_pane.addClass("active");
const viewport = PDFE.getController('Viewport').getView('Viewport');
viewport.hlayout.hideItemResizer('right', !isPlugin);
const widthFromStorage = Common.localStorage.getItem('pdfe-rightmenu-width');
if(isPlugin && widthFromStorage) {
this.$el.width(parseInt(widthFromStorage));
} else {
this.setInnerWidth(MENU_BASE_WIDTH);
}
Common.NotificationCenter.trigger('layout:changed', 'rightmenu');
if (this.scroller) {
this.scroller.scrollTop(0);
}
@ -346,12 +357,18 @@ define([
this.$el.find('.side-panel .content-box').append($panel);
},
setInnerWidth: function(value) {
const pane = $(this.el).find('.right-panel');
const paddings = parseInt(pane.css('padding-left')) + parseInt(pane.css('padding-right'));
MENU_SCALE_PART = value + paddings;
this.$el.css('width', (!Common.Utils.InternalSettings.get("pdfe-hide-right-settings") ? MENU_SCALE_PART : SCALE_MIN) + 'px');
},
updateWidth: function() {
var pane = $(this.el).find('.right-panel'),
paddings = parseInt(pane.css('padding-left')) + parseInt(pane.css('padding-right'));
pane.css('width', MENU_BASE_WIDTH + paddings + 'px');
MENU_SCALE_PART = SCALE_MIN + MENU_BASE_WIDTH + paddings;
this.$el.css('width', (this.GetActivePane() ? MENU_SCALE_PART : SCALE_MIN) + 'px');
MENU_SCALE_PART = MENU_BASE_WIDTH + paddings;
this.$el.css('width', (!Common.Utils.InternalSettings.get("pdfe-hide-right-settings") ? MENU_SCALE_PART : SCALE_MIN) + 'px');
},
txtParagraphSettings: 'Text Settings',

10
apps/pdfeditor/main/app/view/Viewport.js
View File

@ -127,13 +127,21 @@ define([
stretch: true
}, {
el: $(items[2]).hide(),
rely: true
rely: true,
alias: 'right',
resize: {
hidden: false,
autohide: false,
min: -600,
max: -260
}
}
];
if ( Common.UI.isRTL() ) {
iarray[0].resize.min = -600;
iarray[0].resize.max = -300;
[iarray[3].resize.min, iarray[3].resize.max] = [260, 600];
[iarray[0], iarray[2]] = [iarray[2], iarray[0]];
}

14
apps/presentationeditor/main/app/controller/Viewport.js
View File

@ -149,10 +149,20 @@ define([
$(window).on('resize', _.bind(this.onWindowResize, this));
var leftPanel = $('#left-menu'),
histPanel = $('#left-panel-history');
histPanel = $('#left-panel-history'),
rightPanel = $('#right-menu');
this.viewport.hlayout.on('layout:resizedrag', function() {
this.api.Resize();
Common.localStorage.setItem('pe-mainmenu-width', histPanel.is(':visible') ? (histPanel.width()+SCALE_MIN) : leftPanel.width() );
const leftPanelWidth = histPanel.is(':visible') ? (histPanel.width()+SCALE_MIN) : leftPanel.width();
if(leftPanelWidth > SCALE_MIN) {
Common.localStorage.setItem('pe-mainmenu-width', leftPanelWidth);
}
const rightPanelWidth = rightPanel.width();
if(rightPanelWidth > SCALE_MIN) {
Common.localStorage.setItem('pe-rightmenu-width', rightPanelWidth);
}
}, this);
this.boxSdk = $('#editor_sdk');

21
apps/presentationeditor/main/app/view/RightMenu.js
View File

@ -281,6 +281,17 @@ define([
target_pane_parent.find('.content-box > .active').removeClass('active');
target_pane && target_pane.addClass("active");
const viewport = PE.getController('Viewport').getView('Viewport');
viewport.hlayout.hideItemResizer('right', !isPlugin);
const widthFromStorage = Common.localStorage.getItem('pe-rightmenu-width');
if(isPlugin && widthFromStorage) {
this.$el.width(parseInt(widthFromStorage));
} else {
this.setInnerWidth(MENU_BASE_WIDTH);
}
Common.NotificationCenter.trigger('layout:changed', 'rightmenu');
if (this.scroller) {
this.scroller.scrollTop(0);
}
@ -355,11 +366,17 @@ define([
this.$el.find('.side-panel .content-box').append($panel);
},
setInnerWidth: function(value) {
const pane = $(this.el).find('.right-panel');
const paddings = parseInt(pane.css('padding-left')) + parseInt(pane.css('padding-right'));
MENU_SCALE_PART = value + paddings;
this.$el.css('width', (!Common.Utils.InternalSettings.get("pe-hide-right-settings") ? MENU_SCALE_PART : SCALE_MIN) + 'px');
},
updateWidth: function() {
var pane = $(this.el).find('.right-panel'),
paddings = parseInt(pane.css('padding-left')) + parseInt(pane.css('padding-right'));
pane.css('width', MENU_BASE_WIDTH + paddings + 'px');
MENU_SCALE_PART = SCALE_MIN + MENU_BASE_WIDTH + paddings;
MENU_SCALE_PART = MENU_BASE_WIDTH + paddings;
this.$el.css('width', (!Common.Utils.InternalSettings.get("pe-hide-right-settings") ? MENU_SCALE_PART : SCALE_MIN) + 'px');
},

10
apps/presentationeditor/main/app/view/Viewport.js
View File

@ -131,12 +131,20 @@ define([
stretch: true
}, {
el: $(items[2]).hide(),
rely: true
rely: true,
alias: 'right',
resize: {
hidden: false,
autohide: false,
min: -600,
max: -260
}
}];
if ( Common.UI.isRTL() ) {
[iarray[0].resize.min, iarray[0].resize.max] = [-600, -300];
[iarray[1].resize.min, iarray[1].resize.max] = [-600, -300];
[iarray[3].resize.min, iarray[3].resize.max] = [260, 600];
[iarray[0], iarray[3]] = [iarray[3], iarray[0]];
[iarray[1], iarray[2]] = [iarray[2], iarray[1]];

14
apps/spreadsheeteditor/main/app/controller/Viewport.js
View File

@ -211,10 +211,20 @@ define([
}, this);
var leftPanel = $('#left-menu'),
histPanel = $('#left-panel-history');
histPanel = $('#left-panel-history'),
rightPanel = $('#right-menu');
this.viewport.hlayout.on('layout:resizedrag', function() {
this.api.asc_Resize();
Common.localStorage.setItem('sse-mainmenu-width',histPanel.is(':visible') ? (histPanel.width()+SCALE_MIN) : leftPanel.width());
const leftPanelWidth = histPanel.is(':visible') ? (histPanel.width()+SCALE_MIN) : leftPanel.width();
if(leftPanelWidth > SCALE_MIN) {
Common.localStorage.setItem('sse-mainmenu-width', leftPanelWidth);
}
const rightPanelWidth = rightPanel.width();
if(rightPanelWidth > SCALE_MIN) {
Common.localStorage.setItem('sse-rightmenu-width', rightPanelWidth);
}
}, this);
this.boxSdk = $('#editor_sdk');

21
apps/spreadsheeteditor/main/app/view/RightMenu.js
View File

@ -298,6 +298,17 @@ define([
target_pane_parent.find('.content-box > .active').removeClass('active');
target_pane && target_pane.addClass("active");
const viewport = SSE.getController('Viewport').getView('Viewport');
viewport.hlayout.hideItemResizer('right', !isPlugin);
const widthFromStorage = Common.localStorage.getItem('sse-rightmenu-width');
if(isPlugin && widthFromStorage) {
this.$el.width(parseInt(widthFromStorage));
} else {
this.setInnerWidth(MENU_BASE_WIDTH);
}
Common.NotificationCenter.trigger('layout:changed', 'rightmenu');
if (this.scroller) {
this.scroller.scrollTop(0);
}
@ -367,11 +378,17 @@ define([
this.$el.find('.side-panel .content-box').append($panel);
},
setInnerWidth: function(value) {
const pane = $(this.el).find('.right-panel');
const paddings = parseInt(pane.css('padding-left')) + parseInt(pane.css('padding-right'));
MENU_SCALE_PART = value + paddings;
this.$el.css('width', (!Common.Utils.InternalSettings.get("sse-hide-right-settings") ? MENU_SCALE_PART : SCALE_MIN) + 'px');
},
updateWidth: function() {
var pane = $(this.el).find('.right-panel'),
paddings = parseInt(pane.css('padding-left')) + parseInt(pane.css('padding-right'));
pane.css('width', MENU_BASE_WIDTH + paddings + 'px');
MENU_SCALE_PART = SCALE_MIN + MENU_BASE_WIDTH + paddings;
MENU_SCALE_PART = MENU_BASE_WIDTH + paddings;
this.$el.css('width', (!Common.Utils.InternalSettings.get("sse-hide-right-settings") ? MENU_SCALE_PART : SCALE_MIN) + 'px');
},

10
apps/spreadsheeteditor/main/app/view/Viewport.js
View File

@ -134,12 +134,20 @@ define([
stretch: true
}, {
el: $(items[2]).hide(),
rely: true
rely: true,
alias: 'right',
resize: {
hidden: false,
autohide: false,
min: -600,
max: -260
}
}];
if ( Common.UI.isRTL() ) {
[iarray[0].resize.min, iarray[0].resize.max] = [-600, -300];
[iarray[1].resize.min, iarray[1].resize.max] = [-600, -300];
[iarray[3].resize.min, iarray[3].resize.max] = [260, 600];
[iarray[0], iarray[3]] = [iarray[3], iarray[0]];
[iarray[1], iarray[2]] = [iarray[2], iarray[1]];