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

[SSE embedded] Change layout

Browse source
This commit is contained in:
Julia Radzhabova 2021-05-19 16:35:59 +03:00
parent c143e5b811
commit 892fd142ac
7 changed files with 75 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -41,8 +41,7 @@ PE.ApplicationController = new(function(){
created = false, created = false,
currentPage = 0, currentPage = 0,
ttOffset = [0, -10], ttOffset = [0, -10],
labelDocName, labelDocName;
appOptions = {};
// Initialize analytics // Initialize analytics
// ------------------------- // -------------------------
@ -444,7 +443,6 @@ PE.ApplicationController = new(function(){
logo.attr('href', config.customization.logo.url); logo.attr('href', config.customization.logo.url);
} }
} }
api.asc_setViewMode(true);
var $parent = labelDocName.parent(); var $parent = labelDocName.parent();
var _left_width = $parent.position().left, var _left_width = $parent.position().left,
@ -455,6 +453,7 @@ PE.ApplicationController = new(function(){
else else
$parent.css('padding-right', _left_width - _right_width); $parent.css('padding-right', _left_width - _right_width);
api.asc_setViewMode(true);
api.asc_LoadDocument(); api.asc_LoadDocument();
api.Resize(); api.Resize();
} }

21
apps/spreadsheeteditor/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;
@ -70,7 +73,7 @@
font-size: 0; font-size: 0;
border: 1px solid #dfdfdf; border: 1px solid #dfdfdf;
white-space: nowrap; white-space: nowrap;
padding-top: 32px; padding-top: 48px;
} }
.loadmask > .placeholder > .columns { .loadmask > .placeholder > .columns {
@ -126,10 +129,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>
@ -213,15 +216,15 @@
<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"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div> <div id="box-tools" class="dropdown">
<button class="control-btn svg-icon more-vertical"></button>
</div>
</div> </div>
</div> </div>

21
apps/spreadsheeteditor/embed/index.html.deploy
View file

@ -26,7 +26,7 @@
.loadmask > .brendpanel { .loadmask > .brendpanel {
width: 100%; width: 100%;
position: absolute; position: absolute;
height: 32px; height: 48px;
background-color: #e2e2e2; background-color: #e2e2e2;
} }
@ -39,7 +39,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;
} }
@ -50,6 +50,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 @@
font-size: 0; font-size: 0;
border: 1px solid #dfdfdf; border: 1px solid #dfdfdf;
white-space: nowrap; white-space: nowrap;
padding-top: 32px; padding-top: 48px;
} }
.loadmask > .placeholder > .columns { .loadmask > .placeholder > .columns {
@ -123,10 +126,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>
@ -205,15 +208,15 @@
<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"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div> <div id="box-tools" class="dropdown">
<button class="control-btn svg-icon more-vertical"></button>
</div>
</div> </div>
</div> </div>

10
apps/spreadsheeteditor/embed/index_loader.html
View file

@ -293,15 +293,15 @@
<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"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div> <div id="box-tools" class="dropdown">
<button class="control-btn svg-icon more-vertical"></button>
</div>
</div> </div>
</div> </div>

10
apps/spreadsheeteditor/embed/index_loader.html.deploy
View file

@ -285,15 +285,15 @@
<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"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div> <div id="box-tools" class="dropdown">
<button class="control-btn svg-icon more-vertical"></button>
</div>
</div> </div>
</div> </div>

31
apps/spreadsheeteditor/embed/js/ApplicationController.js
View file

@ -42,7 +42,8 @@ SSE.ApplicationController = new(function(){
iframePrint = null; iframePrint = null;
var $ttEl, var $ttEl,
$tooltip, $tooltip,
ttOffset = [6, -15]; ttOffset = [6, -15],
labelDocName;
// Initialize analytics // Initialize analytics
// ------------------------- // -------------------------
@ -68,9 +69,6 @@ SSE.ApplicationController = new(function(){
common.controller.modals.init(embedConfig); common.controller.modals.init(embedConfig);
if (config.canBackToFolder === false || !(config.customization && config.customization.goback && (config.customization.goback.url || config.customization.goback.requestClose && config.canRequestClose)))
$('#id-btn-close').hide();
// Docked toolbar // Docked toolbar
if (embedConfig.toolbarDocked === 'bottom') { if (embedConfig.toolbarDocked === 'bottom') {
$('#toolbar').addClass('bottom'); $('#toolbar').addClass('bottom');
@ -81,6 +79,9 @@ SSE.ApplicationController = new(function(){
$('#toolbar').addClass('top'); $('#toolbar').addClass('top');
$('.viewer').addClass('top'); $('.viewer').addClass('top');
} }
config.canBackToFolder = (config.canBackToFolder!==false) && config.customization && config.customization.goback &&
(config.customization.goback.url || config.customization.goback.requestClose && config.canRequestClose);
} }
function loadDocument(data) { function loadDocument(data) {
@ -120,6 +121,8 @@ SSE.ApplicationController = new(function(){
} }
embedConfig.docTitle = docConfig.title; embedConfig.docTitle = docConfig.title;
labelDocName = $('#title-doc-name');
labelDocName.text(embedConfig.docTitle || '')
} }
} }
@ -188,14 +191,19 @@ SSE.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',
@ -235,7 +243,8 @@ SSE.ApplicationController = new(function(){
Common.Analytics.trackEvent('Print'); Common.Analytics.trackEvent('Print');
}); });
$('#id-btn-close').on('click', function(){ SSE.ApplicationView.tools.get('#idt-close')
.on('click', function(){
if (config.customization && config.customization.goback) { if (config.customization && config.customization.goback) {
if (config.customization.goback.requestClose && config.canRequestClose) if (config.customization.goback.requestClose && config.canRequestClose)
Common.Gateway.requestClose(); Common.Gateway.requestClose();
@ -337,6 +346,16 @@ SSE.ApplicationController = new(function(){
logo.attr('href', config.customization.logo.url); logo.attr('href', config.customization.logo.url);
} }
} }
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_setViewMode(true); api.asc_setViewMode(true);
api.asc_LoadDocument(); api.asc_LoadDocument();
} }

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

@ -45,10 +45,12 @@ SSE.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>');
@ -68,6 +70,7 @@ SSE.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'
} }
})(); })();