Merge branch 'develop' into feature/user-avatars

.github/workflows/ci-upload-help.yml

@@ -0,0 +1,77 @@
+name: "Build and upload helps"
+
+on:
+    create:
+    push:
+        branches:
+            - 'release/*'
+            - 'hotfix/*'
+        paths:
+            - '**/resources/help/**'
+
+
+jobs:
+    build-help:
+        name: "Build Apps and upload"
+        runs-on: ubuntu-latest
+        if: startsWith(github.ref, 'refs/heads/release/') || startsWith(github.ref, 'refs/heads/hotfix')
+        steps:
+
+          - name: Checkout Web-Apps
+            uses: actions/checkout@v3
+            with:
+                repository: onlyoffice/web-apps
+                ref: ${{github.ref}}
+                path: 'web-apps'
+
+          - name: Checkout SDKJS
+            uses: actions/checkout@v3
+            with:
+                repository: onlyoffice/sdkjs
+                ref: ${{github.ref}}
+                path: 'sdkjs'
+              
+          - name: Use Node.js 16
+            uses: actions/setup-node@v3
+            with:
+                node-version: 16   
+
+          - name: Configure AWS Credentials
+            uses: aws-actions/configure-aws-credentials@v2
+            with:
+              aws-access-key-id: ${{secrets.AWS_ACCESS_KEY_ID}}
+              aws-secret-access-key: ${{secrets.AWS_SECRET_ACCESS_KEY}}
+              aws-region: us-east-1
+
+          - name: Export tag and directory path
+            id: tag-dir
+            run: |
+                BRANCH_NAME=${GITHUB_REF#refs/heads/}
+                export TAG=${BRANCH_NAME#*/}
+                echo "PATH=/install/desktop/editors/help/$TAG/apps" >> $GITHUB_OUTPUT
+
+          - name: Build
+            run: |
+                cd web-apps/build
+                ./sprites.sh
+                npm install
+                grunt
+
+          - name: Upload
+            env:
+                PATH: ${{steps.tag-dir.outputs.PATH}}
+            run: |
+                aws s3 sync ./web-apps/deploy/web-apps/apps/  \
+                ${{secrets.AWS_BUCKET_URL}}${PATH} \
+                --acl public-read \
+                --metadata-directive REPLACE
+
+
+          - name: Invalidate AWS CLOUDFRONT cache
+            env:
+                PATH: ${{steps.tag-dir.outputs.PATH}}
+            run: |
+                aws cloudfront create-invalidation \
+                    --distribution-id ${{ secrets.AWS_DISTRIBUTION_ID }} \
+                    --paths \
+                    "${PATH}/*"

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

@@ -340,6 +340,9 @@ define([
             me.style        = me.options.style;
             me.rendered     = false;
 
+            // if ( /(?<!-)svg-icon(?!-)/.test(me.options.iconCls) )
+            //     me.options.scaling = false;
+
             if ( me.options.scaling === false && me.options.iconCls) {
                 me.iconCls = me.options.iconCls + ' scaling-off';
             }

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

@@ -210,6 +210,7 @@ define([
 
         onEyedropperStart: function () {
             this.trigger('eyedropper:start', this);
+            Common.NotificationCenter.trigger('eyedropper:start');
         },
 
         eyedropperEnd: function (r, g, b) {

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

@@ -82,6 +82,7 @@ define([
                 disabled    : false,
                 menuCls     : '',
                 menuStyle   : '',
+                restoreMenuHeight: true,
                 displayField: 'displayValue',
                 valueField  : 'value',
                 search      : false,
@@ -129,6 +130,9 @@ define([
                 this.search         = me.options.search;
                 this.scrollAlwaysVisible = me.options.scrollAlwaysVisible;
                 this.focusWhenNoSelection = (me.options.focusWhenNoSelection!==false);
+
+                this.restoreMenuHeight = me.options.restoreMenuHeight;
+
                 me.rendered         = me.options.rendered || false;
 
                 this.lastValue = null;
@@ -329,6 +333,7 @@ define([
             },
 
             onAfterShowMenu: function(e) {
+                this.alignMenuPosition();
                 var $list = $(this.el).find('ul'),
                     $selected = $list.find('> li.selected');
 
@@ -355,6 +360,34 @@ define([
                 this._search = {};
             },
 
+            alignMenuPosition: function () {
+                if (this.restoreMenuHeight) {
+                    var $list = $(this.el).find('ul');
+                    if (typeof this.restoreMenuHeight !== "number") {
+                        if ($list.hasClass('scrollable-menu')) {
+                            var maxHeight = parseFloat($list.css('max-height'));
+                            this.restoreMenuHeight = maxHeight ? maxHeight : 100000;
+                        } else {
+                            this.restoreMenuHeight = 100000;
+                        }
+                    }
+                    var cg = Common.Utils.croppedGeometry(),
+                        docH = cg.height - 10,
+                        menuH = $list.outerHeight(),
+                        menuTop = $list.get(0).getBoundingClientRect().top,
+                        newH = menuH;
+
+                    if (menuH < this.restoreMenuHeight)
+                        newH = this.restoreMenuHeight;
+
+                    if (menuTop + newH > docH)
+                        newH = docH - menuTop;
+
+                    if (newH !== menuH)
+                        $list.css('max-height', newH + 'px');
+                }
+            },
+
             onBeforeHideMenu: function(e) {
                 this.trigger('hide:before', this, e);
 

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

@@ -58,7 +58,13 @@ define([
                 {ratio: 1.25,   path: '../../../../sdkjs/common/Images/fonts_thumbnail' + postfix + '@1.25x.png', width: iconWidth * 1.25, height: iconHeight * 1.25},
                 {ratio: 1.5,    path: '../../../../sdkjs/common/Images/fonts_thumbnail' + postfix + '@1.5x.png', width: iconWidth * 1.5, height: iconHeight * 1.5},
                 {ratio: 1.75,   path: '../../../../sdkjs/common/Images/fonts_thumbnail' + postfix + '@1.75x.png', width: iconWidth * 1.75, height: iconHeight * 1.75},
-                {ratio: 2,      path: '../../../../sdkjs/common/Images/fonts_thumbnail' + postfix + '@2x.png', width: iconWidth * 2, height: iconHeight * 2}
+                {ratio: 2,      path: '../../../../sdkjs/common/Images/fonts_thumbnail' + postfix + '@2x.png', width: iconWidth * 2, height: iconHeight * 2},
+                /*{ratio: 2.5,    path: '../../../../sdkjs/common/Images/fonts_thumbnail' + postfix + '@2.5x.png', width: iconWidth * 2.5, height: iconHeight * 2.5},
+                {ratio: 3,      path: '../../../../sdkjs/common/Images/fonts_thumbnail' + postfix + '@3x.png', width: iconWidth * 3, height: iconHeight * 3},
+                {ratio: 3.5,    path: '../../../../sdkjs/common/Images/fonts_thumbnail' + postfix + '@3.5x.png', width: iconWidth * 3.5, height: iconHeight * 3.5},
+                {ratio: 4,      path: '../../../../sdkjs/common/Images/fonts_thumbnail' + postfix + '@4x.png', width: iconWidth * 4, height: iconHeight * 4},
+                {ratio: 4.5,    path: '../../../../sdkjs/common/Images/fonts_thumbnail' + postfix + '@4.5x.png', width: iconWidth * 4.5, height: iconHeight * 4.5},
+                {ratio: 5,      path: '../../../../sdkjs/common/Images/fonts_thumbnail' + postfix + '@5x.png', width: iconWidth * 5, height: iconHeight * 5},*/
             ],
             thumbIdx = 0,
             listItemHeight  = 28,
@@ -71,6 +77,12 @@ define([
             thumbs[2].path     = Common.Controllers.Desktop.call('getFontsSprite', '@1.5x');
             thumbs[3].path     = Common.Controllers.Desktop.call('getFontsSprite', '@1.75x');
             thumbs[4].path     = Common.Controllers.Desktop.call('getFontsSprite', '@2x');
+            /*thumbs[5].path     = Common.Controllers.Desktop.call('getFontsSprite', '@2.5x');
+            thumbs[6].path     = Common.Controllers.Desktop.call('getFontsSprite', '@3x');
+            thumbs[7].path     = Common.Controllers.Desktop.call('getFontsSprite', '@3.5x');
+            thumbs[8].path     = Common.Controllers.Desktop.call('getFontsSprite', '@4x');
+            thumbs[9].path     = Common.Controllers.Desktop.call('getFontsSprite', '@4.5x');
+            thumbs[10].path    = Common.Controllers.Desktop.call('getFontsSprite', '@5x');*/
         }
 
         var bestDistance = Math.abs(applicationPixelRatio-thumbs[0].ratio);
@@ -648,6 +660,7 @@ define([
             },
 
             onAfterShowMenu: function(e) {
+                this.alignMenuPosition();
                 if (this.recent > 0) {
                     if (this.scroller && !this._scrollerIsInited) {
                         this.scroller.update();

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

@@ -49,17 +49,32 @@ define([
     Common.UI.Mixtbar = Common.UI.BaseView.extend((function () {
         var $boxTabs;
         var $scrollL;
+        var $scrollR;
         var optsFold = {timeout: 2000};
         var config = {};
         var btnsMore = [];
 
+        function setScrollButtonsDisabeled(){
+            var scrollLeft = $boxTabs.scrollLeft();
+            $scrollL.toggleClass('disabled', scrollLeft==0);
+            $scrollR.toggleClass('disabled', Math.round(scrollLeft) == $boxTabs[0].scrollWidth - $boxTabs[0].clientWidth);
+        }
+
         var onScrollTabs = function(opts, e) {
+            if($(e.target).hasClass('disabled')) return;
             var sv = $boxTabs.scrollLeft();
             if (sv || opts == 'right' || Common.UI.isRTL() && opts == 'left') {
-                $boxTabs.animate({scrollLeft: opts == 'left' ? sv - 100 : sv + 100}, 200);
+                $boxTabs.animate({scrollLeft: opts == 'left' ? sv - 100 : sv + 100}, 200, setScrollButtonsDisabeled);
             }
         };
 
+        var onWheelTabs = function(e) {
+            e.preventDefault();
+            var deltaX = e.deltaX || e.detail || e.deltaY;
+            $boxTabs.scrollLeft($boxTabs.scrollLeft() + (deltaX * 60));
+            setScrollButtonsDisabeled();
+        };
+
         function onTabDblclick(e) {
             var tab = $(e.currentTarget).find('> a[data-tab]').data('tab');
             if ( this.dblclick_el == tab ) {
@@ -149,7 +164,7 @@ define([
                 me.$panels = me.$boxpanels.find('> .panel');
 
                 optsFold.$bar = me.$('.toolbar');
-                var $scrollR = me.$('.tabs .scroll.right');
+                $scrollR = me.$('.tabs .scroll.right');
                 $scrollL = me.$('.tabs .scroll.left');
 
                 $scrollL.on('click', onScrollTabs.bind(this, 'left'));
@@ -157,6 +172,7 @@ define([
 
                 $boxTabs.on('dblclick', '> .ribtab', onTabDblclick.bind(this));
                 $boxTabs.on('click', '> .ribtab', me.onTabClick.bind(this));
+                $boxTabs.on('mousewheel', onWheelTabs);
             },
 
             isTabActive: function(tag) {
@@ -249,8 +265,10 @@ define([
 
             onResizeTabs: function(e) {
                 if ( this.hasTabInvisible() ) {
-                    if ( !$boxTabs.parent().hasClass('short') )
+                    if ( !$boxTabs.parent().hasClass('short') ) {
                         $boxTabs.parent().addClass('short');
+                        setScrollButtonsDisabeled();
+                    }
                 } else
                 if ( $boxTabs.parent().hasClass('short') ) {
                     $boxTabs.parent().removeClass('short');

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

@@ -169,7 +169,7 @@ define([
             initialize : function(options) {
                 options.store = options.store || new Common.UI.TreeViewStore();
                 options.emptyItemText = options.emptyItemText || '';
-                options.itemTemplate = options.itemTemplate || !Common.UI.isRTL() ? _.template([
+                options.itemTemplate = options.itemTemplate || (!Common.UI.isRTL() ? _.template([
                     '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'hidden' + '<% } %>" 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>',
@@ -195,7 +195,7 @@ define([
                         '<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
                     '<% } %>',
                     '</div>'
-                ].join(''));
+                ].join('')));
                 Common.UI.DataView.prototype.initialize.call(this, options);
             },
 
@@ -240,7 +240,7 @@ define([
 
             onClickItem: function(view, record, e) {
                 var btn = $(e.target);
-                if (btn && btn.hasClass('tree-caret')) {
+                if (btn && (btn.hasClass('tree-caret') || btn.hasClass('btn-tree-caret'))) {
                     var tip = view.$el.data('bs.tooltip');
                     if (tip) (tip.tip()).remove();
 

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

@@ -475,7 +475,7 @@ define([
             
             var template =  '<div class="info-box">' +
                                 '<% if (typeof iconCls !== "undefined") { %><div class="icon <%= iconCls %>"></div><% } %>' +
-                                '<div class="text" dir="ltr" <% if (typeof iconCls == "undefined") { %> style="padding-left:10px;" <% } %>><span><%= msg %></span>' +
+                                '<div class="text' + '<% if (typeof iconCls == "undefined") { %> padding-left-10<% } %>' + '"><span><%= msg %></span>' +
                                     '<% if (dontshow) { %><div class="dont-show-checkbox"></div><% } %>' +
                                 '</div>' +
                             '</div>' +
@@ -497,22 +497,27 @@ define([
                 var header      = window.getChild('.header');
                 var body        = window.getChild('.body');
                 var icon        = window.getChild('.icon'),
-                    icon_height = (icon.length>0) ? icon.height() : 0;
+                    icon_height = (icon.length>0) ? icon.height() : 0,
+                    icon_width = (icon.length>0) ? $(icon).outerWidth(true) : 0;
                 var check       = window.getChild('.info-box .dont-show-checkbox');
 
                 if (!options.dontshow) body.css('padding-bottom', '10px');
 
                 if (options.maxwidth && options.width=='auto') {
-                    if ((text.position().left + text.width() + parseInt(text_cnt.css('padding-right'))) > options.maxwidth)
+                    var width = !Common.UI.isRTL() ? (text.position().left + text.width() + parseInt(text_cnt.css('padding-right'))) :
+                        (parseInt(text_cnt.css('padding-right')) + icon_width + text.width() + parseInt(text_cnt.css('padding-left')));
+                    if (width > options.maxwidth)
                         options.width = options.maxwidth;
                 }
                 if (options.width=='auto') {
                     text_cnt.height(Math.max(text.height(), icon_height) + ((check.length>0) ? (check.height() + parseInt(check.css('margin-top'))) : 0));
                     body.height(parseInt(text_cnt.css('height')) + parseInt(footer.css('height')));
                     var span_el = check.find('span');
-                    window.setSize(Math.max(text.width(), span_el.length>0 ? span_el.position().left + span_el.width() : 0) + text.position().left + parseInt(text_cnt.css('padding-right')) +
-                        (Common.UI.isRTL() && icon.length > 0 ? icon.width() + parseInt(icon.css('margin-right')) + parseInt(icon.css('margin-left')) : 0),
-                        parseInt(body.css('height')) + parseInt(header.css('height')));
+                    var width = !Common.UI.isRTL() ?
+                        (Math.max(text.width(), span_el.length>0 ? span_el.position().left + span_el.width() : 0) + text.position().left + parseInt(text_cnt.css('padding-right'))) :
+                        (parseInt(text_cnt.css('padding-right')) + icon_width + parseInt(text_cnt.css('padding-left')) +
+                            (Math.max(text.width(), check.length>0 ? $(check).find('.checkbox-indeterminate').outerWidth(true) : 0)));
+                    window.setSize(width, parseInt(body.css('height')) + parseInt(header.css('height')));
                 } else {
                     text.css('white-space', 'normal');
                     window.setWidth(options.width);

apps/common/main/lib/controller/Desktop.js

@@ -376,7 +376,7 @@ define([
                         cls: 'btn-header',
                         iconCls: 'toolbar__icon icon--inverse btn-home',
                         visible: false,
-                        hint: 'Show Main window',
+                        hint: Common.Locale.get('hintBtnHome', {name:"Common.Controllers.Desktop", default: 'Show Main window'}),
                         dataHint:'0',
                         dataHintDirection: 'right',
                         dataHintOffset: '10, -18',

apps/common/main/lib/util/define.js

@@ -1074,5 +1074,4 @@ define(function(){ 'use strict';
             },
         }
     })(), Common.define.smartArt || {});
-
 });

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

@@ -151,7 +151,7 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="list-item" style="pointer-events:none;width: 100%;display:flex;">',
-                        '<div style="width:110px;padding-right: 5px;overflow: hidden;text-overflow: ellipsis;<% if (defaultDisabled) { %> font-style:italic; opacity: 0.5;<% } %>"><%= replaced %></div>',
+                        '<div class="padding-right-5" style="width:110px;overflow: hidden;text-overflow: ellipsis;<% if (defaultDisabled) { %> font-style:italic; opacity: 0.5;<% } %>"><%= replaced %></div>',
                         '<div style="width:230px;overflow-x: clip;overflow-y:visible;text-overflow: ellipsis;flex-grow:1;font-family: Cambria Math;font-size:13px;white-space: nowrap;<% if (defaultDisabled) { %> font-style:italic; opacity: 0.5;<% } %>"><%= by %></div>',
                     '</div>'
                 ].join('')),

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

@@ -82,7 +82,7 @@ define([
                 enableKeyEvents: false,
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="history-item-wrap ' + '<% if (!isVisible) { %>' + 'hidden' + '<% } %>' + '" ',
-                    'style="display: block; ' + '<% if (!isRevision) { %>' + 'padding-left: 40px;' + '<% } %>' + '<% if (canRestore && selected) { %>' + 'padding-bottom: 6px;' + '<% } %>' +'">',
+                    'style="display: block; ' + '<% if (!isRevision) { %>' + (Common.UI.isRTL() ? 'padding-right: 40px;' : 'padding-left: 40px;') + '<% } %>' + '<% if (canRestore && selected) { %>' + 'padding-bottom: 6px;' + '<% } %>' +'">',
                         '<div class="user-date"><%= created %></div>',
                         '<% if (markedAsVersion) { %>',
                         '<div class="user-version">' + this.textVer + '<%=version%></div>',

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

@@ -84,29 +84,29 @@ define([
                     '<div style="height:120px;">',
                         '<table cols="3">',
                             '<tr>',
-                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtType + '</label>',
                                 '</td>',
-                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-numbering-format" class="input-group-nr" style="width: 105px;"></div>',
                                     '<div id="id-dlg-list-bullet-format" class="input-group-nr" style="width: 105px;"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
                             '</tr>',
                             '<tr class="image">',
-                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtImport + '</label>',
                                 '</td>',
-                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-image" style="width: 105px;"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
                             '</tr>',
                             '<tr>',
-                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtSize + '</label>',
                                 '</td>',
-                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-size"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;">',
@@ -114,19 +114,19 @@ define([
                                 '</td>',
                             '</tr>',
                             '<tr class="numbering">',
-                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text" style="white-space: nowrap;">' + this.txtStart + '</label>',
                                 '</td>',
-                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-start"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
                             '</tr>',
                             '<tr class="color">',
-                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtColor + '</label>',
                                 '</td>',
-                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-color"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',

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

@@ -99,7 +99,7 @@ define([
                         '<% if (warning) { %>',
                         '<div>',
                             '<div class="icon warn"></div>',
-                            '<div style="padding-left: 50px;"><div style="font-size: 12px;">' + (typeof _options.warningMsg=='string' ? _options.warningMsg : t.txtProtected) + '</div>',
+                            '<div class="padding-left-50"><div style="font-size: 12px;">' + (typeof _options.warningMsg=='string' ? _options.warningMsg : t.txtProtected) + '</div>',
                                 '<label class="header" style="margin-top: 15px;">' + t.txtPassword + '</label>',
                                 '<div id="id-password-txt" style="width: 290px;"></div></div>',
                         '</div>',
@@ -345,7 +345,7 @@ define([
                         '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
                         '<div style="display: inline-block;"><%= item.displayValue %></div>',
-                        '<label style="text-align: right;width:' + lcid_width + 'px;"><%= item.lcid %></label>',
+                        '<label class="text-align-right" style="width:' + lcid_width + 'px;"><%= item.lcid %></label>',
                         '</a></li>',
                         '<% }); %>'
                     ].join(''));

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

@@ -90,10 +90,10 @@ define([
                 '<div class="group">' +
                     '<span id="btn-review-on" class="btn-slot text x-huge"></span>' +
                 '</div>' +
-                '<div class="group no-group-mask review" style="padding-left: 0;">' +
+                '<div class="group no-group-mask review" style="padding-left: 0;padding-right:0;">' +
                     '<span id="btn-review-view" class="btn-slot text x-huge"></span>' +
                 '</div>' +
-                '<div class="group move-changes" style="padding-left: 0;">' +
+                '<div class="group move-changes" style="padding-left: 0;padding-right:0;">' +
                     '<span id="btn-change-prev" class="btn-slot text x-huge"></span>' +
                     '<span id="btn-change-next" class="btn-slot text x-huge"></span>' +
                     '<span id="btn-change-accept" class="btn-slot text x-huge"></span>' +

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

@@ -104,7 +104,7 @@ define([
                     '<table style="margin-top: 30px;">',
                         '<tr>',
                             '<td><label style="font-weight: bold;margin-bottom: 3px;">' + this.textCertificate + '</label></td>' +
-                            '<td rowspan="2" style="vertical-align: top; padding-left: 20px;"><button id="id-dlg-sign-change" class="btn btn-text-default float-right">' + this.textSelect + '</button></td>',
+                            '<td rowspan="2" class="padding-left-20" style="vertical-align: top;"><button id="id-dlg-sign-change" class="btn btn-text-default float-right">' + this.textSelect + '</button></td>',
                         '</tr>',
                         '<tr><td><div id="id-dlg-sign-certificate" class="hidden" style="max-width: 240px;overflow: hidden;white-space: nowrap;"></td></tr>',
                     '</table>',

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

@@ -416,11 +416,11 @@ define([
                     '<div id="symbol-table-pnl-symbols">',
                         '<table cols="2" style="width: 100%;max-width: 497px;">',
                             '<tr>',
-                                '<td class="padding-right" style="padding-bottom: 8px;width: 50%;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;width: 50%;">',
                                     '<label class="input-label">' + this.textFont + '</label>',
                                     '<div id="symbol-table-cmb-fonts"></div>',
                                 '</td>',
-                                '<td class="padding-left" style="padding-bottom: 8px;">',
+                                '<td class="padding-left-5" style="padding-bottom: 8px;">',
                                     '<label class="input-label">' + this.textRange + '</label>',
                                     '<div id="symbol-table-cmb-range"></div>',
                                 '</td>',
@@ -449,17 +449,17 @@ define([
                         '</table>',
                         '<table cols="2" style="width: 100%;max-width: 497px;">',
                             '<tr>',
-                                '<td class="padding-right" style="width: 50%;">',
+                                '<td class="padding-right-5" style="width: 50%;">',
                                     '<label class="input-label">' + this.textCode + '</label>',
                                 '</td>',
-                                '<td class="padding-left">',
+                                '<td class="padding-left-5">',
                                 '</td>',
                             '</tr>',
                             '<tr>',
-                                '<td class="padding-right">',
+                                '<td class="padding-right-5">',
                                     '<div id="symbol-table-text-code" oo_editor_input="true"></div>',
                                 '</td>',
-                                '<td class="padding-left">',
+                                '<td class="padding-left-5">',
                                     '<div id="symbol-table-label-font" style="overflow: hidden; text-overflow: ellipsis;white-space: nowrap;max-width: 160px;"></div>',
                                 '</td>',
                             '</tr>',
@@ -754,8 +754,8 @@ define([
                 cls: 'dbl-clickable',
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="list-item" style="width: 100%;display:flex;">',
-                        '<div style="width:70px;text-align: center; padding-right: 5px;"><%= symbol %></div>',
-                        '<div style="flex-grow:1;padding-right: 5px;"><%= description %></div>',
+                        '<div class="padding-right-5" style="width:70px;text-align: center;"><%= symbol %></div>',
+                        '<div class="padding-right-5" style="flex-grow:1;"><%= description %></div>',
                         '<% if (' + this.showShortcutKey + ') { %>',
                             '<div style="width:105px;"><%= shortcutKey %></div>',
                         '<% } %>',

apps/common/main/resources/img/toolbar/2.5x/btn-clearstyle.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
-  <path fill="#000" fill-rule="evenodd" d="M13.268 4.56a2.5 2.5 0 0 0-3.536 0L3.56 10.733a2.5 2.5 0 0 0 0 3.536l1.586 1.586.147.146H15v-1h-4.293l4.732-4.732a2.5 2.5 0 0 0 0-3.536l-2.171-2.171ZM9.293 15l3.5-3.5L8.5 7.207 4.267 11.44a1.5 1.5 0 0 0 0 2.12L5.707 15h3.586Zm-.086-8.5 4.293 4.293 1.232-1.232a1.5 1.5 0 0 0 0-2.121L12.56 5.268a1.5 1.5 0 0 0-2.121 0L9.207 6.5Z" clip-rule="evenodd"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.41406 16.0001C5.88363 16.0001 5.37492 15.7894 4.99985 15.4143L3.49985 13.9143C2.7188 13.1333 2.7188 11.8669 3.49985 11.0859L10.0856 4.50009C10.8667 3.71904 12.133 3.71905 12.9141 4.50009L15.4998 7.08588C16.2809 7.86693 16.2809 9.13326 15.4998 9.91431L10.4141 15.0001H14.9998V16.0001H6.41406ZM8.99985 15.0001L13.0013 10.9987L9.00128 6.99867L4.20696 11.793C3.81643 12.1835 3.81643 12.8167 4.20696 13.2072L5.70696 14.7072C5.89449 14.8947 6.14885 15.0001 6.41406 15.0001L8.99985 15.0001ZM12.207 5.2072C11.8164 4.81668 11.1833 4.81668 10.7927 5.2072L9.70838 6.29156L13.7084 10.2916L14.7927 9.2072C15.1833 8.81668 15.1833 8.18351 14.7927 7.79299L12.207 5.2072Z" fill="black"/>
 </svg>

apps/common/main/resources/img/toolbar/2.5x/btn-close.svg

@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10.7071L5.35359 15.3536L4.64648 14.6465L9.29293 10L4.64648 5.35359L5.35359 4.64648L10 9.29293L14.6465 4.64648L15.3536 5.35359L10.7071 10L15.3536 14.6465L14.6465 15.3536L10 10.7071Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.81055 5.70711L9.29585 10.1924L4.86328 14.625L5.57039 15.3321L10.003 10.8995L14.4355 15.3321L15.1427 14.625L10.7101 10.1924L15.1954 5.70711L14.4883 5L10.003 9.48533L5.51766 5L4.81055 5.70711Z" fill="black"/>
 </svg>

apps/common/main/resources/img/toolbar/2.5x/btn-equation.svg

@@ -1,4 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.60728 13.6108L6.3042 3.5H18V4.5H7.15035L5.03856 17.0828L4.04966 17.0647L3.37921 11.9286H2V10.9286H4.25716L4.60728 13.6108Z" fill="black"/>
-<path d="M12.3516 9.74219C12.2214 9.47135 12.0286 9.20052 11.7734 8.92969L9.6875 9.29688V9.57812C9.84375 9.56771 9.98177 9.5625 10.1016 9.5625C10.4766 9.5625 10.7604 9.63281 10.9531 9.77344C11.1458 9.91406 11.3021 10.1536 11.4219 10.4922C11.4479 10.5651 11.6224 11.2344 11.9453 12.5C11.8151 12.7917 11.5391 13.2656 11.1172 13.9219C10.6953 14.5781 10.362 15.0052 10.1172 15.2031C10.0182 15.2865 9.9375 15.3281 9.875 15.3281C9.80208 15.3281 9.69792 15.2682 9.5625 15.1484C9.375 14.9818 9.19792 14.8984 9.03125 14.8984C8.86458 14.8984 8.72396 14.9557 8.60938 15.0703C8.49479 15.1849 8.4375 15.3281 8.4375 15.5C8.4375 15.6927 8.5 15.8464 8.625 15.9609C8.79688 16.112 8.98698 16.1875 9.19531 16.1875C9.49219 16.1875 9.79948 16.0573 10.1172 15.7969C10.6068 15.3906 11.2578 14.4818 12.0703 13.0703C12.4141 14.6172 12.6406 15.4922 12.75 15.6953C12.9219 16.0234 13.1536 16.1875 13.4453 16.1875C13.6432 16.1875 13.8854 16.0729 14.1719 15.8438C14.6771 15.4375 15.0938 14.9271 15.4219 14.3125L15.1484 14.1719C14.9453 14.5573 14.7005 14.8698 14.4141 15.1094C14.2682 15.2292 14.1406 15.2891 14.0312 15.2891C13.9635 15.2891 13.8958 15.25 13.8281 15.1719C13.7604 15.0885 13.6771 14.8411 13.5781 14.4297L12.9375 11.7422C13.3854 10.9661 13.7708 10.4427 14.0938 10.1719C14.2656 10.026 14.4141 9.95312 14.5391 9.95312C14.6224 9.95312 14.7865 9.99479 15.0312 10.0781C15.1562 10.125 15.2734 10.1484 15.3828 10.1484C15.5703 10.1484 15.737 10.0833 15.8828 9.95312C15.9609 9.88021 16 9.74479 16 9.54688C16 9.375 15.9323 9.22917 15.7969 9.10938C15.6667 8.98958 15.4896 8.92969 15.2656 8.92969C15.1146 8.92969 14.9766 8.95573 14.8516 9.00781C14.6536 9.09115 14.4245 9.2474 14.1641 9.47656C13.9036 9.70052 13.6823 9.9375 13.5 10.1875L12.8125 11.2188C12.599 10.4219 12.4453 9.92969 12.3516 9.74219Z" fill="black"/>
+<path d="M4.60728 13.6108L6.3042 4H18V5H7.15035L5.03856 17.0828L4.04966 17.0648L3.37921 11.9286H2V10.9286H4.25716L4.60728 13.6108Z" fill="black"/>
+<path d="M12.3516 9.74225C12.2214 9.47142 12.0286 9.20059 11.7734 8.92975L9.6875 9.29694V9.57819C9.84375 9.56777 9.98177 9.56257 10.1016 9.56257C10.4766 9.56257 10.7604 9.63288 10.9531 9.7735C11.1458 9.91413 11.3021 10.1537 11.4219 10.4923C11.4479 10.5652 11.6224 11.2344 11.9453 12.5001C11.8151 12.7917 11.5391 13.2657 11.1172 13.9219C10.6953 14.5782 10.362 15.0053 10.1172 15.2032C10.0182 15.2865 9.9375 15.3282 9.875 15.3282C9.80208 15.3282 9.69792 15.2683 9.5625 15.1485C9.375 14.9818 9.19792 14.8985 9.03125 14.8985C8.86458 14.8985 8.72396 14.9558 8.60938 15.0704C8.49479 15.185 8.4375 15.3282 8.4375 15.5001C8.4375 15.6928 8.5 15.8464 8.625 15.961C8.79688 16.112 8.98698 16.1876 9.19531 16.1876C9.49219 16.1876 9.79948 16.0574 10.1172 15.7969C10.6068 15.3907 11.2578 14.4818 12.0703 13.0704C12.4141 14.6173 12.6406 15.4923 12.75 15.6954C12.9219 16.0235 13.1536 16.1876 13.4453 16.1876C13.6432 16.1876 13.8854 16.073 14.1719 15.8438C14.6771 15.4376 15.0938 14.9271 15.4219 14.3126L15.1484 14.1719C14.9453 14.5574 14.7005 14.8699 14.4141 15.1094C14.2682 15.2292 14.1406 15.2891 14.0312 15.2891C13.9635 15.2891 13.8958 15.2501 13.8281 15.1719C13.7604 15.0886 13.6771 14.8412 13.5781 14.4298L12.9375 11.7423C13.3854 10.9662 13.7708 10.4428 14.0938 10.1719C14.2656 10.0261 14.4141 9.95319 14.5391 9.95319C14.6224 9.95319 14.7865 9.99486 15.0312 10.0782C15.1562 10.1251 15.2734 10.1485 15.3828 10.1485C15.5703 10.1485 15.737 10.0834 15.8828 9.95319C15.9609 9.88027 16 9.74486 16 9.54694C16 9.37507 15.9323 9.22923 15.7969 9.10944C15.6667 8.98965 15.4896 8.92975 15.2656 8.92975C15.1146 8.92975 14.9766 8.9558 14.8516 9.00788C14.6536 9.09121 14.4245 9.24746 14.1641 9.47663C13.9036 9.70059 13.6823 9.93757 13.5 10.1876L12.8125 11.2188C12.599 10.4219 12.4453 9.92975 12.3516 9.74225Z" fill="black"/>
 </svg>

apps/common/main/resources/img/toolbar/2.5x/btn-highlight.svg

@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
-  <path fill="#000" fill-rule="evenodd" d="M13.854 3.56a.5.5 0 0 0-.707 0l-.94.94L14.5 6.793l.94-.94a.5.5 0 0 0 0-.707l-1.586-1.585ZM6.56 10.147l4.94-4.94L13.793 7.5l-4.94 4.94a.5.5 0 0 1-.707 0l-1.585-1.587a.5.5 0 0 1 0-.707Zm5.878-7.293a1.5 1.5 0 0 1 2.122 0l1.585 1.586a1.5 1.5 0 0 1 0 2.122L9.56 13.147a1.5 1.5 0 0 1-2.06.06L6.708 14H3.293l2.502-2.502a1.5 1.5 0 0 1 .059-2.059l6.585-6.586ZM4 17h12v1H4v-1Zm-1 2v-3h14v3H3Z" clip-rule="evenodd"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 3.08564L15.9142 2.49985C15.1332 1.7188 13.8668 1.7188 13.0858 2.49985L6.5 9.08564C5.87891 9.70672 5.75171 10.6347 6.1184 11.3815L3.5 13.9998H6.5L7.6184 12.8815C8.36518 13.2481 9.29313 13.1209 9.91421 12.4998L16.5 5.91406C17.281 5.13301 17.281 3.86669 16.5 3.08564ZM13.7929 3.20696C14.1834 2.81643 14.8166 2.81643 15.2071 3.20696L15.7929 3.79274C16.1834 4.18327 16.1834 4.81643 15.7929 5.20696L15.3536 5.6463L13.3536 3.6463L13.7929 3.20696ZM12.6464 4.3534L7.20711 9.79274C6.81658 10.1833 6.81658 10.8164 7.20711 11.207L7.79289 11.7927C8.18342 12.1833 8.81658 12.1833 9.20711 11.7927L14.6464 6.3534L12.6464 4.3534Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 19V16H17V19H3ZM4 17H16V18H4V17Z" fill="black"/>
 </svg>

apps/common/main/resources/img/toolbar/2.5x/btn-paracolor.svg

@@ -1 +1,3 @@
-<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.353 2.646 8.5 4.793l.94-.94a1.5 1.5 0 0 1 2.12 0l3.586 3.586a1.5 1.5 0 0 1 0 2.122l-5.585 5.585a1.5 1.5 0 0 1-2.122 0l-3.586-3.585a1.5 1.5 0 0 1 0-2.122L7.793 5.5 5.646 3.354l.707-.708zm4.293 5.708L8.5 6.207l-3.94 3.94a.5.5 0 0 0 0 .707l3.586 3.585a.5.5 0 0 0 .707 0l5.586-5.585a.5.5 0 0 0 0-.708l-3.586-3.585a.5.5 0 0 0-.707 0l-.939.939 2.146 2.146-.707.708z" fill="#000"/><path d="M15.5 15a1.5 1.5 0 0 0 1.5-1.5c0-.828-1.5-2.5-1.5-2.5S14 12.672 14 13.5a1.5 1.5 0 0 0 1.5 1.5z" fill="#000"/><path d="M3.5 16.5h13v2h-13v-2z" stroke="#000"/></svg>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.6463 6.35359L9.6463 8.35359L10.3534 7.64648L8.3534 5.64648L8.79274 5.20714C9.18327 4.81662 9.81643 4.81662 10.207 5.20714L12.7927 7.79293C13.1833 8.18346 13.1833 8.81662 12.7927 9.20714L8.20696 13.7929C7.81643 14.1835 7.18327 14.1835 6.79274 13.7929L4.20696 11.2071C3.81643 10.8166 3.81643 10.1835 4.20696 9.79293L7.6463 6.35359ZM6.93919 5.64648L3.49985 9.08582C2.7188 9.86687 2.7188 11.1332 3.49985 11.9143L6.08564 14.5C6.86668 15.2811 8.13301 15.2811 8.91406 14.5L13.4998 9.91425C14.2809 9.1332 14.2809 7.86687 13.4999 7.08582L10.9141 4.50004C10.133 3.71899 8.86668 3.71899 8.08564 4.50004L7.6463 4.93938L5.3534 2.64648L4.6463 3.35359L6.93919 5.64648ZM14.4998 15C15.3283 15 15.9998 14.3285 15.9998 13.5C15.9998 12.6716 14.4998 11 14.4998 11C14.4998 11 12.9998 12.6716 12.9998 13.5C12.9998 14.3285 13.6714 15 14.4998 15ZM4 17H16V18H4V17ZM3 16V19H17V16H3Z" fill="black"/>
+</svg>

apps/common/main/resources/img/toolbar/2.5x/btn-tree-caret.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 8L12.5 8L9.5 11L6.5 8Z" fill="black"/>
+</svg>

apps/common/main/resources/less/advanced-settings-window.less

@@ -17,14 +17,13 @@
             padding-top: 2px;
 
             .btn-category {
-                text-align: left;
+                .text-align-left();
                 padding: 9px 2px 9px 12px;
                 line-height: normal;
                 height: auto;
                 white-space: normal;
 
                 .rtl & {
-                    text-align: right;
                     padding: 9px 12px 9px 2px;
                 }
 
@@ -37,7 +36,9 @@
         .content-panel {
             vertical-align: top;
             padding: 5px 15px 0 10px;
-
+            .rtl & {
+                padding: 5px 10px 0 15px;
+            }
             .inner-content {
                 padding-left: 10px;
                 padding-right: 10px;
@@ -53,7 +54,7 @@
         }
 
         &.right {
-            text-align: right;
+            .text-align-right();
         }
 
         &.justify {
@@ -75,7 +76,7 @@
             margin: auto;
             text-align: center;
             overflow: hidden;
-            padding-right: 4px;
+            .padding-right-4();
             .svg-mirror{
                 margin-right: 1px;
             }

apps/common/main/resources/less/asc-mixins.less

@@ -293,6 +293,107 @@
     }
 }
 
+.background-ximage-all-scale(@image, @w: auto, @h: auto, @repeat: no-repeat, @commonimage: true) {
+    .choose-image-path(@commonimage);
+    @imagepath: '@{path}/@{image}';
+
+    background-image: if(@icon-src-base64, data-uri(%("%s", '@{imagepath}')), ~"url(@{imagepath})");
+    background-repeat: @repeat;
+
+    @1d5ximage: replace(@imagepath, '\.png$', '@1.5x.png');
+    @1d75ximage: replace(@imagepath, '\.png$', '@1.75x.png');
+    @1d25ximage: replace(@imagepath, '\.png$', '@1.25x.png');
+    @2ximage: replace(@imagepath, '\.png$', '@2x.png');
+    @2d5ximage: replace(@imagepath, '\.png$', '@2.5x.png');
+    @3ximage: replace(@imagepath, '\.png$', '@3x.png');
+    @3d5ximage: replace(@imagepath, '\.png$', '@3.5x.png');
+    @4ximage: replace(@imagepath, '\.png$', '@4x.png');
+    @4d5ximage: replace(@imagepath, '\.png$', '@4.5x.png');
+    @5ximage: replace(@imagepath, '\.png$', '@5x.png');
+
+    @media only screen {
+        @media (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.49),
+        (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx),
+        (min-resolution: 120dpi) and (max-resolution: 143dpi)
+        {
+            background-image: ~"url(@{1d25ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.74),
+        (min-resolution: 1.5dppx) and (max-resolution: 1.74dppx),
+        (min-resolution: 144dpi) and (max-resolution: 167dpi)
+        {
+            background-image: ~"url(@{1d5ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 1.75) and (-webkit-max-device-pixel-ratio: 1.9),
+        (min-resolution: 1.75dppx) and (max-resolution: 1.9dppx),
+        (min-resolution: 168dpi) and (max-resolution: 191dpi)
+        {
+            background-image: ~"url(@{1d75ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.49),
+        (min-resolution: 2dppx) and (max-resolution: 2.49dppx),
+        (min-resolution: 192dpi) and (max-resolution: 239dpi)
+        {
+            background-image: ~"url(@{2ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 2.5) and (-webkit-max-device-pixel-ratio: 2.9),
+        (min-resolution: 2.5dppx) and (max-resolution: 2.9dppx),
+        (min-resolution: 240dpi) and (max-resolution: 287dpi)
+        {
+            background-image: ~"url(@{2d5ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 3) and (-webkit-max-device-pixel-ratio: 3.49),
+        (min-resolution: 3dppx) and (max-resolution: 3.49dppx),
+        (min-resolution: 288dpi) and (max-resolution: 335dpi)
+        {
+            background-image: ~"url(@{3ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 3.5) and (-webkit-max-device-pixel-ratio: 3.9),
+        (min-resolution: 3.5dppx) and (max-resolution: 3.9dppx),
+        (min-resolution: 336dpi) and (max-resolution: 383dpi)
+        {
+            background-image: ~"url(@{3d5ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 4) and (-webkit-max-device-pixel-ratio: 4.49),
+        (min-resolution: 4dppx) and (max-resolution: 4.49dppx),
+        (min-resolution: 384dpi) and (max-resolution: 431dpi)
+        {
+            background-image: ~"url(@{4ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 4.5) and (-webkit-max-device-pixel-ratio: 4.9),
+        (min-resolution: 4.5dppx) and (max-resolution: 4.9dppx),
+        (min-resolution: 432dpi) and (max-resolution: 479dpi)
+        {
+            background-image: ~"url(@{4d5ximage})";
+            background-size: @w @h;
+        }
+
+        @media (-webkit-min-device-pixel-ratio: 5),
+        (min-resolution: 5dppx),
+        (min-resolution: 480dpi)
+        {
+            background-image: ~"url(@{5ximage})";
+            background-size: @w @h;
+        }
+    }
+}
+
 .img-commonctrl {
     &.img-colored {
         filter: none;
@@ -582,6 +683,128 @@
     .margin-left(22px);
 }
 
+.padding-x(@left, @right) {
+    padding-left: @left;
+    padding-right: @right;
+
+    .rtl & {
+        padding-left: @right;
+        padding-right: @left;
+    }
+}
+
+.padding-left(@value) {
+    padding-left: @value;
+    padding-right: 0;
+
+    .rtl & {
+        padding-left: 0;
+        padding-right: @value;
+    }
+}
+
+.padding-left-4 {
+    .padding-left(4px);
+}
+
+.padding-left-5 {
+    .padding-left(5px);
+}
+
+.padding-left-6 {
+    .padding-left(6px);
+}
+
+.padding-left-8 {
+    .padding-left(8px);
+}
+
+.padding-left-10 {
+    .padding-left(10px);
+}
+
+.padding-left-12 {
+    .padding-left(12px);
+}
+
+.padding-left-15 {
+    .padding-left(15px);
+}
+
+.padding-left-20 {
+    .padding-left(20px);
+}
+
+.padding-left-22 {
+    .padding-left(22px);
+}
+
+.padding-left-28 {
+    .padding-left(28px);
+}
+
+.padding-left-32 {
+    .padding-left(32px);
+}
+
+.padding-left-40 {
+    .padding-left(40px);
+}
+
+.padding-left-50 {
+    .padding-left(50px);
+}
+
+.padding-right(@value) {
+    padding-right: @value;
+    padding-left: 0;
+
+    .rtl & {
+        padding-right: 0;
+        padding-left: @value;
+    }
+}
+
+.padding-right-1 {
+    .padding-right(1px);
+}
+
+.padding-right-4 {
+    .padding-right(4px);
+}
+
+.padding-right-5 {
+    .padding-right(5px);
+}
+
+.padding-right-6 {
+    .padding-right(6px);
+}
+
+.padding-right-8 {
+    .padding-right(8px);
+}
+
+.padding-right-10 {
+    .padding-right(10px);
+}
+
+.padding-right-12 {
+    .padding-right(12px);
+}
+
+.padding-right-15 {
+    .padding-right(15px);
+}
+
+.padding-right-20 {
+    .padding-right(20px);
+}
+
+.padding-right-40 {
+    .padding-right(40px);
+}
+
 //.adaptive-solid-border(@width, @color, @borderside: all) {
 //    @lb-border: if((@borderside = all), border, e('border-@{borderside}'));
 //    @lb-border-width: if((@borderside = all), border-width, e('border-@{borderside}-width'));

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

@@ -31,7 +31,8 @@
 
 .btn-toolbar,
     .btn-header,
-    .btn-category
+    .btn-category,
+    .btn-options
 {
     svg.icon:not(.uni-scale):not(.pixel-ratio__2_5 *) {
         display: none;

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

@@ -307,7 +307,7 @@
                     margin: 0 1px 0 4px;
 
                     .rtl & {
-                        margin: 0 4px 0 1px;
+                        margin: 0 4px 0 3px;
                     }
                 }
 
@@ -326,6 +326,10 @@
             .pixel-ratio__2_5 & {
                 width: 100%;
             }
+
+            .rtl & {
+                padding: 1px 3px 1px 4px;
+            }
         }
 
         .icon:not(svg) {
@@ -400,14 +404,6 @@
     }
 }
 
-.icon-top.btn-group {
-    &.x-huge, .x-huge {
-        .inner-box-caption {
-            padding-right: 4px;
-        }
-    }
-}
-
 .icon-top {
     &.x-huge  {
         .btn&, .btn-group& .btn-toolbar {
@@ -564,11 +560,7 @@
     }
 
     &.align-left {
-        text-align: left;
-
-        .rtl & {
-            text-align: right;
-        }
+        .text-align-left();
     }
 }
 
@@ -905,13 +897,7 @@
 
 .color-menu.dropdown-menu.shifted-right {
     li > a {
-        padding-left: 32px;
-
-        .rtl & {
-            padding-left: 20px;
-            padding-right: 32px;
-        }
-
+        .padding-x(32px, 20px);
         span.color-auto {
             .margin-left(-18px);
             margin-top: 1px;
@@ -1151,6 +1137,9 @@
 
     &:not(.btn-toolbar).dropdown-toggle:first-child .inner-box-caret {
       padding: 0 1px 0 2px;
+        .rtl & {
+            padding: 0 2px 0 1px;
+        }
     }
 
     &:hover:not(.disabled),
@@ -1173,10 +1162,26 @@
 }
 
 .asc-window.modal {
-    .btn-toolbar:not(.bg-white), .btn-group {
-        &:focus:not(.disabled) {
-            .box-shadow(0 0 0 @scaled-one-px-value-ie @border-control-focus-ie);
-            .box-shadow(0 0 0 @scaled-one-px-value @border-control-focus);
+    .btn-toolbar:not(.bg-white):not(.disabled) {
+        &:focus {
+            .box-inner-shadow(0 0 0 @scaled-one-px-value-ie @border-control-focus-ie);
+            .box-inner-shadow(0 0 0 @scaled-one-px-value @border-control-focus);
+        }
+    }
+    .btn-group:not(.split) {
+        &.open,
+        &.active,
+        &:active {
+            .btn-toolbar:not(.bg-white):not(.disabled) {
+                .box-inner-shadow(0 0 0 @scaled-one-px-value-ie @border-control-focus-ie);
+                .box-inner-shadow(0 0 0 @scaled-one-px-value @border-control-focus);
+            }
+        }
+    }
+    .btn-group.split,
+    .input-field-btn {
+        .btn-toolbar:not(.bg-white):not(.disabled):focus {
+            .box-shadow(none);
         }
     }
 }

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

@@ -54,6 +54,9 @@
                 &.offline {
                     display: none;
                 }
+                .rtl & {
+                    padding: 2px 20px 2px 0;
+                }
             }
         }
 
@@ -80,6 +83,9 @@
             overflow: hidden;
             line-height: normal;
             height: 16px;
+            .rtl & {
+                padding: 0 0 0 10px;
+            }
         }
     }
 
@@ -104,6 +110,10 @@
                 white-space: -o-pre-wrap;
                 word-wrap: break-word;
 
+                .rtl & {
+                    padding: 5px 20px 8px 10px;
+                }
+
                 .user {
                     .font-weight-bold();
                     white-space: nowrap;

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

@@ -1,16 +1,11 @@
 .checkbox-indeterminate {
-    padding-left: 22px;
+    .padding-left-22();
     margin-bottom: 0;
     .font-size-normal();
     font-weight: normal;
     position: relative;
     min-height: 1em;
 
-    .rtl & {
-        padding-left: 0;
-        padding-right: 22px;
-    }
-
     input[type=checkbox] {
         display: none;
 

apps/common/main/resources/less/combo-border-size.less

@@ -57,10 +57,7 @@
     
     .border-line{
         margin-top: 1px;
-        float: right;
-        .rtl & {
-            float: left;
-        }
+        .float-right();
     }
 
     .img-line {

apps/common/main/resources/less/combo-dataview.less

@@ -5,7 +5,7 @@
 
     .view {
         display: inline-block;
-        float: left;
+        .float-left();
         overflow: hidden;
         width: @combo-dataview-width;
         height: 100%;
@@ -15,10 +15,6 @@
         background-color: @background-normal-ie;
         background-color: @background-normal;
 
-        .rtl & {
-            float: right;
-        }
-
         .dataview {
             padding: 1px;
         }
@@ -26,11 +22,7 @@
 
     .button {
         display: inline-block;
-        float: right;
-
-        .rtl & {
-            float: left;
-        }
+        .float-right();
 
         button {
             border-radius:0 @border-radius-small @border-radius-small 0;
@@ -45,9 +37,11 @@
 
             &.dropdown-toggle {
                 .inner-box-caret {
-                    padding: 0 1px 0 0;
+                    &,
+                    .rtl & {
+                        padding: 0 1px 0 0;
+                    }
                 }
-
                 .caret {
 //                    width: 7px;
 //                    height: 7px;
@@ -109,26 +103,28 @@
 
     .view {
         .margin-right(-@combo-dataview-button-width);
-        padding-right: calc(@combo-dataview-button-width - @scaled-two-px-value);
+        .padding-right(calc(@combo-dataview-button-width - @scaled-two-px-value));
 
         .border-left-radius(0);
 
-        .rtl & {
-            padding-right: 0;
-            padding-left: @combo-dataview-button-width;
-
-            .border-radius(@border-radius-small);
-            .border-right-radius(0);
-        }
-
         .dataview {
             @minus-px: calc(-1px / @pixel-ratio-factor);
             height: @combo-dataview-height;
             height: @combo-dataview-height-calc;
             padding: 0;
-            margin: -1 0 0 -1;
+            margin: -1px 0 0 -1px;
             margin: @minus-px 0 0 @minus-px;
         }
+        .rtl & {
+            .border-radius(@border-radius-small);
+            .border-right-radius(0);
+
+            .dataview {
+                @minus-px: calc(-1px / @pixel-ratio-factor);
+                margin: -1px -1px 0 0;
+                margin: @minus-px @minus-px 0 0;
+            }
+        }
     }
 
     &:not(.shapes) .item {
@@ -261,12 +257,7 @@
 
     .view {
         .margin-right(-@combo-dataview-button-width);
-        padding-right: @combo-dataview-button-width;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: @combo-dataview-button-width;
-        }
+        .padding-right(@combo-dataview-button-width);
 
         .dataview {
             padding: 2px;
@@ -305,12 +296,7 @@
 
     .view {
         .margin-right(-@combo-dataview-button-width);
-        padding-right: @combo-dataview-button-width;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: @combo-dataview-button-width;
-        }
+        .padding-right(@combo-dataview-button-width);
     }
 
     .button {
@@ -347,7 +333,7 @@
     }
 
     .dropdown-menu {
-        padding-right: 2px;
+        .padding-x(1px, 2px);
     }
 
     .ps-scrollbar-y-rail {
@@ -398,12 +384,7 @@
 
     top: -4px;
     position: absolute;
-    padding-right: 12px;
-
-    .rtl & {
-        padding-right: 0;
-        padding-left: 12px;
-    }
+    .padding-right-12();
 
     .more-container & {
         position: static;
@@ -459,12 +440,7 @@
 
     .view {
         .margin-right(-@combo-dataview-button-width);
-        padding-right: calc(@combo-dataview-button-width - @scaled-one-px-value);
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: calc(@combo-dataview-button-width - @scaled-one-px-value);
-        }
+        .padding-right(calc(@combo-dataview-button-width - @scaled-one-px-value));
     }
 
     .view .dataview, .dropdown-menu {

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

@@ -32,13 +32,8 @@
     }
 
     &.input-group-nr > .form-control {
-        padding-right: 7px + 2 * @padding-base-horizontal;
+        .padding-x(3px, 7px + 2 * @padding-base-horizontal);
         .font-size-normal();
-
-        .rtl & {
-            padding-right: 3px;
-            padding-left: 7px + 2 * @padding-base-horizontal;
-        }
     }
 
     .form-control {
@@ -55,7 +50,7 @@
 
         .text {
             line-height: 20px;
-            padding-left: 2px;
+            .padding-left(2px);
         }
 
         .rtl & {
@@ -85,6 +80,8 @@
             border-right: 0;
             right: unset;
             left: 0;
+            margin-left: 0;
+            margin-right: -1px;
         }
     }
 
@@ -94,16 +91,11 @@
         background-color: @background-normal;
         border-color: @border-regular-control-ie;
         border-color: @border-regular-control;
-        padding-right: 5px;
-
-        .rtl & {
-            padding-right: 3px;
-            padding-left: 5px;
-        }
+        .padding-x(3px, 5px);
     }
 
     .btn-default.disabled {
-        padding-right: 5px;
+        .padding-x(3px, 5px);
         border-top-color: transparent;
         border-bottom-color: transparent;
 
@@ -257,6 +249,9 @@
                 width: 100%;
                 height: 100%;
             }
+            .rtl & {
+                padding: 2px 3px 2px 0;
+            }
         }
 
         li a {

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

@@ -334,21 +334,12 @@
     .reply-item-ct {
         position: relative;
         padding-bottom: 10px;
-        padding-left: 20px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 20px;
-        }
+        .padding-left-20();
     }
 
     div[class^=btn-] {
-        float: left;
+        .float-left();
         cursor: pointer;
-
-        .rtl & {
-            float: right;
-        }
     }
 
     .btn-edit,.btn-delete, .btn-resolve, .icon-resolve, .btn-resolve-check, .btn-accept, .btn-reject, .btn-goto {

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

@@ -104,14 +104,12 @@ label {
 }
 
 .left-panel {
-    padding-left: 40px;
+    .padding-left-40();
     height: 100%;
     border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
     border-right: @scaled-one-px-value solid @border-toolbar;
 
     .rtl & {
-        padding-right: 40px;
-        padding-left: 0;
         border-left: @scaled-one-px-value solid @border-toolbar;
         border-right: 0 none;
     }
@@ -143,6 +141,7 @@ label {
     .rtl & {
         border-right: @scaled-one-px-value solid @border-toolbar;
         border-left: 0 none;
+        padding: 0 15px 0 10px;
     }
 }
 
@@ -171,14 +170,13 @@ label {
         max-height: 100%;
         position: relative;
         overflow: hidden;
-        float: left;
+        .float-left();
         border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-right: @scaled-one-px-value solid @border-toolbar;
         background-color: @background-toolbar-ie;
         background-color: @background-toolbar;
 
         .rtl & {
-            float: right;
             border-right: none;
             border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
             border-left: @scaled-one-px-value solid @border-toolbar;

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

@@ -20,17 +20,13 @@
 
     > .item {
         display: inline-block;
-        float: left;
+        .float-left();
         margin: 4px;
         cursor: pointer;
 
         .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
         .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
 
-        .rtl & {
-            float: right;
-        }
-
         &:hover,
         &.selected {
             .box-shadow(0 0 0 2px @border-preview-select-ie);
@@ -67,10 +63,7 @@
             .font-size-normal();
             color: @text-normal-ie;
             color: @text-normal;
-            
-            .rtl & {
-                text-align: right;
-            }
+            .text-align-left();
         }
 
         .group-items-container {
@@ -79,13 +72,9 @@
 
             & > div {
                 display: inline-block;
-                float: left;
+                .float-left();
                 margin: 2px 4px 4px;
 
-                .rtl & {
-                    float: right;
-                }
-
                 &:not(.disabled) {
                     cursor: pointer;
                 }
@@ -111,6 +100,9 @@
         padding: 10px 2px 12px 4px;
         .font-weight-bold();
         cursor: default;
+        .rtl & {
+            padding: 10px 4px 12px 2px;
+        }
     }
 
     &.bordered {

apps/common/main/resources/less/dropdown-menu.less

@@ -38,6 +38,7 @@
             color: @text-normal-ie;
             color: @text-normal;
             .font-size-normal();
+            .text-align-left();
 
             &:focus, &.focus {
                 outline: 0;
@@ -53,10 +54,6 @@
                 background-color: @highlight-button-hover-ie;
                 background-color: @highlight-button-hover;
             }
-
-            .rtl & {
-                text-align: right;
-            }
         }
 
         &.over > a {
@@ -91,7 +88,7 @@
 
         .menu-item-icon {
             display: inline-block;
-            float: left;
+            .float-left();
             width: 20px;
             height: 20px;
             margin: -2px 5px 0 -15px;
@@ -99,7 +96,6 @@
             opacity: @component-normal-icon-opacity;
 
             .rtl & {
-                float: right;
                 margin: -2px -15px 0 5px;
             }
         }
@@ -143,11 +139,7 @@
     &.shifted-right {
         li {
             & > a {
-                padding-left: 28px;
-                .rtl & {
-                    padding-left: 20px;
-                    padding-right: 28px;
-                }
+                .padding-x(28px, 20px);
             }
             .menu-item-icon {
                 margin: -2px 0 0 -24px;

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

@@ -145,6 +145,9 @@
         max-width: 200px;
         height: 100%;
         padding: 6px 24px 6px 12px;
+        .rtl & {
+            padding: 6px 12px 6px 24px;
+        }
 
         i {
             cursor: pointer;
@@ -163,6 +166,9 @@
 
         #box-document-title & {
             padding: 4px 24px 4px 12px;
+            .rtl & {
+                padding: 4px 12px 4px 24px;
+            }
         }
     }
 }
@@ -472,6 +478,7 @@
             color: @text-normal;
             .font-size-medium();
             .font-weight-bold();
+            .text-align-left();
             white-space: nowrap;
             cursor: default;
 
@@ -482,19 +489,12 @@
                 max-width: 200px;
                 .font-weight-bold();
             }
-
-            .rtl & {
-                text-align: right;
-            }
         }
     }
 
     #tlb-users-menu-descr {
         width: 100%;
-        text-align: left;
-        .rtl & {
-            text-align: right;
-        }
+        .text-align-left();
     }
 
     .rtl & {

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

@@ -18,7 +18,7 @@
         height: 27px;
         margin-top: 15px;
         padding-top: 4px;
-        padding-left: 20px;
+        .padding-left-20();
         .font-size-large();
         cursor: pointer;
 
@@ -26,11 +26,6 @@
             background-color: @highlight-button-hover-ie;
             background-color: @highlight-button-hover;
         }
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 20px;
-        }
     }
 }
 
@@ -48,15 +43,10 @@
         height: 27px;
         margin-top: 8px;
         padding-top: 4px;
-        padding-left: 20px;
+        .padding-left-20();
         .font-size-large();
         cursor: pointer;
 
-        .rtl & {
-            padding-left: 0;
-            padding-right: 20px;
-        }
-
         &:hover {
             background-color: @highlight-button-hover-ie;
             background-color: @highlight-button-hover;
@@ -145,12 +135,7 @@
             .font-weight-bold();
             cursor: pointer;
             text-overflow: ellipsis;
-            padding-right: 35px;
-
-            .rtl & {
-                padding-right: 0;
-                padding-left: 35px;
-            }
+            .padding-right(35px);
         }
 
         .color {

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

@@ -65,12 +65,8 @@
 .input-field {
     input,
     .input-error {
-        float: left;
+        .float-left();
         position: relative;
-
-        .rtl & {
-            float: right;
-        }
     }
 
     &.form-control:focus,
@@ -170,11 +166,6 @@ textarea.form-control:focus {
         }
     }
     input {
-        padding-right: 20px;
-
-        .rtl & {
-            padding-right: 3px;
-            padding-left: 20px;
-        }
+        .padding-x(3px, 20px);
     }
 }

apps/common/main/resources/less/language-dialog.less

@@ -43,11 +43,7 @@ li {
       margin-top: 1px;
     }
     li a {
-      padding-left: 28px !important;
-      .rtl & {
-        padding-left: 0 !important;
-        padding-right: 28px !important;
-      }
+      .padding-x(28px, 20px);
     }
   }
 

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

@@ -121,16 +121,11 @@
           display: flex;
           align-items: center;
           overflow: hidden;
-          padding-right: 1px;
+          .padding-right-1();
           cursor: pointer;
   
           label {
-            padding-right: 6px;
-
-            .rtl & {
-              padding-right: 0px;
-              padding-left: 6px;
-            }
+            .padding-right-6();
           }
   
           .caret {