Merge pull request 'feature/pages-in-row' (#938) from feature/pages-in-row into release/v9.3.0

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

@@ -60,10 +60,14 @@ 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)
+                    'statusbar:hide': _.bind(me.onChangeCompactView, me),
+                    'pages:multiplechanged': _.bind(function (isMultiple) {
+                        this.statusbar.btnMultiplePages.toggle(isMultiple);
+                    }, this)
                 }
             });
         },
@@ -240,6 +244,14 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.statusbar);
         },
 
+        onMultiplePages: function (pressed) {
+            if (this.api) {
+                this.api.zoomCustomMode();
+                this.api.SetMultipageViewMode(pressed);
+                this.statusbar.fireEvent('pages:multiplechanged', [pressed]);
+            }
+        },
+
         /*
         *   api events
         * */
@@ -247,6 +259,10 @@ define([
         _onZoomChange: function (percent, type) {
             this.statusbar.btnZoomToPage.toggle(type == 2, true);
             this.statusbar.btnZoomToWidth.toggle(type == 1, true);
+            if (type === 1 || type === 2 && this.statusbar.btnMultiplePages.pressed) {
+                this.api.SetMultipageViewMode(false);
+                this.statusbar.btnMultiplePages.toggle(false);
+            }
             $('.statusbar #label-zoom').text(Common.Utils.String.format(this.zoomText, percent));
             if (!this._isDocReady) return;
             var value = type == 2 ? -1 : (type == 1 ? -2 : percent);

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

@@ -95,7 +95,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) {
@@ -105,6 +106,9 @@ define([
                 'Statusbar': {
                     'view:hide': _.bind(function (statusbar, state) {
                         this.view.chStatusbar.setValue(!state, true);
+                    }, this),
+                    'pages:multiplechanged': _.bind(function (isMultiple) {
+                        this.view.btnMultiplePages.toggle(isMultiple);
                     }, this)
                 },
                 'LeftMenu': {
@@ -281,6 +285,14 @@ define([
             Common.Utils.lockControls(Common.enumLock.disableOnStart, false, {array: this.view.lockedControls});
         },
 
+        onMultiplePages: function (pressed) {
+            if (this.api) {
+                this.api.zoomCustomMode();
+                this.api.SetMultipageViewMode(pressed);
+                this.view.fireEvent('pages:multiplechanged', [pressed]);
+            }
+        },
+
         onZoomChange: function (percent, type) {
             this.view.btnsFitToPage.forEach(function (btn) {
                 btn.toggle(type === 2, true);
@@ -289,6 +301,11 @@ define([
                 btn.toggle(type === 1, true);
             });
 
+            if (type === 2 || type === 1 && this.view.btnMultiplePages.pressed) {
+                this.api.SetMultipageViewMode(false);
+                this.view.btnMultiplePages.toggle(false);
+            };
+
             this.setZoomValue(percent);
 
             this._state.zoomValue = percent;

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-multiple-pages">&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,6 +71,9 @@ define([
                     '<span class="btn-slot text slot-btn-ftw" style="text-align: center;"></span>' +
                 '</div>' +
             '</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">' +
                 '<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>' +
@@ -150,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));
@@ -293,6 +299,18 @@ define([
                 });
                 this.lockedControls.push(this.chRulers);
 
+                this.btnMultiplePages = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-big-multiple-pages',
+                    lock: [_set.lostConnect, _set.disableOnStart],
+                    caption: this.textMultiplePages,
+                    enableToggle: true,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small',
+                });
+                this.lockedControls.push(this.btnMultiplePages);
+
                 if (
                     this.appConfig.isEdit && 
                     !(this.appConfig.customization && this.appConfig.customization.macros===false) && 
@@ -408,6 +426,7 @@ 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'));
@@ -442,6 +461,7 @@ 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);
                 });

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",
@@ -4292,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",
@@ -4302,6 +4304,7 @@
   "DE.Views.ViewTab.tipRecMacro": "Record macro",
   "DE.Views.ViewTab.tipResumeMacro": "Resume recording",
   "DE.Views.ViewTab.tipStopMacro": "Stop recording",
+  "DE.Views.ViewTab.tipMultiplePages": "Multiple pages",
   "DE.Views.WatermarkSettingsDialog.textAuto": "Auto",
   "DE.Views.WatermarkSettingsDialog.textBold": "Bold",
   "DE.Views.WatermarkSettingsDialog.textColor": "Text color",

apps/documenteditor/main/resources/img/toolbar/2.5x/big/btn-big-multiple-pages.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 24H7V4H16V8C16 8.55228 16.4477 9 17 9H21V24ZM20.5858 8L17 4.41421V8H20.5858ZM7 25H21C21.5523 25 22 24.5523 22 24V8.41421C22 8.149 21.8946 7.89464 21.7071 7.70711L17.2929 3.29289C17.1054 3.10536 16.851 3 16.5858 3H7C6.44772 3 6 3.44772 6 4V24C6 24.5523 6.44772 25 7 25Z" fill="black"/>
+</svg>

apps/documenteditor/main/resources/img/toolbar/2.5x/btn-multiple-pages.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 14H3v-1h4zm0-3H3v-1h4zm0-3H3V7h4z" fill="#000"/>
+    <path d="M8.999 17h-8V4h8zm-7-1h6V5h-6zM17 14h-4v-1h4zm0-3h-4v-1h4zm0-3h-4V7h4z" fill="#000"/>
+    <path d="M19 17h-8V4h8zm-7-1h6V5h-6z" fill="#000"/>
+</svg>

apps/documenteditor/main/resources/img/toolbar/v2/2.5x/big/btn-big-multiple-pages.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <path d="M15.5 4.5h-8a1 1 0 0 0-1 1v16.996a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5m-5-5 5 5m-5-5v4a1 1 0 0 0 1 1h4" class="icon-stroke-gray-primary"/>
+</svg>

apps/documenteditor/main/resources/img/toolbar/v2/2.5x/btn-multiple-pages.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <path d="M9.499 17.5h-5a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1Zm10.001 0h-5a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1Z" class="icon-stroke-gray-primary"/>
+    <path d="M5.5 8.5h3m-3 3h3m-3 3h3m7-6h3m-3 3h3m-3 3h3" class="icon-stroke-blue-primary"/>
+</svg>

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();
     }