From 382fb528e64337ad8012f734406ef656a3f4fc64 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 6 Aug 2020 17:03:17 +0300
Subject: [PATCH 1/6] [DE] Refactoring advanced settings: apply button is
 always visible

---
 .../main/app/view/FileMenuPanels.js           | 36 +++++++++++++++----
 .../main/resources/less/filemenu.less         | 13 +++++--
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index d89dcf1a6..a073f0d4a 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -188,7 +188,8 @@ define([
         menu: undefined,
 
         template: _.template([
-            '<table><tbody>',
+        '<div id="fms-flex-settings">',
+            '<table style="margin: 30px 0 0;"><tbody>',
                 /** coauthoring begin **/
                 '<tr class="comments">',
                     '<td class="left"><label><%= scope.txtLiveComment %></label></td>',
@@ -261,11 +262,16 @@ define([
                         '<div><div id="fms-cmb-macros" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
                         '<label id="fms-lbl-macros" style="vertical-align: middle;"><%= scope.txtWarnMacrosDesc %></label></div></td>',
                 '</tr>','<tr class="divider macros"></tr>',
+            '</tbody></table>',
+        '</div>',
+        '<div>',
+            '<table style="margin: 10px 0;"><tbody>',
                 '<tr>',
-                    '<td class="left"></td>',
-                    '<td class="right"><button id="fms-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
+                '<td class="left"></td>',
+                '<td class="right"><button id="fms-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
                 '</tr>',
-            '</tbody></table>'
+            '</tbody></table>',
+        '</div>'
         ].join('')),
 
         initialize: function(options) {
@@ -333,7 +339,7 @@ define([
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
-                menuStyle   : 'max-height: 210px;',
+                menuStyle   : 'max-height: 157px;',
                 data        : [
                     { value: -1, displayValue: this.txtFitPage },
                     { value: -2, displayValue: this.txtFitWidth },
@@ -446,15 +452,24 @@ define([
 
             this.btnApply.on('click', this.applySettings.bind(this));
 
+            this.pnlSettings = $markup.findById('#fms-flex-settings');
+
             this.$el = $(node).html($markup);
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: this.$el,
+                    el: this.pnlSettings,
                     suppressScrollX: true,
                     alwaysVisibleY: true
                 });
             }
+
+            Common.NotificationCenter.on({
+                'window:resize': function() {
+                    me.isVisible() && me.updateScroller();
+                }
+            });
+
             return this;
         },
 
@@ -462,7 +477,14 @@ define([
             Common.UI.BaseView.prototype.show.call(this,arguments);
 
             this.updateSettings();
-            this.scroller && this.scroller.update();
+            this.updateScroller();
+        },
+
+        updateScroller: function() {
+            if (this.scroller) {
+                this.scroller.update();
+                this.pnlSettings.toggleClass('bordered', this.scroller.isVisible());
+            }
         },
 
         setMode: function(mode) {
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index 373f34f47..9abba6f93 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -122,11 +122,20 @@
 
 #panel-settings {
   #file-menu-panel & {
-    padding: 0 30px;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #fms-flex-settings {
+    &.bordered {
+      border-bottom: 1px solid @gray;
+    }
+    overflow: hidden;
+    position: relative;
   }
 
   table {
-    margin: 30px 0;
     width: 100%;
 
     tr {

From 230f9d4d884d07e8f620f76659fa9595b0d673c8 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 6 Aug 2020 21:08:07 +0300
Subject: [PATCH 2/6] [DE] Refactoring document info: apply button is always
 visible

---
 .../main/app/view/FileMenuPanels.js           | 40 ++++++++++++++++---
 .../main/resources/less/filemenu.less         | 22 +++++++++-
 2 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index a073f0d4a..366e01b68 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -846,7 +846,8 @@ define([
             this.rendered = false;
 
             this.template = _.template([
-                '<table class="main">',
+            '<div id="fms-flex-info">',
+                '<table class="main" style="margin: 30px 0 0;">',
                     '<tr>',
                         '<td class="left"><label>' + this.txtPlacement + '</label></td>',
                         '<td class="right"><label id="id-info-placement">-</label></td>',
@@ -929,12 +930,17 @@ define([
                             '</table>',
                         '</div></td>',
                     '</tr>',
-                    '<tr class="divider"></tr>',
+                    '<tr style="height: 5px;"></tr>',
+                '</table>',
+            '</div>',
+            '<div>',
+                '<table class="main" style="margin: 10px 0;">',
                     '<tr>',
                         '<td class="left"></td>',
                         '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
                     '</tr>',
-                '</table>'
+                '</table>',
+            '</div>'
             ].join(''));
 
             this.infoObj = {PageCount: 0, WordsCount: 0, ParagraphCount: 0, SymbolsCount: 0, SymbolsWSCount:0};
@@ -1011,6 +1017,7 @@ define([
                         idx = me.tblAuthor.find('tr').index(el);
                     el.remove();
                     me.authors.splice(idx, 1);
+                    me.updateScroller(true);
                 }
             });
 
@@ -1032,6 +1039,7 @@ define([
                             if (!isFromApply) {
                                 var div = $(Common.Utils.String.format(me.authorTpl, Common.Utils.String.htmlEncode(str)));
                                 me.trAuthor.before(div);
+                                me.updateScroller();
                             }
                         }
                     });
@@ -1044,6 +1052,8 @@ define([
             });
             this.btnApply.on('click', _.bind(this.applySettings, this));
 
+            this.pnlInfo = $markup.findById('#fms-flex-info');
+
             this.rendered = true;
 
             this.updateInfo(this.doc);
@@ -1051,11 +1061,18 @@ define([
             this.$el = $(node).html($markup);
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: this.$el,
+                    el: this.pnlInfo,
                     suppressScrollX: true,
                     alwaysVisibleY: true
                 });
             }
+
+            Common.NotificationCenter.on({
+                'window:resize': function() {
+                    me.isVisible() && me.updateScroller();
+                }
+            });
+
             return this;
         },
 
@@ -1064,7 +1081,8 @@ define([
 
             this.updateStatisticInfo();
             this.updateFileInfo();
-            this.scroller && this.scroller.update();
+            this.updateScroller();
+            this.scroller && this.scroller.scrollTop(0);
         },
 
         hide: function() {
@@ -1073,6 +1091,16 @@ define([
             this.stopUpdatingStatisticInfo();
         },
 
+        updateScroller: function(destroy) {
+            if (this.scroller) {
+                this.scroller.update(destroy ? {
+                    suppressScrollX: true,
+                    alwaysVisibleY: true
+                } : undefined);
+                this.pnlInfo.toggleClass('bordered', this.scroller.isVisible());
+            }
+        },
+
         updateInfo: function(doc) {
             if (!this.doc && doc && doc.info) {
                 doc.info.author && console.log("Obsolete: The 'author' parameter of the document 'info' section is deprecated. Please use 'owner' instead.");
@@ -1322,7 +1350,7 @@ define([
             this.rendered = false;
 
             this.template = _.template([
-                '<table class="main">',
+                '<table class="main" style="margin: 30px 0;">',
                     '<tr class="rights">',
                         '<td class="left" style="vertical-align: top;"><label>' + this.txtRights + '</label></td>',
                         '<td class="right"><div id="id-info-rights"></div></td>',
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index 9abba6f93..e80c36846 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -315,12 +315,31 @@
   }
 }
 
-#panel-info,
+#panel-info {
+  #file-menu-panel & {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #fms-flex-info {
+    &.bordered {
+      border-bottom: 1px solid @gray;
+    }
+    overflow: hidden;
+    position: relative;
+  }
+
+}
+
 #panel-rights {
   #file-menu-panel & {
     padding: 0 30px;
   }
+}
 
+#panel-info,
+#panel-rights {
   table {
     tr {
       td {
@@ -349,7 +368,6 @@
 
     &.main {
       width: 100%;
-      margin: 30px 0;
     }
   }
 

From 9d0fda6105c0a392ad59929454b46b82cdc652ce Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 6 Aug 2020 23:15:40 +0300
Subject: [PATCH 3/6] [DE] Fix file info in view mode

---
 apps/documenteditor/main/app/view/FileMenuPanels.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index 366e01b68..192c351e1 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -933,7 +933,7 @@ define([
                     '<tr style="height: 5px;"></tr>',
                 '</table>',
             '</div>',
-            '<div>',
+            '<div id="fms-flex-apply">',
                 '<table class="main" style="margin: 10px 0;">',
                     '<tr>',
                         '<td class="left"></td>',
@@ -1053,6 +1053,7 @@ define([
             this.btnApply.on('click', _.bind(this.applySettings, this));
 
             this.pnlInfo = $markup.findById('#fms-flex-info');
+            this.pnlApply = $markup.findById('#fms-flex-apply');
 
             this.rendered = true;
 
@@ -1081,8 +1082,8 @@ define([
 
             this.updateStatisticInfo();
             this.updateFileInfo();
-            this.updateScroller();
             this.scroller && this.scroller.scrollTop(0);
+            this.updateScroller();
         },
 
         hide: function() {
@@ -1235,7 +1236,7 @@ define([
         setMode: function(mode) {
             this.mode = mode;
             this.inputAuthor.setVisible(mode.isEdit);
-            this.btnApply.setVisible(mode.isEdit);
+            this.pnlApply.toggleClass('hidden', !mode.isEdit);
             this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
             if (!mode.isEdit) {
                 this.inputTitle._input.attr('placeholder', '');

From 08b5e322614d3bb62d784d95d7776269ebe38e7f Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 6 Aug 2020 23:17:32 +0300
Subject: [PATCH 4/6] [PE] Refactoring advanced settings and document info:
 apply button is always visible

---
 .../main/app/view/FileMenuPanels.js           | 73 ++++++++++++++++---
 .../main/resources/less/leftmenu.less         | 35 ++++++++-
 2 files changed, 92 insertions(+), 16 deletions(-)

diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index 23651deeb..d4d71d97a 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -180,7 +180,8 @@ define([
         menu: undefined,
 
         template: _.template([
-            '<table><tbody>',
+        '<div id="fms-flex-settings">',
+            '<table style="margin: 30px 0 0;"><tbody>',
                 '<tr class="edit">',
                     '<td class="left"><label><%= scope.txtSpellCheck %></label></td>',
                     '<td class="right"><div id="fms-chb-spell-check"></div></td>',
@@ -235,11 +236,16 @@ define([
                         '<div><div id="fms-cmb-macros" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
                         '<label id="fms-lbl-macros" style="vertical-align: middle;"><%= scope.txtWarnMacrosDesc %></label></div></td>',
                 '</tr>','<tr class="divider macros"></tr>',
+            '</tbody></table>',
+        '</div>',
+        '<div>',
+            '<table style="margin: 10px 0;"><tbody>',
                 '<tr>',
                     '<td class="left"></td>',
                     '<td class="right"><button id="fms-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
                 '</tr>',
-            '</tbody></table>'
+            '</tbody></table>',
+        '</div>'
         ].join('')),
 
         initialize: function(options) {
@@ -267,7 +273,7 @@ define([
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
-                menuStyle   : 'max-height: 210px;',
+                menuStyle   : 'max-height: 157px;',
                 data        : [
                     { value: -1, displayValue: this.txtFitSlide },
                     { value: -2, displayValue: this.txtFitWidth },
@@ -389,16 +395,24 @@ define([
 
             this.btnApply.on('click', _.bind(this.applySettings, this));
 
+            this.pnlSettings = $markup.findById('#fms-flex-settings');
+
             this.$el = $(node).html($markup);
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: this.$el,
+                    el: this.pnlSettings,
                     suppressScrollX: true,
                     alwaysVisibleY: true
                 });
             }
 
+            Common.NotificationCenter.on({
+                'window:resize': function() {
+                    me.isVisible() && me.updateScroller();
+                }
+            });
+
             return this;
         },
 
@@ -406,7 +420,14 @@ define([
             Common.UI.BaseView.prototype.show.call(this,arguments);
 
             this.updateSettings();
-            this.scroller && this.scroller.update();
+            this.updateScroller();
+        },
+
+        updateScroller: function() {
+            if (this.scroller) {
+                this.scroller.update();
+                this.pnlSettings.toggleClass('bordered', this.scroller.isVisible());
+            }
         },
 
         setMode: function(mode) {
@@ -731,7 +752,8 @@ define([
             this.rendered = false;
 
             this.template = _.template([
-                '<table class="main">',
+            '<div id="fms-flex-info">',
+                '<table class="main" style="margin: 30px 0 0;">',
                     '<tr>',
                         '<td class="left"><label>' + this.txtPlacement + '</label></td>',
                         '<td class="right"><label id="id-info-placement">-</label></td>',
@@ -792,12 +814,17 @@ define([
                             '</table>',
                         '</div></td>',
                     '</tr>',
-                    '<tr class="divider"></tr>',
+                    '<tr style="height: 5px;"></tr>',
+                '</table>',
+            '</div>',
+            '<div id="fms-flex-apply">',
+                '<table class="main" style="margin: 10px 0;">',
                     '<tr>',
                         '<td class="left"></td>',
                         '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
                     '</tr>',
-                '</table>'
+                '</table>',
+            '</div>'
             ].join(''));
 
             this.menu = options.menu;
@@ -864,6 +891,7 @@ define([
                         idx = me.tblAuthor.find('tr').index(el);
                     el.remove();
                     me.authors.splice(idx, 1);
+                    me.updateScroller(true);
                 }
             });
 
@@ -885,6 +913,7 @@ define([
                             if (!isFromApply) {
                                 var div = $(Common.Utils.String.format(me.authorTpl, Common.Utils.String.htmlEncode(str)));
                                 me.trAuthor.before(div);
+                                me.updateScroller();
                             }
                         }
                     });
@@ -897,6 +926,9 @@ define([
             });
             this.btnApply.on('click', _.bind(this.applySettings, this));
 
+            this.pnlInfo = $markup.findById('#fms-flex-info');
+            this.pnlApply = $markup.findById('#fms-flex-apply');
+
             this.rendered = true;
 
             this.updateInfo(this.doc);
@@ -904,12 +936,18 @@ define([
             this.$el = $(node).html($markup);
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: this.$el,
+                    el: this.pnlInfo,
                     suppressScrollX: true,
                     alwaysVisibleY: true
                 });
             }
 
+            Common.NotificationCenter.on({
+                'window:resize': function() {
+                    me.isVisible() && me.updateScroller();
+                }
+            });
+
             return this;
         },
 
@@ -917,13 +955,24 @@ define([
             Common.UI.BaseView.prototype.show.call(this,arguments);
 
             this.updateFileInfo();
-            this.scroller && this.scroller.update();
+            this.scroller && this.scroller.scrollTop(0);
+            this.updateScroller();
         },
 
         hide: function() {
             Common.UI.BaseView.prototype.hide.call(this,arguments);
         },
 
+        updateScroller: function(destroy) {
+            if (this.scroller) {
+                this.scroller.update(destroy ? {
+                    suppressScrollX: true,
+                    alwaysVisibleY: true
+                } : undefined);
+                this.pnlInfo.toggleClass('bordered', this.scroller.isVisible());
+            }
+        },
+
         updateInfo: function(doc) {
             if (!this.doc && doc && doc.info) {
                 doc.info.author && console.log("Obsolete: The 'author' parameter of the document 'info' section is deprecated. Please use 'owner' instead.");
@@ -1034,7 +1083,7 @@ define([
         setMode: function(mode) {
             this.mode = mode;
             this.inputAuthor.setVisible(mode.isEdit);
-            this.btnApply.setVisible(mode.isEdit);
+            this.pnlApply.toggleClass('hidden', !mode.isEdit);
             this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
             if (!mode.isEdit) {
                 this.inputTitle._input.attr('placeholder', '');
@@ -1107,7 +1156,7 @@ define([
             this.rendered = false;
 
             this.template = _.template([
-                '<table class="main">',
+                '<table class="main" style="margin: 30px 0;">',
                     '<tr class="rights">',
                         '<td class="left" style="vertical-align: top;"><label>' + this.txtRights + '</label></td>',
                         '<td class="right"><div id="id-info-rights"></div></td>',
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index 55091747e..7ce578c3e 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -190,9 +190,19 @@
         }
 
         #panel-settings {
-            padding: 0 30px;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+
+            #fms-flex-settings {
+                &.bordered {
+                    border-bottom: 1px solid @gray;
+                }
+                overflow: hidden;
+                position: relative;
+            }
+
             table {
-                margin: 30px 0;
                 width: 100%;
 
                 tr {
@@ -375,9 +385,27 @@
             }
         }
 
-        #panel-info,
+        #panel-info {
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+
+            #fms-flex-info {
+                &.bordered {
+                    border-bottom: 1px solid @gray;
+                }
+                overflow: hidden;
+                position: relative;
+            }
+
+        }
+
         #panel-rights {
             padding: 0 30px;
+        }
+
+        #panel-info,
+        #panel-rights {
             table {
                 tr {
                     td {
@@ -406,7 +434,6 @@
 
                 &.main {
                     width: 100%;
-                    margin: 30px 0;
                 }
             }
 

From 1b5abe0aa9cec85e179ba6645db30b47e25e7c0d Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Fri, 7 Aug 2020 13:51:26 +0300
Subject: [PATCH 5/6] [DE][PE] File menu refactoring

---
 .../main/app/view/FileMenuPanels.js           |  8 ++---
 .../main/resources/less/filemenu.less         | 36 +++++++------------
 .../main/app/view/FileMenuPanels.js           |  8 ++---
 .../main/resources/less/leftmenu.less         | 36 +++++++------------
 4 files changed, 32 insertions(+), 56 deletions(-)

diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index 192c351e1..7df74a918 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -188,7 +188,7 @@ define([
         menu: undefined,
 
         template: _.template([
-        '<div id="fms-flex-settings">',
+        '<div class="flex-settings">',
             '<table style="margin: 30px 0 0;"><tbody>',
                 /** coauthoring begin **/
                 '<tr class="comments">',
@@ -452,7 +452,7 @@ define([
 
             this.btnApply.on('click', this.applySettings.bind(this));
 
-            this.pnlSettings = $markup.findById('#fms-flex-settings');
+            this.pnlSettings = $markup.find('.flex-settings').addBack().filter('.flex-settings');
 
             this.$el = $(node).html($markup);
 
@@ -846,7 +846,7 @@ define([
             this.rendered = false;
 
             this.template = _.template([
-            '<div id="fms-flex-info">',
+            '<div class="flex-settings">',
                 '<table class="main" style="margin: 30px 0 0;">',
                     '<tr>',
                         '<td class="left"><label>' + this.txtPlacement + '</label></td>',
@@ -1052,7 +1052,7 @@ define([
             });
             this.btnApply.on('click', _.bind(this.applySettings, this));
 
-            this.pnlInfo = $markup.findById('#fms-flex-info');
+            this.pnlInfo = $markup.find('.flex-settings').addBack().filter('.flex-settings');
             this.pnlApply = $markup.findById('#fms-flex-apply');
 
             this.rendered = true;
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index e80c36846..210380167 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -120,21 +120,26 @@
   }
 }
 
-#panel-settings {
+.flex-settings {
   #file-menu-panel & {
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  #fms-flex-settings {
     &.bordered {
       border-bottom: 1px solid @gray;
     }
     overflow: hidden;
     position: relative;
   }
+}
 
+#panel-settings,
+#panel-info {
+  #file-menu-panel & {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+#panel-settings {
   table {
     width: 100%;
 
@@ -315,23 +320,6 @@
   }
 }
 
-#panel-info {
-  #file-menu-panel & {
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  #fms-flex-info {
-    &.bordered {
-      border-bottom: 1px solid @gray;
-    }
-    overflow: hidden;
-    position: relative;
-  }
-
-}
-
 #panel-rights {
   #file-menu-panel & {
     padding: 0 30px;
diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index d4d71d97a..4f96554f3 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -180,7 +180,7 @@ define([
         menu: undefined,
 
         template: _.template([
-        '<div id="fms-flex-settings">',
+        '<div class="flex-settings">',
             '<table style="margin: 30px 0 0;"><tbody>',
                 '<tr class="edit">',
                     '<td class="left"><label><%= scope.txtSpellCheck %></label></td>',
@@ -395,7 +395,7 @@ define([
 
             this.btnApply.on('click', _.bind(this.applySettings, this));
 
-            this.pnlSettings = $markup.findById('#fms-flex-settings');
+            this.pnlSettings = $markup.find('.flex-settings').addBack().filter('.flex-settings');
 
             this.$el = $(node).html($markup);
 
@@ -752,7 +752,7 @@ define([
             this.rendered = false;
 
             this.template = _.template([
-            '<div id="fms-flex-info">',
+            '<div class="flex-settings">',
                 '<table class="main" style="margin: 30px 0 0;">',
                     '<tr>',
                         '<td class="left"><label>' + this.txtPlacement + '</label></td>',
@@ -926,7 +926,7 @@ define([
             });
             this.btnApply.on('click', _.bind(this.applySettings, this));
 
-            this.pnlInfo = $markup.findById('#fms-flex-info');
+            this.pnlInfo = $markup.find('.flex-settings').addBack().filter('.flex-settings');
             this.pnlApply = $markup.findById('#fms-flex-apply');
 
             this.rendered = true;
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index 7ce578c3e..65099d00f 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -189,19 +189,22 @@
             }
         }
 
-        #panel-settings {
+        .flex-settings {
+            &.bordered {
+                border-bottom: 1px solid @gray;
+            }
+            overflow: hidden;
+            position: relative;
+        }
+
+        #panel-settings,
+        #panel-info {
             padding: 0;
             display: flex;
             flex-direction: column;
+        }
 
-            #fms-flex-settings {
-                &.bordered {
-                    border-bottom: 1px solid @gray;
-                }
-                overflow: hidden;
-                position: relative;
-            }
-
+        #panel-settings {
             table {
                 width: 100%;
 
@@ -385,21 +388,6 @@
             }
         }
 
-        #panel-info {
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-
-            #fms-flex-info {
-                &.bordered {
-                    border-bottom: 1px solid @gray;
-                }
-                overflow: hidden;
-                position: relative;
-            }
-
-        }
-
         #panel-rights {
             padding: 0 30px;
         }

From d615fae28708df9412ba5f95277facb0103c5ac9 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Fri, 7 Aug 2020 15:27:04 +0300
Subject: [PATCH 6/6] [SSE] Refactoring advanced settings and document info:
 apply button is always visible

---
 .../main/app/view/FileMenuPanels.js           | 125 +++++++++++++++---
 .../main/resources/less/leftmenu.less         |  32 ++++-
 2 files changed, 133 insertions(+), 24 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index ac727379f..3d5845828 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -270,7 +270,9 @@ define([
         menu: undefined,
 
         template: _.template([
-            '<table class="main"><tbody>',
+            '<div>',
+            '<div class="flex-settings">',
+            '<table class="main" style="margin: 30px 0 0;"><tbody>',
                 '<tr>',
                     '<td class="left"><label><%= scope.textSettings %></label></td>',
                     '<td class="right"><div id="advsettings-print-combo-sheets" class="input-group-nr"></div></td>',
@@ -307,7 +309,7 @@ define([
                             '</tr>',
                         '</table>',
                     '</div></td>',
-                '</tr>','<tr class="divider"></tr>',
+                '</tr>',
                 '<tr>',
                     '<td class="left" style="vertical-align: top;"><label><%= scope.strMargins %></label></td>',
                     '<td class="right" style="vertical-align: top;"><div id="advsettings-margins">',
@@ -330,19 +332,25 @@ define([
                             '</tr>',
                         '</table>',
                     '</div></td>',
-                '</tr>','<tr class="divider"></tr>',
+                '</tr>',
                 '<tr>',
                 '<td class="left" style="vertical-align: top;"><label><%= scope.strPrint %></label></td>',
                 '<td class="right" style="vertical-align: top;"><div id="advsettings-print">',
                     '<div id="advsettings-print-chb-grid" style="margin-bottom: 10px;"></div>',
                     '<div id="advsettings-print-chb-rows"></div>',
                 '</div></td>',
-                '</tr>','<tr class="divider"></tr>','<tr class="divider"></tr>',
+                '</tr>','<tr class="divider"></tr>',
+            '</tbody></table>',
+        '</div>',
+        '<div>',
+            '<table class="main" style="margin: 10px 0;"><tbody>',
                 '<tr>',
                 '<td class="left"></td>',
                 '<td class="right"><button id="advsettings-print-button-save" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
                 '</tr>',
-            '</tbody></table>'
+            '</tbody></table>',
+        '</div>',
+        '</div>'
         ].join('')),
 
         initialize: function(options) {
@@ -512,18 +520,27 @@ define([
                 el: $markup.findById('#advsettings-print-button-save')
             });
 
+            this.pnlSettings = $markup.find('.flex-settings').addBack().filter('.flex-settings');
+
             // if (parentEl)
             //     this.setElement(parentEl, false);
             this.$el = $(parentEl).html($markup);
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: this.$el,
+                    el: this.pnlSettings,
                     suppressScrollX: true,
                     alwaysVisibleY: true
                 });
             }
 
+            var me = this;
+            Common.NotificationCenter.on({
+                'window:resize': function() {
+                    me.isVisible() && me.updateScroller();
+                }
+            });
+
             this.fireEvent('render:after', this);
             return this;
         },
@@ -582,10 +599,21 @@ define([
                 this.updateMetricUnit();
                 this._initSettings = false;
             }
-            this.scroller && this.scroller.update();
+            this.updateScroller();
             this.fireEvent('show', this);
         },
 
+        isVisible: function() {
+            return (this.$el || $(this.el)).is(":visible");
+        },
+
+        updateScroller: function() {
+            if (this.scroller) {
+                this.scroller.update();
+                this.pnlSettings.toggleClass('bordered', this.scroller.isVisible());
+            }
+        },
+
         okButtonText:           'Save',
         strPortrait:            'Portrait',
         strLandscape:           'Landscape',
@@ -618,7 +646,9 @@ define([
         menu: undefined,
 
         template: _.template([
-            '<table class="main"><tbody>',
+        '<div>',
+        '<div class="flex-settings">',
+            '<table class="main" style="margin: 30px 0 0;"><tbody>',
                 /** coauthoring begin **/
                 '<tr class="comments">',
                     '<td class="left"><label><%= scope.txtLiveComment %></label></td>',
@@ -693,11 +723,17 @@ define([
                         '<div><div id="fms-cmb-macros" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
                         '<label id="fms-lbl-macros" style="vertical-align: middle;"><%= scope.txtWarnMacrosDesc %></label></div></td>',
                 '</tr>','<tr class="divider macros"></tr>',
+            '</tbody></table>',
+        '</div>',
+        '<div>',
+            '<table class="main" style="margin: 10px 0;"><tbody>',
                 '<tr>',
                     '<td class="left"></td>',
                     '<td class="right"><button id="fms-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
                 '</tr>',
-            '</tbody></table>'
+            '</tbody></table>',
+        '</div>',
+        '</div>'
         ].join('')),
 
         initialize: function(options) {
@@ -751,7 +787,7 @@ define([
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
-                menuStyle   : 'max-height: 210px;',
+                menuStyle   : 'max-height: 157px;',
                 data        : [
                     { value: 50, displayValue: "50%" },
                     { value: 60, displayValue: "60%" },
@@ -946,18 +982,26 @@ define([
             this.btnApply = new Common.UI.Button({
                 el: $markup.findById('#fms-btn-apply')
             });
-
             this.btnApply.on('click', _.bind(this.applySettings, this));
 
+            this.pnlSettings = $markup.find('.flex-settings').addBack().filter('.flex-settings');
+
             this.$el = $(node).html($markup);
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: this.$el,
+                    el: this.pnlSettings,
                     suppressScrollX: true,
                     alwaysVisibleY: true
                 });
             }
+
+            Common.NotificationCenter.on({
+                'window:resize': function() {
+                    me.isVisible() && me.updateScroller();
+                }
+            });
+
             return this;
         },
 
@@ -965,7 +1009,18 @@ define([
             Common.UI.BaseView.prototype.show.call(this,arguments);
 
             this.updateSettings();
-            this.scroller && this.scroller.update();
+            this.updateScroller();
+        },
+
+        isVisible: function() {
+            return (this.$el || $(this.el)).is(":visible");
+        },
+
+        updateScroller: function() {
+            if (this.scroller) {
+                this.scroller.update();
+                this.pnlSettings.toggleClass('bordered', this.scroller.isVisible());
+            }
         },
 
         setMode: function(mode) {
@@ -1226,7 +1281,7 @@ define([
         menu: undefined,
 
         template: _.template([
-            '<table class="main"><tbody>',
+            '<table class="main" style="margin: 30px 0;"><tbody>',
             '<tr>',
                 '<td class="left" style="padding-bottom: 8px;"><label><%= scope.strDictionaryLanguage %></label></td>',
                 '<td class="right" style="padding-bottom: 8px;"><span id="fms-cmb-dictionary-language"></span></td>',
@@ -1542,7 +1597,8 @@ define([
             this.rendered = false;
 
             this.template = _.template([
-                '<table class="main">',
+            '<div class="flex-settings">',
+                '<table class="main" style="margin: 30px 0 0;">',
                     '<tr>',
                         '<td class="left"><label>' + this.txtPlacement + '</label></td>',
                         '<td class="right"><label id="id-info-placement">-</label></td>',
@@ -1599,12 +1655,17 @@ define([
                             '</table>',
                         '</div></td>',
                     '</tr>',
-                    '<tr class="divider"></tr>',
+                '<tr style="height: 5px;"></tr>',
+                '</table>',
+            '</div>',
+            '<div id="fms-flex-apply">',
+                '<table class="main" style="margin: 10px 0;">',
                     '<tr>',
                         '<td class="left"></td>',
                         '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
                     '</tr>',
-                '</table>'
+                '</table>',
+            '</div>'
             ].join(''));
 
             this.menu = options.menu;
@@ -1671,6 +1732,7 @@ define([
                         idx = me.tblAuthor.find('tr').index(el);
                     el.remove();
                     me.authors.splice(idx, 1);
+                    me.updateScroller(true);
                 }
             });
 
@@ -1692,6 +1754,7 @@ define([
                             if (!isFromApply) {
                                 var div = $(Common.Utils.String.format(me.authorTpl, Common.Utils.String.htmlEncode(str)));
                                 me.trAuthor.before(div);
+                                me.updateScroller();
                             }
                         }
                     });
@@ -1704,6 +1767,9 @@ define([
             });
             this.btnApply.on('click', _.bind(this.applySettings, this));
 
+            this.pnlInfo = $markup.find('.flex-settings').addBack().filter('.flex-settings');
+            this.pnlApply = $markup.findById('#fms-flex-apply');
+
             this.rendered = true;
 
             this.updateInfo(this.doc);
@@ -1711,12 +1777,18 @@ define([
             this.$el = $(node).html($markup);
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: this.$el,
+                    el: this.pnlInfo,
                     suppressScrollX: true,
                     alwaysVisibleY: true
                 });
             }
 
+            Common.NotificationCenter.on({
+                'window:resize': function() {
+                    me.isVisible() && me.updateScroller();
+                }
+            });
+
             return this;
         },
 
@@ -1724,13 +1796,24 @@ define([
             Common.UI.BaseView.prototype.show.call(this,arguments);
 
             this.updateFileInfo();
-            this.scroller && this.scroller.update();
+            this.scroller && this.scroller.scrollTop(0);
+            this.updateScroller();
         },
 
         hide: function() {
             Common.UI.BaseView.prototype.hide.call(this,arguments);
         },
 
+        updateScroller: function(destroy) {
+            if (this.scroller) {
+                this.scroller.update(destroy ? {
+                    suppressScrollX: true,
+                    alwaysVisibleY: true
+                } : undefined);
+                this.pnlInfo.toggleClass('bordered', this.scroller.isVisible());
+            }
+        },
+
         updateInfo: function(doc) {
             if (!this.doc && doc && doc.info) {
                 doc.info.author && console.log("Obsolete: The 'author' parameter of the document 'info' section is deprecated. Please use 'owner' instead.");
@@ -1841,7 +1924,7 @@ define([
         setMode: function(mode) {
             this.mode = mode;
             this.inputAuthor.setVisible(mode.isEdit);
-            this.btnApply.setVisible(mode.isEdit);
+            this.pnlApply.toggleClass('hidden', !mode.isEdit);
             this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
             if (!mode.isEdit) {
                 this.inputTitle._input.attr('placeholder', '');
@@ -1913,7 +1996,7 @@ define([
             this.rendered = false;
 
             this.template = _.template([
-                '<table class="main">',
+                '<table class="main" style="margin: 30px 0;">',
                     '<tr class="rights">',
                         '<td class="left" style="vertical-align: top;"><label>' + this.txtRights + '</label></td>',
                         '<td class="right"><div id="id-info-rights"></div></td>',
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index 19e252db7..a25fa59ed 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -179,6 +179,31 @@
             }
         }
 
+        .flex-settings {
+            &.bordered {
+                border-bottom: 1px solid @gray;
+            }
+            overflow: hidden;
+            position: relative;
+        }
+
+        #panel-settings-general,
+        #panel-settings-print {
+            & > div {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                display: flex;
+                flex-direction: column;
+            }
+        }
+
+        #panel-info {
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+        }
+
         #panel-settings {
             padding: 0;
 
@@ -250,7 +275,6 @@
 
                 &.main {
                     width: 100%;
-                    margin: 30px 0;
                 }
 
                 &.no-padding {
@@ -428,9 +452,12 @@
             }
         }
 
-        #panel-info,
         #panel-rights {
             padding: 0 30px;
+        }
+
+        #panel-info,
+        #panel-rights {
             table {
                 tr {
                     td {
@@ -459,7 +486,6 @@
 
                 &.main {
                     width: 100%;
-                    margin: 30px 0;
                 }
             }