From b634ce9493433f12cce2bb9e770a1cdac9ee6458 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Tue, 3 Aug 2021 20:00:23 +0300
Subject: [PATCH] [DE] Make position image setting in form settings

---
 .../main/app/template/FormSettings.template   | 16 +++++++++
 .../main/app/view/FormSettings.js             | 20 ++++++++++-
 .../main/resources/less/rightmenu.less        | 33 +++++++++++++++++++
 3 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/apps/documenteditor/main/app/template/FormSettings.template b/apps/documenteditor/main/app/template/FormSettings.template
index e43b4b60ee..806d339038 100644
--- a/apps/documenteditor/main/app/template/FormSettings.template
+++ b/apps/documenteditor/main/app/template/FormSettings.template
@@ -83,6 +83,22 @@
             <div id="form-chb-aspect"></div>
         </td>
     </tr>
+    <tr class="form-image">
+        <td class="padding-large">
+            <label class="input-label"><%= scope.textButton %></label>
+            <div id="form-cnt-position" style="width: 100%;">
+                <div class="row">
+                    <div id="form-img-position-preview">
+                        <div id="form-img-example"><%= scope.textImage %></div>
+                    </div>
+                    <div id="form-img-slider-position-y"></div>
+                </div>
+                <div class="row">
+                    <div id="form-img-slider-position-x"></div>
+                </div>
+            </div>
+        </td>
+    </tr>
     <tr class="form-image">
         <td class="padding-large">
             <div id="form-button-replace" style="width:100%;"></div>
diff --git a/apps/documenteditor/main/app/view/FormSettings.js b/apps/documenteditor/main/app/view/FormSettings.js
index db7f1fc2e4..bbdcd8589d 100644
--- a/apps/documenteditor/main/app/view/FormSettings.js
+++ b/apps/documenteditor/main/app/view/FormSettings.js
@@ -423,6 +423,23 @@ define([
             this.cmbScale.on('changed:after', this.onScaleChanged.bind(this));
             this.cmbScale.on('hide:after', this.onHideMenus.bind(this));
 
+            this.sldrPreviewPositionX = new Common.UI.SingleSlider({
+                el: $('#form-img-slider-position-x'),
+                width: 116,
+                minValue: 0,
+                maxValue: 100,
+                value: 50
+            });
+
+            this.sldrPreviewPositionY = new Common.UI.SingleSlider({
+                el: $('#form-img-slider-position-y'),
+                width: 116,
+                minValue: 0,
+                maxValue: 100,
+                value: 50,
+                direction: 'vertical'
+            });
+
             this.updateMetricUnit();
             this.UpdateThemeColors();
         },
@@ -1149,7 +1166,8 @@ define([
         textNever: 'Never',
         textTooBig: 'Image is Too Big',
         textTooSmall: 'Image is Too Small',
-        textScale: 'When to scale'
+        textScale: 'When to scale',
+        textButton: 'Button'
 
     }, DE.Views.FormSettings || {}));
 });
\ No newline at end of file
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index dfd274f36d..8284db0cf8 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -161,3 +161,36 @@
     background-color: @background-normal-ie;
     background-color: @background-normal;
 }
+
+#form-cnt-position {
+    position: relative;
+    .row {
+        display: flex;
+        justify-content: flex-start;
+    }
+    #form-img-position-preview {
+        position: relative;
+        height: 130px;
+        width: 130px;
+        border: 1px solid @border-regular-control;
+        #form-img-example {
+            position: absolute;
+            top: 24px;
+            left: 24px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 80px;
+            width: 80px;
+            border: 1px solid @border-regular-control;
+        }
+    }
+    #form-img-slider-position-x {
+        margin-top: 4px;
+        margin-left: 7px;
+    }
+    #form-img-slider-position-y {
+        margin-top: 7px;
+        margin-left: 4px;
+    }
+}