From 6c55bd0f24fefee7fde4237cf535ad4ab1a83733 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Tue, 19 Nov 2019 15:43:26 +0300
Subject: [PATCH] Image settings: fix buttons size

---
 .../main/app/template/ImageSettings.template  |  6 +++---
 .../main/app/view/ImageSettings.js            |  9 ++++++--
 .../main/app/template/ImageSettings.template  |  6 +++---
 .../main/app/view/ImageSettings.js            | 21 ++++++++++++-------
 .../main/app/template/ImageSettings.template  |  4 ++--
 .../main/app/view/ImageSettings.js            |  5 +++--
 6 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/apps/documenteditor/main/app/template/ImageSettings.template b/apps/documenteditor/main/app/template/ImageSettings.template
index 8abc9eaf0..9fae4b54e 100644
--- a/apps/documenteditor/main/app/template/ImageSettings.template
+++ b/apps/documenteditor/main/app/template/ImageSettings.template
@@ -14,17 +14,17 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default" id="image-button-original-size" style="width:100px;"><%= scope.textOriginalSize %></button>
+            <button type="button" class="btn btn-text-default" id="image-button-original-size" style="min-width:100px;width: auto;"><%= scope.textOriginalSize %></button>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default" id="image-button-fit-margins" style="width:100px;"><%= scope.textFitMargins %></button>
+            <button type="button" class="btn btn-text-default" id="image-button-fit-margins" style="min-width:100px;width: auto;"><%= scope.textFitMargins %></button>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="image-button-crop" style="width: 100px;"></div>
+            <div id="image-button-crop" style="min-width: 100px;"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/documenteditor/main/app/view/ImageSettings.js b/apps/documenteditor/main/app/view/ImageSettings.js
index 527037a2b..d0717940b 100644
--- a/apps/documenteditor/main/app/view/ImageSettings.js
+++ b/apps/documenteditor/main/app/view/ImageSettings.js
@@ -159,6 +159,10 @@ define([
             });
             this.lockedControls.push(this.btnFitMargins);
 
+            var w = Math.max(this.btnOriginalSize.cmpEl.width(), this.btnFitMargins.cmpEl.width());
+            this.btnOriginalSize.cmpEl.width(w);
+            this.btnFitMargins.cmpEl.width(w);
+
             this.btnInsertFromFile = new Common.UI.Button({
                 el: $('#image-button-from-file')
             });
