Add menu zoom
This commit is contained in:
OVSharova
parent
7dd910f13a
commit
2b1d3d761b
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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([
|
||||
'<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'},
|
||||
{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 || {}));
|
||||
});
|
||||
Loading…
Reference in a new issue