From 7b2f091be5798c68ba324873a41b2e3349cbeb02 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Tue, 1 Sep 2020 14:08:41 +0300
Subject: [PATCH] [embed] fix bug 33455

---
 .../embed/resources/img/icon-menu-sprite.svg  | 81 ++++++++++++++++++-
 apps/common/embed/resources/less/common.less  | 38 +++++----
 .../embed/js/ApplicationController.js         |  9 +++
 .../embed/js/ApplicationView.js               |  2 +
 apps/documenteditor/embed/locale/en.json      |  1 +
 5 files changed, 115 insertions(+), 16 deletions(-)

diff --git a/apps/common/embed/resources/img/icon-menu-sprite.svg b/apps/common/embed/resources/img/icon-menu-sprite.svg
index fa83c4dc7..773879001 100644
--- a/apps/common/embed/resources/img/icon-menu-sprite.svg
+++ b/apps/common/embed/resources/img/icon-menu-sprite.svg
@@ -1 +1,80 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="88 -11 242 44"><style>.st0{fill:#fff;} .st2{fill-rule:evenodd;clip-rule:evenodd;}</style><g id="XMLID_7_"><path id="XMLID_9_" d="M128 6h-14c-.6 0-1 .4-1 1s.4 1 1 1h14c.6 0 1-.4 1-1s-.4-1-1-1z"/><path id="XMLID_8_" d="M120.1 3.6c.1.1.2.2.4.2.1.1.3.1.5.1s.3-.1.5-.1c.1 0 .3-.1.4-.2l3.5-3.5c.4-.4.4-1 0-1.4s-1-.4-1.4 0l-2 2V-7c0-.6-.4-1-1-1s-1 .4-1 1V.7l-2-2c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l3.5 3.5z"/></g><path id="XMLID_14_" d="M147.3 3c-.8 0-1.5.3-2.1.8l-4.7-2.7c.1-.3.2-.7.2-1.1s-.1-.8-.2-1.1l4.7-2.7c.6.5 1.3.8 2.1.8 1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1-3.1 1.4-3.1 3.1c0 .3 0 .5.1.8l-4.9 2.8c-.5-.4-1.1-.6-1.8-.6-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1c.7 0 1.3-.2 1.8-.6l4.8 2.8c-.1.3-.1.5-.1.8 0 1.7 1.4 3.1 3.1 3.1 1.7 0 3.1-1.4 3.1-3.1.1-1.7-1.3-3.1-3-3.1z"/><path d="M159.3 0l4-4c.5-.5.5-1.2 0-1.7s-1.2-.5-1.7 0l-4.4 4.4c-.2 0-.4.1-.6.3-.3.3-.4.7-.3 1 0 .3.1.7.3 1 .2.2.4.3.6.3l4.4 4.4c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7l-4-4zm14.1-1c-.2-.2-.4-.3-.6-.3l-4.4-4.4c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l4 4-4 4c-.5.5-.5 1.2 0 1.7s1.2.5 1.7 0l4.4-4.4c.2 0 .4-.1.6-.3.3-.3.4-.7.3-1 .1-.3 0-.7-.3-1z"/><g id="XMLID_4_"><path id="XMLID_21_" d="M194.9-7.3c0-.1-.1-.2-.2-.3-.1-.1-.2-.2-.3-.2-.2-.2-.3-.2-.4-.2h-4.2c-.5 0-.8.4-.8.8 0 .5 1 1.2 1 1.2l.8.8-2.6 2.6c-.4.4-.4 1 0 1.4s1 .4 1.4 0l2.6-2.6 1.3 1.4c.1.2.4.4.7.4.5 0 .8-.4.8-.8V-7c0-.1 0-.2-.1-.3z"/><path id="XMLID_22_" d="M184.4 1.2l-2.6 2.6-1.3-1.4c-.1-.2-.4-.4-.7-.4-.5 0-.8.4-.8.8V7c0 .1 0 .3.1.4 0 .1.1.2.2.3.1.1.2.2.3.2.2.1.3.1.4.1h4.2c.5 0 .8-.4.8-.8S184 6 184 6l-.8-.8 2.6-2.6c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z"/></g><path id="imgtools" d="M90-6v2h18v-2H90zm0 7h18v-2H90v2zm0 5h18V4H90v2z"/><path id="imgplus" d="M210-8h-2v7h-7v2h7v7h2V1h7v-2h-7v-7z"/><path id="imgminus" d="M223-1h16v2h-16z"/><path id="play" d="M305 0l-16-7V6.9L305 0z"/><path id="rmove" class="st2" d="M279.9-.2L272.1-8 270-5.9l5.8 5.8-5.8 5.9 2.1 2.1 7.8-7.8.1-.2z"/><path id="lmove" class="st2" d="M258-5.8l-2.1-2.1-7.8 7.8-.1.2.1.1 7.8 7.8 2.1-2.1-5.8-5.8z"/><path d="M313-7h4V7h-4zm8 0h4V7h-4z" id="pause"/><use xlink:href="#imgtools" class="st0" y="22"/><use xlink:href="#imgplus" class="st0" y="22"/><use xlink:href="#imgminus" class="st0" y="22"/><use xlink:href="#play" class="st0" y="22" x="2"/><use xlink:href="#pause" class="st0" y="22"/><use xlink:href="#rmove" class="st0" x="1" y="22"/><use xlink:href="#lmove" class="st0" x="-1" y="22"/></svg>
\ No newline at end of file
+<svg width="260" height="40" viewBox="0 0 260 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-menu-sprite">
+<g id="view-settings">
+<path d="M17 26H3V27H17V26Z" fill="white"/>
+<path d="M17 30H3V31H17V30Z" fill="white"/>
+<path d="M3 34H17V35H3V34Z" fill="white"/>
+</g>
+<g id="download">
+<path d="M30 22H31V33.2929L35.6464 28.6464L36.3535 29.3536L30.5 35.2071L24.6464 29.3536L25.3535 28.6464L30 33.2929V22Z" fill="white"/>
+<path d="M37 36H24V37H37V36Z" fill="white"/>
+</g>
+<path id="share" d="M56 25C56 26.1046 55.1046 27 54 27C53.4663 27 52.9815 26.791 52.6229 26.4503L47.9076 29.3974C47.9676 29.5875 48 29.79 48 30C48 30.21 47.9676 30.4125 47.9076 30.6026L52.6229 33.5497C52.9815 33.209 53.4663 33 54 33C55.1046 33 56 33.8954 56 35C56 36.1046 55.1046 37 54 37C52.8954 37 52 36.1046 52 35C52 34.79 52.0324 34.5875 52.0924 34.3974L47.3771 31.4503C47.0185 31.791 46.5337 32 46 32C44.8954 32 44 31.1046 44 30C44 28.8954 44.8954 28 46 28C46.5337 28 47.0185 28.209 47.3771 28.5497L52.0924 25.6026C52.0324 25.4125 52 25.21 52 25C52 23.8954 52.8954 23 54 23C55.1046 23 56 23.8954 56 25Z" fill="white"/>
+<g id="embed ">
+<path d="M67.8536 25.3536L67.1465 24.6465L62.2929 29.5L67.1465 34.3536L67.8536 33.6465L63.7071 29.5L67.8536 25.3536Z" fill="white"/>
+<path d="M72.1465 25.3536L72.8536 24.6465L77.7071 29.5L72.8536 34.3536L72.1465 33.6465L76.2929 29.5L72.1465 25.3536Z" fill="white"/>
+</g>
+<g id="full-screen">
+<path d="M97 23V26H96V24L94 24V23L97 23Z" fill="white"/>
+<path d="M86 23H83V26H84V24H86V23Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86 26V34H94V26H86ZM93 27H87V33H93V27Z" fill="white"/>
+<path d="M94 37H97V34H96V36H94V37Z" fill="white"/>
+<path d="M83 37L83 34H84L84 36H86V37H83Z" fill="white"/>
+</g>
+<path id="zoom-in" fill-rule="evenodd" clip-rule="evenodd" d="M111 25H110V30H105V31H110V36H111V31H116V30H111V25Z" fill="white"/>
+<rect id="zoom-out" x="135" y="30" width="1" height="10" transform="rotate(90 135 30)" fill="white"/>
+<g id="scroll-to-first-sheet">
+<path d="M146 25H145V35H146V25Z" fill="white"/>
+<path d="M147 30L155 25V35L147 30Z" fill="white"/>
+</g>
+<g id="scroll-to-last-sheet">
+<path d="M173 30L165 35V25L173 30Z" fill="white"/>
+<path d="M175 35H174V25H175V35Z" fill="white"/>
+</g>
+<path id="play" fill-rule="evenodd" clip-rule="evenodd" d="M185 23L198 30L185 37V23Z" fill="white"/>
+<g id="pause">
+<path d="M205 35V25H209V35H205Z" fill="white"/>
+<path d="M211 35V25H215V35H211Z" fill="white"/>
+</g>
+<path id="print" fill-rule="evenodd" clip-rule="evenodd" d="M226 24H234V26H226V24ZM225 26V24C225 23.4477 225.448 23 226 23H234C234.552 23 235 23.4477 235 24V26H237C237.552 26 238 26.4477 238 27V33C238 33.5523 237.552 34 237 34H235V36C235 36.5523 234.552 37 234 37H226C225.448 37 225 36.5523 225 36V34H223C222.448 34 222 33.5523 222 33V27C222 26.4477 222.448 26 223 26H225ZM225 33V31C225 30.4477 225.448 30 226 30H234C234.552 30 235 30.4477 235 31V33H237V27H234H226H223V33H225ZM225 28H224V29H225V28ZM234 31H226V36H234V31ZM227 32H233V33H227V32ZM233 34H227V35H233V34Z" fill="white"/>
+<path id="close" fill-rule="evenodd" clip-rule="evenodd" d="M249.439 29.5L245.47 25.5303L246.53 24.4697L250.5 28.4393L254.47 24.4697L255.53 25.5303L251.561 29.5L255.53 33.4697L254.47 34.5303L250.5 30.5607L246.53 34.5303L245.47 33.4697L249.439 29.5Z" fill="white"/>
+<g id="view-settings_2">
+<path d="M17 6H3V7H17V6Z" fill="black"/>
+<path d="M17 10H3V11H17V10Z" fill="black"/>
+<path d="M3 14H17V15H3V14Z" fill="black"/>
+</g>
+<g id="download_2">
+<path d="M30 2H31V13.2929L35.6464 8.64645L36.3535 9.35355L30.5 15.2071L24.6464 9.35355L25.3535 8.64645L30 13.2929V2Z" fill="black"/>
+<path d="M37 16H24V17H37V16Z" fill="black"/>
+</g>
+<path id="Union" d="M56 5C56 6.10457 55.1046 7 54 7C53.4663 7 52.9815 6.79098 52.6229 6.45034L47.9076 9.39737C47.9676 9.58754 48 9.78999 48 10C48 10.21 47.9676 10.4125 47.9076 10.6026L52.6229 13.5497C52.9815 13.209 53.4663 13 54 13C55.1046 13 56 13.8954 56 15C56 16.1046 55.1046 17 54 17C52.8954 17 52 16.1046 52 15C52 14.79 52.0324 14.5875 52.0924 14.3974L47.3771 11.4503C47.0185 11.791 46.5337 12 46 12C44.8954 12 44 11.1046 44 10C44 8.89543 44.8954 8 46 8C46.5337 8 47.0185 8.20902 47.3771 8.54966L52.0924 5.60264C52.0324 5.41246 52 5.21001 52 5C52 3.89543 52.8954 3 54 3C55.1046 3 56 3.89543 56 5Z" fill="black"/>
+<g id="embed _2">
+<path d="M67.8536 5.35359L67.1465 4.64648L62.2929 9.50004L67.1465 14.3536L67.8536 13.6465L63.7071 9.50004L67.8536 5.35359Z" fill="black"/>
+<path d="M72.1465 5.35359L72.8536 4.64648L77.7071 9.50004L72.8536 14.3536L72.1465 13.6465L76.2929 9.50004L72.1465 5.35359Z" fill="black"/>
+</g>
+<g id="full-screen_2">
+<path d="M97 3V6H96V4L94 4V3L97 3Z" fill="black"/>
+<path d="M86 3H83V6H84V4H86V3Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86 6V14H94V6H86ZM93 7H87V13H93V7Z" fill="black"/>
+<path d="M94 17H97V14H96V16H94V17Z" fill="black"/>
+<path d="M83 17L83 14H84L84 16H86V17H83Z" fill="black"/>
+</g>
+<path id="zoom-in_2" fill-rule="evenodd" clip-rule="evenodd" d="M111 5H110V10H105V11H110V16H111V11H116V10H111V5Z" fill="black"/>
+<rect id="zoom-out_2" x="135" y="10" width="1" height="10" transform="rotate(90 135 10)" fill="black"/>
+<g id="scroll-to-first-sheet_2">
+<path d="M146 5H145V15H146V5Z" fill="black"/>
+<path d="M147 10L155 5V15L147 10Z" fill="black"/>
+</g>
+<g id="scroll-to-last-sheet_2">
+<path d="M173 10L165 15V5L173 10Z" fill="black"/>
+<path d="M175 15H174V5H175V15Z" fill="black"/>
+</g>
+<path id="play_2" fill-rule="evenodd" clip-rule="evenodd" d="M185 3L198 10L185 17V3Z" fill="black"/>
+<g id="pause_2">
+<path d="M205 15V5H209V15H205Z" fill="black"/>
+<path d="M211 15V5H215V15H211Z" fill="black"/>
+</g>
+<path id="print_2" fill-rule="evenodd" clip-rule="evenodd" d="M226 4H234V6H226V4ZM225 6V4C225 3.44772 225.448 3 226 3H234C234.552 3 235 3.44772 235 4V6H237C237.552 6 238 6.44772 238 7V13C238 13.5523 237.552 14 237 14H235V16C235 16.5523 234.552 17 234 17H226C225.448 17 225 16.5523 225 16V14H223C222.448 14 222 13.5523 222 13V7C222 6.44772 222.448 6 223 6H225ZM225 13V11C225 10.4477 225.448 10 226 10H234C234.552 10 235 10.4477 235 11V13H237V7H234H226H223V13H225ZM225 8H224V9H225V8ZM234 11H226V16H234V11ZM227 12H233V13H227V12ZM233 14H227V15H233V14Z" fill="black"/>
+<path id="close_2" fill-rule="evenodd" clip-rule="evenodd" d="M249.439 9.5L245.47 5.53033L246.53 4.46967L250.5 8.43934L254.47 4.46967L255.53 5.53033L251.561 9.5L255.53 13.4697L254.47 14.5303L250.5 10.5607L246.53 14.5303L245.47 13.4697L249.439 9.5Z" fill="black"/>
+</g>
+</svg>
diff --git a/apps/common/embed/resources/less/common.less b/apps/common/embed/resources/less/common.less
index 3a12327a6..d5365a424 100644
--- a/apps/common/embed/resources/less/common.less
+++ b/apps/common/embed/resources/less/common.less
@@ -428,47 +428,53 @@
     &.big-email {   .socnet-btn(3); }
 }
 
