Image settings: fix buttons size

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>

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,

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>

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',

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>

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,