From 6d9d599ade8ebbc482a2cd8f3467ea9876c02366 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 17 May 2021 23:55:33 +0300 Subject: [PATCH] [DE embedded] Change embedded layout --- apps/common/embed/resources/less/common.less | 84 ++++++++++--------- apps/documenteditor/embed/index.html | 19 ++--- .../embed/js/ApplicationController.js | 23 ++--- .../embed/js/ApplicationView.js | 7 +- 4 files changed, 69 insertions(+), 64 deletions(-) diff --git a/apps/common/embed/resources/less/common.less b/apps/common/embed/resources/less/common.less index cdbdd954a..ddc3269e5 100644 --- a/apps/common/embed/resources/less/common.less +++ b/apps/common/embed/resources/less/common.less @@ -110,11 +110,15 @@ z-index: 100; background-color: @toolbarTopColor; + display: flex; + align-items: center; + white-space: nowrap; + &.top { top: 0; left: 0; width: 100%; - height: 32px; + height: 48px; -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; @@ -133,11 +137,6 @@ } .group { - position: absolute; - top: 50%; - transform: translateY(-50%); - - list-style-type: none; margin: 0; padding: 0; @@ -161,6 +160,11 @@ .item { float: left; } + + & > div { + display: inline-block; + vertical-align: middle; + } } &.right { @@ -168,13 +172,21 @@ padding-right: 10px; .item { - float: left; + display: inline-block; } } &.center { - left: 50%; - transform: translate(-50%, -50%); + display: flex; + justify-content: center; + flex-grow: 1; + overflow: hidden; + padding: 0 20px; + + #title-doc-name { + overflow: hidden; + text-overflow: ellipsis; + } } .separator { @@ -199,6 +211,12 @@ } } + .margin-right-small { + margin-right: 8px; + } + .margin-right-large { + margin-right: 12px; + } } // Logo @@ -219,6 +237,16 @@ background-color: transparent; border: 1px solid transparent; border-radius: 2px; + + width: 24px; + height: 22px; + background-origin: content-box; + padding: 0 1px; + + &:active { + background-position-y: -@icon-height !important; + } + //margin: 0; &.no-caption { @@ -473,34 +501,20 @@ &.print { background-position: -@icon-width*11 0; } -} -.png-icon { - display: inline-block; - 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; + &.form-prev { + background-position: -@icon-width*7 0; } - &.next { - background: data-uri('../../../../common/embed/resources/img/next-field.png') no-repeat; - background-size: cover; + &.form-next { + background-position: -@icon-width*8 0; } } .mi-icon { width: @icon-width; height: @icon-height; - //display: inline-block; float: left; - margin: 0 15px 0 -15px; + margin: 0 15px 0 -35px; } .btn, button { @@ -567,7 +581,7 @@ .dropdown-menu { > li > a { - padding: 8px 20px 8px 31px; + padding: 8px 20px 8px 50px; &:hover, &:focus { background-color: @btnColor; outline: 0 none; @@ -585,18 +599,6 @@ } #box-tools { - display: inline-block; - button { - width: 24px; - height: 22px; - background-origin: content-box; - padding: 0 1px; - - &:active { - background-position: 0 -@icon-height; - } - } - a { cursor: pointer; } diff --git a/apps/documenteditor/embed/index.html b/apps/documenteditor/embed/index.html index c6f8acbea..f1d59925f 100644 --- a/apps/documenteditor/embed/index.html +++ b/apps/documenteditor/embed/index.html @@ -184,19 +184,18 @@
+
+ + +
+
+ ffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffffff +
+
+
of 0
- - -
-
- -
-
-
of 0
-
-
diff --git a/apps/documenteditor/embed/js/ApplicationController.js b/apps/documenteditor/embed/js/ApplicationController.js index abdabc588..94a433c40 100644 --- a/apps/documenteditor/embed/js/ApplicationController.js +++ b/apps/documenteditor/embed/js/ApplicationController.js @@ -75,13 +75,8 @@ DE.ApplicationController = new(function(){ $('#editor_sdk').addClass('top'); } - if (config.canBackToFolder === false || !(config.customization && config.customization.goback && (config.customization.goback.url || config.customization.goback.requestClose && config.canRequestClose))) { - $('#id-btn-close').hide(); - - // Hide last separator - $('#toolbar .right .separator').hide(); - $('#pages').css('margin-right', '12px'); - } + config.canBackToFolder = (config.canBackToFolder!==false) && config.customization && config.customization.goback && + (config.customization.goback.url || config.customization.goback.requestClose && config.canRequestClose); } function loadDocument(data) { @@ -126,6 +121,7 @@ DE.ApplicationController = new(function(){ } embedConfig.docTitle = docConfig.title; + $('#title-doc-name').text(embedConfig.docTitle || ''); } } @@ -239,14 +235,19 @@ DE.ApplicationController = new(function(){ if ( !embedConfig.shareUrl ) $('#idt-share').hide(); + if (!config.canBackToFolder) + $('#id-close').hide(); + if ( !embedConfig.embedUrl ) $('#idt-embed').hide(); if ( !embedConfig.fullscreenUrl ) $('#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'); + else if (!embedConfig.embedUrl && !embedConfig.fullscreenUrl) + $('#box-tools .divider').hide(); common.controller.modals.attach({ share: '#idt-share', @@ -290,7 +291,8 @@ DE.ApplicationController = new(function(){ 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.goback.requestClose && config.canRequestClose) Common.Gateway.requestClose(); @@ -366,8 +368,7 @@ DE.ApplicationController = new(function(){ } } 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 = true; + var canFillForms = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit) && (permissions.fillForms===true) && (config.mode !== 'view'); if (!canFillForms) { $('#id-btn-prev-field').hide(); $('#id-btn-next-field').hide(); diff --git a/apps/documenteditor/embed/js/ApplicationView.js b/apps/documenteditor/embed/js/ApplicationView.js index 9a07a68ea..99139efe3 100644 --- a/apps/documenteditor/embed/js/ApplicationView.js +++ b/apps/documenteditor/embed/js/ApplicationView.js @@ -44,10 +44,12 @@ DE.ApplicationView = new(function(){ $btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true'); $btnTools.parent().append( - '