[scaling] Fix bugs

apps/common/main/lib/component/Button.js

@@ -766,12 +766,9 @@ define([
                 btnIconEl = $(this.el).find('.icon');
             if (opts && (opts.curr || opts.next) && btnIconEl) {
                 var svgIcon = btnIconEl.find('use.zoom-int');
-                if (svgIcon.length) {
-                    !!opts.next && svgIcon.attr('href', '#' + opts.next);
-                } else {
-                    !!opts.curr && (btnIconEl.removeClass(opts.curr));
-                    !!opts.next && !btnIconEl.hasClass(opts.next) && (btnIconEl.addClass(opts.next));
-                }
+                !!opts.curr && (btnIconEl.removeClass(opts.curr));
+                !!opts.next && !btnIconEl.hasClass(opts.next) && (btnIconEl.addClass(opts.next));
+                svgIcon.length && !!opts.next && svgIcon.attr('href', '#' + opts.next);
 
                 if ( !!me.options.signals ) {
                     if ( !(me.options.signals.indexOf('icon:changed') < 0) ) {

apps/common/main/resources/less/bigscaling.less

@@ -10,6 +10,23 @@
             }
         }
     }
+
+    .left-panel,
+    .modal-dlg:not(#window-header-footer),
+    .advanced-settings-dlg {
+        :not(.input-row) > .btn-group {
+             &.split,
+             > .btn {
+                 display: flex;
+                 align-items: center;
+            }
+        }
+    }
+
+    .scaling-flex-row {
+        display: flex;
+        align-items: center;
+    }
 }
 
 .btn-toolbar,

apps/common/main/resources/less/common.less

@@ -127,13 +127,6 @@ label {
     #left-panel-search {
         height: 100%;
     }
-
-    .btn-group > .btn {
-        .pixel-ratio__2_5 & {
-            display: flex;
-            align-items: center;
-        }
-    }
 }
 
 .right-panel {

apps/documenteditor/main/app/view/FileMenuPanels.js

@@ -2738,6 +2738,7 @@ define([
                 parentEl: $markup.findById('#print-prev-page'),
                 cls: 'btn-prev-page',
                 iconCls: 'arrow',
+                scaling: false,
                 dataHint: '2',
                 dataHintDirection: 'top'
             });
@@ -2746,6 +2747,7 @@ define([
                 parentEl: $markup.findById('#print-next-page'),
                 cls: 'btn-next-page',
                 iconCls: 'arrow',
+                scaling: false,
                 dataHint: '2',
                 dataHintDirection: 'top'
             });

apps/documenteditor/main/app/view/ListSettingsDialog.js

@@ -696,6 +696,7 @@ define([
                 parentEl: $window.findById('#id-dlg-btn-more'),
                 cls: 'btn-toolbar bg-white',
                 iconCls: this.extended ? 'caret-double-left' : 'caret-double-right',
+                scaling: false,
                 hint: this.extended ? this.textHide : this.textMore
             });
             this.btnMore.on('click', _.bind(this.onMoreClick, this));

apps/presentationeditor/main/app/view/Animation.js

@@ -395,7 +395,7 @@ define([
 
                 this.lblStart = new Common.UI.Label({
                     el: this.$el.find('#animation-label-start'),
-                    iconCls: 'toolbar__icon btn-preview-play',
+                    iconCls: 'toolbar__icon btn-play',
                     caption: this.strStart,
                     lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation, _set.timingLock]
                 });

apps/presentationeditor/main/app/view/DocumentPreview.js

@@ -71,9 +71,9 @@ define([
                 '<div id="presentation-preview" style="width:100%; height:100%"></div>',
                 '<div id="preview-controls-panel" class="preview-controls"">',
                     '<div class="preview-group" style="">',
-                        !Common.UI.isRTL() ? '<button id="btn-preview-prev" type="button" class="btn small btn-toolbar"><span class="icon toolbar__icon btn-previtem">&nbsp;</span></button>' : '<button id="btn-preview-next" type="button" class="btn small btn-toolbar"><span class="icon toolbar__icon btn-nextitem">&nbsp;</span></button>',
-                        '<button id="btn-preview-play" type="button" class="btn small btn-toolbar"><span class="icon toolbar__icon btn-preview-play">&nbsp;</span></button>',
-                        !Common.UI.isRTL() ? '<button id="btn-preview-next" type="button" class="btn small btn-toolbar"><span class="icon toolbar__icon btn-nextitem">&nbsp;</span></button>' : '<button id="btn-preview-prev" type="button" class="btn small btn-toolbar"><span class="icon toolbar__icon btn-previtem">&nbsp;</span></button>',
+                        !Common.UI.isRTL() ? '<button id="btn-preview-prev" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-previtem">&nbsp;</i></button>' : '<button id="btn-preview-next" type="button" class="btn small btn-toolbar"><span class="icon toolbar__icon btn-nextitem">&nbsp;</span></button>',
+                        '<button id="btn-preview-play" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-play">&nbsp;</i></button>',
+                        !Common.UI.isRTL() ? '<button id="btn-preview-next" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-nextitem">&nbsp;</i></button>' : '<button id="btn-preview-prev" type="button" class="btn small btn-toolbar"><span class="icon toolbar__icon btn-previtem">&nbsp;</span></button>',
                     '<div class="separator"></div>',
                     '</div>',
                     '<div class="preview-group dropup">',
@@ -85,9 +85,9 @@ define([
                     '</div>',
                     '<div class="preview-group" style="">',
                         '<div class="separator"></div>',
-                        '<button id="btn-preview-fullscreen" type="button" class="btn small btn-toolbar"><span class="icon toolbar__icon btn-preview-fullscreen">&nbsp;</span></button>',
+                        '<button id="btn-preview-fullscreen" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-fullscreen">&nbsp;</i></button>',
                         '<div class="separator fullscreen"></div>',
-                        '<button id="btn-preview-close" type="button" class="btn small btn-toolbar"><span class="icon toolbar__icon btn-close">&nbsp;</span></button>',
+                        '<button id="btn-preview-close" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-close">&nbsp;</i></button>',
                     '</div>',
                 '</div>'
             ].join('');
@@ -129,14 +129,12 @@ define([
             this.btnPlay.on('click', _.bind(function(btn) {
                 var iconEl = $('.icon', this.btnPlay.cmpEl);
                 if (iconEl.hasClass('btn-preview-pause')) {
-                    iconEl.removeClass('btn-preview-pause');
-                    iconEl.addClass('btn-preview-play');
+                    this.btnPlay.changeIcon({curr: 'btn-preview-pause', next: 'btn-play'});
                     this.btnPlay.updateHint(this.txtPlay);
                     if (this.api)
                         this.api.DemonstrationPause();
                 } else {
-                    iconEl.addClass('btn-preview-pause');
-                    iconEl.removeClass('btn-preview-play');
+                    this.btnPlay.changeIcon({curr: 'btn-play', next: 'btn-preview-pause'});
                     this.btnPlay.updateHint(this.txtPause);
                     if (this.api)
                         this.api.DemonstrationPlay ();
@@ -233,8 +231,11 @@ define([
 
             $(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange",function(){
                 var fselem = (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement );
-                $('.icon', me.btnFullScreen.cmpEl).toggleClass('btn-preview-exit-fullscreen', fselem !== undefined && fselem !== null);
-                $('.icon', me.btnFullScreen.cmpEl).toggleClass('btn-preview-fullscreen', fselem == undefined || fselem == null);
+                if (fselem !== undefined && fselem !== null) {
+                    me.btnFullScreen.changeIcon({curr: 'btn-fullscreen', next: 'btn-preview-exit-fullscreen'});
+                } else {
+                    me.btnFullScreen.changeIcon({curr: 'btn-preview-exit-fullscreen', next: 'btn-fullscreen'});
+                }
 
                 setTimeout( function() {
                     me.previewControls.css('display', '');
@@ -278,8 +279,7 @@ define([
 
             var iconEl = $('.icon', this.btnPlay.cmpEl);
             if (!iconEl.hasClass('btn-preview-pause')) {
-                iconEl.addClass('btn-preview-pause');
-                iconEl.removeClass('btn-preview-play');
+                this.btnPlay.changeIcon({curr: 'btn-play', next: 'btn-preview-pause'});
                 this.btnPlay.updateHint(this.txtPause);
             }
 

apps/presentationeditor/main/app/view/FileMenuPanels.js

@@ -2160,6 +2160,7 @@ define([
                 parentEl: $markup.findById('#print-prev-page'),
                 cls: 'btn-prev-page',
                 iconCls: 'arrow',
+                scaling: false,
                 dataHint: '2',
                 dataHintDirection: 'top'
             });
@@ -2168,6 +2169,7 @@ define([
                 parentEl: $markup.findById('#print-next-page'),
                 cls: 'btn-next-page',
                 iconCls: 'arrow',
+                scaling: false,
                 dataHint: '2',
                 dataHintDirection: 'top'
             });

apps/spreadsheeteditor/main/app/template/FormatRulesEditDlg.template

@@ -28,7 +28,7 @@
         </tr>
         <tr class="hasformat">
             <td class="padding-large">
-                <div>
+                <div class="scaling-flex-row">
                     <div id="format-rules-bold"></div>
                     <div id="format-rules-italic"></div>
                     <div id="format-rules-underline"></div>

apps/spreadsheeteditor/main/app/view/FileMenuPanels.js

@@ -2862,6 +2862,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                 parentEl: $markup.findById('#print-prev-page'),
                 cls: 'btn-prev-page',
                 iconCls: 'arrow',
+                scaling: false,
                 dataHint: '2',
                 dataHintDirection: 'top'
             });
@@ -2870,6 +2871,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                 parentEl: $markup.findById('#print-next-page'),
                 cls: 'btn-next-page',
                 iconCls: 'arrow',
+                scaling: false,
                 dataHint: '2',
                 dataHintDirection: 'top'
             });

apps/spreadsheeteditor/main/app/view/SlicerSettingsAdvanced.js

@@ -117,6 +117,7 @@ define([    'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem
                 parentEl: $('#sliceradv-btn-style'),
                 cls         : 'btn-large-dataview sheet-template-slicer',
                 iconCls     : 'icon-template-slicer',
+                scaling     : false,
                 menu        : new Common.UI.Menu({
                     style: 'width: 333px;',
                     additionalAlign: this.menuAddAlign,