Fix window's height

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

@@ -731,8 +731,11 @@ define([
                 this.binding.winclose = function(obj) {
                     if (me.$window && me.isVisible() && me.$window == obj.$window) me.close();
                 };
+                this.binding.onAppRepaint = _.bind(this.onAppRepaint, this);
+                this.binding.onThemeChanged = _.bind(this.onThemeChanged, this);
                 Common.NotificationCenter.on('window:close', this.binding.winclose);
-                Common.NotificationCenter.on('app:repaint', _.bind(this.onAppRepaint, this));
+                Common.NotificationCenter.on('app:repaint', this.binding.onAppRepaint);
+                Common.NotificationCenter.on('uitheme:changed', this.binding.onThemeChanged);
 
                 this.initConfig.footerCls && this.$window.find('.footer').addClass(this.initConfig.footerCls);
 
@@ -855,6 +858,8 @@ define([
                     this.$window.find('.header').off('mousedown', this.binding.dragStart);
                 }
                 Common.NotificationCenter.off({'window:close': this.binding.winclose});
+                Common.NotificationCenter.off('app:repaint', this.binding.onAppRepaint);
+                Common.NotificationCenter.off('uitheme:changed', this.binding.onThemeChanged);
 
                 if (this.initConfig.modal) {
                     var mask = _getMask(),
@@ -1067,6 +1072,12 @@ define([
                 }
             },
 
+            onThemeChanged: function() {
+                if (!this.$window || !this.isVisible()) return;
+
+                _autoSize.call(this);
+            },
+
             suspendKeyEvents: function () {
                 this.pauseKeyEvents = false;
             },

apps/common/main/lib/template/AutoCorrectDialog.template

@@ -2,7 +2,7 @@
     <div class="inner-content">
         <table cols="1" style="width: 100%;" role="presentation">
         <tr>
-            <td style="padding-bottom: 8px;">
+            <td class="padding-small">
                 <div id="auto-correct-chb-replace-type"></div>
             </td>
         </tr>
@@ -13,18 +13,18 @@
                 </td>
             </tr>
         <tr>
-            <td style="padding-bottom: 4px;">
+            <td class="padding-very-small">
                 <div id="auto-correct-replace" class="margin-right-2" style="width: 115px;display: inline-block;"></div>
                 <div id="auto-correct-by" style="width: 234px;display: inline-block;"></div>
                 </td>
             </tr>
         <tr>
-            <td style="padding-bottom: 8px;">
+            <td class="padding-small">
                 <div id="auto-correct-math-list" class="" style="width:100%; height: 208px;"></div>
                 </td>
             </tr>
         <tr>
-            <td style="padding-bottom: 8px;">
+            <td class="padding-small">
                 <button type="button" class="btn btn-text-default auto" id="auto-correct-btn-reset" style="min-width: 86px;"><%= scope.textResetAll %></button>
                 <button type="button" class="btn btn-text-default auto float-right" id="auto-correct-btn-delete" style="min-width: 86px;"><%= scope.textDelete %></button>
                 <button type="button" class="btn btn-text-default auto float-right margin-right-5" id="auto-correct-btn-edit" style="min-width: 86px;"><%= scope.textAdd %></button>
@@ -37,7 +37,7 @@
     <div class="inner-content">
         <table cols="1" style="width: 100%;" role="presentation">
             <tr>
-                <td style="padding-bottom: 8px;">
+                <td class="padding-small">
                     <label><%= scope.textRecognizedDesc %></label>
                 </td>
             </tr>
@@ -47,12 +47,12 @@
                 </td>
             </tr>
             <tr>
-                <td style="padding-bottom: 8px;">
+                <td class="padding-small">
                     <div id="auto-correct-recognized-list" class="" style="width:100%; height: 208px;"></div>
                 </td>
             </tr>
             <tr>
-                <td style="padding-bottom: 8px;">
+                <td class="padding-small">
                     <button type="button" class="btn btn-text-default auto" id="auto-correct-btn-rec-reset" style="min-width: 86px;"><%= scope.textResetAll %></button>
                     <button type="button" class="btn btn-text-default auto float-right" id="auto-correct-btn-rec-delete" style="min-width: 86px;"><%= scope.textDelete %></button>
                     <button type="button" class="btn btn-text-default auto float-right margin-right-5" id="auto-correct-btn-rec-edit" style="min-width: 86px;"><%= scope.textAdd %></button>
@@ -101,8 +101,8 @@
     <div class="inner-content">
         <table cols="1" style="width: 100%;" role="presentation">
             <tr>
-                <td style="padding-bottom: 12px;">
+                <td class="padding-large">
-                    <div id="auto-correct-exceptions-chk-sentence" style="padding-bottom: 8px;"></div>
+                    <div id="auto-correct-exceptions-chk-sentence" class="padding-small"></div>
                     <div id="auto-correct-exceptions-chk-cells"></div>
                 </td>
             </tr>
@@ -112,7 +112,7 @@
                 </td>
             </tr>
             <tr>
-                <td style="padding-bottom: 12px;">
+                <td class="padding-large">
                     <div id="auto-correct-exceptions-lang" style="display: inline-block;vertical-align: middle;"></div>
                 </td>
             </tr>
@@ -123,12 +123,12 @@
                 </td>
             </tr>
             <tr>
-                <td style="padding-bottom: 8px;">
+                <td class="padding-small">
                     <div id="auto-correct-exceptions-list" class="" style="width:100%; height: 139px;"></div>
                 </td>
             </tr>
             <tr>
-                <td style="padding-bottom: 18px;">
+                <td class="padding-small">
                     <button type="button" class="btn btn-text-default auto" id="auto-correct-btn-exceptions-reset" style="min-width: 86px;"><%= scope.textResetAll %></button>
                     <button type="button" class="btn btn-text-default auto float-right" id="auto-correct-btn-exceptions-delete" style="min-width: 86px;"><%= scope.textDelete %></button>
                     <button type="button" class="btn btn-text-default auto float-right margin-right-5" id="auto-correct-btn-exceptions-edit" style="min-width: 86px;"><%= scope.textAdd %></button>

apps/common/main/lib/view/AdvancedSettingsWindow.js

@@ -105,10 +105,10 @@ define([], function () { 'use strict';
                 btn.on('click', _.bind(me.onCategoryClick, me, btn, index));
                 me.btnsCategory.push(btn);
             });
-            var cnt_panel = $window.find('.content-panel'),
+            let menu_panel = $window.find('.menu-panel');
-                menu_panel = $window.find('.menu-panel');
+            this.content_panel = $window.find('.content-panel');
-            cnt_panel.width(this.contentWidth);
+            this.content_panel.width(this.contentWidth);
-            $window.width(((menu_panel.length>0) ? menu_panel.outerWidth() : 0) + cnt_panel.outerWidth() + 2);
+            $window.width(((menu_panel.length>0) ? menu_panel.outerWidth() : 0) + this.content_panel.outerWidth() + 2);
 
             if (this.options.contentHeight) {
                 $window.find('.body > .box').css('height', this.options.contentHeight);
@@ -124,7 +124,7 @@ define([], function () { 'use strict';
                 this.btnsCategory[0].toggle(true, true);
 
             var onMainWindowResize = function(){
-                $window.width(((menu_panel.length>0) ? menu_panel.outerWidth() : 0) + cnt_panel.outerWidth() + 2);
+                $window.width(((menu_panel.length>0) ? menu_panel.outerWidth() : 0) + this.content_panel.outerWidth() + 2);
             };
             $(window).on('resize', onMainWindowResize);
             this.on('close', function() {
@@ -152,6 +152,11 @@ define([], function () { 'use strict';
             $window.find('.body > .box').css('height', height);
         },
 
+        fixHeight: function() { // check height of the content
+            let diff = this.content_panels.filter('.active').height() - this.content_panel.height();
+            (diff>0) && this.setInnerHeight(parseInt(this.$window.find('.body > .box').css('height')) + diff);
+        },
+
         onDlgBtnClick: function(event) {
             var state = event.currentTarget.attributes['result'].value;
             if ( this.handler && this.handler.call(this, state, (state == 'ok') ? this.getSettings() : undefined) )
@@ -162,6 +167,7 @@ define([], function () { 'use strict';
         onCategoryClick: function(btn, index) {
             this.content_panels.filter('.active').removeClass('active');
             $("#" + btn.options.contentTarget).addClass("active");
+            this.fixHeight();
         },
 
         getSettings: function() {
@@ -209,6 +215,11 @@ define([], function () { 'use strict';
             Common.UI.Window.prototype.close.call(this, suppressevent);
         },
 
+        onThemeChanged: function() {
+            Common.UI.Window.prototype.onThemeChanged.call(this);
+            this.fixHeight();
+        },
+
         onAnimateAfter: function() {
 
         }

apps/common/main/lib/view/AutoCorrectDialog.js

@@ -49,7 +49,7 @@ define([
     Common.Views.AutoCorrectDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 375,
-            contentHeight: 345,
+            contentHeight: 355,
             buttons: ['close'],
             toggleGroup: 'autocorrect-dialog-group'
         },

apps/common/main/resources/less/colors-table-white.less

@@ -188,8 +188,8 @@
         --layout-padding-left-panel-rtl: 10px 40px 8px 3px;
         --layout-padding-right-panel: 10px 4px 8px 3px;
         --layout-padding-right-panel-rtl: 10px 3px 8px 4px;
-        --layout-padding-right-panel-content: 0 12px 0 12px;
+        --layout-padding-right-panel-content: 5px 12px 0 12px;
-        --layout-padding-right-panel-content-rtl: 0 12px 0 12px;
+        --layout-padding-right-panel-content-rtl: 5px 12px 0 12px;
         --layout-padding-x-side-panel: 6px;
         --layout-padding-y-side-panel: 4px;
 

apps/common/main/resources/less/colors-table.less

@@ -237,8 +237,8 @@
     --shadow-toolbar: 0px 1px 0 0 var(--border-toolbar);
     --shadow-side-panel: none;
     --layout-padding-toolbar: 0;
-    --layout-padding-right-panel-content: 0 10px 0 15px;
+    --layout-padding-right-panel-content: 7px 10px 0 15px;
-    --layout-padding-right-panel-content-rtl: 0 15px 0 10px;
+    --layout-padding-right-panel-content-rtl: 7px 15px 0 10px;
     --layout-padding-right-panel: 0;
     --layout-padding-right-panel-rtl: 0;
     --layout-padding-left-panel: 0 0 0 40px;

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

@@ -363,7 +363,6 @@ label {
 .settings-panel {
     display: none;
     overflow: visible;
-    margin-top: 7px;
 
     & > table {
         width: 100%;

apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template

@@ -168,7 +168,7 @@
         <div class="padding-very-small">
             <label class="header"><%= scope.textOpenType %></label>
         </div>
-        <div class="padding-large">
+        <div class="padding-small">
             <label class="input-label vertical-align-baseline"><%= scope.textLigatures %></label>
             <div id="paragraphadv-cmb-ligatures" class="margin-left-5 vertical-align-baseline" style="display: inline-block;"></div>
         </div>

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

@@ -79,8 +79,8 @@ define([
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
-                                        '<td class="padding-large">',
+                                        '<td class="padding-large" style="display: flex;">',
-                                            '<div id="bookmarks-txt-name" class="margin-right-10" style="display:inline-block;vertical-align: top;"></div>',
+                                            '<div id="bookmarks-txt-name" class="margin-right-10" style="display:inline-block;vertical-align: top;flex-grow:1;"></div>',
                                             '<div id="bookmarks-btn-add" style="display: inline-block; position: relative;"></div>',
                                             '<div id="bookmarks-btn-add-copy-dropdown" class="form-control-size" style="display: inline-block; position: relative; vertical-align: top; width: 0px">',
                                                 //Invisible button, needed for boostrap dropdown logic to work    
@@ -136,7 +136,6 @@ define([
                 allowBlank  : true,
                 validateOnChange: true,
                 validateOnBlur: true,
-                style       : this.appOptions.canMakeActionLink ? 'width: 202px;' : 'width: 215px;',
                 value       : '',
                 maxLength: 40,
                 validation  : function(value) {

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

@@ -48,8 +48,7 @@ define([
     DE.Views.ListSettingsDialog = Common.UI.Window.extend(_.extend({
         options: {
             type: 0, // 0 - markers, 1 - numbers, 2 - multilevel
-            width: 300,
+            width: 320,
-            height: 460,
             style: 'min-width: 240px;',
             cls: 'modal-dlg',
             split: false,
@@ -62,8 +61,7 @@ define([
             this.rightPanelWidth = 210;
             _.extend(this.options, {
                 title: this.txtTitle,
-                height: (this.type===2) ? 451 : (this.type===1 ? 470 : 424),
+                width: (this.type===2) ? 415 + (this.extended ? this.rightPanelWidth : 0) : 320
-                width: (this.type===2) ? 415 + (this.extended ? this.rightPanelWidth : 0) : 300
         }, options || {});
 
             this.template = [
@@ -124,7 +122,7 @@ define([
                         '<tr>',
                             '<td colspan="2">',
                                 '<label class="input-label" style="display: block;">' + this.txtSize + '</label>',
-                                '<div id="id-dlg-bullet-size" class="input-group-nr" style="width: 129px;display: inline-block;margin-bottom: 10px;vertical-align: middle;"></div>',
+                                '<div id="id-dlg-bullet-size" class="input-group-nr" style="width: 139px;display: inline-block;margin-bottom: 10px;vertical-align: middle;"></div>',
                                 '<div id="id-dlg-numbering-bold" class="margin-left-4" style="display: inline-block;margin-bottom: 10px;vertical-align: middle;"></div>',
                                 '<div id="id-dlg-numbering-italic" class="margin-left-4" style="display: inline-block;margin-bottom: 10px;vertical-align: middle;"></div>',
                                 '<div id="id-dlg-bullet-color" class="margin-left-4" style="display: inline-block;margin-bottom: 10px;vertical-align: middle;"></div>',
@@ -364,7 +362,7 @@ define([
             this.cmbFormat = new Common.UI.ComboBoxCustom({
                 el          : $window.find('#id-dlg-numbering-format'),
                 menuStyle   : 'min-width: 100%;max-height: 220px;',
-                style       : this.type===2 ? "width: 100%;" : "width: 129px;",
+                style       : this.type===2 ? "width: 100%;" : "width: 139px;",
                 editable    : false,
                 template    : _.template(template.join('')),
                 itemsTemplate: _.template(itemsTemplate.join('')),

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

@@ -46,7 +46,7 @@ define([
     DE.Views.ParagraphSettingsAdvanced = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 370,
-            contentHeight: 330,
+            contentHeight: 340,
             toggleGroup: 'paragraph-adv-settings-group',
             storageName: 'de-para-settings-adv-category'
         },