Merge pull request #1425 from ONLYOFFICE/feature/add-menu-zoom

Add zoom menu to forms

apps/common/forms/resources/less/common.less

@@ -456,6 +456,14 @@
         background-position: -@icon-width*4 0;
         background-position: -@icon-width*4 @icon-normal-top;
     }
+    &.zoom-in {
+        background-position: -@icon-width*5 0;
+        background-position: -@icon-width*5 @icon-normal-top;
+    }
+    &.zoom-out {
+        background-position: -@icon-width*6 0;
+        background-position: -@icon-width*6 @icon-normal-top;
+    }
     &.zoom-up {
         background-position: -@icon-width*5 -@icon-height;
     }
@@ -624,6 +632,32 @@
     font-size: 11px;
 }
 
+.menu-zoom {
+    line-height: @line-height-base;
+
+    .title {
+        padding: 5px 5px 5px 28px;
+        float: left;
+        font-weight: normal;
+        font-size: 11px;
+        margin: 0px;
+        text-overflow: ellipsis;
+    }
+
+    .zoom {
+        padding: 5px 3px;
+        float: right;
+        min-width: 40px;
+        text-align: center;
+        font-weight: normal;
+        font-size: 11px;
+        padding-bottom: 0px;
+    }
+    .mi-icon  {
+        margin: 0;
+    }
+}
+
 .font-size-small {
     .fontsize(@font-size-small);
 }

apps/documenteditor/forms/app/controller/ApplicationController.js

