Merge pull request #1425 from ONLYOFFICE/feature/add-menu-zoom
Add zoom menu to forms
This commit is contained in:
Julia Radzhabova
GitHub
commit
057ecfd3c1
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
if (!menuItems[6].isVisible())
|
||||
menuItems[7].setVisible(false);
|
||||
// theme and zoom
|
||||
if (!menuItems[6].isVisible() && !menuItems[7].isVisible())
|
||||
menuItems[8].setVisible(false);
|
||||
else
|
||||
last = menuItems[7];
|
||||
last = menuItems[8];
|
||||
|
||||
// share, location
|
||||
if (!menuItems[8].isVisible() && !menuItems[9].isVisible())
|
||||
menuItems[10].setVisible(false);
|
||||
if (!menuItems[9].isVisible() && !menuItems[10].isVisible())
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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"> </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"> </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 || {}));
|
||||
});
|
||||
|
|
@ -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"
|
||||
}
|
||||
Loading…
Reference in a new issue