@@ -229,6 +233,7 @@ define([
             this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
             this.lockedControls.push(this.btnFlipH);
 
+            var w = this.btnOriginalSize.cmpEl.outerWidth();
             this.btnCrop = new Common.UI.Button({
                 cls: 'btn-text-split-default',
                 caption: this.textCrop,
@@ -236,9 +241,9 @@ define([
                 enableToggle: true,
                 allowDepress: true,
                 pressed: this._state.cropMode,
-                width: 100,
+                width: w,
                 menu        : new Common.UI.Menu({
-                    style       : 'min-width: 100px;',
+                    style       : 'min-width:' + w + 'px;',
                     items: [
                         {
                             caption: this.textCrop,
diff --git a/apps/presentationeditor/main/app/template/ImageSettings.template b/apps/presentationeditor/main/app/template/ImageSettings.template
index 75032587c..6b41d6507 100644
--- a/apps/presentationeditor/main/app/template/ImageSettings.template
+++ b/apps/presentationeditor/main/app/template/ImageSettings.template
@@ -14,17 +14,17 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default" id="image-button-original-size" style="width:100px;"><%= scope.textOriginalSize %></button>
+            <button type="button" class="btn btn-text-default" id="image-button-original-size" style="min-width:100px;width: auto;"><%= scope.textOriginalSize %></button>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default" id="image-button-fit-slide" style="width:100px;"><%= scope.textFitSlide %></button>
+            <button type="button" class="btn btn-text-default" id="image-button-fit-slide" style="min-width:100px;width: auto;"><%= scope.textFitSlide %></button>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="image-button-crop" style="width: 100px;"></div>
+            <div id="image-button-crop" style="min-width:100px;"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/presentationeditor/main/app/view/ImageSettings.js b/apps/presentationeditor/main/app/view/ImageSettings.js
index 439bced4d..51a8dabca 100644
--- a/apps/presentationeditor/main/app/view/ImageSettings.js
+++ b/apps/presentationeditor/main/app/view/ImageSettings.js
@@ -143,6 +143,17 @@ define([
                 this.fireEvent('editcomplete', this);
             }, this));
 
+            this.btnFitSlide = new Common.UI.Button({
+                el: $('#image-button-fit-slide')
+            });
+            this.lockedControls.push(this.btnFitSlide);
+            this.btnFitSlide.on('click', _.bind(this.setFitSlide, this));
+
+            var w = Math.max(this.btnOriginalSize.cmpEl.width(), this.btnFitSlide.cmpEl.width());
+            this.btnOriginalSize.cmpEl.width(w);
+            this.btnFitSlide.cmpEl.width(w);
+
+            w = this.btnOriginalSize.cmpEl.outerWidth();
             this.btnCrop = new Common.UI.Button({
                 cls: 'btn-text-split-default',
                 caption: this.textCrop,
@@ -150,9 +161,9 @@ define([
                 enableToggle: true,
                 allowDepress: true,
                 pressed: this._state.cropMode,
-                width: 100,
+                width: w,
                 menu        : new Common.UI.Menu({
-                    style       : 'min-width: 100px;',
+                    style       : 'min-width:' + w + 'px;',
                     items: [
                         {
                             caption: this.textCrop,
@@ -176,12 +187,6 @@ define([
             this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this));
             this.lockedControls.push(this.btnCrop);
 
-            this.btnFitSlide = new Common.UI.Button({
-                el: $('#image-button-fit-slide')
-            });
-            this.lockedControls.push(this.btnFitSlide);
-            this.btnFitSlide.on('click', _.bind(this.setFitSlide, this));
-
             this.btnRotate270 = new Common.UI.Button({
                 cls: 'btn-toolbar',
                 iconCls: 'rotate-270',
diff --git a/apps/spreadsheeteditor/main/app/template/ImageSettings.template b/apps/spreadsheeteditor/main/app/template/ImageSettings.template
index 8e90e9ace..ace66d110 100644
--- a/apps/spreadsheeteditor/main/app/template/ImageSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/ImageSettings.template
@@ -21,12 +21,12 @@
 <table cols="2">
     <tr>
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default" id="image-button-original-size" style="width:100px;"><%= scope.textOriginalSize %></button>
+            <button type="button" class="btn btn-text-default" id="image-button-original-size" style="min-width:100px;width: auto;"><%= scope.textOriginalSize %></button>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="image-button-crop" style="width: 100px;"></div>
+            <div id="image-button-crop" style="min-width:100px;"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/spreadsheeteditor/main/app/view/ImageSettings.js b/apps/spreadsheeteditor/main/app/view/ImageSettings.js
index 525ffa781..1f19a8851 100644
--- a/apps/spreadsheeteditor/main/app/view/ImageSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ImageSettings.js
@@ -199,6 +199,7 @@ define([
 
             this.lblReplace = $('#image-lbl-replace');
 
+            var w = this.btnOriginalSize.cmpEl.outerWidth();
             this.btnCrop = new Common.UI.Button({
                 cls: 'btn-text-split-default',
                 caption: this.textCrop,
@@ -206,9 +207,9 @@ define([
                 enableToggle: true,
                 allowDepress: true,
                 pressed: this._state.cropMode,
-                width: 100,
+                width: w,
                 menu        : new Common.UI.Menu({
-                    style       : 'min-width: 100px;',
+                    style       : 'min-width:' + w + 'px;',
                     items: [
                         {
                             caption: this.textCrop,