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

[DE embedded] Change embedded layout

Browse source
This commit is contained in:
Julia Radzhabova 2021-05-17 23:55:33 +03:00
parent 60c43641a3
commit 6d9d599ade
4 changed files with 69 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
apps/common/embed/resources/less/common.less
View file

@ -110,11 +110,15 @@
z-index: 100; z-index: 100;
background-color: @toolbarTopColor; background-color: @toolbarTopColor;
display: flex;
align-items: center;
white-space: nowrap;
&.top { &.top {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 32px; height: 48px;
-webkit-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor; -webkit-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor;
//-moz-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor; //-moz-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor;
@ -133,11 +137,6 @@
} }
.group { .group {
position: absolute;
top: 50%;
transform: translateY(-50%);
list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -161,6 +160,11 @@
.item { .item {
float: left; float: left;
} }
& > div {
display: inline-block;
vertical-align: middle;
}
} }
&.right { &.right {
@ -168,13 +172,21 @@
padding-right: 10px; padding-right: 10px;
.item { .item {
float: left; display: inline-block;
} }
} }
&.center { &.center {
left: 50%; display: flex;
transform: translate(-50%, -50%); justify-content: center;
flex-grow: 1;
overflow: hidden;
padding: 0 20px;
#title-doc-name {
overflow: hidden;
text-overflow: ellipsis;
}
} }
.separator { .separator {
@ -199,6 +211,12 @@
} }
} }
.margin-right-small {
margin-right: 8px;
}
.margin-right-large {
margin-right: 12px;
}
} }
// Logo // Logo
@ -219,6 +237,16 @@
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 2px; border-radius: 2px;
width: 24px;
height: 22px;
background-origin: content-box;
padding: 0 1px;
&:active {
background-position-y: -@icon-height !important;
}
//margin: 0; //margin: 0;
&.no-caption { &.no-caption {
@ -473,34 +501,20 @@
&.print { &.print {
background-position: -@icon-width*11 0; background-position: -@icon-width*11 0;
} }
}
.png-icon { &.form-prev {
display: inline-block; background-position: -@icon-width*7 0;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
border: 1px solid transparent;
border-radius: 2px;
width: 24px;
height: 22px;
&.prev {
background: data-uri('../../../../common/embed/resources/img/previous-field.png') no-repeat;
background-size: cover;
} }
&.next { &.form-next {
background: data-uri('../../../../common/embed/resources/img/next-field.png') no-repeat; background-position: -@icon-width*8 0;
background-size: cover;
} }
} }
.mi-icon { .mi-icon {
width: @icon-width; width: @icon-width;
height: @icon-height; height: @icon-height;
//display: inline-block;
float: left; float: left;
margin: 0 15px 0 -15px; margin: 0 15px 0 -35px;
} }
.btn, button { .btn, button {
@ -567,7 +581,7 @@
.dropdown-menu { .dropdown-menu {
> li > a { > li > a {
padding: 8px 20px 8px 31px; padding: 8px 20px 8px 50px;
&:hover, &:focus { &:hover, &:focus {
background-color: @btnColor; background-color: @btnColor;
outline: 0 none; outline: 0 none;
@ -585,18 +599,6 @@
} }
#box-tools { #box-tools {
display: inline-block;
button {
width: 24px;
height: 22px;
background-origin: content-box;
padding: 0 1px;
&:active {
background-position: 0 -@icon-height;
}
}
a { a {
cursor: pointer; cursor: pointer;
} }

19
apps/documenteditor/embed/index.html
View file

@ -184,19 +184,18 @@
<div class="toolbar" id="toolbar"> <div class="toolbar" id="toolbar">
<div class="group left"> <div class="group left">
<div class="margin-right-large"><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></div>
<button id="id-btn-prev-field" class="control-btn svg-icon form-prev margin-right-small"></button>
<button id="id-btn-next-field" class="control-btn svg-icon form-next"></button>
</div>
<div class="group center">
<span id="title-doc-name">ffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffffff</span>
</div>
<div class="group right">
<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 id="box-tools" class="dropdown"> <div id="box-tools" class="dropdown">
<button class="control-btn svg-icon tools"></button> <button class="control-btn svg-icon tools"></button>
</div> </div>
<button id="id-btn-prev-field" class="png-icon prev"></button>
<button id="id-btn-next-field" class="png-icon next"></button>
</div>
<div class="group center">
<span><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></span>
</div>
<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 separator"></div>
<div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div>
</div> </div>
</div> </div>

23
apps/documenteditor/embed/js/ApplicationController.js
View file

@ -75,13 +75,8 @@ DE.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) {
@ -126,6 +121,7 @@ DE.ApplicationController = new(function(){
} }
embedConfig.docTitle = docConfig.title; embedConfig.docTitle = docConfig.title;
$('#title-doc-name').text(embedConfig.docTitle || '');
} }
} }
@ -239,14 +235,19 @@ DE.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',
@ -290,7 +291,8 @@ DE.ApplicationController = new(function(){
Common.Analytics.trackEvent('Print'); Common.Analytics.trackEvent('Print');
}); });
$('#id-btn-close').on('click', function(){ DE.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();
@ -366,8 +368,7 @@ DE.ApplicationController = new(function(){
} }
} }
var licType = params.asc_getLicenseType(); var licType = params.asc_getLicenseType();
// var canFillForms = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit) && (permissions.fillForms===true) && (config.mode !== 'view'); var canFillForms = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit) && (permissions.fillForms===true) && (config.mode !== 'view');
var canFillForms = true;
if (!canFillForms) { if (!canFillForms) {
$('#id-btn-prev-field').hide(); $('#id-btn-prev-field').hide();
$('#id-btn-next-field').hide(); $('#id-btn-next-field').hide();

7
apps/documenteditor/embed/js/ApplicationView.js
View file

@ -44,10 +44,12 @@ DE.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-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-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 close"></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 @@ DE.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'
} }
})(); })();