[SSE] Add number page and name of active sheet in print settings in file menu

apps/spreadsheeteditor/main/app/view/FileMenuPanels.js

@@ -2765,6 +2765,12 @@ define([
                     '<div id="print-navigation">',
                         '<div id="print-prev-page" style="display: inline-block; margin-right: 4px;"></div>',
                         '<div id="print-next-page" style="display: inline-block;"></div>',
+                        '<div class="page-number">',
+                            '<label><%= scope.txtPage %></label>',
+                            '<div id="print-number-page"></div>',
+                            '<label id="print-count-page"><%= scope.txtOf %></label>',
+                        '</div>',
+                        '<label id="print-active-sheet"><%= scope.txtSheet %></label>',
                     '</div>',
                 '</div>',
             '</div>'
@@ -3034,6 +3040,20 @@ define([
                 dataHintDirection: 'top'
             });
 
+            this.countOfPages = $markup.findById('#print-count-page');
+
+            this.txtNumberPage = new Common.UI.InputField({
+                el: $markup.findById('#print-number-page'),
+                allowBlank: true,
+                validateOnChange: true,
+                style: 'width: 32px;',
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
+            this.txtActiveSheet = $markup.findById('#print-active-sheet');
+
             this.$el = $(node).html($markup);
 
             this.$el.on('click', '#print-header-footer-settings', _.bind(this.openHeaderSettings, this));
@@ -3166,6 +3186,18 @@ define([
             SSE.getController('Toolbar').onEditHeaderClick();
         },
 
+        updateCountOfPages: function (count) {
+            this.countOfPages.text(
+                Common.Utils.String.format(this.txtOf, count)
+            );
+        },
+
+        updateActiveSheet: function (name) {
+            this.txtActiveSheet.text(
+                Common.Utils.String.format(this.txtSheet, name)
+            );
+        },
+
         txtPrint: 'Print',
         txtSave: 'Save',
         txtPrintRange: 'Print range',
@@ -3198,7 +3230,10 @@ define([
         txtPrintHeadings: 'Print row and columns headings',
         txtHeaderFooterSettings: 'Header/footer settings',
         txtApplyToAllSheets: 'Apply to all sheets',
-        txtIgnore: 'Ignore print area'
+        txtIgnore: 'Ignore print area',
+        txtPage: 'Page',
+        txtOf: 'of {0}',
+        txtSheet: 'Sheet: {0}'
     }, SSE.Views.FileMenuPanels.PrintWithPreview || {}));
 
 });

apps/spreadsheeteditor/main/resources/less/leftmenu.less

@@ -582,6 +582,7 @@
                 height: 50px;
                 padding-left: 20px;
                 padding-top: 10px;
+                display: flex;
                 .btn-prev-page, .btn-next-page {
                     background-color: transparent;
                     padding: 0;
@@ -616,6 +617,23 @@
                         transform: rotate(135deg) translate(4px, 0px);
                     }
                 }
+                .page-number {
+                    display: flex;
+                    align-items: center;
+                    height: 20px;
+                    margin-left: 10px;
+                    label {
+                        font-weight: bold;
+                    }
+                    #print-count-page, #print-number-page {
+                        margin-left: 4px;
+                    }
+                }
+                #print-active-sheet {
+                    margin-left: 12px;
+                    height: 20px;
+                    line-height: 20px;
+                }
             }
             #print-preview {
                 height: calc(100% - 50px);