Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE embedded] Change layout

Browse source
This commit is contained in:
Julia Radzhabova 2021-05-19 02:34:57 +03:00
parent 53e1d68918
commit c143e5b811
7 changed files with 78 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
apps/presentationeditor/embed/index.html
View file

@ -29,7 +29,7 @@
.loadmask > .brendpanel { .loadmask > .brendpanel {
width: 100%; width: 100%;
position: absolute; position: absolute;
height: 32px; height: 48px;
background-color: #e2e2e2; background-color: #e2e2e2;
} }
@ -42,7 +42,7 @@
.loadmask > .brendpanel .loading-logo { .loadmask > .brendpanel .loading-logo {
max-width: 200px; max-width: 200px;
height: 24px; height: 24px;
margin: 0 auto; margin-left: 10px;
text-align: center; text-align: center;
} }
@ -53,6 +53,9 @@
margin-top: 2px; margin-top: 2px;
opacity: 0; opacity: 0;
} }
.loadmask > .brendpanel .doc-title {
flex-grow: 1;
}
.loadmask > .brendpanel .circle { .loadmask > .brendpanel .circle {
vertical-align: middle; vertical-align: middle;
@ -67,7 +70,7 @@
background: #f5f5f5; background: #f5f5f5;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: 32px; padding-top: 48px;
} }
.loadmask > .placeholder .slide-h { .loadmask > .placeholder .slide-h {
@ -145,10 +148,10 @@
<div id="loading-mask" class="loadmask"> <div id="loading-mask" class="loadmask">
<div class="brendpanel"> <div class="brendpanel">
<div> <div>
<div class="circle"></div>
<div class="brand-logo loading-logo"> <div class="brand-logo loading-logo">
<img src=""> <img src="">
</div> </div>
<div class="doc-title"></div>
<div class="circle"></div> <div class="circle"></div>
</div> </div>
</div> </div>
@ -239,17 +242,16 @@
<div class="toolbar" id="toolbar"> <div class="toolbar" id="toolbar">
<div class="group left"> <div class="group left">
<div id="box-tools" class="dropdown"> <div class="margin-right-large"><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></div>
<button class="control-btn svg-icon tools"></button>
</div>
</div> </div>
<div class="group center"> <div class="group center">
<span><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></span> <span id="title-doc-name"></span>
</div> </div>
<div class="group right"> <div class="group right">
<div class="item"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div> <div class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
<div class="item separator"></div> <div id="box-tools" class="dropdown">
<div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div> <button class="control-btn svg-icon more-vertical"></button>
</div>
</div> </div>
</div> </div>

24
apps/presentationeditor/embed/index.html.deploy
View file

@ -27,7 +27,7 @@
.loadmask > .brendpanel { .loadmask > .brendpanel {
width: 100%; width: 100%;
position: absolute; position: absolute;
height: 32px; height: 48px;
background-color: #e2e2e2; background-color: #e2e2e2;
} }
@ -40,7 +40,7 @@
.loadmask > .brendpanel .loading-logo { .loadmask > .brendpanel .loading-logo {
max-width: 200px; max-width: 200px;
height: 24px; height: 24px;
margin: 0 auto; margin-left: 10px;
text-align: center; text-align: center;
} }
@ -51,6 +51,9 @@
margin-top: 2px; margin-top: 2px;
opacity: 0; opacity: 0;
} }
.loadmask > .brendpanel .doc-title {
flex-grow: 1;
}
.loadmask > .brendpanel .circle { .loadmask > .brendpanel .circle {
vertical-align: middle; vertical-align: middle;
@ -65,7 +68,7 @@
background: #f5f5f5; background: #f5f5f5;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: 32px; padding-top: 48px;
} }
.loadmask > .placeholder .slide-h { .loadmask > .placeholder .slide-h {
@ -143,10 +146,10 @@
<div id="loading-mask" class="loadmask"> <div id="loading-mask" class="loadmask">
<div class="brendpanel"> <div class="brendpanel">
<div> <div>
<div class="circle"></div>
<div class="brand-logo loading-logo"> <div class="brand-logo loading-logo">
<img src=""> <img src="">
</div> </div>
<div class="doc-title"></div>
<div class="circle"></div> <div class="circle"></div>
</div> </div>
</div> </div>
@ -233,17 +236,16 @@
<div class="toolbar" id="toolbar"> <div class="toolbar" id="toolbar">
<div class="group left"> <div class="group left">
<div id="box-tools" class="dropdown"> <div class="margin-right-large"><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></div>
<button class="control-btn svg-icon tools"></button>
</div>
</div> </div>
<div class="group center"> <div class="group center">
<span><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></span> <span id="title-doc-name"></span>
</div> </div>
<div class="group right"> <div class="group right">
<div class="item"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div> <div class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
<div class="item separator"></div> <div id="box-tools" class="dropdown">
<div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div> <button class="control-btn svg-icon more-vertical"></button>
</div>
</div> </div>
</div> </div>

13
apps/presentationeditor/embed/index_loader.html
View file

@ -293,17 +293,16 @@
<div class="toolbar" id="toolbar"> <div class="toolbar" id="toolbar">
<div class="group left"> <div class="group left">
<div id="box-tools" class="dropdown"> <div class="margin-right-large"><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></div>
<button class="control-btn svg-icon tools"></button>
</div>
</div> </div>
<div class="group center"> <div class="group center">
<span><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></span> <span id="title-doc-name"></span>
</div> </div>
<div class="group right"> <div class="group right">
<div class="item"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div> <div class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
<div class="item separator"></div> <div id="box-tools" class="dropdown">
<div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div> <button class="control-btn svg-icon more-vertical"></button>
</div>
</div> </div>
</div> </div>

13
apps/presentationeditor/embed/index_loader.html.deploy
View file

@ -286,17 +286,16 @@
<div class="toolbar" id="toolbar"> <div class="toolbar" id="toolbar">
<div class="group left"> <div class="group left">
<div id="box-tools" class="dropdown"> <div class="margin-right-large"><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></div>
<button class="control-btn svg-icon tools"></button>
</div>
</div> </div>
<div class="group center"> <div class="group center">
<span><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></span> <span id="title-doc-name"></span>
</div> </div>
<div class="group right"> <div class="group right">
<div class="item"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div> <div class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
<div class="item separator"></div> <div id="box-tools" class="dropdown">
<div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div> <button class="control-btn svg-icon more-vertical"></button>
</div>
</div> </div>
</div> </div>

51
apps/presentationeditor/embed/js/ApplicationController.js
View file

@ -40,7 +40,9 @@ PE.ApplicationController = new(function(){
maxPages = 0, maxPages = 0,
created = false, created = false,
currentPage = 0, currentPage = 0,
ttOffset = [0, -10]; ttOffset = [0, -10],
labelDocName,
appOptions = {};
// Initialize analytics // Initialize analytics
// ------------------------- // -------------------------
@ -76,13 +78,8 @@ PE.ApplicationController = new(function(){
$('#editor_sdk').addClass('top'); $('#editor_sdk').addClass('top');
} }
if (config.canBackToFolder === false || !(config.customization && config.customization.goback && (config.customization.goback.url || config.customization.goback.requestClose && config.canRequestClose))) { config.canBackToFolder = (config.canBackToFolder!==false) && config.customization && config.customization.goback &&
$('#id-btn-close').hide(); (config.customization.goback.url || config.customization.goback.requestClose && config.canRequestClose);
// Hide last separator
$('#toolbar .right .separator').hide();
$('#pages').css('margin-right', '12px');
}
} }
function loadDocument(data) { function loadDocument(data) {
@ -122,6 +119,8 @@ PE.ApplicationController = new(function(){
} }
embedConfig.docTitle = docConfig.title; embedConfig.docTitle = docConfig.title;
labelDocName = $('#title-doc-name');
labelDocName.text(embedConfig.docTitle || '')
} }
} }
@ -243,14 +242,19 @@ PE.ApplicationController = new(function(){
if ( !embedConfig.shareUrl ) if ( !embedConfig.shareUrl )
$('#idt-share').hide(); $('#idt-share').hide();
if (!config.canBackToFolder)
$('#id-close').hide();
if ( !embedConfig.embedUrl ) if ( !embedConfig.embedUrl )
$('#idt-embed').hide(); $('#idt-embed').hide();
if ( !embedConfig.fullscreenUrl ) if ( !embedConfig.fullscreenUrl )
$('#idt-fullscreen').hide(); $('#idt-fullscreen').hide();
if ( !embedConfig.saveUrl && permissions.print === false && !embedConfig.shareUrl && !embedConfig.embedUrl && !embedConfig.fullscreenUrl) if ( !embedConfig.saveUrl && permissions.print === false && !embedConfig.shareUrl && !embedConfig.embedUrl && !embedConfig.fullscreenUrl && !config.canBackToFolder)
$('#box-tools').addClass('hidden'); $('#box-tools').addClass('hidden');
else if (!embedConfig.embedUrl && !embedConfig.fullscreenUrl)
$('#box-tools .divider').hide();
common.controller.modals.attach({ common.controller.modals.attach({
share: '#idt-share', share: '#idt-share',
@ -298,6 +302,16 @@ PE.ApplicationController = new(function(){
Common.Analytics.trackEvent('Print'); Common.Analytics.trackEvent('Print');
}); });
PE.ApplicationView.tools.get('#idt-close')
.on('click', function(){
if (config.customization && config.customization.goback) {
if (config.customization.goback.requestClose && config.canRequestClose)
Common.Gateway.requestClose();
else if (config.customization.goback.url)
window.parent.location.href = config.customization.goback.url;
}
});
var $pagenum = $('#page-number'); var $pagenum = $('#page-number');
$pagenum.on({ $pagenum.on({
'keyup': function(e){ 'keyup': function(e){
@ -334,15 +348,6 @@ PE.ApplicationController = new(function(){
$pagenum.focus(); $pagenum.focus();
}); });
$('#id-btn-close').on('click', function(){
if (config.customization && config.customization.goback) {
if (config.customization.goback.requestClose && config.canRequestClose)
Common.Gateway.requestClose();
else if (config.customization.goback.url)
window.parent.location.href = config.customization.goback.url;
}
});
$('#btn-left').on('click', function(){ $('#btn-left').on('click', function(){
if ( isplaymode ) { if ( isplaymode ) {
api.DemonstrationPrevSlide(); api.DemonstrationPrevSlide();
@ -440,6 +445,16 @@ PE.ApplicationController = new(function(){
} }
} }
api.asc_setViewMode(true); api.asc_setViewMode(true);
var $parent = labelDocName.parent();
var _left_width = $parent.position().left,
_right_width = $parent.next().outerWidth();
if ( _left_width < _right_width )
$parent.css('padding-left', _right_width - _left_width);
else
$parent.css('padding-right', _left_width - _right_width);
api.asc_LoadDocument(); api.asc_LoadDocument();
api.Resize(); api.Resize();
} }

9
apps/presentationeditor/embed/js/ApplicationView.js
View file

@ -44,10 +44,12 @@ PE.ApplicationView = new(function(){
$btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true'); $btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true');
$btnTools.parent().append( $btnTools.parent().append(
'<ul class="dropdown-menu">' + '<ul class="dropdown-menu pull-right">' +
'<li><a id="idt-download"><span class="mi-icon svg-icon download"></span>' + this.txtDownload + '</a></li>' +
'<li><a id="idt-print"><span class="mi-icon svg-icon print"></span>' + this.txtPrint + '</a></li>' + '<li><a id="idt-print"><span class="mi-icon svg-icon print"></span>' + this.txtPrint + '</a></li>' +
'<li><a id="idt-download"><span class="mi-icon svg-icon download"></span>' + this.txtDownload + '</a></li>' +
'<li><a id="idt-share" data-toggle="modal"><span class="mi-icon svg-icon share"></span>' + this.txtShare + '</a></li>' + '<li><a id="idt-share" data-toggle="modal"><span class="mi-icon svg-icon share"></span>' + this.txtShare + '</a></li>' +
'<li><a id="idt-close" data-toggle="modal"><span class="mi-icon svg-icon go-to-location"></span>' + this.txtFileLocation + '</a></li>' +
'<li class="divider"></li>' +
'<li><a id="idt-embed" data-toggle="modal"><span class="mi-icon svg-icon embed"></span>' + this.txtEmbed + '</a></li>' + '<li><a id="idt-embed" data-toggle="modal"><span class="mi-icon svg-icon embed"></span>' + this.txtEmbed + '</a></li>' +
'<li><a id="idt-fullscreen"><span class="mi-icon svg-icon fullscr"></span>' + this.txtFullScreen + '</a></li>' + '<li><a id="idt-fullscreen"><span class="mi-icon svg-icon fullscr"></span>' + this.txtFullScreen + '</a></li>' +
'</ul>'); '</ul>');
@ -67,6 +69,7 @@ PE.ApplicationView = new(function(){
txtPrint: 'Print', txtPrint: 'Print',
txtShare: 'Share', txtShare: 'Share',
txtEmbed: 'Embed', txtEmbed: 'Embed',
txtFullScreen: 'Full Screen' txtFullScreen: 'Full Screen',
txtFileLocation: 'Open file location'
} }
})(); })();

2
apps/presentationeditor/embed/resources/less/application.less
View file

@ -16,7 +16,7 @@
width:100%; width:100%;
height:100%; height:100%;
z-index: 10; z-index: 10;
padding: 32px 0 0 0; padding: 48px 0 0 0;
} }
#id-preview { #id-preview {