+@icon-width: 20px;
+@icon-height: 20px;
 .svg-icon {
     background: data-uri('../../../../common/embed/resources/img/icon-menu-sprite.svg') no-repeat;
-    background-size: 22px*11 22px*2;
+    background-size: @icon-width*13 @icon-height*2;
 
     &.download {
-        background-position: -22px 0;
+        background-position: -@icon-width 0;
     }
     &.share {
-        background-position: -22px*2 0;
+        background-position: -@icon-width*2 0;
     }
     &.embed {
-        background-position: -22px*3 0;
+        background-position: -@icon-width*3 0;
     }
     &.fullscr {
-        background-position: -22px*4 0;
+        background-position: -@icon-width*4 0;
     }
     &.zoom-up {
-        background-position: -22px*5 -22px;
+        background-position: -@icon-width*5 -@icon-height;
     }
     &.zoom-down {
-        background-position: -22px*6 -22px;
+        background-position: -@icon-width*6 -@icon-height;
     }
     &.slide-prev {
-        background-position: -22px*7 -22px;
+        background-position: -@icon-width*7 -@icon-height;
     }
     &.slide-next {
-        background-position: -22px*8 -22px;
+        background-position: -@icon-width*8 -@icon-height;
     }
 
     &.play {
-        background-position: -22px*9 -22px;
+        background-position: -@icon-width*9 -@icon-height;
     }
 
     &.pause {
-        background-position: -22px*10 -22px;
+        background-position: -@icon-width*10 -@icon-height;
+    }
+
+    &.print {
+        background-position: -@icon-width*11 0;
     }
 }
 
 .mi-icon {
-    width: 22px;
-    height: 22px;
+    width: @icon-width;
+    height: @icon-height;
     //display: inline-block;
     float: left;
     margin: -1px 15px 0 -15px;
@@ -550,7 +556,7 @@
     &.open {
         > button {
             background-color: @btnActiveColor;
-            background-position: 0 -22px;
+            background-position: 0 -@icon-height;
         }
     }
 }
