From 99371dd9d497b4d8d1b739073d71143afccd0b04 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Fri, 11 Sep 2020 19:30:28 +0300
Subject: [PATCH] [common] Update bootstrap (dropdown menu, hidden class
 changed to d-none class)

---
 apps/common/main/lib/component/Button.js      |  2 +-
 .../main/lib/component/ComboBorderSize.js     |  4 +-
 apps/common/main/lib/component/Menu.js        | 78 +++++++++----------
 apps/common/main/lib/component/MenuItem.js    |  7 +-
 apps/common/main/lib/component/TreeView.js    |  2 +-
 apps/common/main/lib/component/Window.js      |  4 +-
 apps/common/main/lib/util/Tip.js              | 10 ++-
 apps/common/main/lib/view/About.js            | 26 +++----
 apps/common/main/lib/view/History.js          |  2 +-
 apps/common/main/lib/view/Plugins.js          |  8 +-
 apps/common/main/lib/view/SignDialog.js       |  2 +-
 .../common/main/lib/view/SymbolTableDialog.js |  8 +-
 apps/common/main/resources/less/common.less   |  4 +
 .../main/resources/less/dropdown-submenu.less | 18 ++++-
 .../embed/js/ApplicationController.js         |  2 +-
 .../main/app/controller/Toolbar.js            |  9 ++-
 .../main/app/view/FileMenuPanels.js           | 14 ++--
 .../main/app/view/HyperlinkSettingsDialog.js  |  4 +-
 apps/documenteditor/main/app/view/LeftMenu.js |  2 +-
 apps/documenteditor/main/app/view/Links.js    |  7 +-
 .../main/app/view/ListSettingsDialog.js       |  2 +-
 .../main/app/view/ParagraphSettings.js        |  2 +-
 .../app/view/ParagraphSettingsAdvanced.js     |  2 +-
 .../main/app/view/ShapeSettings.js            |  4 +-
 .../main/app/view/SignatureSettings.js        |  6 +-
 .../main/app/view/TableOfContentsSettings.js  | 10 +--
 .../main/app/view/TableSettings.js            |  3 +-
 apps/documenteditor/main/app/view/Toolbar.js  |  2 +-
 .../main/resources/less/rightmenu.less        |  2 +-
 .../embed/js/ApplicationController.js         |  2 +-
 .../main/app/view/FileMenuPanels.js           | 14 ++--
 .../main/app/view/HyperlinkSettingsDialog.js  |  6 +-
 .../main/app/view/LeftMenu.js                 |  2 +-
 .../main/app/view/ShapeSettings.js            |  4 +-
 .../main/app/view/SignatureSettings.js        |  4 +-
 .../embed/js/ApplicationController.js         |  2 +-
 .../main/app/controller/Spellcheck.js         |  6 +-
 .../main/app/view/ChartSettingsDlg.js         |  2 +-
 .../main/app/view/FileMenuPanels.js           | 14 ++--
 .../main/app/view/FormatSettingsDialog.js     | 10 +--
 .../main/app/view/FormulaWizard.js            | 10 +--
 .../main/app/view/HeaderFooterDialog.js       |  6 +-
 .../main/app/view/HyperlinkSettingsDialog.js  |  8 +-
 .../main/app/view/LeftMenu.js                 |  2 +-
 .../main/app/view/NameManagerDlg.js           |  6 +-
 .../main/app/view/ShapeSettings.js            |  4 +-
 .../main/app/view/SignatureSettings.js        |  6 +-
 47 files changed, 188 insertions(+), 166 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index f8b11c628..7ee79dc93 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -676,7 +676,7 @@ define([
         },
 
         setVisible: function(visible) {
-            if (this.cmpEl) this.cmpEl.toggleClass('hidden', !visible);
+            if (this.cmpEl) this.cmpEl.toggleClass('d-none', !visible);
             this.visible = visible;
         },
 
diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js
index f7c7ef6b4..bd25b6c59 100644
--- a/apps/common/main/lib/component/ComboBorderSize.js
+++ b/apps/common/main/lib/component/ComboBorderSize.js
@@ -79,10 +79,10 @@ define([
             '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<div class="form-control" style="padding-top:2px; <%= style %>"></div>',
                 '<div style="display: table-cell;"></div>',
-                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><span class="caret img-commonctrl"></span></button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
-                        '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
+                        '<li id="<%= item.id %>" class="dropdown-item" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
                             '<span><%= item.displayValue %></span>',
                             '<% if (item.offsety!==undefined) { %>',
                                 '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">',
diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js
index 258b62b3d..378bd88e0 100644
--- a/apps/common/main/lib/component/Menu.js
+++ b/apps/common/main/lib/component/Menu.js
@@ -187,7 +187,7 @@ define([
                             new Common.UI.MenuItem(_.extend({
                                 tagName : 'li',
                                 template: me.itemTemplate,
-                                clsDropdownItem: me.clsDropdownItem
+                                clsDropdownItem: item.clsDropdownItem
                             }, item))
                         );
                     }
@@ -254,13 +254,6 @@ define([
                         });
                     }
 
-                    menuRoot.css({
-                        position    : 'fixed',
-                        right       : 'auto',
-                        left        : -1000,
-                        top         : -1000
-                    });
-
                     this.parentEl = menuRoot.parent();
 
                     this.parentEl.on('show.bs.dropdown',    _.bind(me.onBeforeShowMenu, me));
@@ -512,7 +505,7 @@ define([
             setOffset: function(offsetX, offsetY) {
                 this.offset[0] = _.isUndefined(offsetX) ? this.offset[0] : offsetX;
                 this.offset[1] = _.isUndefined(offsetY) ? this.offset[1] : offsetY;
-                this.alignPosition();
+                //this.alignPosition();
             },
 
             getOffset: function() {
@@ -546,14 +539,13 @@ define([
                 var left = offset.left - posMenu[m[1]][0] + posParent[m[2]][0] + this.offset[0];
                 var top  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1];
 
-                if (left + menuW > docW)
-                    if (menuParent.is('li.dropdown-submenu')) {
-                        left = offset.left - menuW + 2;
+                if (menuParent.is('li.dropdown-submenu')) {
+                    if (left + menuW > docW) {
+                        menuParent.addClass('dropleft');
                     } else {
-                        left = docW - menuW;
+                        menuParent.addClass('dropright');
                     }
-                if (left < 0)
-                    left = 0;
+                }
 
                 if (this.options.restoreHeight) {
                     if (typeof (this.options.restoreHeight) == "number") {
@@ -574,25 +566,32 @@ define([
                 } else {
                     var cg = Common.Utils.croppedGeometry();
                     docH = cg.height - 10;
-                    if (top + menuH > docH) {
+                    var newTop = top;
+                    if (top + menuH > docH + cg.top) {
                         if (fixedAlign && typeof fixedAlign == 'string') { // how to align if menu height > window height
                             m = fixedAlign.match(/^([a-z]+)-([a-z]+)/);
-                            top  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1] + (fixedOffset || 0);
+                            newTop  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1] + (fixedOffset || 0);
                         } else
-                            top = docH - menuH;
+                            newTop = docH - menuH;
                     }
 
 
-                    if (top < cg.top)
-                        top = cg.top;
+                    if (newTop < cg.top)
+                        newTop = cg.top;
+
+                    var margin = newTop - top;
+                    if (Math.abs(margin) > 1) {
+                        menuRoot.css({'margin-top': margin});
+                    }
                 }
-                if (this.options.additionalAlign)
+
+                if (this.options.additionalAlign) {
                     this.options.additionalAlign.call(this, menuRoot, left, top);
-                else {
-                    var _css = {left: Math.ceil(left), top: Math.ceil(top)};
+                } else {
+                    /*var _css = {top: Math.ceil(newTop)};
                     if (!(menuH < docH)) _css['margin-top'] = 0;
 
-                    menuRoot.css(_css);
+                    menuRoot.css(_css);*/
                 }
             },
 
@@ -716,13 +715,6 @@ define([
                     });
                 }
 
-                menuRoot.css({
-                    position    : 'fixed',
-                    right       : 'auto',
-                    left        : -1000,
-                    top         : -1000
-                });
-
                 this.parentEl = menuRoot.parent();
 
                 this.parentEl.on('show.bs.dropdown',    _.bind(me.onBeforeShowMenu, me));
@@ -858,7 +850,7 @@ define([
         onBeforeShowMenu: function(e) {
             Common.NotificationCenter.trigger('menu:show');
             this.trigger('show:before', this, e);
-            this.alignPosition();
+            //this.alignPosition();
         },
 
         onAfterShowMenu: function(e) {
@@ -974,7 +966,7 @@ define([
         setOffset: function(offsetX, offsetY) {
             this.offset[0] = _.isUndefined(offsetX) ? this.offset[0] : offsetX;
             this.offset[1] = _.isUndefined(offsetY) ? this.offset[1] : offsetY;
-            this.alignPosition();
+            //this.alignPosition();
         },
 
         getOffset: function() {
@@ -1008,14 +1000,22 @@ define([
             var left = offset.left - posMenu[m[1]][0] + posParent[m[2]][0] + this.offset[0];
             var top  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1];
 
-            if (left + menuW > docW)
+            if (menuParent.is('li.dropdown-submenu')) {
+                if (left + menuW > docW) {
+                    menuParent.addClass('dropleft');
+                } else {
+                    menuParent.addClass('dropright');
+                }
+            }
+
+            /*if (left + menuW > docW)
                 if (menuParent.is('li.dropdown-submenu')) {
                     left = offset.left - menuW + 2;
                 } else {
                     left = docW - menuW;
-                }
+                }*/
 
-            if (this.options.restoreHeight) {
+            /*if (this.options.restoreHeight) {
                 if (typeof (this.options.restoreHeight) == "number") {
                     if (top + menuH > docH) {
                         menuRoot.css('max-height', (docH - top) + 'px');
@@ -1040,12 +1040,12 @@ define([
 
                 if (top < 0)
                     top = 0;
-            }
+            }*/
 
-            if (this.options.additionalAlign)
+            /*if (this.options.additionalAlign)
                 this.options.additionalAlign.call(this, menuRoot, left, top);
             else
-                menuRoot.css({left: Math.ceil(left), top: Math.ceil(top)});
+                menuRoot.css({left: Math.ceil(left), top: Math.ceil(top)});*/
         },
 
         clearAll: function() {
diff --git a/apps/common/main/lib/component/MenuItem.js b/apps/common/main/lib/component/MenuItem.js
index c881ff0b9..3709de5af 100644
--- a/apps/common/main/lib/component/MenuItem.js
+++ b/apps/common/main/lib/component/MenuItem.js
@@ -108,7 +108,7 @@ define([
         tagName : 'li',
 
         template: _.template([
-            '<a id="<%= id %>" style="<%= style %>" <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; %> >',
+            '<a id="<%= id %>" style="<%= style %>" <% if(menu) { %> data-toggle="dropdown" class="dropdown-toggle" <% } %> <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; %> >',
                 '<% if (!_.isEmpty(iconCls)) { %>',
                     '<span class="menu-item-icon <%= iconCls %>"></span>',
                 '<% } %>',
@@ -164,14 +164,15 @@ define([
                         caption : me.caption,
                         iconCls : me.iconCls,
                         style   : me.style,
-                        options : me.options
+                        options : me.options,
+                        menu    : me.menu
                     }));
 
                     if (me.menu) {
                         el.addClass('dropdown-submenu');
 
                         me.menu.render(el);
-                        el.mouseenter(_.bind(me.menu.alignPosition, me.menu));
+                        //el.mouseenter(_.bind(me.menu.alignPosition, me.menu));
 //                        el.focusin(_.bind(me.onFocusItem, me));
                         el.focusout(_.bind(me.onBlurItem, me));
                         el.hover(
diff --git a/apps/common/main/lib/component/TreeView.js b/apps/common/main/lib/component/TreeView.js
index 8f32ea245..5dce98083 100644
--- a/apps/common/main/lib/component/TreeView.js
+++ b/apps/common/main/lib/component/TreeView.js
@@ -170,7 +170,7 @@ define([
                 options.store = options.store || new Common.UI.TreeViewStore();
                 options.emptyItemText = options.emptyItemText || '';
                 options.itemTemplate = options.itemTemplate || _.template([
-                    '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'hidden' + '<% } %>" style="display: block;padding-left: <%= level*16 + 24 %>px;">',
+                    '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'd-none' + '<% } %>" style="display: block;padding-left: <%= level*16 + 24 %>px;">',
                     '<% if (hasSubItems) { %>',
                         '<div class="tree-caret img-commonctrl ' + '<% if (!isExpanded) { %>' + 'up' + '<% } %>' + '" style="margin-left: <%= level*16 %>px;"></div>',
                     '<% } %>',
diff --git a/apps/common/main/lib/component/Window.js b/apps/common/main/lib/component/Window.js
index 9405cc200..c0c315df5 100644
--- a/apps/common/main/lib/component/Window.js
+++ b/apps/common/main/lib/component/Window.js
@@ -670,9 +670,9 @@ define([
                     var self = this;
                     if (!me.$window.hasClass('notransform')) {
                         me.$window.addClass('notransform');
-                        menuRoot.addClass('hidden');
+                        menuRoot.addClass('d-none');
                         setTimeout(function() {
-                            menuRoot.removeClass('hidden');
+                            menuRoot.removeClass('d-none');
                             menuRoot.css({left: left, top: top});
                             self.options.additionalAlign = null;
                         }, 300);
diff --git a/apps/common/main/lib/util/Tip.js b/apps/common/main/lib/util/Tip.js
index 2795fec8f..9671d927a 100644
--- a/apps/common/main/lib/util/Tip.js
+++ b/apps/common/main/lib/util/Tip.js
@@ -216,10 +216,12 @@ define([
                                 }
                             },
                             onCreate: function onCreate() {
-                                var x = tp.left;
-                                var y = tp.top;
-                                virtualElement.getBoundingClientRect = generateGetBoundingClientRect(x, y);
-                                me.update();
+                                if (tp) {
+                                    var x = tp.left;
+                                    var y = tp.top;
+                                    virtualElement.getBoundingClientRect = generateGetBoundingClientRect(x, y);
+                                    me.update();
+                                }
                             }
                         });
                     }
diff --git a/apps/common/main/lib/view/About.js b/apps/common/main/lib/view/About.js
index 5a5185e19..d1104ce78 100644
--- a/apps/common/main/lib/view/About.js
+++ b/apps/common/main/lib/view/About.js
@@ -95,7 +95,7 @@ define([
                         '</td>',
                     '</tr>',
                 '</table>',
-                '<table id="id-about-licensee-info" cols="1" style="width: 100%; margin-top: 20px;" class="hidden margin-bottom"><tbody>',
+                '<table id="id-about-licensee-info" cols="1" style="width: 100%; margin-top: 20px;" class="d-none margin-bottom"><tbody>',
                     '<tr>',
                         '<td align="center" class="padding-small"><div id="id-about-company-logo"></div></td>',
                     '</tr>',
@@ -133,7 +133,7 @@ define([
                         '</td>',
                     '</tr>',
                 '</table>',
-                '<table id="id-about-licensor-short" cols="1" style="width: 100%; margin-top: 31px;" class="hidden"><tbody>',
+                '<table id="id-about-licensor-short" cols="1" style="width: 100%; margin-top: 31px;" class="d-none"><tbody>',
                     '<tr>',
                         '<td style="width:50%;"><div class="separator horizontal short left"></div></td>',
                         '<td align="center"><label class="asc-about-header">' + this.txtPoweredBy + '</label></td>',
@@ -198,42 +198,42 @@ define([
                 if (data && typeof data == 'object' && typeof(data.customer)=='object') {
                     var customer = data.customer;
 
-                    $('#id-about-licensor-logo').addClass('hidden');
-                    $('#id-about-licensor-short').removeClass('hidden');
-                    this.cntLicensorInfo.addClass('hidden');
+                    $('#id-about-licensor-logo').addClass('d-none');
+                    $('#id-about-licensor-short').removeClass('d-none');
+                    this.cntLicensorInfo.addClass('d-none');
 
-                    this.cntLicenseeInfo.removeClass('hidden');
+                    this.cntLicenseeInfo.removeClass('d-none');
                     this.cntLicensorInfo.removeClass('margin-bottom');
 
                     var value = customer.name;
                     value && value.length ?
                         this.lblCompanyName.text(value) :
-                        this.lblCompanyName.parents('tr').addClass('hidden');
+                        this.lblCompanyName.parents('tr').addClass('d-none');
 
                     value = customer.address;
                     value && value.length ?
                         this.lblCompanyAddress.text(value) :
-                        this.lblCompanyAddress.parents('tr').addClass('hidden');
+                        this.lblCompanyAddress.parents('tr').addClass('d-none');
 
                     (value = customer.mail) && value.length ?
                         this.lblCompanyMail.attr('href', "mailto:"+value).text(value) :
-                        this.lblCompanyMail.parents('tr').addClass('hidden');
+                        this.lblCompanyMail.parents('tr').addClass('d-none');
 
                     if ((value = customer.www) && value.length) {
                         var http = !/^https?:\/{2}/i.test(value) ? "http:\/\/" : '';
                         this.lblCompanyUrl.attr('href', http+value).text(value);
                     } else
-                        this.lblCompanyUrl.parents('tr').addClass('hidden');
+                        this.lblCompanyUrl.parents('tr').addClass('d-none');
 
                     (value = customer.info) && value.length ?
                         this.lblCompanyLic.text(value) :
-                        this.lblCompanyLic.parents('tr').addClass('hidden');
+                        this.lblCompanyLic.parents('tr').addClass('d-none');
 
                     (value = customer.logo) && value.length ?
                         this.divCompanyLogo.html('<img src="'+value+'" style="max-width:216px; max-height: 35px;" />') :
-                        this.divCompanyLogo.parents('tr').addClass('hidden');
+                        this.divCompanyLogo.parents('tr').addClass('d-none');
                 } else {
-                    this.cntLicenseeInfo.addClass('hidden');
+                    this.cntLicenseeInfo.addClass('d-none');
                     this.cntLicensorInfo.addClass('margin-bottom');
                 }
             }
diff --git a/apps/common/main/lib/view/History.js b/apps/common/main/lib/view/History.js
index c19e0570c..26764e4a4 100644
--- a/apps/common/main/lib/view/History.js
+++ b/apps/common/main/lib/view/History.js
@@ -79,7 +79,7 @@ define([
                 store: this.storeHistory,
                 enableKeyEvents: false,
                 itemTemplate: _.template([
-                    '<div id="<%= id %>" class="history-item-wrap ' + '<% if (!isVisible) { %>' + 'hidden' + '<% } %>' + '" ',
+                    '<div id="<%= id %>" class="history-item-wrap ' + '<% if (!isVisible) { %>' + 'd-none' + '<% } %>' + '" ',
                     'style="display: block; ' + '<% if (!isRevision) { %>' + 'padding-left: 40px;' + '<% } %>' + '<% if (canRestore && selected) { %>' + 'padding-bottom: 6px;' + '<% } %>' +'">',
                         '<div class="user-date"><%= created %></div>',
                         '<% if (markedAsVersion) { %>',
diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js
index a1bee256d..a3f1553eb 100644
--- a/apps/common/main/lib/view/Plugins.js
+++ b/apps/common/main/lib/view/Plugins.js
@@ -59,7 +59,7 @@ define([
                 '<div id="plugins-list" class="">',
                 '</div>',
             '</div>',
-            '<div id="current-plugin-box" class="layout-ct vbox hidden">',
+            '<div id="current-plugin-box" class="layout-ct vbox d-none">',
                 '<div id="current-plugin-header">',
                     '<label></label>',
                     '<div id="id-plugin-close" class="plugin-close img-commonctrl"></div>',
@@ -197,8 +197,8 @@ define([
         openInsideMode: function(name, url, frameId) {
             if (!this.pluginsPanel) return false;
 
-            this.pluginsPanel.toggleClass('hidden', true);
-            this.currentPluginPanel.toggleClass('hidden', false);
+            this.pluginsPanel.toggleClass('d-none', true);
+            this.currentPluginPanel.toggleClass('d-none', false);
 
             this.pluginName.text(name);
             if (!this.iframePlugin) {
@@ -232,7 +232,7 @@ define([
                 this.currentPluginFrame.empty();
                 this.iframePlugin = null;
             }
-            this.currentPluginPanel.toggleClass('hidden', true);
+            this.currentPluginPanel.toggleClass('d-none', true);
             // this.pluginsPanel.toggleClass('hidden', false);
 
             this.fireEvent('plugin:open', [this, 'onboard', 'close']);
diff --git a/apps/common/main/lib/view/SignDialog.js b/apps/common/main/lib/view/SignDialog.js
index 44524278a..d8a16d32a 100644
--- a/apps/common/main/lib/view/SignDialog.js
+++ b/apps/common/main/lib/view/SignDialog.js
@@ -234,7 +234,7 @@ define([
             me.cntVisibleSign = $('#id-dlg-sign-visible');
             me.cntInvisibleSign = $('#id-dlg-sign-invisible');
 
-            (me.signType == 'visible') ? me.cntInvisibleSign.addClass('hidden') : me.cntVisibleSign.addClass('hidden');
+            (me.signType == 'visible') ? me.cntInvisibleSign.addClass('d-none') : me.cntVisibleSign.addClass('d-none');
 
             $window.find('.dlg-btn').on('click', _.bind(me.onBtnClick, me));
 
diff --git a/apps/common/main/lib/view/SymbolTableDialog.js b/apps/common/main/lib/view/SymbolTableDialog.js
index 9c55fdb3a..41da87c3d 100644
--- a/apps/common/main/lib/view/SymbolTableDialog.js
+++ b/apps/common/main/lib/view/SymbolTableDialog.js
@@ -410,7 +410,7 @@ define([
 
             this.template = [
                 '<div class="box">',
-                    '<div style="margin-bottom: 16px;" class="'+ (this.special ? '' : 'hidden') +'">',
+                    '<div style="margin-bottom: 16px;" class="'+ (this.special ? '' : 'd-none') +'">',
                         '<button type="button" class="btn btn-text-default auto" id="symbol-table-symbols" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textSymbols,'</button>',
                         '<button type="button" class="btn btn-text-default auto" id="symbol-table-special" style="border-top-left-radius: 0;border-bottom-left-radius: 0;border-left-width: 0;margin-left: -1px;">', this.textSpecial,'</button>',
                     '</div>',
@@ -758,7 +758,7 @@ define([
             this.specialList.selectByIndex(0);
 
             this.lblShortCut = $window.find('#symbol-table-lbl-shortcut');
-            this.lblShortCut.toggleClass('hidden', !this.showShortcutKey);
+            this.lblShortCut.toggleClass('d-none', !this.showShortcutKey);
 
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
             this.symbolsPanel = $window.find('#symbol-table-pnl-symbols');
@@ -1468,8 +1468,8 @@ define([
         },
 
         ShowHideElem: function(special) {
-            this.symbolsPanel.toggleClass('hidden', special);
-            this.specialPanel.toggleClass('hidden', !special);
+            this.symbolsPanel.toggleClass('d-none', special);
+            this.specialPanel.toggleClass('d-none', !special);
             var me = this;
             _.delay(function(){
                 special ? me.specialList.cmpEl.find('.listview').focus() : me.previewPanel.focus();
diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index 462ec1082..16ff08719 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -36,4 +36,8 @@ label {
 
 .user-select {
     .user-select(text);
+}
+
+.dropdown-divider {
+    margin: 6.5px 0;
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/dropdown-submenu.less b/apps/common/main/resources/less/dropdown-submenu.less
index 7376a2686..7328f55d0 100644
--- a/apps/common/main/resources/less/dropdown-submenu.less
+++ b/apps/common/main/resources/less/dropdown-submenu.less
@@ -2,10 +2,6 @@
     position:relative;
 
     & > .dropdown-menu {
-        top: 0;
-        left: 100%;
-        margin-top: -6px;
-        margin-left: -1px;
       	border-radius:@border-radius-base;
 
         &.pull-right {
@@ -35,4 +31,18 @@
     &.over > a:after {
         border-left-color: @dropdown-link-color;
     }
+
+    &.dropright {
+        & > .dropdown-menu {
+            margin-top: -6px;
+            margin-left: -1px;
+        }
+    }
+
+    &.dropleft {
+        & > .dropdown-menu {
+            margin-top: -6px;
+            margin-right: -1px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/apps/documenteditor/embed/js/ApplicationController.js b/apps/documenteditor/embed/js/ApplicationController.js
index 318106114..e1119a4ae 100644
--- a/apps/documenteditor/embed/js/ApplicationController.js
+++ b/apps/documenteditor/embed/js/ApplicationController.js
@@ -239,7 +239,7 @@ DE.ApplicationController = new(function(){
             $('#idt-fullscreen').hide();
 
         if ( !embedConfig.saveUrl && permissions.print === false && !embedConfig.shareUrl && !embedConfig.embedUrl && !embedConfig.fullscreenUrl)
-            $('#box-tools').addClass('hidden');
+            $('#box-tools').addClass('d-none');
 
         common.controller.modals.attach({
             share: '#idt-share',
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index 664a25181..3bcf48a30 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -2491,7 +2491,7 @@ define([
                     menu: new Common.UI.Menu({
                         menuAlign: 'tl-tr',
                         items: [
-                            { template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
+                            { template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>'), clsDropdownItem: false }
                         ]
                     })
                 });
@@ -2547,9 +2547,12 @@ define([
                     menu: new Common.UI.Menu({
                         menuAlign: 'tl-tr',
                         items: [
-                            { template: _.template('<div id="id-toolbar-menu-equationgroup' + i +
+                            {
+                                template: _.template('<div id="id-toolbar-menu-equationgroup' + i +
                                 '" class="menu-shape" style="width:' + (equationGroup.get('groupWidth') + 8) + 'px; ' +
-                                equationGroup.get('groupHeight') + 'margin-left:5px;"></div>') }
+                                equationGroup.get('groupHeight') + 'margin-left:5px;"></div>'),
+                                clsDropdownItem: false
+                            }
                         ]
                     })
                 });
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index a5cf8919c..5af9509c6 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -368,7 +368,7 @@ define([
             var itemsTemplate =
                 _.template([
                     '<% _.each(items, function(item) { %>',
-                    '<li id="<%= item.id %>" data-value="<%= item.value %>" <% if (item.value === "custom") { %> style="border-top: 1px solid #e5e5e5;margin-top: 5px;" <% } %> ><a tabindex="-1" type="menuitem" <% if (typeof(item.checked) !== "undefined" && item.checked) { %> class="checked" <% } %> ><%= scope.getDisplayValue(item) %></a></li>',
+                    '<li id="<%= item.id %>" class="dropdown-item" data-value="<%= item.value %>" <% if (item.value === "custom") { %> style="border-top: 1px solid #e5e5e5;margin-top: 5px;" <% } %> ><a tabindex="-1" type="menuitem" <% if (typeof(item.checked) !== "undefined" && item.checked) { %> class="checked" <% } %> ><%= scope.getDisplayValue(item) %></a></li>',
                     '<% }); %>'
                 ].join(''));
             this.cmbFontRender = new Common.UI.ComboBox({
@@ -1087,7 +1087,7 @@ define([
                     me.trAuthor.before(div);
                     me.authors.push(item);
                 });
-                this.tblAuthor.find('.close').toggleClass('hidden', !this.mode.isEdit);
+                this.tblAuthor.find('.close').toggleClass('d-none', !this.mode.isEdit);
                 !this.mode.isEdit && this._ShowHideInfoItem(this.tblAuthor, !!this.authors.length);
             }
             this.SetDisabled();
@@ -1569,13 +1569,13 @@ define([
 
             var me = this;
             this.templateSignature = _.template([
-                '<table cols="2" width="300" class="<% if (!hasRequested && !hasSigned) { %>hidden<% } %>"">',
+                '<table cols="2" width="300" class="<% if (!hasRequested && !hasSigned) { %>d-none<% } %>"">',
                     '<tr>',
                         '<td colspan="2"><label style="cursor: default;"><%= tipText %></label></td>',
                     '</tr>',
                     '<tr>',
                         '<td><label class="link signature-view-link">' + me.txtView + '</label></td>',
-                        '<td align="right"><label class="link signature-edit-link <% if (!hasSigned) { %>hidden<% } %>">' + me.txtEdit + '</label></td>',
+                        '<td align="right"><label class="link signature-edit-link <% if (!hasSigned) { %>d-none<% } %>">' + me.txtEdit + '</label></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
@@ -1628,8 +1628,8 @@ define([
 
         setMode: function(mode) {
             this.mode = mode;
-            this.cntSignature.toggleClass('hidden', !this.mode.isSignatureSupport);
-            this.cntPassword.toggleClass('hidden', !this.mode.isPasswordSupport);
+            this.cntSignature.toggleClass('d-none', !this.mode.isSignatureSupport);
+            this.cntPassword.toggleClass('d-none', !this.mode.isPasswordSupport);
         },
 
         setApi: function(o) {
@@ -1690,7 +1690,7 @@ define([
         },
 
         updateEncrypt: function() {
-            this.cntPasswordView.toggleClass('hidden', this.btnAddPwd.isVisible());
+            this.cntPasswordView.toggleClass('d-none', this.btnAddPwd.isVisible());
         },
 
         strProtect: 'Protect Document',
diff --git a/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js b/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
index 53b5f6130..7c1e5e117 100644
--- a/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
@@ -184,8 +184,8 @@ define([
         },
 
         ShowHideElem: function(value) {
-            this.externalPanel.toggleClass('hidden', value !== c_oHyperlinkType.WebLink);
-            this.internalPanel.toggleClass('hidden', value !== c_oHyperlinkType.InternalLink);
+            this.externalPanel.toggleClass('d-none', value !== c_oHyperlinkType.WebLink);
+            this.internalPanel.toggleClass('d-none', value !== c_oHyperlinkType.InternalLink);
             var store = this.internalList.store;
             if (value==c_oHyperlinkType.InternalLink) {
                 if (store.length<1) {
diff --git a/apps/documenteditor/main/app/view/LeftMenu.js b/apps/documenteditor/main/app/view/LeftMenu.js
index 931c71f50..1bfebd561 100644
--- a/apps/documenteditor/main/app/view/LeftMenu.js
+++ b/apps/documenteditor/main/app/view/LeftMenu.js
@@ -389,7 +389,7 @@ define([
                 this.devHeight = this.developerHint.outerHeight();
                 $(window).on('resize', _.bind(this.onWindowResize, this));
             }
-            this.developerHint.toggleClass('hidden', !mode);
+            this.developerHint.toggleClass('d-none', !mode);
 
             var btns = this.$el.find('button.btn-category:visible'),
                 lastbtn = (btns.length>0) ? $(btns[btns.length-1]) : null;
diff --git a/apps/documenteditor/main/app/view/Links.js b/apps/documenteditor/main/app/view/Links.js
index eb641576a..06a240020 100644
--- a/apps/documenteditor/main/app/view/Links.js
+++ b/apps/documenteditor/main/app/view/Links.js
@@ -180,8 +180,8 @@ define([
                         var _menu = new Common.UI.Menu({
                             cls: 'toc-menu',
                             items: [
-                                {template: contentsTemplate, offsety: 0, value: 0},
-                                {template: contentsTemplate, offsety: 72, value: 1},
+                                {template: contentsTemplate, offsety: 0, value: 0, clsDropdownItem: false},
+                                {template: contentsTemplate, offsety: 72, value: 1, clsDropdownItem: false},
                                 {caption: me.textContentsSettings, value: 'settings'},
                                 {caption: me.textContentsRemove, value: 'remove'}
                             ]
@@ -233,7 +233,8 @@ define([
                                         '<button id="id-menu-goto-footnote-prev-' + index + '" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
                                         '</div>'
                                     ].join('')),
-                                    stopPropagation: true
+                                    stopPropagation: true,
+                                    clsDropdownItem: false
                                 }),
                                 {caption: '--'},
                                 {caption: me.mniDelFootnote, value: 'delele'},
diff --git a/apps/documenteditor/main/app/view/ListSettingsDialog.js b/apps/documenteditor/main/app/view/ListSettingsDialog.js
index dbfe8329b..726f1efe0 100644
--- a/apps/documenteditor/main/app/view/ListSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/ListSettingsDialog.js
@@ -125,7 +125,7 @@ define([
                 '<% } %>',
                 '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td class="<% if (type != 2) { %> hidden <% } %>" style="width: 50px; padding-right: 10px;">',
+                            '<td class="<% if (type != 2) { %> d-none <% } %>" style="width: 50px; padding-right: 10px;">',
                                 '<label>' + this.textLevel + '</label>',
                                 '<div id="levels-list" class="no-borders" style="width:100%; height:208px;margin-top: 2px; "></div>',
                             '</td>',
diff --git a/apps/documenteditor/main/app/view/ParagraphSettings.js b/apps/documenteditor/main/app/view/ParagraphSettings.js
index 148b62b63..3b1bb4193 100644
--- a/apps/documenteditor/main/app/view/ParagraphSettings.js
+++ b/apps/documenteditor/main/app/view/ParagraphSettings.js
@@ -470,7 +470,7 @@ define([
         hideTextOnlySettings: function(value) {
             if (this._state.HideTextOnlySettings !== value) {
                 this._state.HideTextOnlySettings = value;
-                this.TextOnlySettings.toggleClass('hidden', value==true);
+                this.TextOnlySettings.toggleClass('d-none', value==true);
             }
         },
 
diff --git a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
index 05cb13442..96294913b 100644
--- a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
@@ -1319,7 +1319,7 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
         },
 
         hideTextOnlySettings: function(value) {
-            this.TextOnlySettings.toggleClass('hidden', value==true);
+            this.TextOnlySettings.toggleClass('d-none', value==true);
             this.btnsCategory[1].setVisible(!value);   // Line & Page Breaks
             this.btnsCategory[2].setVisible(!value);   // Borders
             this.btnsCategory[5].setVisible(!value);   // Paddings
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 8fd41e2e5..10fe0a9f3 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -1806,14 +1806,14 @@ define([
         hideShapeOnlySettings: function(value) {
             if (this._state.HideShapeOnlySettings !== value) {
                 this._state.HideShapeOnlySettings = value;
-                this.ShapeOnlySettings.toggleClass('hidden', value==true);
+                this.ShapeOnlySettings.toggleClass('d-none', value==true);
             }
         },
 
         hideChangeTypeSettings: function(value) {
             if (this._state.HideChangeTypeSettings !== value) {
                 this._state.HideChangeTypeSettings = value;
-                this.CanChangeType.toggleClass('hidden', value==true);
+                this.CanChangeType.toggleClass('d-none', value==true);
             }
         },
 
diff --git a/apps/documenteditor/main/app/view/SignatureSettings.js b/apps/documenteditor/main/app/view/SignatureSettings.js
index ac95843c9..a3e5c144e 100644
--- a/apps/documenteditor/main/app/view/SignatureSettings.js
+++ b/apps/documenteditor/main/app/view/SignatureSettings.js
@@ -196,9 +196,9 @@ define([
             this.viewValidList.store.reset(validSignatures);
             this.viewInvalidList.store.reset(invalidSignatures);
 
-            this.$el.find('.requested').toggleClass('hidden', !me._state.hasRequested);
-            this.$el.find('.valid').toggleClass('hidden', !me._state.hasValid);
-            this.$el.find('.invalid').toggleClass('hidden', !me._state.hasInvalid);
+            this.$el.find('.requested').toggleClass('d-none', !me._state.hasRequested);
+            this.$el.find('.valid').toggleClass('d-none', !me._state.hasValid);
+            this.$el.find('.invalid').toggleClass('d-none', !me._state.hasInvalid);
 
             me.disableEditing(me._state.hasValid || me._state.hasInvalid);
         },
diff --git a/apps/documenteditor/main/app/view/TableOfContentsSettings.js b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
index 597098e25..ddea74a6e 100644
--- a/apps/documenteditor/main/app/view/TableOfContentsSettings.js
+++ b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
@@ -101,7 +101,7 @@ define([
                                                 '<label class="input-label">' + me.textLevels + '</label>',
                                                 '<div id="tableofcontents-spin-levels" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
                                             '</div>',
-                                            '<div id="tableofcontents-from-styles" class="hidden">',
+                                            '<div id="tableofcontents-from-styles" class="d-none">',
                                                 '<table><tr><td style="height: 25px;">',
                                                         '<label class="input-label" style="width: 144px; margin-left: 23px;">' + me.textStyle + '</label>',
                                                         '<label class="input-label" style="">' + me.textLevel + '</label>',
@@ -224,8 +224,8 @@ define([
             });
             this.radioLevels.on('change', _.bind(function(field, newValue, eOpts) {
                 if (newValue) {
-                    this.levelsContainer.toggleClass('hidden', !newValue);
-                    this.stylesContainer.toggleClass('hidden', newValue);
+                    this.levelsContainer.toggleClass('d-none', !newValue);
+                    this.stylesContainer.toggleClass('d-none', newValue);
                     if (this._needUpdateOutlineLevels)
                         this.synchronizeLevelsFromStyles();
                 }
@@ -238,8 +238,8 @@ define([
             });
             this.radioStyles.on('change', _.bind(function(field, newValue, eOpts) {
                 if (newValue) {
-                    this.stylesContainer.toggleClass('hidden', !newValue);
-                    this.levelsContainer.toggleClass('hidden', newValue);
+                    this.stylesContainer.toggleClass('d-none', !newValue);
+                    this.levelsContainer.toggleClass('d-none', newValue);
                     if (this._needUpdateStyles)
                         this.synchronizeLevelsFromOutline();
                     this.stylesList.scroller.update({alwaysVisibleY: true});
diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js
index 6f4814961..368522cc8 100644
--- a/apps/documenteditor/main/app/view/TableSettings.js
+++ b/apps/documenteditor/main/app/view/TableSettings.js
@@ -323,6 +323,7 @@ define([
                 cls: 'btn-icon-default',
                 iconCls: 'btn-edit-table',
                 menu        : new Common.UI.Menu({
+                    cls: 'dropdown-menu-right',
                     menuAlign: 'tr-br',
                     items: [
                         { caption: this.selectRowText, value: 0 },
@@ -669,7 +670,7 @@ define([
                     menu        : new Common.UI.Menu({
                         style: 'width: 575px;',
                         items: [
-                            { template: _.template('<div id="id-table-menu-template" class="menu-table-template"  style="margin: 5px 5px 5px 10px;"></div>') }
+                            { template: _.template('<div id="id-table-menu-template" class="menu-table-template"  style="margin: 5px 5px 5px 10px;"></div>'), clsDropdownItem: false }
                         ]
                     })
                 });
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 3445adc44..0a10b55b2 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -1672,7 +1672,7 @@ define([
                                 menu: new Common.UI.Menu({
                                     menuAlign: 'tl-tr',
                                     items: [
-                                        {template: _.template('<div id="id-toolbar-menu-pageposition" class="menu-pageposition"></div>')},
+                                        {template: _.template('<div id="id-toolbar-menu-pageposition" class="menu-pageposition"></div>'), clsDropdownItem: false},
                                         this.mnuPageNumCurrentPos = new Common.UI.MenuItem({
                                             caption: this.textToCurrent,
                                             disabled: this.mnuPageNumCurrentPos.isDisabled(),
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 8c97276d8..46ea05174 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -15,7 +15,7 @@
     display: none;
     padding: 0 10px 0 15px;
     position: relative;
-    overflow: hidden;
+    //overflow: hidden;
     border-left: 1px solid @gray-dark;
     line-height: 15px;
 }
diff --git a/apps/presentationeditor/embed/js/ApplicationController.js b/apps/presentationeditor/embed/js/ApplicationController.js
index c3d3a39a4..a814065eb 100644
--- a/apps/presentationeditor/embed/js/ApplicationController.js
+++ b/apps/presentationeditor/embed/js/ApplicationController.js
@@ -243,7 +243,7 @@ PE.ApplicationController = new(function(){
             $('#idt-fullscreen').hide();
 
         if ( !embedConfig.saveUrl && permissions.print === false && !embedConfig.shareUrl && !embedConfig.embedUrl && !embedConfig.fullscreenUrl)
-            $('#box-tools').addClass('hidden');
+            $('#box-tools').addClass('d-none');
 
         common.controller.modals.attach({
             share: '#idt-share',
diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index a586b7f69..2079e3f68 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -960,7 +960,7 @@ define([
                     me.trAuthor.before(div);
                     me.authors.push(item);
                 });
-                this.tblAuthor.find('.close').toggleClass('hidden', !this.mode.isEdit);
+                this.tblAuthor.find('.close').toggleClass('d-none', !this.mode.isEdit);
                 !this.mode.isEdit && this._ShowHideInfoItem(this.tblAuthor, !!this.authors.length);
             }
             this.SetDisabled();
@@ -981,7 +981,7 @@ define([
             this.mode = mode;
             this.inputAuthor.setVisible(mode.isEdit);
             this.btnApply.setVisible(mode.isEdit);
-            this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
+            this.tblAuthor.find('.close').toggleClass('d-none', !mode.isEdit);
             if (!mode.isEdit) {
                 this.inputTitle._input.attr('placeholder', '');
                 this.inputSubject._input.attr('placeholder', '');
@@ -1344,13 +1344,13 @@ define([
 
             var me = this;
             this.templateSignature = _.template([
-                '<table cols="2" width="300" class="<% if (!hasSigned) { %>hidden<% } %>"">',
+                '<table cols="2" width="300" class="<% if (!hasSigned) { %>d-none<% } %>"">',
                     '<tr>',
                         '<td colspan="2"><label style="cursor: default;"><%= tipText %></label></td>',
                     '</tr>',
                     '<tr>',
                         '<td><label class="link signature-view-link">' + me.txtView + '</label></td>',
-                        '<td align="right"><label class="link signature-edit-link <% if (!hasSigned) { %>hidden<% } %>">' + me.txtEdit + '</label></td>',
+                        '<td align="right"><label class="link signature-edit-link <% if (!hasSigned) { %>d-none<% } %>">' + me.txtEdit + '</label></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
@@ -1403,8 +1403,8 @@ define([
 
         setMode: function(mode) {
             this.mode = mode;
-            this.cntSignature.toggleClass('hidden', !this.mode.isSignatureSupport);
-            this.cntPassword.toggleClass('hidden', !this.mode.isPasswordSupport);
+            this.cntSignature.toggleClass('d-none', !this.mode.isSignatureSupport);
+            this.cntPassword.toggleClass('d-none', !this.mode.isPasswordSupport);
         },
 
         setApi: function(o) {
@@ -1459,7 +1459,7 @@ define([
         },
 
         updateEncrypt: function() {
-            this.cntPasswordView.toggleClass('hidden', this.btnAddPwd.isVisible());
+            this.cntPasswordView.toggleClass('d-none', this.btnAddPwd.isVisible());
         },
 
         strProtect: 'Protect Presentation',
diff --git a/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js b/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
index 803067af2..d420962ca 100644
--- a/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
+++ b/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
@@ -80,7 +80,7 @@ define([
                         '</div>',
                         '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
-                    '<div id="id-internal-link" class="hidden">',
+                    '<div id="id-internal-link" class="d-none">',
                         '<div class="input-row">',
                             '<label>' + this.strLinkTo + '</label>',
                         '</div>',
@@ -285,8 +285,8 @@ define([
         },
 
         ShowHideElem: function(value, url) {
-            this.externalPanel.toggleClass('hidden', value !== c_oHyperlinkType.WebLink);
-            this.internalPanel.toggleClass('hidden', value !== c_oHyperlinkType.InternalLink);
+            this.externalPanel.toggleClass('d-none', value !== c_oHyperlinkType.WebLink);
+            this.internalPanel.toggleClass('d-none', value !== c_oHyperlinkType.InternalLink);
             if (value==c_oHyperlinkType.InternalLink) {
                 if (url===null || url===undefined || url=='' )
                     url = "ppaction://hlinkshowjump?jump=firstslide";
diff --git a/apps/presentationeditor/main/app/view/LeftMenu.js b/apps/presentationeditor/main/app/view/LeftMenu.js
index b47ddeb81..9e036ef8c 100644
--- a/apps/presentationeditor/main/app/view/LeftMenu.js
+++ b/apps/presentationeditor/main/app/view/LeftMenu.js
@@ -367,7 +367,7 @@ define([
                 this.devHeight = this.developerHint.outerHeight();
                 $(window).on('resize', _.bind(this.onWindowResize, this));
             }
-            this.developerHint.toggleClass('hidden', !mode);
+            this.developerHint.toggleClass('d-none', !mode);
 
             var btns = this.$el.find('button.btn-category:visible'),
                 lastbtn = (btns.length>0) ? $(btns[btns.length-1]) : null;
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 5b214f2e9..d4c68ace4 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -1678,14 +1678,14 @@ define([
         hideShapeOnlySettings: function(value) {
             if (this._state.HideShapeOnlySettings !== value) {
                 this._state.HideShapeOnlySettings = value;
-                this.ShapeOnlySettings.toggleClass('hidden', value==true);
+                this.ShapeOnlySettings.toggleClass('d-none', value==true);
             }
         },
 
         hideChangeTypeSettings: function(value) {
             if (this._state.HideChangeTypeSettings !== value) {
                 this._state.HideChangeTypeSettings = value;
-                this.CanChangeType.toggleClass('hidden', value==true);
+                this.CanChangeType.toggleClass('d-none', value==true);
             }
         },
 
diff --git a/apps/presentationeditor/main/app/view/SignatureSettings.js b/apps/presentationeditor/main/app/view/SignatureSettings.js
index bd40ef48f..1e2511fbd 100644
--- a/apps/presentationeditor/main/app/view/SignatureSettings.js
+++ b/apps/presentationeditor/main/app/view/SignatureSettings.js
@@ -171,8 +171,8 @@ define([
             this.viewValidList.store.reset(validSignatures);
             this.viewInvalidList.store.reset(invalidSignatures);
 
-            this.$el.find('.valid').toggleClass('hidden', !me._state.hasValid);
-            this.$el.find('.invalid').toggleClass('hidden', !me._state.hasInvalid);
+            this.$el.find('.valid').toggleClass('d-none', !me._state.hasValid);
+            this.$el.find('.invalid').toggleClass('d-none', !me._state.hasInvalid);
 
             me.disableEditing(me._state.hasValid || me._state.hasInvalid);
         },
diff --git a/apps/spreadsheeteditor/embed/js/ApplicationController.js b/apps/spreadsheeteditor/embed/js/ApplicationController.js
index ca1d1a457..9a53b844e 100644
--- a/apps/spreadsheeteditor/embed/js/ApplicationController.js
+++ b/apps/spreadsheeteditor/embed/js/ApplicationController.js
@@ -188,7 +188,7 @@ SSE.ApplicationController = new(function(){
             $('#idt-fullscreen').hide();
 
         if ( !embedConfig.saveUrl && permissions.print === false && !embedConfig.shareUrl && !embedConfig.embedUrl && !embedConfig.fullscreenUrl)
-            $('#box-tools').addClass('hidden');
+            $('#box-tools').addClass('d-none');
 
         common.controller.modals.attach({
             share: '#idt-share',
diff --git a/apps/spreadsheeteditor/main/app/controller/Spellcheck.js b/apps/spreadsheeteditor/main/app/controller/Spellcheck.js
index 7a166723e..69c13db5f 100644
--- a/apps/spreadsheeteditor/main/app/controller/Spellcheck.js
+++ b/apps/spreadsheeteditor/main/app/controller/Spellcheck.js
@@ -277,13 +277,13 @@ define([
             this.panelSpellcheck.btnChange.setDisabled(arr.length<1 || disabled);
             this.panelSpellcheck.btnIgnore.setDisabled(!word || disabled);
             this.panelSpellcheck.btnToDictionary.setDisabled(!word || disabled);
-            this.panelSpellcheck.lblComplete.toggleClass('hidden', !property || !!word);
-            this.panelSpellcheck.buttonNext.setDisabled(!this.panelSpellcheck.lblComplete.hasClass('hidden'));
+            this.panelSpellcheck.lblComplete.toggleClass('d-none', !property || !!word);
+            this.panelSpellcheck.buttonNext.setDisabled(!this.panelSpellcheck.lblComplete.hasClass('d-none'));
         },
 
         onApiEditCell: function(state) {
             if (state == Asc.c_oAscCellEditorState.editEnd) {
-                this.panelSpellcheck.buttonNext.setDisabled(!this.panelSpellcheck.lblComplete.hasClass('hidden'));
+                this.panelSpellcheck.buttonNext.setDisabled(!this.panelSpellcheck.lblComplete.hasClass('d-none'));
                 this.panelSpellcheck.cmbDictionaryLanguage.setDisabled((this.languages && this.languages.length > 0) ? false : true);
             } else {
                 this.panelSpellcheck.buttonNext.setDisabled(true);
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
index 4729d53c3..3feb0a7fd 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
@@ -1030,7 +1030,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                           type == Asc.c_oAscChartTypeSettings.lineStackedPer || type == Asc.c_oAscChartTypeSettings.scatter);
             this.chMarkers.setVisible(value);
             this.cmbLines.setVisible(value);
-            this.lblLines.toggleClass('hidden', !value);
+            this.lblLines.toggleClass('d-none', !value);
 
             if (value) {
                 this.chMarkers.setValue(this.chartSettings.getShowMarker(), true);
diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index fabfb6020..09317310d 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -1769,7 +1769,7 @@ define([
                     me.trAuthor.before(div);
                     me.authors.push(item);
                 });
-                this.tblAuthor.find('.close').toggleClass('hidden', !this.mode.isEdit);
+                this.tblAuthor.find('.close').toggleClass('d-none', !this.mode.isEdit);
                 !this.mode.isEdit && this._ShowHideInfoItem(this.tblAuthor, !!this.authors.length);
             }
             this.SetDisabled();
@@ -1790,7 +1790,7 @@ define([
             this.mode = mode;
             this.inputAuthor.setVisible(mode.isEdit);
             this.btnApply.setVisible(mode.isEdit);
-            this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
+            this.tblAuthor.find('.close').toggleClass('d-none', !mode.isEdit);
             if (!mode.isEdit) {
                 this.inputTitle._input.attr('placeholder', '');
                 this.inputSubject._input.attr('placeholder', '');
@@ -2152,13 +2152,13 @@ define([
 
             var me = this;
             this.templateSignature = _.template([
-                '<table cols="2" width="300" class="<% if (!hasRequested && !hasSigned) { %>hidden<% } %>"">',
+                '<table cols="2" width="300" class="<% if (!hasRequested && !hasSigned) { %>d-none<% } %>"">',
                     '<tr>',
                         '<td colspan="2"><label style="cursor: default;"><%= tipText %></label></td>',
                     '</tr>',
                     '<tr>',
                         '<td><label class="link signature-view-link">' + me.txtView + '</label></td>',
-                        '<td align="right"><label class="link signature-edit-link <% if (!hasSigned) { %>hidden<% } %>">' + me.txtEdit + '</label></td>',
+                        '<td align="right"><label class="link signature-edit-link <% if (!hasSigned) { %>d-none<% } %>">' + me.txtEdit + '</label></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
@@ -2211,8 +2211,8 @@ define([
 
         setMode: function(mode) {
             this.mode = mode;
-            this.cntSignature.toggleClass('hidden', !this.mode.isSignatureSupport);
-            this.cntPassword.toggleClass('hidden', !this.mode.isPasswordSupport);
+            this.cntSignature.toggleClass('d-none', !this.mode.isSignatureSupport);
+            this.cntPassword.toggleClass('d-none', !this.mode.isPasswordSupport);
         },
 
         setApi: function(o) {
@@ -2273,7 +2273,7 @@ define([
         },
 
         updateEncrypt: function() {
-            this.cntPasswordView.toggleClass('hidden', this.btnAddPwd.isVisible());
+            this.cntPasswordView.toggleClass('d-none', this.btnAddPwd.isVisible());
         },
 
         strProtect: 'Protect Workbook',
diff --git a/apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js b/apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js
index 6b8e66c2b..c475588b9 100644
--- a/apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js
@@ -488,12 +488,12 @@ define([
 
             this.lblExample.text(this.api.asc_getLocaleExample(this.Format));
 
-            this._decimalPanel.toggleClass('hidden', !hasDecimal);
+            this._decimalPanel.toggleClass('d-none', !hasDecimal);
             this._negativePanel.css('visibility', hasNegative ? '' : 'hidden');
-            this._separatorPanel.toggleClass('hidden', !hasSeparator);
-            this._typePanel.toggleClass('hidden', !hasType);
-            this._symbolsPanel.toggleClass('hidden', !hasSymbols);
-            this._codePanel.toggleClass('hidden', !hasCode);
+            this._separatorPanel.toggleClass('d-none', !hasSeparator);
+            this._typePanel.toggleClass('d-none', !hasType);
+            this._symbolsPanel.toggleClass('d-none', !hasSymbols);
+            this._codePanel.toggleClass('d-none', !hasCode);
             this._state = { hasDecimal: hasDecimal, hasNegative: hasNegative, hasSeparator: hasSeparator, hasType: hasType, hasSymbols: hasSymbols, hasCode: hasCode};
         },
 
diff --git a/apps/spreadsheeteditor/main/app/view/FormulaWizard.js b/apps/spreadsheeteditor/main/app/view/FormulaWizard.js
index 1c3458cd5..d69f0c73c 100644
--- a/apps/spreadsheeteditor/main/app/view/FormulaWizard.js
+++ b/apps/spreadsheeteditor/main/app/view/FormulaWizard.js
@@ -156,9 +156,9 @@ define([
             var me = this;
             if (this.funcprops) {
                 var props = this.funcprops;
-                props.args ? $('#formula-wizard-args').html('<b>' + props.name + '</b>' + props.args) : $('#formula-wizard-args').addClass('hidden');
-                props.desc ? $('#formula-wizard-desc').text(props.desc) : $('#formula-wizard-desc').addClass('hidden');
-                props.name ? $('#formula-wizard-name').html(this.textFunction + ': ' + props.name) : $('#formula-wizard-name').addClass('hidden');
+                props.args ? $('#formula-wizard-args').html('<b>' + props.name + '</b>' + props.args) : $('#formula-wizard-args').addClass('d-none');
+                props.desc ? $('#formula-wizard-desc').text(props.desc) : $('#formula-wizard-desc').addClass('d-none');
+                props.name ? $('#formula-wizard-name').html(this.textFunction + ': ' + props.name) : $('#formula-wizard-name').addClass('d-none');
 
                 this.$window.find('#formula-wizard-help').on('click', function (e) {
                     me.showHelp();
@@ -205,7 +205,7 @@ define([
             }
             if (this.args.length<1) {
                 this.panelArgs.text('This function has no arguments');
-                this.lblArgDesc.addClass('hidden');
+                this.lblArgDesc.addClass('d-none');
             } else {
                 if (this.args.length==1 && this.repeatedArg && this.repeatedArg.length<this.maxArgCount) {// add new repeated arguments
                     this.fillArgs(this.repeatedArg);
@@ -335,7 +335,7 @@ define([
         onSelectArgument: function(input) {
             var index = input.options.index,
                 arg = this.args[index];
-            arg.argDesc ? this.lblArgDesc.html('<b>' + arg.argName + ': </b>' + arg.argDesc) : this.lblArgDesc.addClass('hidden');
+            arg.argDesc ? this.lblArgDesc.html('<b>' + arg.argName + ': </b>' + arg.argDesc) : this.lblArgDesc.addClass('d-none');
             if (!this._noApply && index==this.args.length-1 && this.repeatedArg && index+this.repeatedArg.length<this.maxArgCount) {// add new repeated arguments
                 this.fillArgs(this.repeatedArg);
                 this.scrollerY.update();
diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
index 359cfc1ce..caf4d33f6 100644
--- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
@@ -101,9 +101,9 @@ define([
                     '</table>',
                     '<div class="input-row" style="margin-bottom: 15px; border-bottom: 1px solid #cfcfcf;">',
                         '<button type="button" class="btn btn-text-default auto" id="id-dlg-hf-btn-all" style="border-radius: 0;">', this.textAll,'</button>',
-                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-odd" style="border-radius: 0;">', this.textOdd,'</button>',
-                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-even" style="border-radius: 0; margin-left:-1px;">', this.textEven,'</button>',
-                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-first" style="border-radius: 0; margin-left:-1px;">', this.textFirst,'</button>',
+                        '<button type="button" class="btn btn-text-default auto d-none" id="id-dlg-hf-btn-odd" style="border-radius: 0;">', this.textOdd,'</button>',
+                        '<button type="button" class="btn btn-text-default auto d-none" id="id-dlg-hf-btn-even" style="border-radius: 0; margin-left:-1px;">', this.textEven,'</button>',
+                        '<button type="button" class="btn btn-text-default auto d-none" id="id-dlg-hf-btn-first" style="border-radius: 0; margin-left:-1px;">', this.textFirst,'</button>',
                     '</div>',
                     '<label style="display: block; margin-bottom: 3px;">' + this.textHeader + '</label>',
                     '<div id="id-dlg-h-presets" class="input-row" style="display: inline-block; vertical-align: middle;"></div>',
diff --git a/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js b/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
index 7541b9357..dba8137e3 100644
--- a/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
@@ -75,7 +75,7 @@ define([
                         '</div>',
                         '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
-                    '<div id="id-internal-link" class="hidden">',
+                    '<div id="id-internal-link" class="d-none">',
                         '<div class="input-row">',
                             '<label>' + this.strLinkTo + '</label>',
                             '<div style="display: inline-block; position: relative;min-width: 150px;float: right;">',
@@ -235,7 +235,7 @@ define([
             }
 
             me.linkGetLink = $('#id-dlg-hyperlink-get-link');
-            me.linkGetLink.toggleClass('hidden', !(me.appOptions && me.appOptions.canMakeActionLink));
+            me.linkGetLink.toggleClass('d-none', !(me.appOptions && me.appOptions.canMakeActionLink));
 
             me.btnOk = new Common.UI.Button({
                 el: $window.find('.primary'),
@@ -379,8 +379,8 @@ define([
         },
 
         ShowHideElem: function(value, props) {
-            this.externalPanel.toggleClass('hidden', value !== Asc.c_oAscHyperlinkType.WebLink);
-            this.internalPanel.toggleClass('hidden', value !== Asc.c_oAscHyperlinkType.RangeLink);
+            this.externalPanel.toggleClass('d-none', value !== Asc.c_oAscHyperlinkType.WebLink);
+            this.internalPanel.toggleClass('d-none', value !== Asc.c_oAscHyperlinkType.RangeLink);
             var store = this.internalList.store;
             if (value==Asc.c_oAscHyperlinkType.RangeLink) {
                 if (store.length<1 && this.settings) {
diff --git a/apps/spreadsheeteditor/main/app/view/LeftMenu.js b/apps/spreadsheeteditor/main/app/view/LeftMenu.js
index 16778fbce..d570c7526 100644
--- a/apps/spreadsheeteditor/main/app/view/LeftMenu.js
+++ b/apps/spreadsheeteditor/main/app/view/LeftMenu.js
@@ -357,7 +357,7 @@ define([
                 this.devHeight = this.developerHint.outerHeight();
                 $(window).on('resize', _.bind(this.onWindowResize, this));
             }
-            this.developerHint.toggleClass('hidden', !mode);
+            this.developerHint.toggleClass('d-none', !mode);
 
             var btns = this.$el.find('button.btn-category:visible'),
                 lastbtn = (btns.length>0) ? $(btns[btns.length-1]) : null;
diff --git a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
index 782482db6..3226db846 100644
--- a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
@@ -161,7 +161,7 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
             $('#name-manager-sort-scope').on('click', _.bind(this.onSortNames, this, 'scopeName'));
             this.spanSortName = $('#name-manager-sort-name-span');
             this.spanSortScope = $('#name-manager-sort-scope-span');
-            (this.sort.type=='name') ? this.spanSortScope.addClass('hidden') : this.spanSortName.addClass('hidden');
+            (this.sort.type=='name') ? this.spanSortScope.addClass('d-none') : this.spanSortName.addClass('d-none');
             if (this.sort.direction<0) {
                 (this.sort.type=='name') ? this.spanSortName.addClass('sort-desc') : this.spanSortScope.addClass('sort-desc');
             }
@@ -343,8 +343,8 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
         onSortNames: function(type) {
             if (type !== this.sort.type) {
                 this.sort = {type: type, direction: 1};
-                this.spanSortName.toggleClass('hidden');
-                this.spanSortScope.toggleClass('hidden');
+                this.spanSortName.toggleClass('d-none');
+                this.spanSortScope.toggleClass('d-none');
             } else {
                 this.sort.direction = -this.sort.direction;
             }
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 10f66d9d8..79a383ea3 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -1706,14 +1706,14 @@ define([
         hideShapeOnlySettings: function(value) {
             if (this._state.HideShapeOnlySettings !== value) {
                 this._state.HideShapeOnlySettings = value;
-                this.ShapeOnlySettings.toggleClass('hidden', value==true);
+                this.ShapeOnlySettings.toggleClass('d-none', value==true);
             }
         },
 
         hideChangeTypeSettings: function(value) {
             if (this._state.HideChangeTypeSettings !== value) {
                 this._state.HideChangeTypeSettings = value;
-                this.CanChangeType.toggleClass('hidden', value==true);
+                this.CanChangeType.toggleClass('d-none', value==true);
             }
         },
 
diff --git a/apps/spreadsheeteditor/main/app/view/SignatureSettings.js b/apps/spreadsheeteditor/main/app/view/SignatureSettings.js
index b05e67694..01bc5b941 100644
--- a/apps/spreadsheeteditor/main/app/view/SignatureSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/SignatureSettings.js
@@ -196,9 +196,9 @@ define([
             this.viewValidList.store.reset(validSignatures);
             this.viewInvalidList.store.reset(invalidSignatures);
 
-            this.$el.find('.requested').toggleClass('hidden', !me._state.hasRequested);
-            this.$el.find('.valid').toggleClass('hidden', !me._state.hasValid);
-            this.$el.find('.invalid').toggleClass('hidden', !me._state.hasInvalid);
+            this.$el.find('.requested').toggleClass('d-none', !me._state.hasRequested);
+            this.$el.find('.valid').toggleClass('d-none', !me._state.hasValid);
+            this.$el.find('.invalid').toggleClass('d-none', !me._state.hasInvalid);
 
             me.disableEditing(me._state.hasValid || me._state.hasInvalid);
         },