diff --git a/apps/common/main/lib/component/Layout.js b/apps/common/main/lib/component/Layout.js index 72ce1ecc98..4a2ac29453 100644 --- a/apps/common/main/lib/component/Layout.js +++ b/apps/common/main/lib/component/Layout.js @@ -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; diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js index 171b8347da..e7c22b6ecb 100644 --- a/apps/common/main/lib/controller/Plugins.js +++ b/apps/common/main/lib/controller/Plugins.js @@ -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); diff --git a/apps/common/main/resources/less/colors-table-night.less b/apps/common/main/resources/less/colors-table-night.less index 50011d1d8f..e821f4fff5 100644 --- a/apps/common/main/resources/less/colors-table-night.less +++ b/apps/common/main/resources/less/colors-table-night.less @@ -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; diff --git a/apps/common/main/resources/less/colors-table-white.less b/apps/common/main/resources/less/colors-table-white.less index 33a6fb7964..691a5dc203 100644 --- a/apps/common/main/resources/less/colors-table-white.less +++ b/apps/common/main/resources/less/colors-table-white.less @@ -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; diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index 51889bfd70..12dfdb80f9 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -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; diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less index e2df705ac3..3e7fcad43c 100644 --- a/apps/common/main/resources/less/common.less +++ b/apps/common/main/resources/less/common.less @@ -182,7 +182,7 @@ label { } .right-panel { - width: 220px; + width: 100%; height: 100%; display: none; padding: @layout-padding-right-panel-ie; diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js index b6b03f4096..beb2bfcf99 100644 --- a/apps/documenteditor/main/app/controller/Viewport.js +++ b/apps/documenteditor/main/app/controller/Viewport.js @@ -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'); diff --git a/apps/documenteditor/main/app/view/RightMenu.js b/apps/documenteditor/main/app/view/RightMenu.js index c907e49258..182a489d41 100644 --- a/apps/documenteditor/main/app/view/RightMenu.js +++ b/apps/documenteditor/main/app/view/RightMenu.js @@ -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'); }, diff --git a/apps/documenteditor/main/app/view/Viewport.js b/apps/documenteditor/main/app/view/Viewport.js index a3f9e9cd46..da432e28e2 100644 --- a/apps/documenteditor/main/app/view/Viewport.js +++ b/apps/documenteditor/main/app/view/Viewport.js @@ -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]]; diff --git a/apps/pdfeditor/main/app/controller/Viewport.js b/apps/pdfeditor/main/app/controller/Viewport.js index b248b3e443..43d23e6520 100644 --- a/apps/pdfeditor/main/app/controller/Viewport.js +++ b/apps/pdfeditor/main/app/controller/Viewport.js @@ -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'); diff --git a/apps/pdfeditor/main/app/view/RightMenu.js b/apps/pdfeditor/main/app/view/RightMenu.js index c36ee2832d..43bdf95014 100644 --- a/apps/pdfeditor/main/app/view/RightMenu.js +++ b/apps/pdfeditor/main/app/view/RightMenu.js @@ -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', diff --git a/apps/pdfeditor/main/app/view/Viewport.js b/apps/pdfeditor/main/app/view/Viewport.js index c3ef7bdccb..0f12f86e80 100644 --- a/apps/pdfeditor/main/app/view/Viewport.js +++ b/apps/pdfeditor/main/app/view/Viewport.js @@ -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]]; } diff --git a/apps/presentationeditor/main/app/controller/Viewport.js b/apps/presentationeditor/main/app/controller/Viewport.js index 6c5434d23d..9cf24d732f 100644 --- a/apps/presentationeditor/main/app/controller/Viewport.js +++ b/apps/presentationeditor/main/app/controller/Viewport.js @@ -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'); diff --git a/apps/presentationeditor/main/app/view/RightMenu.js b/apps/presentationeditor/main/app/view/RightMenu.js index 43f8239141..ab8024a1fe 100644 --- a/apps/presentationeditor/main/app/view/RightMenu.js +++ b/apps/presentationeditor/main/app/view/RightMenu.js @@ -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'); }, diff --git a/apps/presentationeditor/main/app/view/Viewport.js b/apps/presentationeditor/main/app/view/Viewport.js index 49cc948c30..0085589ca6 100644 --- a/apps/presentationeditor/main/app/view/Viewport.js +++ b/apps/presentationeditor/main/app/view/Viewport.js @@ -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]]; diff --git a/apps/spreadsheeteditor/main/app/controller/Viewport.js b/apps/spreadsheeteditor/main/app/controller/Viewport.js index 7215778fcb..e680fdcc8b 100644 --- a/apps/spreadsheeteditor/main/app/controller/Viewport.js +++ b/apps/spreadsheeteditor/main/app/controller/Viewport.js @@ -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'); diff --git a/apps/spreadsheeteditor/main/app/view/RightMenu.js b/apps/spreadsheeteditor/main/app/view/RightMenu.js index 763d36ee3c..982aa71222 100644 --- a/apps/spreadsheeteditor/main/app/view/RightMenu.js +++ b/apps/spreadsheeteditor/main/app/view/RightMenu.js @@ -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'); }, diff --git a/apps/spreadsheeteditor/main/app/view/Viewport.js b/apps/spreadsheeteditor/main/app/view/Viewport.js index 18fb2caa47..9357660ee5 100644 --- a/apps/spreadsheeteditor/main/app/view/Viewport.js +++ b/apps/spreadsheeteditor/main/app/view/Viewport.js @@ -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]];