added logic

apps/documenteditor/main/app/controller/Statusbar.js

@@ -60,7 +60,8 @@ define([
                     'zoom:value': function(value) {
                         this.api.zoom(value);
                         Common.NotificationCenter.trigger('edit:complete', this.statusbar);
-                    }.bind(this)
+                    }.bind(this),
+                    'pages:multiple': _.bind(me.onMultiplePages, me)
                 },
                 'ViewTab': {
                     'statusbar:hide': _.bind(me.onChangeCompactView, me)
@@ -120,6 +121,7 @@ define([
                     me.statusbar.$el.find('.hide-select-tools').removeClass('hide-select-tools');
                 }
             });
+            Common.NotificationCenter.on('pages:multiple', me.onOuterMultiplePages.bind(me));
             Common.NotificationCenter.on('app:ready', me.onAppReady.bind(me));
         },
 
@@ -240,6 +242,17 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.statusbar);
         },
 
+        onMultiplePages: function (pressed) {
+            if (this.api) {
+                this.api.SetMultipageViewMode(pressed);
+                Common.NotificationCenter.trigger('pages:multiple', pressed)
+            }
+        },
+
+        onOuterMultiplePages: function (isMultiple) {
+            this.statusbar.btnMultiplePages.toggle(isMultiple);
+        },
+
         /*
         *   api events
         * */

apps/documenteditor/main/app/controller/ViewTab.js

