diff --git a/apps/common/forms/resources/less/common.less b/apps/common/forms/resources/less/common.less index 5e88a1ed2..14615c748 100644 --- a/apps/common/forms/resources/less/common.less +++ b/apps/common/forms/resources/less/common.less @@ -456,6 +456,12 @@ background-position: -@icon-width*4 0; background-position: -@icon-width*4 @icon-normal-top; } + &.zoom-in { + background-position: -@icon-width*5 @icon-normal-top; + } + &.zoom-out { + background-position: -@icon-width*6 @icon-normal-top; + } &.zoom-up { background-position: -@icon-width*5 -@icon-height; } @@ -624,6 +630,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); } diff --git a/apps/documenteditor/forms/app/controller/ApplicationController.js b/apps/documenteditor/forms/app/controller/ApplicationController.js index 697d5eb56..0ba58e0e8 100644 --- a/apps/documenteditor/forms/app/controller/ApplicationController.js +++ b/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,26 @@ 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; + } + + }, onDarkModeClick: function(item) { Common.UI.Themes.toggleContentTheme(); @@ -1444,15 +1465,28 @@ define([ else last = menuItems[7]; + //last = menuItems[8]; + // share, location - if (!menuItems[8].isVisible() && !menuItems[9].isVisible()) + if (!menuItems[10].isVisible() && !menuItems[11].isVisible()) + menuItems[12].setVisible(false); + else + last = menuItems[12]; + + // embed, fullscreen + if (!menuItems[13].isVisible() && !menuItems[14].isVisible()) + last && last.setVisible(false); + + + // share, location + /*if (!menuItems[8].isVisible() && !menuItems[9].isVisible()) menuItems[10].setVisible(false); else last = menuItems[10]; // embed, fullscreen if (!menuItems[11].isVisible() && !menuItems[12].isVisible()) - last && last.setVisible(false); + last && last.setVisible(false);*/ menu.off('show:after', initMenu); }; @@ -1504,22 +1538,22 @@ define([ } if ( !this.embedConfig.shareUrl || this.appOptions.isOFORM) { - menuItems[8].setVisible(false); + menuItems[10].setVisible(false); itemsCount--; } if (!this.appOptions.canBackToFolder) { - menuItems[9].setVisible(false); - itemsCount--; - } - - if ( !this.embedConfig.embedUrl || this.appOptions.isOFORM) { menuItems[11].setVisible(false); itemsCount--; } + if ( !this.embedConfig.embedUrl || this.appOptions.isOFORM) { + menuItems[13].setVisible(false); + itemsCount--; + } + if ( !this.embedConfig.fullscreenUrl || this.appOptions.isOFORM) { - menuItems[12].setVisible(false); + menuItems[14].setVisible(false); itemsCount--; } if (itemsCount<1) @@ -1546,7 +1580,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', this.api.zoomIn.bind(this.api)); + $('#id-menu-zoom-out').on('click', this.api.zoomOut.bind(this.api)); 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; diff --git a/apps/documenteditor/forms/app/view/ApplicationView.js b/apps/documenteditor/forms/app/view/ApplicationView.js index 2c84b6dc1..56253039c 100644 --- a/apps/documenteditor/forms/app/view/ApplicationView.js +++ b/apps/documenteditor/forms/app/view/ApplicationView.js @@ -32,6 +32,32 @@ define([ }) }, {caption: '--'}, + {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([ + '' + ].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'}, {caption: '--'}, @@ -42,6 +68,7 @@ define([ }); this.btnOptions.render($('#box-tools')); + this.btnClear = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'svg-icon clear-style', @@ -119,7 +146,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 || {})); }); \ No newline at end of file