From bbcbfc32ced8ee2887b05adaf1616cdacbcf316d Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Wed, 25 Oct 2023 22:38:52 +0300
Subject: [PATCH] Refactoring AdvancedSettingsWindow templates

---
 apps/common/forms/lib/view/modals.js          | 22 +++++---------
 .../main/lib/view/AdvancedSettingsWindow.js   | 14 ++++++---
 .../common/main/lib/view/AutoCorrectDialog.js | 18 ++----------
 apps/common/main/lib/view/ExternalEditor.js   |  2 +-
 apps/common/main/lib/view/OpenDialog.js       |  4 +--
 .../app/template/WatermarkSettings.template   |  6 +++-
 .../main/app/view/BookmarksDialog.js          | 20 +++++--------
 .../main/app/view/CaptionDialog.js            | 14 ++++-----
 .../main/app/view/FileMenuPanels.js           |  2 +-
 .../main/app/view/MailMergeEmailDlg.js        |  8 ++---
 .../main/app/view/NoteSettingsDialog.js       | 29 +++++++++----------
 .../main/app/view/RolesManagerDlg.js          | 13 ++-------
 .../main/app/view/SaveFormDlg.js              | 21 ++++++--------
 .../main/app/view/TableOfContentsSettings.js  | 19 +++++-------
 .../main/app/view/TextToTableDialog.js        | 17 +++++------
 .../main/app/view/WatermarkSettingsDialog.js  | 16 ++--------
 .../pdfeditor/main/app/view/FileMenuPanels.js |  2 +-
 .../app/template/HeaderFooterDialog.template  |  2 +-
 .../main/app/view/FileMenuPanels.js           |  2 +-
 .../main/app/view/HeaderFooterDialog.js       | 18 ++++++------
 .../main/resources/less/rightmenu.less        |  3 --
 .../main/app/view/ChartDataDialog.js          | 15 ++++------
 .../main/app/view/ChartTypeDialog.js          | 17 +++++------
 .../main/app/view/CreatePivotDialog.js        | 15 +++++-----
 .../main/app/view/CreateSparklineDialog.js    | 17 +++++------
 .../main/app/view/ExternalLinksDlg.js         | 20 +++++--------
 .../main/app/view/FileMenuPanels.js           |  2 +-
 .../main/app/view/FormatRulesEditDlg.js       |  8 ++---
 .../main/app/view/FormatRulesManagerDlg.js    |  8 ++---
 .../main/app/view/FormatSettingsDialog.js     | 13 ++++-----
 .../main/app/view/FormulaDialog.js            | 11 ++++---
 .../main/app/view/FormulaWizard.js            | 19 +++++-------
 .../main/app/view/ImportFromXmlDialog.js      | 17 +++++------
 .../main/app/view/MacroDialog.js              | 15 +++++-----
 .../main/app/view/NameManagerDlg.js           | 13 +++------
 .../main/app/view/NamedRangeEditDlg.js        | 15 ++++------
 .../main/app/view/NamedRangePasteDlg.js       | 15 +++++-----
 .../main/app/view/ProtectRangesDlg.js         | 15 ++--------
 .../app/view/ProtectedRangesManagerDlg.js     | 13 +++------
 .../main/app/view/SortDialog.js               |  8 ++---
 .../main/app/view/SortOptionsDialog.js        | 16 +++++-----
 .../main/app/view/SpecialPasteDialog.js       | 17 +++++------
 .../main/app/view/ValueFieldSettingsDialog.js | 17 +++++------
 .../main/app/view/ViewManagerDlg.js           | 23 ++++++---------
 .../main/app/view/WatchDialog.js              | 13 +++------
 .../main/resources/less/rightmenu.less        |  3 --
 46 files changed, 242 insertions(+), 355 deletions(-)

