From 7ab6a9c994eae35afd862fc8247820cf4c6b70fd Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 11 Nov 2021 11:38:34 +0300
Subject: [PATCH] [DE forms] Add icons. Bug 53476

---
 .../forms/resources/img/icon-menu-sprite.svg  | 26 ++++++++++++++++++-
 apps/common/forms/resources/less/common.less  | 14 +++++++++-
 .../forms/app/view/ApplicationView.js         |  9 ++++---
 3 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/apps/common/forms/resources/img/icon-menu-sprite.svg b/apps/common/forms/resources/img/icon-menu-sprite.svg
index 97b51fd3e..bcb884c10 100644
--- a/apps/common/forms/resources/img/icon-menu-sprite.svg
+++ b/apps/common/forms/resources/img/icon-menu-sprite.svg
@@ -1,4 +1,4 @@
-<svg width="380" height="40" viewBox="0 0 380 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="440" height="40" viewBox="0 0 440 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="icon-menu-sprite Embedded Viewer">
 <g id="view-settings">
 <path id="Vector" d="M17 26H3V27H17V26Z" fill="white"/>
@@ -148,5 +148,29 @@
 <g id="close_2">
 <path id="Vector 73_2" d="M366 5L375 14M375 5L366 14" stroke="black" stroke-width="1.5"/>
 </g>
+<g id="сut">
+    <circle id="Ellipse 103" cx="385.5" cy="13.5" r="2" stroke="black"/>
+    <circle id="Ellipse 104" cx="385.5" cy="6.5" r="2" stroke="black"/>
+    <path id="Rectangle 1552" d="M387.188 7.56689L398.446 14.0669V14.0669C398.17 14.5452 397.559 14.7091 397.08 14.4329L386.688 8.43292L387.188 7.56689Z" fill="black"/>
+    <path id="Rectangle 1553" d="M386.688 11.5669L397.08 5.56689C397.558 5.29075 398.17 5.45463 398.446 5.93292V5.93292L387.188 12.4329L386.688 11.5669Z" fill="black"/>
+</g>
+<g id="сut_2">
+    <circle id="Ellipse 103_2" cx="385.5" cy="33.5" r="2" stroke="white"/>
+    <circle id="Ellipse 104_2" cx="385.5" cy="26.5" r="2" stroke="white"/>
+    <path id="Rectangle 1552_2" d="M387.188 27.5669L398.446 34.0669V34.0669C398.17 34.5452 397.559 34.7091 397.08 34.4329L386.688 28.4329L387.188 27.5669Z" fill="white"/>
+    <path id="Rectangle 1553_2" d="M386.688 31.5669L397.08 25.5669C397.558 25.2908 398.17 25.4546 398.446 25.9329V25.9329L387.188 32.4329L386.688 31.5669Z" fill="white"/>
+</g>
+<g id="copy">
+    <path id="Union_27" fill-rule="evenodd" clip-rule="evenodd" d="M404 5H412V7H413V5C413 4.44772 412.552 4 412 4H404C403.448 4 403 4.44772 403 5V12C403 12.5523 403.448 13 404 13H406V12H404V5ZM411 6H405V7H411V6ZM408 9V16H416V9H408ZM408 8C407.448 8 407 8.44772 407 9V16C407 16.5523 407.448 17 408 17H416C416.552 17 417 16.5523 417 16V9C417 8.44772 416.552 8 416 8H408ZM406 8H405V9H406V8ZM405 10H406V11H405V10ZM415 11V10H409V11H415ZM415 12V13H409V12H415ZM415 15V14H409V15H415Z" fill="black"/>
+</g>
+<g id="copy_2">
+    <path id="Union_28" fill-rule="evenodd" clip-rule="evenodd" d="M404 25H412V27H413V25C413 24.4477 412.552 24 412 24H404C403.448 24 403 24.4477 403 25V32C403 32.5523 403.448 33 404 33H406V32H404V25ZM411 26H405V27H411V26ZM408 29V36H416V29H408ZM408 28C407.448 28 407 28.4477 407 29V36C407 36.5523 407.448 37 408 37H416C416.552 37 417 36.5523 417 36V29C417 28.4477 416.552 28 416 28H408ZM406 28H405V29H406V28ZM405 30H406V31H405V30ZM415 31V30H409V31H415ZM415 32V33H409V32H415ZM415 35V34H409V35H415Z" fill="white"/>
+</g>
+<g id="paste">
+    <path id="Union_29" fill-rule="evenodd" clip-rule="evenodd" d="M426 3H432V4H434C434.552 4 435 4.44772 435 5V7H434V5H432V6H426V5H424V12H426V13H424C423.448 13 423 12.5523 423 12V5C423 4.44772 423.448 4 424 4H426V3ZM436 16V9H428V16H436ZM428 8C427.448 8 427 8.44772 427 9V16C427 16.5523 427.448 17 428 17H436C436.552 17 437 16.5523 437 16V9C437 8.44772 436.552 8 436 8H428ZM429 11V10H435V11H429ZM435 12H429V13H435V12ZM429 15V14H435V15H429Z" fill="black"/>
+</g>
+<g id="paste_2">
+    <path id="Union_30" fill-rule="evenodd" clip-rule="evenodd" d="M426 23H432V24H434C434.552 24 435 24.4477 435 25V27H434V25H432V26H426V25H424V32H426V33H424C423.448 33 423 32.5523 423 32V25C423 24.4477 423.448 24 424 24H426V23ZM436 36V29H428V36H436ZM428 28C427.448 28 427 28.4477 427 29V36C427 36.5523 427.448 37 428 37H436C436.552 37 437 36.5523 437 36V29C437 28.4477 436.552 28 436 28H428ZM429 31V30H435V31H429ZM435 32H429V33H435V32ZM429 35V34H435V35H429Z" fill="white"/>
+</g>
 </g>
 </svg>