@@ -103,6 +103,7 @@ define([
                 this.api.asc_registerCallback('asc_onCountPages',            this.onCountPages.bind(this));
                 this.api.asc_registerCallback('asc_onCurrentPage',           this.onCurrentPage.bind(this));
                 this.api.asc_registerCallback('asc_onDocumentModifiedChanged', _.bind(this.onDocumentModifiedChanged, this));
+                this.api.asc_registerCallback('asc_onZoomChange',           this.onApiZoomChange.bind(this));
 
                 // Initialize api gateway
                 Common.Gateway.on('init',               this.loadConfig.bind(this));
@@ -1392,6 +1393,30 @@ define([
         onThemeClick: function(menu, item) {
             (item.value!==null) && Common.UI.Themes.setTheme(item.value);
         },
+        onApiZoomChange: function(percent, type) {
+            this.view.mnuZoom.items[0].setChecked(type == 2, true);
+            this.view.mnuZoom.items[1].setChecked(type == 1, true);
+            this.view.mnuZoom.options.value = percent;
+
+            if ( this.view.mnuZoom.$el )
+                $('.menu-zoom label.zoom', this.view.mnuZoom.$el).html(percent + '%');
+        },
+
+        onMenuZoomClick: function(menu, item, e){
+            switch ( item.value ) {
+                case 'zoom:page':
+                    item.isChecked() ? this.api.zoomFitToPage() : this.api.zoomCustomMode();
+                    break;
+                case 'zoom:width':
+                    item.isChecked() ? this.api.zoomFitToWidth() : this.api.zoomCustomMode();
+                    break;
+            }
+
+        },
+        onBtnZoom: function (btn, e) {
+            btn == 'up' ? this.api.zoomIn() : this.api.zoomOut();
+            e.stopPropagation();
+        },
 
         onDarkModeClick: function(item) {
             Common.UI.Themes.toggleContentTheme();
@@ -1438,20 +1463,20 @@ define([
                 else
                     last = menuItems[5];
 
-                // theme
+                // theme and zoom
-                if (!menuItems[6].isVisible())
+                if (!menuItems[6].isVisible() && !menuItems[7].isVisible())
-                    menuItems[7].setVisible(false);
+                    menuItems[8].setVisible(false);
                 else
-                    last = menuItems[7];
+                    last = menuItems[8];
 
                 // share, location
-                if (!menuItems[8].isVisible() && !menuItems[9].isVisible())
+                if (!menuItems[9].isVisible() && !menuItems[10].isVisible())
-                    menuItems[10].setVisible(false);
+                    menuItems[11].setVisible(false);
                 else
-                    last = menuItems[10];
+                    last = menuItems[11];
 
                 // embed, fullscreen
-                if (!menuItems[11].isVisible() && !menuItems[12].isVisible())
+                if (!menuItems[12].isVisible() && !menuItems[13].isVisible())
                     last && last.setVisible(false);
 
                 menu.off('show:after', initMenu);
@@ -1504,22 +1529,22 @@ define([
             }
 
             if ( !this.embedConfig.shareUrl || this.appOptions.isOFORM) {
-                menuItems[8].setVisible(false);
-                itemsCount--;
-            }
-
-            if (!this.appOptions.canBackToFolder) {
                 menuItems[9].setVisible(false);
                 itemsCount--;
             }
 
+            if (!this.appOptions.canBackToFolder) {
+                menuItems[10].setVisible(false);
+                itemsCount--;
+            }
+
             if ( !this.embedConfig.embedUrl || this.appOptions.isOFORM) {
-                menuItems[11].setVisible(false);
+                menuItems[12].setVisible(false);
                 itemsCount--;
             }
 
             if ( !this.embedConfig.fullscreenUrl || this.appOptions.isOFORM) {
-                menuItems[12].setVisible(false);
+                menuItems[13].setVisible(false);
                 itemsCount--;
             }
             if (itemsCount<1)
@@ -1546,7 +1571,11 @@ define([
             // zoom
             $('#id-btn-zoom-in').on('click', this.api.zoomIn.bind(this.api));
             $('#id-btn-zoom-out').on('click', this.api.zoomOut.bind(this.api));
+            $('#id-menu-zoom-in').on('click', _.bind(this.onBtnZoom, this,'up'));
+            $('#id-menu-zoom-out').on('click', _.bind(this.onBtnZoom, this,'down'));
             this.view.btnOptions.menu.on('item:click', _.bind(this.onOptionsClick, this));
+            this.view.mnuZoom.on('item:click', _.bind(this.onMenuZoomClick, this));
+
 
             // pages
             var $pagenum = this.view.txtGoToPage._input;

apps/documenteditor/forms/app/view/ApplicationView.js

@@ -31,6 +31,31 @@ define([
                                 items: []
                             })
                         },
+                        {caption: this.textZoom, value: 'zoomn',  conCls: 'mi-icon' ,
+                            menu        : this.mnuZoom = new Common.UI.Menu({
+                                cls: 'shifted-right',
+                                menuAlign: 'tl-tr',
+                                items: [
+                                    {caption: this.textFitToPage, value: 'zoom:page', toggleGroup: 'view-zoom', checkable: true},
+                                    {caption: this.textFitToWidth, value: 'zoom:width', toggleGroup: 'view-zoom', checkable: true},
+                                    (new Common.UI.MenuItem({
+                                        template: _.template([
+                                            '<div id="id-menu-zoom" class="menu-zoom" style="height: 26px;" ',
+                                            '<% if(!_.isUndefined(options.stopPropagation)) { %>',
+                                            'data-stopPropagation="true"',
+                                            '<% } %>', '>',
+                                            '<label class="title">' + this.textZoom + '</label>',
+                                            '<button id="id-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn btn-toolbar"><i class="mi-icon svg-icon zoom-in">&nbsp;</i></button>',
+                                            '<label class="zoom"><%= options.value %>%</label>',
+                                            '<button id="id-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn btn-toolbar"><i class="mi-icon svg-icon zoom-out">&nbsp;</i></button>',
+                                            '</div>'
+                                        ].join('')),
+                                        stopPropagation: true,
+                                        value: 30
+                                    }))
+                                ]
+                            })
+                        },
                         {caption: '--'},
                         {caption: this.txtShare, value: 'share', iconCls: 'mi-icon svg-icon share'},
                         {caption: this.txtFileLocation, value: 'close', iconCls: 'mi-icon svg-icon go-to-location'},
@@ -42,6 +67,7 @@ define([
             });
             this.btnOptions.render($('#box-tools'));
 
+
             this.btnClear = new Common.UI.Button({
                 cls: 'btn-toolbar',
                 iconCls: 'svg-icon clear-style',
@@ -119,7 +145,10 @@ define([
         textPrintSel: 'Print Selection',
         txtDarkMode: 'Dark mode',
         textUndo: 'Undo',
-        textRedo: 'Redo'
+        textRedo: 'Redo',
+        textZoom: 'Zoom',
+        textFitToPage: 'Fit to Page',
+        textFitToWidth: 'Fit to Width'
 
     }, DE.Views.ApplicationView || {}));
 });

apps/documenteditor/forms/locale/en.json

@@ -162,5 +162,8 @@
   "DE.Views.ApplicationView.txtFullScreen": "Full Screen",
   "DE.Views.ApplicationView.txtPrint": "Print",
   "DE.Views.ApplicationView.txtShare": "Share",
-  "DE.Views.ApplicationView.txtTheme": "Interface theme"
+  "DE.Views.ApplicationView.txtTheme": "Interface theme",
+  "DE.Views.ApplicationView.textZoom": "Zoom",
+  "DE.Views.ApplicationView.textFitToPage": "Fit to Page",
+  "DE.Views.ApplicationView.textFitToWidth": "Fit to Width"
 }