diff --git a/apps/common/forms/lib/view/modals.js b/apps/common/forms/lib/view/modals.js
index a759044154..9c34a0d098 100644
--- a/apps/common/forms/lib/view/modals.js
+++ b/apps/common/forms/lib/view/modals.js
@@ -44,13 +44,13 @@ define([
             width: 300,
             header: true,
             style: 'min-width: 300px;',
-            cls: 'modal-dlg',
-            buttons: null
+            cls: 'modal-dlg'
         },
 
         initialize : function(options) {
             _.extend(this.options, {
-                title: this.textTitle
+                title: this.textTitle,
+                buttons: [{value: 'ok', caption: this.txtCopy}]
             }, options || {});
 
             this.template = [
@@ -73,10 +73,7 @@ define([
                     '</tr>',
                 '</table>',
                 '</div>',
-                '<div class="separator horizontal"></div>',
-                '<div class="footer center">',
-                    '<button class="btn normal primary dlg-btn" style="min-width: 86px;width: auto;">' + this.txtCopy + '</button>',
-                '</div>'
+                '<div class="separator horizontal"></div>'
             ].join('');
 
             this.options.tpl = _.template(this.template)(this.options);
@@ -160,13 +157,13 @@ define([
             width: 300,
             header: true,
             style: 'min-width: 300px;',
-            cls: 'modal-dlg',
-            buttons: null
+            cls: 'modal-dlg'
         },
 
         initialize : function(options) {
             _.extend(this.options, {
-                title: this.textTitle
+                title: this.textTitle,
+                buttons: [{value: 'ok', caption: this.txtCopy}]
             }, options || {});
 
             this.template = [
@@ -189,10 +186,7 @@ define([
                     '</tr>',
                 '</table>',
                 '</div>',
-                '<div class="separator horizontal"></div>',
-                '<div class="footer center">',
-                '<button class="btn normal primary dlg-btn" style="min-width: 86px;width: auto;">' + this.txtCopy + '</button>',
-                '</div>'
+                '<div class="separator horizontal"></div>'
             ].join('');
 
             this.options.tpl = _.template(this.template)(this.options);
diff --git a/apps/common/main/lib/view/AdvancedSettingsWindow.js b/apps/common/main/lib/view/AdvancedSettingsWindow.js
index 34ebd30b67..3264046cc7 100644
--- a/apps/common/main/lib/view/AdvancedSettingsWindow.js
+++ b/apps/common/main/lib/view/AdvancedSettingsWindow.js
@@ -49,22 +49,28 @@ define([
                 header: true,
                 cls: 'advanced-settings-dlg',
                 toggleGroup: 'advanced-settings-group',
-                contentTemplate: '',
+                contentTemplate: '', // use instead 'template' for internal layout
+                contentStyle: '',
                 items: [],
-                buttons: ['ok', 'cancel']
+                buttons: ['ok', 'cancel'],
+                separator: true
             }, options);
 
             this.template = options.template || [
                 '<div class="box">',
+                    '<% if (items.length>0) { %>',
                     '<div class="menu-panel">',
                     '<% _.each(items, function(item) { %>',
                         '<button class="btn btn-category" content-target="<%= item.panelId %>"><span class=""><%= item.panelCaption %></span></button>',
                     '<% }); %>',
                     '</div>',
                     '<div class="separator"></div>',
-                    '<div class="content-panel" >' + _options.contentTemplate + '</div>',
+                    '<% } %>',
+                    '<div class="content-panel" style="<%= contentStyle %>">' + _options.contentTemplate + '</div>',
                 '</div>',
-                '<div class="separator horizontal"></div>'
+                '<% if (separator) { %>',
+                '<div class="separator horizontal"></div>',
+                '<% } %>'
             ].join('');
 
             _options.tpl = _.template(this.template)(_options);
diff --git a/apps/common/main/lib/view/AutoCorrectDialog.js b/apps/common/main/lib/view/AutoCorrectDialog.js
index c707a4a193..d069a49b3b 100644
--- a/apps/common/main/lib/view/AutoCorrectDialog.js
+++ b/apps/common/main/lib/view/AutoCorrectDialog.js
@@ -53,7 +53,7 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
         options: {
             contentWidth: 375,
             contentHeight: 345,
-            buttons: null,
+            buttons: ['close'],
             toggleGroup: 'autocorrect-dialog-group'
         },
 
@@ -77,21 +77,7 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
                 title: this.textTitle,
                 storageName: this.appPrefix + 'autocorrect-dialog-category',
                 items: items,
-                template: [
-                    '<div class="box">',
-                        '<div class="menu-panel" style="overflow: hidden;">',
-                            '<% _.each(items, function(item) { %>',
-                            '<button class="btn btn-category" content-target="<%= item.panelId %>"><span class=""><%= item.panelCaption %></span></button>',
-                            '<% }); %>',
-                        '</div>',
-                        '<div class="separator"></div>',
-                        '<div class="content-panel">' + _.template(contentTemplate)({scope: this}) + '</div>',
-                    '</div>',
-                    '<div class="separator horizontal"></div>',
-                    '<div class="footer center">',
-                        '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.closeButtonText + '</button>',
-                    '</div>'
-                ].join('')
+                contentTemplate: _.template(contentTemplate)({scope: this})
             }, options || {});
 
             this.api = this.options.api;
diff --git a/apps/common/main/lib/view/ExternalEditor.js b/apps/common/main/lib/view/ExternalEditor.js
index b1a1d3ffeb..e28bb3e705 100644
--- a/apps/common/main/lib/view/ExternalEditor.js
+++ b/apps/common/main/lib/view/ExternalEditor.js
@@ -72,7 +72,7 @@ define([
                 '</div>',
                 '<div class="separator horizontal"></div>',
                 '<div class="footer" style="text-align: center;">',
-                    '<button id="id-btn-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
+                    '<button id="id-btn-editor-apply" class="btn normal dlg-btn primary auto" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
                     '<button id="id-btn-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
                 '</div>'
             ].join('');
diff --git a/apps/common/main/lib/view/OpenDialog.js b/apps/common/main/lib/view/OpenDialog.js
index cf9984a904..63eced4317 100644
--- a/apps/common/main/lib/view/OpenDialog.js
+++ b/apps/common/main/lib/view/OpenDialog.js
@@ -138,10 +138,10 @@ define([
                 '<div class="footer center">',
                     '<button class="btn normal dlg-btn primary" result="ok">' + t.okButtonText + '</button>',
                     '<% if (closeFile) { %>',
-                    '<button class="btn normal dlg-btn custom margin-left-10" result="cancel">' + t.closeButtonText + '</button>',
+                    '<button class="btn normal dlg-btn auto margin-left-10" result="cancel">' + t.closeButtonText + '</button>',
                     '<% } %>',
                     '<% if (closable) { %>',
-                    '<button class="btn normal dlg-btn custom margin-left-10" result="cancel">' + t.cancelButtonText + '</button>',
+                    '<button class="btn normal dlg-btn auto margin-left-10" result="cancel">' + t.cancelButtonText + '</button>',
                     '<% } %>',
                 '</div>'
             ].join('');
diff --git a/apps/documenteditor/main/app/template/WatermarkSettings.template b/apps/documenteditor/main/app/template/WatermarkSettings.template
index 69c66d3cf0..e6ef3eed66 100644
--- a/apps/documenteditor/main/app/template/WatermarkSettings.template
+++ b/apps/documenteditor/main/app/template/WatermarkSettings.template
@@ -1,4 +1,6 @@
-<table cols="1">
+<div class="settings-panel active">
+<div class="inner-content">
+<table cols="1" style="width: 100%;">
     <tr><td class="padding-small">
         <div id="watermark-radio-none"></div>
     </td></tr>
@@ -65,3 +67,5 @@
             </table>
     </td></tr>
 </table>
+</div>
+</div>
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/view/BookmarksDialog.js b/apps/documenteditor/main/app/view/BookmarksDialog.js
index 0451afc67e..61365292b1 100644
--- a/apps/documenteditor/main/app/view/BookmarksDialog.js
+++ b/apps/documenteditor/main/app/view/BookmarksDialog.js
@@ -50,7 +50,8 @@ define([
     DE.Views.BookmarksDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 320,
-            buttons: null,
+            buttons: ['close'],
+            separator: false,
             id: 'window-bookmarks'
         },
 
@@ -59,10 +60,10 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0 5px;"><div class="inner-content">',
-                            '<div class="settings-panel active">',
+                contentStyle: 'padding: 0 5px;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                                 '<table cols="1" style="width: 100%;">',
                                     '<tr>',
                                         '<td class="padding-extra-small">',
@@ -106,13 +107,8 @@ define([
                                         '</td>',
                                     '</tr>',
                                 '</table>',
-                            '</div></div>',
-                        '</div>',
-                    '</div>',
-                    '<div class="footer center">',
-                    '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + me.textClose + '</button>',
-                    '</div>'
-                ].join('')
+                            '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/documenteditor/main/app/view/CaptionDialog.js b/apps/documenteditor/main/app/view/CaptionDialog.js
index 276ed1b3b8..ac0074546b 100644
--- a/apps/documenteditor/main/app/view/CaptionDialog.js
+++ b/apps/documenteditor/main/app/view/CaptionDialog.js
@@ -48,6 +48,7 @@ define([
     DE.Views.CaptionDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 351,
+            separator: false,
             id: 'window-caption'
         },
 
@@ -56,10 +57,10 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0 5px;"><div class="inner-content">',
-                            '<div class="settings-panel active">',
+                contentStyle: 'padding: 0 5px;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                                 '<table cols="4" style="width: auto;">',
                                     '<tr>',
                                         '<td colspan="3" class="padding-small">',
@@ -120,9 +121,8 @@ define([
                                     '</tr>',
                                 '</table>',
                             '</div>',
-                        '</div></div>',
-                    '</div>'
-                ].join('')
+                        '</div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.objectType = options.objectType;
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index d78d37ccb4..80a7e5b0fd 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -1960,7 +1960,7 @@ define([
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom margin-right-10">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary auto margin-right-10">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
diff --git a/apps/documenteditor/main/app/view/MailMergeEmailDlg.js b/apps/documenteditor/main/app/view/MailMergeEmailDlg.js
index 4d8be5cfa2..c108af2480 100644
--- a/apps/documenteditor/main/app/view/MailMergeEmailDlg.js
+++ b/apps/documenteditor/main/app/view/MailMergeEmailDlg.js
@@ -51,12 +51,8 @@ define([    'text!documenteditor/main/app/template/MailMergeEmailDlg.template',
         initialize : function(options) {
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                    '<div class="content-panel" style="padding: 0;">' + _.template(contentTemplate)({scope: this}) + '</div>',
-                    '</div>',
-                    '<div class="separator horizontal"></div>'
-                ].join('')
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template(contentTemplate)({scope: this})
             }, options);
             Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
         },
diff --git a/apps/documenteditor/main/app/view/NoteSettingsDialog.js b/apps/documenteditor/main/app/view/NoteSettingsDialog.js
index 23a7ce466b..49116dea26 100644
--- a/apps/documenteditor/main/app/view/NoteSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/NoteSettingsDialog.js
@@ -47,9 +47,9 @@ define([
 
     DE.Views.NoteSettingsDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
-            contentWidth: 300,
+            contentWidth: 310,
             id: 'window-note-settings',
-            buttons: null
+            separator: false
         },
 
         initialize : function(options) {
@@ -57,10 +57,16 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0 5px;"><div class="inner-content">',
-                            '<div class="settings-panel active">',
+                buttons: [
+                    {value: 'insert', caption: this.textInsert},
+                    {value: 'apply', caption: this.textApply, id: 'note-settings-btn-apply'},
+                    'cancel'
+                ],
+                primary: 'insert',
+                contentStyle: 'padding: 0 5px;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                                 '<table cols="1" style="width: 100%;">',
                                     '<tr>',
                                         '<td class="padding-small">',
@@ -114,15 +120,8 @@ define([
                                         '</td>',
                                     '</tr>',
                                 '</table>',
-                            '</div></div>',
-                        '</div>',
-                    '</div>',
-                    '<div class="footer center">',
-                    '<button class="btn normal dlg-btn primary" result="insert" style="width: 86px;">' + me.textInsert + '</button>',
-                    '<button id="note-settings-btn-apply" class="btn normal dlg-btn" result="apply" style="width: 86px;">' + me.textApply + '</button>',
-                    '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + me.cancelButtonText + '</button>',
-                    '</div>'
-                ].join('')
+                            '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/documenteditor/main/app/view/RolesManagerDlg.js b/apps/documenteditor/main/app/view/RolesManagerDlg.js
index c6fd3b0f6e..a0e0acbebc 100644
--- a/apps/documenteditor/main/app/view/RolesManagerDlg.js
+++ b/apps/documenteditor/main/app/view/RolesManagerDlg.js
@@ -52,22 +52,15 @@ define([  'text!documenteditor/main/app/template/RolesManagerDlg.template',
         options: {
             alias: 'RolesManagerDlg',
             contentWidth: 500,
-            buttons: null
+            buttons: ['close']
         },
 
         initialize: function (options) {
             var me = this;
             _.extend(this.options, {
                 title: this.txtTitle,
-                template: [
-                    '<div class="box">',
-                    '<div class="content-panel" style="padding: 0;">' + _.template(contentTemplate)({scope: this}) + '</div>',
-                    '</div>',
-                    '<div class="separator horizontal"></div>',
-                    '<div class="footer center">',
-                    '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.closeButtonText + '</button>',
-                    '</div>'
-                ].join('')
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template(contentTemplate)({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/documenteditor/main/app/view/SaveFormDlg.js b/apps/documenteditor/main/app/view/SaveFormDlg.js
index e3ff378a61..c43f004686 100644
--- a/apps/documenteditor/main/app/view/SaveFormDlg.js
+++ b/apps/documenteditor/main/app/view/SaveFormDlg.js
@@ -51,16 +51,19 @@ define([  'common/main/lib/view/AdvancedSettingsWindow',
         options: {
             alias: 'SaveFormDlg',
             contentWidth: 320,
-            buttons: null
+            separator: false
         },
 
         initialize: function (options) {
             var me = this;
             _.extend(this.options, {
                 title: this.txtTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0;">',
+                buttons: [
+                    {value: 'ok', caption: this.saveButtonText},
+                    'cancel'
+                ],
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template([
                             '<div class="settings-panel active">',
                                 '<div class="inner-content">',
                                     '<table style="width: 100%;">',
@@ -81,14 +84,8 @@ define([  'common/main/lib/view/AdvancedSettingsWindow',
                                         '</tr>',
                                     '</table>',
                                 '</div>',
-                            '</div>',
-                        '</div>',
-                    '</div>',
-                    '<div class="footer center">',
-                        '<button class="btn normal dlg-btn primary" result="ok" style="width: 86px;">' + this.saveButtonText + '</button>',
-                        '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.cancelButtonText + '</button>',
-                    '</div>'
-                ].join('')
+                            '</div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.handler    = options.handler;
diff --git a/apps/documenteditor/main/app/view/TableOfContentsSettings.js b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
index 82281822d6..4daa2ad97c 100644
--- a/apps/documenteditor/main/app/view/TableOfContentsSettings.js
+++ b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
@@ -59,10 +59,10 @@ define([
             _.extend(this.options, {
                 title: options.type ? this.textTitleTOF : this.textTitle,
                 contentHeight: height,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 15px 10px;"><div class="inner-content">',
-                            '<div class="settings-panel active">',
+                contentStyle: 'padding: 15px 10px;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                                 '<table cols="2" style="width: 100%;">',
                                     '<tr>',
                                         '<td class="padding-small">',
@@ -92,7 +92,7 @@ define([
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-small">',
-                                        '<% if (type == 1) { %>',
+                                        '<% if (scope.type == 1) { %>',
                                             '<label class="input-label padding-small" style="display: block;">' + me.textBuildTableOF + '</label>',
                                             '<div id="tableofcontents-radio-caption" class="padding-small" style="display: block;"></div>',
                                             '<div id="tableofcontents-radio-style" class="" style="display: block;"></div>',
@@ -105,7 +105,7 @@ define([
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-small" style="vertical-align: top;">',
-                                        '<% if (type == 1) { %>',
+                                        '<% if (scope.type == 1) { %>',
                                             '<div id="tableofcontents-tof-from-caption" style="width:220px;">',
                                                 '<div id="tableofcontents-combo-captions" style="display: inline-block; width:129px; margin-bottom: 10px;"></div>',
                                             '</div>',
@@ -135,11 +135,8 @@ define([
                                         '</td>',
                                     '</tr>',
                                 '</table>',
-                            '</div></div>',
-                        '</div>',
-                    '</div>',
-                    '<div class="separator horizontal"></div>'
-                ].join('')
+                            '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/documenteditor/main/app/view/TextToTableDialog.js b/apps/documenteditor/main/app/view/TextToTableDialog.js
index 874b394b24..3108456c78 100644
--- a/apps/documenteditor/main/app/view/TextToTableDialog.js
+++ b/apps/documenteditor/main/app/view/TextToTableDialog.js
@@ -45,7 +45,8 @@ define([
 
     DE.Views.TextToTableDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
-            contentWidth: 300
+            contentWidth: 300,
+            separator: false
         },
 
         initialize : function(options) {
@@ -53,10 +54,10 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0 5px;"><div class="inner-content">',
-                        '<div class="settings-panel active">',
+                contentStyle: 'padding: 0 5px;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                             '<table cols="2" style="width: auto;">',
                                 '<tr>',
                                     '<td colspan="2" class="padding-small">',
@@ -129,10 +130,8 @@ define([
                                     '</td>',
                                 '</tr>',
                             '</table>',
-                        '</div></div>',
-                        '</div>',
-                    '</div>'
-                ].join('')
+                        '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.handler    = options.handler;
diff --git a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
index 7684f116c5..76a2a9d0bc 100644
--- a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
@@ -76,6 +76,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
     DE.Views.WatermarkSettingsDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 400,
+            separator: false,
             id: 'window-watermark'
         },
 
@@ -84,19 +85,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: _.template(
-                    [
-                        '<div class="box">',
-                        '<div class="content-panel" style="padding: 10px 5px;"><div class="inner-content">',
-                        '<div class="settings-panel active">',
-                        template,
-                        '</div></div>',
-                        '</div>',
-                        '</div>'
-                    ].join('')
-                )({
-                    scope: this
-                })
+                contentStyle: 'padding: 10px 5px;',
+                contentTemplate: _.template(template)({scope: this})
             }, options);
 
             this.handler    = options.handler;
diff --git a/apps/pdfeditor/main/app/view/FileMenuPanels.js b/apps/pdfeditor/main/app/view/FileMenuPanels.js
index ccda511d4a..c0bebee85a 100644
--- a/apps/pdfeditor/main/app/view/FileMenuPanels.js
+++ b/apps/pdfeditor/main/app/view/FileMenuPanels.js
@@ -1655,7 +1655,7 @@ define([
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom margin-right-10">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary auto margin-right-10">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
diff --git a/apps/presentationeditor/main/app/template/HeaderFooterDialog.template b/apps/presentationeditor/main/app/template/HeaderFooterDialog.template
index a1012d5858..cb73e1355f 100644
--- a/apps/presentationeditor/main/app/template/HeaderFooterDialog.template
+++ b/apps/presentationeditor/main/app/template/HeaderFooterDialog.template
@@ -1,4 +1,4 @@
-<table cols="1">
+<table cols="1" style="width: 100%;">
     <tr><td class="padding-small">
         <div class="input-row-tabs">
             <button type="button" class="btn btn-text-default auto" id="hf-dlg-btn-slide"><%= scope.textSlide %></button><button type="button" class="btn btn-text-default auto" id="hf-dlg-btn-notes"><%= scope.textNotes %></button>
diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index d0718bef23..3d63718226 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -1443,7 +1443,7 @@ define([
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary auto">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
diff --git a/apps/presentationeditor/main/app/view/HeaderFooterDialog.js b/apps/presentationeditor/main/app/view/HeaderFooterDialog.js
index 40ce514ae9..77de6dad55 100644
--- a/apps/presentationeditor/main/app/view/HeaderFooterDialog.js
+++ b/apps/presentationeditor/main/app/view/HeaderFooterDialog.js
@@ -48,7 +48,6 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
         options: {
             contentWidth: 360,
             contentHeight: 330,
-            buttons: null,
             id: 'window-header-footer'
         },
 
@@ -57,11 +56,17 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
 
             _.extend(this.options, {
                 title: this.textHFTitle,
+                buttons: [
+                    {value: 'all', caption: this.applyAllText},
+                    {value: 'ok', caption: this.applyText, id: 'hf-dlg-btn-apply'},
+                    'cancel'
+                ],
+                primary: 'all',
                 template: _.template(
                     [
                         '<div class="box">',
-                            '<div class="content-panel" style="padding: 10px 5px;"><div class="inner-content">',
-                                '<div class="settings-panel active">',
+                            '<div class="content-panel" style="padding: 10px 5px;">',
+                                '<div class="settings-panel active"><div class="inner-content">',
                                 template,
                                 '</div></div>',
                             '</div>',
@@ -76,12 +81,7 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
                                 '</div>',
                             '</div>',
                         '</div>',
-                        '<div class="separator horizontal"></div>',
-                        '<div class="footer center">',
-                            '<button class="btn normal dlg-btn primary" result="all" style="width: auto; min-width: 86px;">' + me.applyAllText + '</button>',
-                            '<button id="hf-dlg-btn-apply"  class="btn normal dlg-btn" result="ok" style="width: auto; min-width: 86px;">' + me.applyText + '</button>',
-                            '<button class="btn normal dlg-btn" result="cancel">' + me.cancelButtonText + '</button>',
-                        '</div>'
+                        '<div class="separator horizontal"></div>'
                     ].join('')
                 )({
                     scope: this
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index fd60a2476d..050b94e989 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -1,7 +1,4 @@
 
-.settings-panel {
-}
-
 .right-panel .settings-panel {
     label.input-label{
         vertical-align: baseline;
diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js
index 784ec2b9f5..ee5dcd1599 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js
@@ -57,10 +57,10 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                    '<div class="content-panel" style="padding: 0 10px;"><div class="inner-content">',
-                        '<div class="settings-panel active">',
+                contentStyle: 'padding: 0 10px;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                             '<table cols="1" style="width: 100%;">',
                                 '<tr>',
                                     '<td>',
@@ -106,11 +106,8 @@ define([
                                     '</td>',
                                 '</tr>',
                             '</table>',
-                        '</div></div>',
-                    '</div>',
-                    '</div>',
-                    '<div class="separator horizontal"></div>'
-                ].join('')
+                        '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.handler    = options.handler;
diff --git a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
index e52fe6ed18..02359e91e1 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
@@ -69,7 +69,8 @@ define([
     SSE.Views.ChartTypeDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 370,
-            contentHeight: 300
+            contentHeight: 300,
+            separator: false
         },
 
         initialize : function(options) {
@@ -77,10 +78,10 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                    '<div class="content-panel" style="padding: 0 10px;"><div class="inner-content">',
-                        '<div class="settings-panel active">',
+                contentStyle: 'padding: 0 10px;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                             '<table cols="1" style="width: 100%;">',
                                 '<tr>',
                                     '<td class="padding-large">',
@@ -100,10 +101,8 @@ define([
                                     '</td>',
                                 '</tr>',
                             '</table>',
-                        '</div></div>',
-                    '</div>',
-                    '</div>'
-                ].join('')
+                        '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.handler    = options.handler;
diff --git a/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js b/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
index 6126f40b4a..77b1623c25 100644
--- a/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
@@ -47,6 +47,7 @@ define([
     SSE.Views.CreatePivotDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 310,
+            separator: false,
             id: 'window-create-pivot'
         },
 
@@ -55,10 +56,10 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0 10px;"><div class="inner-content">',
-                            '<div class="settings-panel active">',
+                contentStyle: 'padding: 0 10px;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                                 '<table cols="1" style="width: 100%;">',
                                     '<tr>',
                                         '<td style="padding-bottom: 2px;">',
@@ -91,10 +92,8 @@ define([
                                         '</td>',
                                     '</tr>',
                                 '</table>',
-                            '</div></div>',
-                        '</div>',
-                    '</div>'
-                ].join('')
+                            '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/CreateSparklineDialog.js b/apps/spreadsheeteditor/main/app/view/CreateSparklineDialog.js
index c573b152b0..0e8c2e50be 100644
--- a/apps/spreadsheeteditor/main/app/view/CreateSparklineDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/CreateSparklineDialog.js
@@ -45,7 +45,8 @@ define([
 
     SSE.Views.CreateSparklineDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
-            contentWidth: 310
+            contentWidth: 310,
+            separator: false
         },
 
         initialize : function(options) {
@@ -53,10 +54,10 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0 10px;"><div class="inner-content">',
-                            '<div class="settings-panel active">',
+                contentStyle: 'padding: 0 10px;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                                 '<table cols="1" style="width: 100%;">',
                                     '<tr>',
                                         '<td style="padding-bottom: 2px;">',
@@ -79,10 +80,8 @@ define([
                                         '</td>',
                                     '</tr>',
                                 '</table>',
-                            '</div></div>',
-                        '</div>',
-                    '</div>'
-                ].join('')
+                            '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js b/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
index 75faef28e9..2ff0c37aae 100644
--- a/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
@@ -51,17 +51,18 @@ define([
         options: {
             alias: 'ExternalLinksDlg',
             contentWidth: 500,
-            buttons: null
+            separator: false,
+            buttons: ['close']
         },
 
         initialize: function (options) {
             var me = this;
             _.extend(this.options, {
                 title: this.txtTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0;"><div class="inner-content">',
-                            '<div class="settings-panel active">',
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template([
+                        '<div class="settings-panel active">',
+                            '<div class="inner-content">',
                                 '<table cols="1" style="width: 100%;">',
                                     '<tr>',
                                         '<td class="padding-large">',
@@ -77,13 +78,8 @@ define([
                                         '</td>',
                                     '</tr>',
                                 '</table>',
-                            '</div></div>',
-                        '</div>',
-                    '</div>',
-                    '<div class="footer center">',
-                        '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.closeButtonText + '</button>',
-                    '</div>'
-                ].join('')
+                            '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index 6042ea2f36..27a2af9911 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -1835,7 +1835,7 @@ define([
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary auto">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
diff --git a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
index 74088a7ea5..1e4a59ba92 100644
--- a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
@@ -59,12 +59,8 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
             
             _.extend(this.options, {
                 title: this.txtTitleNew,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0;">' + _.template(contentTemplate)({scope: this}) + '</div>',
-                    '</div>',
-                    '<div class="separator horizontal"></div>'
-                ].join('')
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template(contentTemplate)({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js b/apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js
index 06d72a6756..cf3b7af90e 100644
--- a/apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js
@@ -90,6 +90,7 @@ define([  'text!spreadsheeteditor/main/app/template/FormatRulesManagerDlg.templa
     SSE.Views.FormatRulesManagerDlg =  Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             alias: 'FormatRulesManagerDlg',
+            separator: false,
             contentWidth: 560
         },
 
@@ -97,11 +98,8 @@ define([  'text!spreadsheeteditor/main/app/template/FormatRulesManagerDlg.templa
             var me = this;
             _.extend(this.options, {
                 title: this.txtTitle,
-                template: [
-                    '<div class="box">',
-                    '<div class="content-panel" style="padding: 0;">' + _.template(contentTemplate)({scope: this}) + '</div>',
-                    '</div>',
-                ].join('')
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template(contentTemplate)({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js b/apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js
index 725085e273..225cc61189 100644
--- a/apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js
@@ -92,10 +92,10 @@ define([
             _.extend(this.options, {
                 title: this.textTitle,
                 contentHeight: height,
-                template: [
-                    '<div class="box">',
-                    '<div class="content-panel" style="padding: 0 10px;"><div class="inner-content">',
+                contentStyle: 'padding: 0 10px;',
+                contentTemplate: _.template([
                     '<div class="settings-panel active">',
+                    '<div class="inner-content">',
                     '<table cols="1" style="width: 100%;">',
                         '<tr>',
                             '<td style="width:170px;padding-bottom: 3px;">',
@@ -155,11 +155,8 @@ define([
                             '</td>',
                         '</tr>',
                     '</table>',
-                    '</div></div>',
-                    '</div>',
-                    '</div>',
-                    '<div class="separator horizontal"></div>'
-                ].join('')
+                    '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
diff --git a/apps/spreadsheeteditor/main/app/view/FormulaDialog.js b/apps/spreadsheeteditor/main/app/view/FormulaDialog.js
index 4a07704abc..9650b924a4 100644
--- a/apps/spreadsheeteditor/main/app/view/FormulaDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/FormulaDialog.js
@@ -61,7 +61,10 @@ define([
                 contentTemplate : '',
                 title           : t.txtTitle,
                 items           : [],
-                buttons: null
+                buttons: [
+                    {value: 'ok', caption: this.okButtonText, primary: true, id: 'formula-dlg-btn-ok'},
+                    'cancel'
+                ],
             }, options);
 
             this.template   =   options.template || [
@@ -76,11 +79,7 @@ define([
                         '<label id="formula-dlg-desc" style="margin-top: 4px; display: block;">' + '</label>',
                     '</div>',
                 '</div>',
-                '<div class="separator horizontal"></div>',
-                '<div class="footer center">',
-                    '<button id="formula-dlg-btn-ok" class="btn normal dlg-btn primary" result="ok" style="width: 86px;">' + this.okButtonText + '</button>',
-                    '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.cancelButtonText + '</button>',
-                '</div>'
+                '<div class="separator horizontal"></div>'
             ].join('');
 
             this.api            =   options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/FormulaWizard.js b/apps/spreadsheeteditor/main/app/view/FormulaWizard.js
index 87e56436ff..71e5b6eb3b 100644
--- a/apps/spreadsheeteditor/main/app/view/FormulaWizard.js
+++ b/apps/spreadsheeteditor/main/app/view/FormulaWizard.js
@@ -52,11 +52,11 @@ define([
             var me = this;
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0;"><div class="inner-content">',
-                            '<div class="settings-panel active">',
-                                '<table>',
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
+                                '<table style="width: 100%;">',
                                 '<tr><td>',
                                 '<label id="formula-wizard-name" style="display: block;margin-bottom: 8px;"></label>',
                                 '<div id="formula-wizard-panel-args" style="">',
@@ -81,11 +81,8 @@ define([
                                 '</div>',
                                 '</td></tr>',
                                 '</table>',
-                            '</div></div>',
-                        '</div>',
-                    '</div>',
-                    '<div class="separator horizontal"></div>'
-                ].join('')
+                            '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.props = this.options.props;
@@ -122,7 +119,7 @@ define([
             this.lblFormulaResult = $window.find('#formula-wizard-value');
             this.lblFunctionResult = $window.find('#formula-wizard-lbl-val-func');
 
-            this.contentPanel.find('.settings-panel > table').css('height', this.options.contentHeight - 7);
+            this.innerPanel.find('> table').css('height', this.options.contentHeight - 7);
 
             this._preventCloseCellEditor = false;
 
diff --git a/apps/spreadsheeteditor/main/app/view/ImportFromXmlDialog.js b/apps/spreadsheeteditor/main/app/view/ImportFromXmlDialog.js
index 65780d9b7b..38dbca1c84 100644
--- a/apps/spreadsheeteditor/main/app/view/ImportFromXmlDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ImportFromXmlDialog.js
@@ -46,7 +46,8 @@ define([
 
     SSE.Views.ImportFromXmlDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
-            contentWidth: 310
+            contentWidth: 310,
+            separator: false
         },
 
         initialize : function(options) {
@@ -54,10 +55,10 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0 10px;"><div class="inner-content">',
-                            '<div class="settings-panel active">',
+                contentStyle: 'padding: 0 10px;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                                 '<table cols="1" style="width: 100%;">',
                                     '<tr>',
                                         '<td class="padding-small">',
@@ -80,10 +81,8 @@ define([
                                         '</td>',
                                     '</tr>',
                                 '</table>',
-                            '</div></div>',
-                        '</div>',
-                    '</div>'
-                ].join('')
+                            '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.api = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/MacroDialog.js b/apps/spreadsheeteditor/main/app/view/MacroDialog.js
index f9001a4b05..792be168b3 100644
--- a/apps/spreadsheeteditor/main/app/view/MacroDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/MacroDialog.js
@@ -47,7 +47,8 @@ define([
 
     SSE.Views.MacroDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
-            contentWidth: 250
+            contentWidth: 250,
+            separator: false
         },
 
         initialize : function(options) {
@@ -55,10 +56,10 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                    '<div class="content-panel" style="padding: 0 5px;"><div class="inner-content">',
+                contentStyle: 'padding: 0 5px;',
+                contentTemplate: _.template([
                     '<div class="settings-panel active">',
+                    '<div class="inner-content">',
                         '<table cols="1" style="width: 100%;">',
                             '<tr>',
                                 '<td class="padding-extra-small">',
@@ -76,10 +77,8 @@ define([
                                 '</td>',
                             '</tr>',
                         '</table>',
-                    '</div></div>',
-                    '</div>',
-                    '</div>'
-                ].join('')
+                    '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.handler    = options.handler;
diff --git a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
index 6356fd5113..62c5dc0a10 100644
--- a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
@@ -52,7 +52,8 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
         options: {
             alias: 'NameManagerDlg',
             contentWidth: 540,
-            buttons: null,
+            buttons: ['close'],
+            separator: false,
             id: 'window-name-manager'
         },
 
@@ -60,14 +61,8 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
             var me = this;
             _.extend(this.options, {
                 title: this.txtTitle,
-                template: [
-                    '<div class="box">',
-                    '<div class="content-panel" style="padding: 0;">' + _.template(contentTemplate)({scope: this}) + '</div>',
-                    '</div>',
-                    '<div class="footer center">',
-                    '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.closeButtonText + '</button>',
-                    '</div>'
-                ].join('')
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template(contentTemplate)({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/NamedRangeEditDlg.js b/apps/spreadsheeteditor/main/app/view/NamedRangeEditDlg.js
index 7d1e24d89b..01599d64a6 100644
--- a/apps/spreadsheeteditor/main/app/view/NamedRangeEditDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/NamedRangeEditDlg.js
@@ -58,10 +58,10 @@ define([
             
             _.extend(this.options, {
                 title: this.txtTitleNew,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0;"><div class="inner-content">',
-                            '<div class="settings-panel active">',
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                                 '<table cols="1" style="width: 100%;">',
                                     '<tr>',
                                         '<td class="padding-small">',
@@ -89,11 +89,8 @@ define([
                                         '</td>',
                                     '</tr>',
                                 '</table>',
-                            '</div></div>',
-                        '</div>',
-                    '</div>',
-                    '<div class="separator horizontal"></div>'
-                ].join('')
+                            '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/NamedRangePasteDlg.js b/apps/spreadsheeteditor/main/app/view/NamedRangePasteDlg.js
index 863d4b6b79..7133754aca 100644
--- a/apps/spreadsheeteditor/main/app/view/NamedRangePasteDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/NamedRangePasteDlg.js
@@ -49,6 +49,7 @@ define([
     SSE.Views.NamedRangePasteDlg =  Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             alias: 'NamedRangePasteDlg',
+            separator: false,
             contentWidth: 250
         },
 
@@ -57,10 +58,10 @@ define([
 
             _.extend(this.options, {
                 title: this.txtTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0;"><div class="inner-content">',
-                            '<div class="settings-panel active">',
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                                 '<table cols="1" style="width: 100%;">',
                                     '<tr>',
                                         '<td>',
@@ -69,10 +70,8 @@ define([
                                         '</td>',
                                     '</tr>',
                                 '</table>',
-                            '</div></div>',
-                        '</div>',
-                    '</div>'
-                ].join('')
+                            '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.handler    = options.handler;
diff --git a/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js b/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
index fbc62b9fda..0521bd6075 100644
--- a/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
@@ -50,6 +50,7 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
         options: {
             alias: 'ProtectRangesDlg',
             contentWidth: 480,
+            separator: false,
             id: 'window-protect-ranges'
         },
 
@@ -57,18 +58,8 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
             var me = this;
             _.extend(this.options, {
                 title: this.txtTitle,
-                template: [
-                    '<div class="box">',
-                    '<div class="content-panel" style="padding: 0;">' + _.template(contentTemplate)({scope: this}) + '</div>',
-                    '</div>',
-                ].join(''),
-                buttons: [
-                // {
-                //     value: 'protect-sheet',
-                //     caption: this.textProtect
-                // },
-                    'ok','cancel']
-                // primary: 'protect-sheet'
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template(contentTemplate)({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js b/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
index a9a3f3b1a5..35ef6548aa 100644
--- a/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
@@ -51,21 +51,16 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.te
         options: {
             alias: 'ProtectedRangesManagerDlg',
             contentWidth: 490,
-            buttons: null
+            separator: false,
+            buttons: ['close']
         },
 
         initialize: function (options) {
             var me = this;
             _.extend(this.options, {
                 title: this.txtTitle,
-                template: [
-                    '<div class="box">',
-                    '<div class="content-panel" style="padding: 0;">' + _.template(contentTemplate)({scope: this}) + '</div>',
-                    '</div>',
-                    '<div class="footer center">',
-                    '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.closeButtonText + '</button>',
-                    '</div>'
-                ].join('')
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template(contentTemplate)({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/SortDialog.js b/apps/spreadsheeteditor/main/app/view/SortDialog.js
index 4afea89969..d8b985126e 100644
--- a/apps/spreadsheeteditor/main/app/view/SortDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/SortDialog.js
@@ -74,6 +74,7 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
         options: {
             alias: 'SortDialog',
             contentWidth: 560,
+            separator: false,
             buttons: ['ok', 'cancel']
         },
 
@@ -81,11 +82,8 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
             var me = this;
             _.extend(this.options, {
                 title: this.txtTitle,
-                template: [
-                    '<div class="box">',
-                    '<div class="content-panel" style="padding: 0;">' + _.template(contentTemplate)({scope: this}) + '</div>',
-                    '</div>'
-                ].join('')
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template(contentTemplate)({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/SortOptionsDialog.js b/apps/spreadsheeteditor/main/app/view/SortOptionsDialog.js
index 06b1660608..0e133ec692 100644
--- a/apps/spreadsheeteditor/main/app/view/SortOptionsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/SortOptionsDialog.js
@@ -46,7 +46,8 @@ define([
 
     SSE.Views.SortOptionsDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
-            contentWidth: 230
+            contentWidth: 230,
+            separator: false
         },
 
         initialize : function(options) {
@@ -54,10 +55,9 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel"><div class="inner-content">',
-                            '<div class="settings-panel active">',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                                 '<table cols="1" style="width: 100%;">',
                                     '<tr>',
                                         '<td class="padding-large">',
@@ -85,10 +85,8 @@ define([
                                         '</td>',
                                     '</tr>',
                                 '</table>',
-                            '</div></div>',
-                        '</div>',
-                    '</div>'
-                ].join('')
+                            '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.props      = options.props;
diff --git a/apps/spreadsheeteditor/main/app/view/SpecialPasteDialog.js b/apps/spreadsheeteditor/main/app/view/SpecialPasteDialog.js
index 13424c5470..79c409d718 100644
--- a/apps/spreadsheeteditor/main/app/view/SpecialPasteDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/SpecialPasteDialog.js
@@ -47,7 +47,8 @@ define([
 
     SSE.Views.SpecialPasteDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
-            contentWidth: 350
+            contentWidth: 350,
+            separator: false
         },
 
         initialize : function(options) {
@@ -55,10 +56,10 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0 5px;"><div class="inner-content">',
-                        '<div class="settings-panel active">',
+                contentStyle: 'padding: 0 5px;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                        '<div class="inner-content">',
                             '<table cols="2" style="width: 100%;">',
                                 '<tr>',
                                     '<td colspan=2 class="padding-small">',
@@ -157,10 +158,8 @@ define([
                                     '</td>',
                                 '</tr>',
                             '</table>',
-                        '</div></div>',
-                        '</div>',
-                    '</div>'
-                ].join('')
+                        '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.handler    = options.handler;
diff --git a/apps/spreadsheeteditor/main/app/view/ValueFieldSettingsDialog.js b/apps/spreadsheeteditor/main/app/view/ValueFieldSettingsDialog.js
index a161b59c17..197ef39a6a 100644
--- a/apps/spreadsheeteditor/main/app/view/ValueFieldSettingsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ValueFieldSettingsDialog.js
@@ -48,7 +48,8 @@ define([
 
     SSE.Views.ValueFieldSettingsDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
-            contentWidth: 284
+            contentWidth: 284,
+            separator: false
         },
 
         initialize : function(options) {
@@ -56,10 +57,10 @@ define([
 
             _.extend(this.options, {
                 title: this.textTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0 10px;"><div class="inner-content">',
-                        '<div class="settings-panel active">',
+                contentStyle: 'padding: 0 10px;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
+                    '<div class="inner-content">',
                         '<table cols="2" style="width: 100%;">',
                         '<tr>',
                             '<td colspan="2" class="padding-small" style="white-space: nowrap;">',
@@ -97,10 +98,8 @@ define([
                             '</td>',
                         '</tr>',
                     '</table>',
-                    '</div></div>',
-                    '</div>',
-                    '</div>'
-                ].join('')
+                    '</div></div>'
+                ].join(''))({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/ViewManagerDlg.js b/apps/spreadsheeteditor/main/app/view/ViewManagerDlg.js
index a193c40209..7da6b0dbf8 100644
--- a/apps/spreadsheeteditor/main/app/view/ViewManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ViewManagerDlg.js
@@ -52,18 +52,20 @@ define([
     SSE.Views.ViewManagerDlg =  Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             alias: 'ViewManagerDlg',
-            contentWidth: 460,
-            buttons: null
+            contentWidth: 460
         },
 
         initialize: function (options) {
             var me = this;
             _.extend(this.options, {
                 title: this.txtTitle,
-                template: [
-                    '<div class="box">',
-                        '<div class="content-panel" style="padding: 0;">',
-                        '<div class="settings-panel active">',
+                buttons: [
+                    {value: 'ok', caption: this.textGoTo, primary: true},
+                    'close'
+                ],
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template([
+                    '<div class="settings-panel active">',
                         '<div class="inner-content">',
                             '<table cols="1" style="width: 100%;">',
                                 '<tr>',
@@ -82,15 +84,8 @@ define([
                                 '</tr>',
                             '</table>',
                         '</div>',
-                        '</div>',
-                        '</div>',
-                    '</div>',
-                    '<div class="separator horizontal"></div>',
-                    '<div class="footer center">',
-                    '<button class="btn normal dlg-btn primary" result="ok" style="min-width: 86px;width: auto;">' + this.textGoTo + '</button>',
-                    '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.closeButtonText + '</button>',
                     '</div>'
-                ].join('')
+                ].join(''))({scope: this})
             }, options);
 
             this.api       = options.api;
diff --git a/apps/spreadsheeteditor/main/app/view/WatchDialog.js b/apps/spreadsheeteditor/main/app/view/WatchDialog.js
index 46f75d4d82..d7f57518c2 100644
--- a/apps/spreadsheeteditor/main/app/view/WatchDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/WatchDialog.js
@@ -52,21 +52,16 @@ define([  'text!spreadsheeteditor/main/app/template/WatchDialog.template',
             alias: 'WatchDialog',
             contentWidth: 560,
             modal: false,
-            buttons: null
+            separator: false,
+            buttons: ['close']
         },
 
         initialize: function (options) {
             var me = this;
             _.extend(this.options, {
                 title: this.txtTitle,
-                template: [
-                    '<div class="box">',
-                    '<div class="content-panel" style="padding: 0;">' + _.template(contentTemplate)({scope: this}) + '</div>',
-                    '</div>',
-                    '<div class="footer center">',
-                    '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.closeButtonText + '</button>',
-                    '</div>'
-                ].join('')
+                contentStyle: 'padding: 0;',
+                contentTemplate: _.template(contentTemplate)({scope: this})
             }, options);
 
             this.api        = options.api;
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index 7623049885..bd437b3b73 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -1,7 +1,4 @@
 
-.settings-panel {
-}
-
 .right-panel .settings-panel {
     label.input-label{
         vertical-align: baseline;