diff --git a/apps/common/forms/resources/less/common.less b/apps/common/forms/resources/less/common.less
index 7ebf0d2c8..b0e148fe1 100644
--- a/apps/common/forms/resources/less/common.less
+++ b/apps/common/forms/resources/less/common.less
@@ -432,7 +432,7 @@
 
 .svg-icon {
     background: data-uri('../../../../common/forms/resources/img/icon-menu-sprite.svg') no-repeat;
-    background-size: @icon-width*19 @icon-height*2;
+    background-size: @icon-width*22 @icon-height*2;
 
     &.download {
         background-position: -@icon-width 0;
@@ -496,6 +496,18 @@
         background-position: -@icon-width*14 0;
         background-position: -@icon-width*14 @icon-normal-top;
     }
+    &.cut {
+        background-position: -@icon-width*19 0;
+        background-position: -@icon-width*19 @icon-normal-top;
+    }
+    &.copy {
+        background-position: -@icon-width*20 0;
+        background-position: -@icon-width*20 @icon-normal-top;
+    }
+    &.paste {
+        background-position: -@icon-width*21 0;
+        background-position: -@icon-width*21 @icon-normal-top;
+    }
 }
 
 .btn {
diff --git a/apps/documenteditor/forms/app/view/ApplicationView.js b/apps/documenteditor/forms/app/view/ApplicationView.js
index b9cbc27af..3f3aa3714 100644
--- a/apps/documenteditor/forms/app/view/ApplicationView.js
+++ b/apps/documenteditor/forms/app/view/ApplicationView.js
@@ -89,11 +89,12 @@ define([
 
         getContextMenu: function() {
             return new Common.UI.Menu({
+                cls: 'shifted-right',
                 items: [
-                    { caption: this.textCut, value: 'cut' },
-                    { caption: this.textCopy, value: 'copy' },
-                    { caption: this.textPaste, value: 'paste' },
-                    { caption: this.textPrintSel, value: 'print' }
+                    { caption: this.textCut, value: 'cut', iconCls: 'mi-icon svg-icon cut' },
+                    { caption: this.textCopy, value: 'copy', iconCls: 'mi-icon svg-icon copy' },
+                    { caption: this.textPaste, value: 'paste', iconCls: 'mi-icon svg-icon paste' },
+                    { caption: this.textPrintSel, value: 'print', iconCls: 'mi-icon svg-icon print' }
                 ]
             });
         },