@@ -61,6 +61,7 @@ define([
             Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
             Common.NotificationCenter.on('document:ready', _.bind(this.onDocumentReady, this));
             Common.NotificationCenter.on('tabstyle:changed', this.onTabStyleChange.bind(this));
+            Common.NotificationCenter.on('pages:multiple', this.onOuterMultiplePages.bind(this));
         },
 
         setApi: function (api) {
@@ -95,7 +96,8 @@ define([
                     'macros:record':  _.bind(this.onClickMacrosRec, this),
                     'macros:pause':  _.bind(this.onClickMacrosPause, this),
                     'pointer:select': _.bind(this.onPointerType, this, 'select'),
-                    'pointer:hand': _.bind(this.onPointerType, this, 'hand')
+                    'pointer:hand': _.bind(this.onPointerType, this, 'hand'),
+                    'pages:multiple': _.bind(this.onMultiplePages, this)
                 },
                 'Toolbar': {
                     'view:compact': _.bind(function (toolbar, state) {
@@ -281,6 +283,17 @@ define([
             Common.Utils.lockControls(Common.enumLock.disableOnStart, false, {array: this.view.lockedControls});
         },
 
+        onMultiplePages: function (pressed) {
+            if (this.api) {
+                this.api.SetMultipageViewMode(pressed);
+                Common.NotificationCenter.trigger('pages:multiple', pressed);
+            }
+        },
+
+        onOuterMultiplePages: function (isMultiple) {
+            this.view.btnMultiplePages.toggle(isMultiple);
+        },
+
         onZoomChange: function (percent, type) {
             this.view.btnsFitToPage.forEach(function (btn) {
                 btn.toggle(type === 2, true);

apps/documenteditor/main/app/template/StatusBar.template

@@ -27,6 +27,7 @@
         <button id="status-btn-select-tool" type="button" class="btn small btn-toolbar hide-select-tools" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-select-tool">&nbsp;</i></button>
         <button id="status-btn-hand-tool" type="button" class="btn small btn-toolbar hide-select-tools" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-hand-tool">&nbsp;</i></button>
         <div class="separator short hide-select-tools"></div>
+        <button id="btn-multiple-pages" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtopage">&nbsp;</i></button>
         <button id="btn-zoom-topage" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtopage">&nbsp;</i></button>
         <button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
         <button id="btn-zoom-down" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>

apps/documenteditor/main/app/view/Statusbar.js

@@ -68,6 +68,7 @@ define([
         function _onAppReady(config) {
             var me = this;
             me.btnZoomToPage.updateHint(me.tipFitPage);
+            me.btnMultiplePages.updateHint(me.tipMultiplePages);
             me.btnZoomToWidth.updateHint(me.tipFitWidth);
             DE.getController('Common.Controllers.Shortcuts').updateShortcutHints({
                 ZoomOut: {
@@ -162,6 +163,10 @@ define([
                 me.fireEvent('zoom:value', [item.value]);
             });
 
+            me.btnMultiplePages.on('click', function (btn) {
+                me.fireEvent('pages:multiple', [btn.pressed])
+            })
+
             me.btnDocInfo.menu.on('show:after', _.bind(this.onDocInfoShow, this));
 
             me.onChangeProtectDocument();
@@ -211,6 +216,12 @@ define([
                     allowDepress: false
                 });
 
+                this.btnMultiplePages = new Common.UI.Button({
+                    hintAnchor: 'top',
+                    toggleGroup: 'multiple-pages',
+                    enableToggle: true
+                });
+
                 this.btnZoomToPage = new Common.UI.Button({
                     hintAnchor: 'top',
                     toggleGroup: 'status-zoom',
@@ -346,6 +357,7 @@ define([
 
                 this.fireEvent('render:before', [this.$layout]);
 
+                _btn_render(me.btnMultiplePages, $('#btn-multiple-pages', me.$layout));
                 _btn_render(me.btnZoomToPage, $('#btn-zoom-topage', me.$layout));
                 _btn_render(me.btnZoomToWidth, $('#btn-zoom-towidth', me.$layout));
                 _btn_render(me.cntZoom, $('.cnt-zoom',me.$layout));

apps/documenteditor/main/app/view/ViewTab.js

@@ -71,13 +71,8 @@ define([
                     '<span class="btn-slot text slot-btn-ftw" style="text-align: center;"></span>' +
                 '</div>' +
             '</div>' +
-            '<div class="group small">' +
-                '<div class="elset">' +
-                    '<span class="btn-slot text" id="slot-btn-one-page"></span>' +
-                '</div>' +
-                '<div class="elset">' +
-                    '<span class="btn-slot text" id="slot-btn-multiple-pages"></span>' +
-                '</div>' +
+            '<div class="group">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-multiple-pages"></span>' +
             '</div>' +
             '<div class="separator long"></div>' +
             '<div class="group">' +
@@ -158,6 +153,9 @@ define([
                 me.btnDarkDocument.on('click', _.bind(function (e) {
                     me.fireEvent('darkmode:change', [e.pressed]);
                 }, me));
+                me.btnMultiplePages.on('click', _.bind(function (e) {
+                    me.fireEvent('pages:multiple', [e.pressed]);
+                }, me));
                 me.cmbsZoom.forEach(function (cmb) {
                     cmb.on('combo:focusin', _.bind(me.onComboOpen, this, false));
                     cmb.on('show:after', _.bind(me.onComboOpen, this, true));
@@ -301,29 +299,15 @@ define([
                 });
                 this.lockedControls.push(this.chRulers);
 
-                this.btnOnePage = new Common.UI.Button({
-                    cls: 'btn-toolbar',
-                    iconCls: 'toolbar__icon btn-ic-zoomtowidth',
-                    lock: [_set.lostConnect, _set.disableOnStart],
-                    caption: this.textOnePage,
-                    toggleGroup: 'pages-in-row',
-                    enableToggle: true,
-                    dataHint: '1',
-                    dataHintDirection: 'left',
-                    dataHintOffset: 'medium'
-                });
-                this.lockedControls.push(this.btnOnePage);
-
                 this.btnMultiplePages = new Common.UI.Button({
-                    cls: 'btn-toolbar',
-                    iconCls: 'toolbar__icon btn-ic-zoomtowidth',
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-big-contents',
                     lock: [_set.lostConnect, _set.disableOnStart],
                     caption: this.textMultiplePages,
-                    toggleGroup: 'pages-in-row',
                     enableToggle: true,
                     dataHint: '1',
-                    dataHintDirection: 'left',
-                    dataHintOffset: 'medium'
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small',
                 });
                 this.lockedControls.push(this.btnMultiplePages);
 
@@ -442,11 +426,10 @@ define([
                 this.btnsFitToWidth[0].render($host.find('.slot-btn-ftw'));
                 this.btnInterfaceTheme.render($host.find('#slot-btn-interface-theme'));
                 this.btnDarkDocument.render($host.find('#slot-btn-dark-document'));
+                this.btnMultiplePages.render($host.find('#slot-btn-multiple-pages'));
                 this.chStatusbar.render($host.find('#slot-chk-statusbar'));
                 this.chToolbar.render($host.find('#slot-chk-toolbar'));
                 this.chRulers.render($host.find('#slot-chk-rulers'));
-                this.btnOnePage.render($host.find('#slot-btn-one-page'));
-                this.btnMultiplePages.render($host.find('#slot-btn-multiple-pages'));
                 this.btnMacros && this.btnMacros.render($host.find('#slot-btn-macros'));
                 this.chLeftMenu.render($host.find('#slot-chk-leftmenu'));
                 this.chRightMenu.render($host.find('#slot-chk-rightmenu'));
@@ -478,14 +461,13 @@ define([
                 this.btnNavigation.updateHint(this.tipHeadings);
                 this.btnInterfaceTheme.updateHint(this.tipInterfaceTheme);
                 this.btnDarkDocument.updateHint(this.tipDarkDocument);
+                this.btnMultiplePages.updateHint(this.tipMultiplePages)
                 this.btnsFitToPage.forEach(function (btn) {
                     btn.updateHint(me.tipFitToPage);
                 });
                 this.btnsFitToWidth.forEach(function (btn) {
                     btn.updateHint(me.tipFitToWidth);
                 });
-                this.btnOnePage.updateHint(this.tipOnePage);
-                this.btnMultiplePages.updateHint(this.tipMultiplePages);
                 this.btnMacros && this.btnMacros.updateHint(this.tipMacros);
                 this.btnRecMacro && this.btnRecMacro.updateHint(this.tipRecMacro);
                 this.btnPauseMacro && this.btnPauseMacro.updateHint(this.tipPauseMacro);

apps/documenteditor/main/locale/en.json

@@ -3737,6 +3737,7 @@
   "DE.Views.Statusbar.goToPageText": "Go to Page",
   "DE.Views.Statusbar.pageIndexText": "Page {0} of {1}",
   "DE.Views.Statusbar.tipFitPage": "Fit to page",
+  "DE.Views.Statusbar.tipMultiplePages": "Multiple pages",
   "DE.Views.Statusbar.tipFitWidth": "Fit to width",
   "DE.Views.Statusbar.tipHandTool": "Hand tool",
   "DE.Views.Statusbar.tipSelectTool": "Select tool",
@@ -4277,8 +4278,6 @@
   "DE.Views.ViewTab.textFill": "Fill",
   "DE.Views.ViewTab.textFitToPage": "Fit To Page",
   "DE.Views.ViewTab.textFitToWidth": "Fit To Width",
-  "DE.Views.ViewTab.textOnePage": "One Page",
-  "DE.Views.ViewTab.textMultiplePages": "Multiple Pages",
   "DE.Views.ViewTab.textInterfaceTheme": "Interface Theme",
   "DE.Views.ViewTab.textLeftMenu": "Left Panel",
   "DE.Views.ViewTab.textLine": "Line",
@@ -4294,6 +4293,7 @@
   "DE.Views.ViewTab.textStopMacro": "Stop recording",
   "DE.Views.ViewTab.textTabStyle": "Tab style",
   "DE.Views.ViewTab.textZoom": "Zoom",
+  "DE.Views.ViewTab.textMultiplePages": "Multiple Pages",
   "DE.Views.ViewTab.tipDarkDocument": "Dark document",
   "DE.Views.ViewTab.tipFitToPage": "Fit to page",
   "DE.Views.ViewTab.tipFitToWidth": "Fit to width",
@@ -4304,7 +4304,6 @@
   "DE.Views.ViewTab.tipRecMacro": "Record macro",
   "DE.Views.ViewTab.tipResumeMacro": "Resume recording",
   "DE.Views.ViewTab.tipStopMacro": "Stop recording",
-  "DE.Views.ViewTab.tipOnePage": "One page",
   "DE.Views.ViewTab.tipMultiplePages": "Multiple pages",
   "DE.Views.WatermarkSettingsDialog.textAuto": "Auto",
   "DE.Views.WatermarkSettingsDialog.textBold": "Bold",

apps/documenteditor/main/resources/less/statusbar.less

@@ -20,7 +20,7 @@
         text-align: center;
     }
 
-    #btn-zoom-topage, #btn-zoom-towidth {
+    #btn-zoom-topage, #btn-zoom-towidth, #btn-multiple-pages {
         .margin-right-8();
     }