@@ -559,9 +565,11 @@
     button {
         width: 24px;
         height: 22px;
+        background-origin: content-box;
+        padding: 0 1px;
 
         &:active {
-            background-position: 0 -22px;
+            background-position: 0 -@icon-height;
         }
     }
 
diff --git a/apps/documenteditor/embed/js/ApplicationController.js b/apps/documenteditor/embed/js/ApplicationController.js
index 8eef26616..1798f3976 100644
--- a/apps/documenteditor/embed/js/ApplicationController.js
+++ b/apps/documenteditor/embed/js/ApplicationController.js
@@ -229,6 +229,9 @@ DE.ApplicationController = new(function(){
         if ( !embedConfig.saveUrl && permissions.print === false)
             $('#idt-download').hide();
 
+        if ( permissions.print === false)
+            $('#idt-print').hide();
+
         if ( !embedConfig.shareUrl )
             $('#idt-share').hide();
 
@@ -276,6 +279,12 @@ DE.ApplicationController = new(function(){
                     Common.Analytics.trackEvent('Save');
             });
 
+        DE.ApplicationView.tools.get('#idt-print')
+            .on('click', function(){
+                api.asc_Print(new Asc.asc_CDownloadOptions(null, $.browser.chrome || $.browser.safari || $.browser.opera));
+                Common.Analytics.trackEvent('Print');
+            });
+
         $('#id-btn-close').on('click', function(){
             if (config.customization && config.customization.goback) {
                 if (config.customization.goback.requestClose && config.canRequestClose)
diff --git a/apps/documenteditor/embed/js/ApplicationView.js b/apps/documenteditor/embed/js/ApplicationView.js
index 1c3aca46f..9a07a68ea 100644
--- a/apps/documenteditor/embed/js/ApplicationView.js
+++ b/apps/documenteditor/embed/js/ApplicationView.js
@@ -46,6 +46,7 @@ DE.ApplicationView = new(function(){
         $btnTools.parent().append(
             '<ul class="dropdown-menu">' +
                 '<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-share" data-toggle="modal"><span class="mi-icon svg-icon share"></span>' + this.txtShare + '</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>' +
@@ -63,6 +64,7 @@ DE.ApplicationView = new(function(){
         },
 
         txtDownload: 'Download',
+        txtPrint: 'Print',
         txtShare: 'Share',
         txtEmbed: 'Embed',
         txtFullScreen: 'Full Screen'
diff --git a/apps/documenteditor/embed/locale/en.json b/apps/documenteditor/embed/locale/en.json
index a885f9fcc..ad7a6aca6 100644
--- a/apps/documenteditor/embed/locale/en.json
+++ b/apps/documenteditor/embed/locale/en.json
@@ -24,6 +24,7 @@
   "DE.ApplicationController.unsupportedBrowserErrorText": "Your browser is not supported.",
   "DE.ApplicationController.waitText": "Please, wait...",
   "DE.ApplicationView.txtDownload": "Download",
+  "DE.ApplicationView.txtPrint": "Print",
   "DE.ApplicationView.txtEmbed": "Embed",
   "DE.ApplicationView.txtFullScreen": "Full Screen",
   "DE.ApplicationView.txtShare": "Share"