[multiscaling] changed "wrapping" and "table borders" icons in DE

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

@@ -121,10 +121,18 @@ Common.Utils = _.extend(new(function() {
         checkSize = function() {
             var str_mq_150 = "screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), " +
                                 "screen and (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx)";
+            var str_mq_200 = "screen and (-webkit-min-device-pixel-ratio: 2), " +
+                                "screen and (min-resolution: 2dppx), screen and (min-resolution: 192dpi)";
             if ( window.matchMedia(str_mq_150).matches ) {
                 $(document.body).addClass('pixel-ratio__1_5');
+                $(document.body).removeClass('pixel-ratio__2');
+            } else
+            if ( window.matchMedia(str_mq_200).matches ) {
+                $(document.body).addClass('pixel-ratio__2');
+                $(document.body).removeClass('pixel-ratio__1_5');
             } else {
                 $(document.body).removeClass('pixel-ratio__1_5');
+                $(document.body).removeClass('pixel-ratio__2');
             }
 
             me.zoom = 1;

apps/common/main/resources/img/toolbar/1.5x/big/.css.handlebars

@@ -10,4 +10,8 @@
         }
     }
 }
+
+.toolbar__icon.toolbar__icon-big {
+    background-size: var(--big-icon-background-image-width) auto;
+}
 {{/spritesheet}}

apps/common/main/resources/img/toolbar/1.5x/huge/.css.handlebars

@@ -0,0 +1,5 @@
+{{#spritesheet}}
+.options__icon.options__icon-huge {
+    background-size: var(--huge-icon-background-image-width) auto;
+}
+{{/spritesheet}}

apps/common/main/resources/img/toolbar/1x/big/.css.handlebars

@@ -11,13 +11,27 @@
             }
         }
     }
+
+    &.active, &:active {
+        &:not(:disabled):not(.disabled) {
+            .toolbar__icon.toolbar__icon-big {
+                @btn-active-icon-offset: -28px;
+                background-position-x: @btn-active-icon-offset;
+            }
+        }
+    }
 }
 .x-huge .toolbar__icon {
     background-image: url(resources/{{{escaped_image}}});
 }
+.toolbar__icon.toolbar__icon-big {
+    background-image: var(--big-icon-background-image);
+}
 {{/spritesheet}}
 {{#sprites}}
-{{#parselang name}}.x-huge .{{name}}{{/parselang}} {
+{{#parselang name}}.x-huge .{{name}}{{/parselang}}, 
+    .toolbar__icon-big.{{name}}
+{
     background-position: {{px.offset_x}} {{px.offset_y}};
 
     --bgX: {{px.offset_x}};

apps/common/main/resources/img/toolbar/1x/huge/.css.handlebars

@@ -0,0 +1,22 @@
+{{#spritesheet}}
+.btn {
+    &.active, &:active {
+        &:not(:disabled):not(.disabled) {
+            .options__icon.options__icon-huge {
+                @btn-active-icon-offset: -40px;
+                background-position-x: @btn-active-icon-offset;
+            }
+        }
+    }
+}
+
+.options__icon.options__icon-huge {
+    background-image: var(--huge-icon-background-image);
+}
+{{/spritesheet}}
+{{#sprites}}
+.options__icon-huge.{{name}}
+{
+    background-position: {{px.offset_x}} {{px.offset_y}};
+}
+{{/sprites}}

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

@@ -95,6 +95,9 @@
         --pixel-ratio-factor: @ratio;
         --scaled-one-pixel: @one-px;
     }
+
+    .pixel-ratio__2 {
+    }
 }
 
 .button-normal-icon(@icon-class, @index, @icon-size) {

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

@@ -22,7 +22,7 @@
     }
 
     &.large {
-        .btnsize(31px);
+        .btnsize(30px);
     }
 
     &.huge {
@@ -30,7 +30,7 @@
     }
 
     &.huge-1 {
-        .btnsize(45px);
+        .btnsize(40px);
     }
 
     &.x-huge {
@@ -876,21 +876,21 @@ svg.icon {
         display: none;
     }
 
-    @media
+    //@media
-    only screen and (-webkit-min-device-pixel-ratio: 1.5),
+    //only screen and (-webkit-min-device-pixel-ratio: 1.5),
-    only screen and (-webkit-min-device-pixel-ratio: 2.5),
+    //only screen and (-webkit-min-device-pixel-ratio: 2.5),
-    only screen and (min-resolution: 1.5dppx),
+    //only screen and (min-resolution: 1.5dppx),
-    only screen and (min-resolution: 2.5dppx),
+    //only screen and (min-resolution: 2.5dppx),
-    only screen and (min-resolution: 144dpi),
+    //only screen and (min-resolution: 144dpi),
-    only screen and (min-resolution: 240dpi) {
+    //only screen and (min-resolution: 240dpi) {
-        .@{class100} {
+    //    .@{class100} {
-            display: none;
+    //        display: none;
-        }
+    //    }
-
+    //
-        .@{class150} {
+    //    .@{class150} {
-            display: block;
+    //        display: block;
-        }
+    //    }
-    }
+    //}
 
     @media
     only screen and (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.4),

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

@@ -211,13 +211,13 @@ define([
         createDelayedControls: function() {
             var me = this,
                 viewData = [
-                { offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline,    tip: this.txtInline, selected: true },
+                { icon: 'btn-wrap-inline',      data: Asc.c_oAscWrapStyle2.Inline,      tip: this.txtInline, selected: true },
-                { offsetx: 50, data: Asc.c_oAscWrapStyle2.Square,   tip: this.txtSquare },
+                { icon: 'btn-wrap-square',      data: Asc.c_oAscWrapStyle2.Square,      tip: this.txtSquare },
-                { offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight,   tip: this.txtTight },
+                { icon: 'btn-wrap-tight',       data: Asc.c_oAscWrapStyle2.Tight,       tip: this.txtTight },
-                { offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, tip: this.txtThrough },
+                { icon: 'btn-wrap-through',     data: Asc.c_oAscWrapStyle2.Through,     tip: this.txtThrough },
-                { offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
+                { icon: 'btn-wrap-topbottom',   data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
-                { offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, tip: this.txtInFront },
+                { icon: 'btn-wrap-infront',     data: Asc.c_oAscWrapStyle2.InFront,     tip: this.txtInFront },
-                { offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind,  tip: this.txtBehind }
+                { icon: 'btn-wrap-behind',      data: Asc.c_oAscWrapStyle2.Behind,      tip: this.txtBehind }
             ];
 
             this.cmbWrapType = new Common.UI.ComboDataView({
@@ -229,10 +229,9 @@ define([
                 cls: 'combo-chart-style'
             });
             this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
-                '<div class="style" id="<%= id %>">',
+                '<div class="item-icon-box" id="<%= id %>">',
-                '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-wrap-item" ',
+                    '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
-                'width="' + this.cmbWrapType.itemWidth + '" height="' + this.cmbWrapType.itemHeight + '" ',
+                        'class="combo-wrap-item options__icon options__icon-huge <%= icon %>" ',
-                'style="background-position: -<%= offsetx %>px 0;"/>',
                 '</div>'
             ].join(''));
             this.cmbWrapType.render($('#chart-combo-wrap'));

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

@@ -113,14 +113,14 @@ define([
             });
 
             _.each([
-                [c_tableBorder.BORDER_HORIZONTAL_TOP,     't',     'btn-borders-large btn-adv-paragraph-top',       '00'],
+                [c_tableBorder.BORDER_HORIZONTAL_TOP,     't',     'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-top',       '00'],
-                [c_tableBorder.BORDER_HORIZONTAL_CENTER,  'm',     'btn-borders-large btn-adv-paragraph-inner-hor', '01'],
+                [c_tableBorder.BORDER_HORIZONTAL_CENTER,  'm',     'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-inner',     '01'],
-                [c_tableBorder.BORDER_HORIZONTAL_BOTTOM,  'b',     'btn-borders-large btn-adv-paragraph-bottom',    '10'],
+                [c_tableBorder.BORDER_HORIZONTAL_BOTTOM,  'b',     'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-bottom',    '10'],
-                [c_tableBorder.BORDER_OUTER,              'lrtb',  'btn-borders-large btn-adv-paragraph-outer',     '11'],
+                [c_tableBorder.BORDER_OUTER,              'lrtb',  'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-outer',     '11'],
-                [c_tableBorder.BORDER_VERTICAL_LEFT,      'l',     'btn-borders-large btn-adv-paragraph-left',      '20'],
+                [c_tableBorder.BORDER_VERTICAL_LEFT,      'l',     'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-left',      '20'],
-                [c_tableBorder.BORDER_ALL,                'lrtbm', 'btn-borders-large btn-adv-paragraph-all',       '21'],
+                [c_tableBorder.BORDER_ALL,                'lrtbm', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-all',       '21'],
-                [c_tableBorder.BORDER_VERTICAL_RIGHT,     'r',     'btn-borders-large btn-adv-paragraph-right',     '30'],
+                [c_tableBorder.BORDER_VERTICAL_RIGHT,     'r',     'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-right',     '30'],
-                [c_tableBorder.BORDER_NONE,               '',      'btn-borders-large btn-adv-paragraph-none',      '31']
+                [c_tableBorder.BORDER_NONE,               '',      'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-none',      '31']
             ], function(item, index) {
                 var _btn = new Common.UI.Button({
                     parentEl: $('#drop-advanced-button-borderline-' + item[3]),
@@ -270,7 +270,7 @@ define([
             this.btnNone = new Common.UI.Button({
                 parentEl: $('#drop-advanced-button-none'),
                 cls         : 'btn huge-1 btn-options',
-                iconCls     : 'icon-advanced-wrap btn-drop-none',
+                iconCls     : 'icon-advanced-wrap options__icon options__icon-huge btn-drop-none',
                 enableToggle: true,
                 toggleGroup : 'dropAdvGroup',
                 allowDepress: false,
@@ -286,7 +286,7 @@ define([
             this.btnInText = new Common.UI.Button({
                 parentEl: $('#drop-advanced-button-intext'),
                 cls         : 'btn huge-1 btn-options',
-                iconCls     : 'icon-advanced-wrap btn-drop-text',
+                iconCls     : 'icon-advanced-wrap options__icon options__icon-huge btn-drop-text',
                 enableToggle: true,
                 toggleGroup : 'dropAdvGroup',
                 allowDepress: false,
@@ -302,7 +302,7 @@ define([
             this.btnInMargin = new Common.UI.Button({
                 parentEl: $('#drop-advanced-button-inmargin'),
                 cls         : 'btn huge-1 btn-options',
-                iconCls     : 'icon-advanced-wrap btn-drop-margin',
+                iconCls     : 'icon-advanced-wrap options__icon options__icon-huge btn-drop-margin',
                 enableToggle: true,
                 toggleGroup : 'dropAdvGroup',
                 allowDepress: false,

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

@@ -121,13 +121,13 @@ define([
         createDelayedControls: function() {
             var me = this,
                 viewData = [
-                { offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, tip: this.txtInline, selected: true },
+                { icon: 'btn-wrap-inline',      data: Asc.c_oAscWrapStyle2.Inline,      tip: this.txtInline, selected: true },
-                { offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, tip: this.txtSquare },
+                { icon: 'btn-wrap-square',      data: Asc.c_oAscWrapStyle2.Square,      tip: this.txtSquare },
-                { offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, tip: this.txtTight },
+                { icon: 'btn-wrap-tight',       data: Asc.c_oAscWrapStyle2.Tight,       tip: this.txtTight },
-                { offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, tip: this.txtThrough },
+                { icon: 'btn-wrap-through',     data: Asc.c_oAscWrapStyle2.Through,     tip: this.txtThrough },
-                { offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
+                { icon: 'btn-wrap-topbottom',   data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
-                { offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, tip: this.txtInFront },
+                { icon: 'btn-wrap-infront',     data: Asc.c_oAscWrapStyle2.InFront,     tip: this.txtInFront },
-                { offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, tip: this.txtBehind }
+                { icon: 'btn-wrap-behind',      data: Asc.c_oAscWrapStyle2.Behind,      tip: this.txtBehind }
             ];
 
             this.cmbWrapType = new Common.UI.ComboDataView({
@@ -139,10 +139,9 @@ define([
                 cls: 'combo-chart-style'
             });
             this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
-                '<div class="style" id="<%= id %>">',
+                '<div class="item-icon-box" id="<%= id %>" style="">',
-                '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-wrap-item" ',
+                    '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
-                'width="' + this.cmbWrapType.itemWidth + '" height="' + this.cmbWrapType.itemHeight + '" ',
+                        'class="combo-wrap-item options__icon options__icon-huge <%= icon %>"',
-                'style="background-position: -<%= offsetx %>px 0;"/>',
                 '</div>'
             ].join(''));
             this.cmbWrapType.render($('#image-combo-wrap'));

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

@@ -403,7 +403,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
             this.btnWrapInline = new Common.UI.Button({
                 parentEl: $('#image-advanced-button-wrap-inline'),
                 cls: 'btn-options huge-1',
-                iconCls: 'icon-advanced-wrap btn-wrap-inline',
+                iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-inline',
                 posId: Asc.c_oAscWrapStyle2.Inline,
                 hint: this.textWrapInlineTooltip,
                 enableToggle: true,
@@ -415,7 +415,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
             this.btnWrapSquare = new Common.UI.Button({
                 parentEl: $('#image-advanced-button-wrap-square'),
                 cls: 'btn-options huge-1',
-                iconCls: 'icon-advanced-wrap btn-wrap-square',
+                iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-square',
                 posId: Asc.c_oAscWrapStyle2.Square,
                 hint: this.textWrapSquareTooltip,
                 enableToggle: true,
@@ -427,7 +427,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
             this.btnWrapTight = new Common.UI.Button({
                 parentEl: $('#image-advanced-button-wrap-tight'),
                 cls: 'btn-options huge-1',
-                iconCls: 'icon-advanced-wrap btn-wrap-tight',
+                iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-tight',
                 posId: Asc.c_oAscWrapStyle2.Tight,
                 hint: this.textWrapTightTooltip,
                 enableToggle: true,
@@ -439,7 +439,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
             this.btnWrapThrough = new Common.UI.Button({
                 parentEl: $('#image-advanced-button-wrap-through'),
                 cls: 'btn-options huge-1',
-                iconCls: 'icon-advanced-wrap btn-wrap-through',
+                iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-through',
                 posId: Asc.c_oAscWrapStyle2.Through,
                 hint: this.textWrapThroughTooltip,
                 enableToggle: true,
@@ -451,7 +451,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
             this.btnWrapTopBottom = new Common.UI.Button({
                 parentEl: $('#image-advanced-button-wrap-topbottom'),
                 cls: 'btn-options huge-1',
-                iconCls: 'icon-advanced-wrap btn-wrap-topbottom',
+                iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-topbottom',
                 posId: Asc.c_oAscWrapStyle2.TopAndBottom,
                 hint: this.textWrapTopbottomTooltip,
                 enableToggle: true,
@@ -463,7 +463,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
             this.btnWrapBehind = new Common.UI.Button({
                 parentEl: $('#image-advanced-button-wrap-behind'),
                 cls: 'btn-options huge-1',
-                iconCls: 'icon-advanced-wrap btn-wrap-behind',
+                iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-behind',
                 posId: Asc.c_oAscWrapStyle2.Behind,
                 hint: this.textWrapBehindTooltip,
                 enableToggle: true,
@@ -475,7 +475,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
             this.btnWrapInFront = new Common.UI.Button({
                 parentEl: $('#image-advanced-button-wrap-infront'),
                 cls: 'btn-options huge-1',
-                iconCls: 'icon-advanced-wrap btn-wrap-infront',
+                iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-infront',
                 posId: Asc.c_oAscWrapStyle2.InFront,
                 hint: this.textWrapInFrontTooltip,
                 enableToggle: true,

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

@@ -391,14 +391,14 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             });
 
             var _arrBorderPresets = [
-                ['lrtb',    'btn-borders-large btn-adv-paragraph-outer',    'paragraphadv-button-border-outer', this.tipOuter],
+                ['lrtb',    'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-outer',    'paragraphadv-button-border-outer', this.tipOuter],
-                ['lrtbm',   'btn-borders-large btn-adv-paragraph-all',      'paragraphadv-button-border-all',    this.tipAll],
+                ['lrtbm',   'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-all',      'paragraphadv-button-border-all',    this.tipAll],
-                ['',        'btn-borders-large btn-adv-paragraph-none',     'paragraphadv-button-border-none',       this.tipNone],
+                ['',        'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-none',     'paragraphadv-button-border-none',       this.tipNone],
-                ['l',       'btn-borders-large btn-adv-paragraph-left',     'paragraphadv-button-border-left',      this.tipLeft],
+                ['l',       'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-left',     'paragraphadv-button-border-left',      this.tipLeft],
-                ['r',       'btn-borders-large btn-adv-paragraph-right',    'paragraphadv-button-border-right',     this.tipRight],
+                ['r',       'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-right',    'paragraphadv-button-border-right',     this.tipRight],
-                ['t',       'btn-borders-large btn-adv-paragraph-top',      'paragraphadv-button-border-top',         this.tipTop],
+                ['t',       'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-top',      'paragraphadv-button-border-top',         this.tipTop],
-                ['m',       'btn-borders-large btn-adv-paragraph-inner-hor', 'paragraphadv-button-border-inner-hor', this.tipInner],
+                ['m',       'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-inner',    'paragraphadv-button-border-inner-hor', this.tipInner],
-                ['b',       'btn-borders-large btn-adv-paragraph-bottom',   'paragraphadv-button-border-bottom',  this.tipBottom]
+                ['b',       'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-bottom',   'paragraphadv-button-border-bottom',  this.tipBottom]
             ];
 
             this._btnsBorderPosition = [];

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

@@ -1520,13 +1520,13 @@ define([
             this.lockedControls.push(this.btnFlipH);
 
             var viewData = [
-                { offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline,    tip: this.txtInline, selected: true },
+                { icon: 'btn-wrap-inline',      data: Asc.c_oAscWrapStyle2.Inline,      tip: this.txtInline, selected: true },
-                { offsetx: 50, data: Asc.c_oAscWrapStyle2.Square,   tip: this.txtSquare },
+                { icon: 'btn-wrap-square',      data: Asc.c_oAscWrapStyle2.Square,      tip: this.txtSquare },
-                { offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight,   tip: this.txtTight },
+                { icon: 'btn-wrap-tight',       data: Asc.c_oAscWrapStyle2.Tight,       tip: this.txtTight },
-                { offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, tip: this.txtThrough },
+                { icon: 'btn-wrap-through',     data: Asc.c_oAscWrapStyle2.Through,     tip: this.txtThrough },
-                { offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
+                { icon: 'btn-wrap-topbottom',   data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
-                { offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, tip: this.txtInFront },
+                { icon: 'btn-wrap-infront',     data: Asc.c_oAscWrapStyle2.InFront,     tip: this.txtInFront },
-                { offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind,  tip: this.txtBehind }
+                { icon: 'btn-wrap-behind',      data: Asc.c_oAscWrapStyle2.Behind,      tip: this.txtBehind }
             ];
 
 
@@ -1539,10 +1539,9 @@ define([
                 cls: 'combo-chart-style'
             });
             this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
-                '<div class="style" id="<%= id %>">',
+                '<div class="item-icon-box" id="<%= id %>">',
-                '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-wrap-item" ',
+                    '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
-                'width="' + this.cmbWrapType.itemWidth + '" height="' + this.cmbWrapType.itemHeight + '" ',
+                        'class="combo-wrap-item options__icon options__icon-huge <%= icon %>"',
-                'style="background-position: -<%= offsetx %>px 0;"/>',
                 '</div>'
             ].join(''));
             this.cmbWrapType.render($('#shape-combo-wrap'));

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

@@ -929,10 +929,10 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
             });
 
             var _arrBorderPresets = [
-                ['cm',      'btn-borders-large btn-adv-position-inner', 'tableadv-button-border-inner',     this.tipInner],
+                ['cm',      'btn-borders-large toolbar__icon toolbar__icon-big borders-inner-only', 'tableadv-button-border-inner',     this.tipInner],
-                ['lrtb',    'btn-borders-large btn-adv-position-outer', 'tableadv-button-border-outer',     this.tipOuter],
+                ['lrtb',    'btn-borders-large toolbar__icon toolbar__icon-big borders-outer-only', 'tableadv-button-border-outer',     this.tipOuter],
-                ['lrtbcm',  'btn-borders-large btn-adv-position-all',   'tableadv-button-border-all',       this.tipAll],
+                ['lrtbcm',  'btn-borders-large toolbar__icon toolbar__icon-big borders-all',   'tableadv-button-border-all',       this.tipAll],
-                ['',        'btn-borders-large btn-adv-position-none',  'tableadv-button-border-none',      this.tipNone]
+                ['',        'btn-borders-large toolbar__icon toolbar__icon-big borders-none',  'tableadv-button-border-none',      this.tipNone]
             ];
 
             this._btnsBorderPosition = [];
@@ -951,14 +951,14 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
 
 
             var _arrTableBorderPresets = [
-                ['cm', '',          'btn-borders-large btn-adv-position-inner-none',    'tableadv-button-border-inner-none',    this.tipCellInner],
+                ['cm', '',          'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-none-inner',    'tableadv-button-border-inner-none',    this.tipCellInner],
-                ['lrtb', '',        'btn-borders-large btn-adv-position-outer-none',    'tableadv-button-border-outer-none',    this.tipCellOuter],
+                ['lrtb', '',        'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-none-outer',    'tableadv-button-border-outer-none',    this.tipCellOuter],
-                ['lrtbcm', '',      'btn-borders-large btn-adv-position-all-none',      'tableadv-button-border-all-none',      this.tipCellAll],
+                ['lrtbcm', '',      'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-none-all',      'tableadv-button-border-all-none',      this.tipCellAll],
-                ['', '',            'btn-borders-large btn-adv-position-none-none',     'tableadv-button-border-none-none',     this.tipNone],
+                ['', '',            'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-none',          'tableadv-button-border-none-none',     this.tipNone],
-                ['lrtbcm', 'lrtb',  'btn-borders-large btn-adv-position-all-table',     'tableadv-button-border-all-table',     this.tipTableOuterCellAll],
+                ['lrtbcm', 'lrtb',  'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-all',           'tableadv-button-border-all-table',     this.tipTableOuterCellAll],
-                ['', 'lrtb',        'btn-borders-large btn-adv-position-none-table',    'tableadv-button-border-none-table',    this.tipOuter],
+                ['', 'lrtb',        'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-outer-none',    'tableadv-button-border-none-table',    this.tipOuter],
-                ['cm', 'lrtb',      'btn-borders-large btn-adv-position-inner-table',   'tableadv-button-border-inner-table',   this.tipTableOuterCellInner],
+                ['cm', 'lrtb',      'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-outer-inner',   'tableadv-button-border-inner-table',   this.tipTableOuterCellInner],
-                ['lrtb', 'lrtb',    'btn-borders-large btn-adv-position-outer-table',   'tableadv-button-border-outer-table',   this.tipTableOuterCellOuter]
+                ['lrtb', 'lrtb',    'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-outer-outer',   'tableadv-button-border-outer-table',   this.tipTableOuterCellOuter]
             ];
 
             this._btnsTableBorderPosition = [];

apps/documenteditor/main/resources/less/advanced-settings.less

@@ -1,47 +1,9 @@
 .btn-borders-large {
-    .background-ximage-v2('right-panels/LargeBorders.png', 62px, @commonimage: false);
 }
 
-.button-normal-icon(btn-adv-paragraph-all,       0, 31px);
-.button-normal-icon(btn-adv-paragraph-bottom,    1, 31px);
-.button-normal-icon(btn-adv-paragraph-left,      2, 31px);
-.button-normal-icon(btn-adv-paragraph-inner-hor, 3, 31px);
-.button-normal-icon(btn-adv-paragraph-none,      4, 31px);
-.button-normal-icon(btn-adv-paragraph-outer,     5, 31px);
-.button-normal-icon(btn-adv-paragraph-right,     6, 31px);
-.button-normal-icon(btn-adv-paragraph-top,       7, 31px);
-
-.button-normal-icon(btn-adv-position-all-none,    8, 31px);
-.button-normal-icon(btn-adv-position-all-table,   9, 31px);
-.button-normal-icon(btn-adv-position-all,         10, 31px);
-.button-normal-icon(btn-adv-position-inner-none,  11, 31px);
-.button-normal-icon(btn-adv-position-inner-table, 12, 31px);
-.button-normal-icon(btn-adv-position-inner,       13, 31px);
-.button-normal-icon(btn-adv-position-none,        14, 31px);
-.button-normal-icon(btn-adv-position-none-table,  15, 31px);
-.button-normal-icon(btn-adv-position-none-none,   16, 31px);
-.button-normal-icon(btn-adv-position-outer-none,  17, 31px);
-.button-normal-icon(btn-adv-position-outer-table, 18, 31px);
-.button-normal-icon(btn-adv-position-outer,       19, 31px);
-.button-otherstates-icon(btn-borders-large, 31px);
-
 .icon-advanced-wrap {
-    .background-ximage-v2('right-panels/right_panel_wrap_btns.png', 90px, @commonimage: false);
 }
 
-.button-normal-icon(btn-wrap-inline,      0, @x-huge-icon-size);
-.button-normal-icon(btn-wrap-square,      1, @x-huge-icon-size);
-.button-normal-icon(btn-wrap-tight,       2, @x-huge-icon-size);
-.button-normal-icon(btn-wrap-through,     3, @x-huge-icon-size);
-.button-normal-icon(btn-wrap-topbottom,   4, @x-huge-icon-size);
-.button-normal-icon(btn-wrap-infront,     5, @x-huge-icon-size);
-.button-normal-icon(btn-wrap-behind,      6, @x-huge-icon-size);
-
-.button-normal-icon(btn-drop-none,        7, @x-huge-icon-size);
-.button-normal-icon(btn-drop-text,        8, @x-huge-icon-size);
-.button-normal-icon(btn-drop-margin,      9, @x-huge-icon-size);
-.button-otherstates-icon(icon-advanced-wrap, @x-huge-icon-size);
-
 .combo-arrow-style {
     .form-control {
         cursor: pointer;

apps/documenteditor/main/resources/less/app.less

@@ -135,10 +135,30 @@
 
 @import "sprites/iconssmall@1x";
 @import "sprites/iconsbig@1x";
+@import "sprites/iconshuge@1x";
 @import "sprites/iconssmall@2x";
 @import "sprites/iconsbig@2x";
 @import "sprites/iconssmall@1.5x";
 @import "sprites/iconsbig@1.5x";
+@import "sprites/iconshuge@1.5x";
+
+:root {
+    --big-icon-background-image:  ~"url(@{app-image-const-path}/iconsbig.png)";
+    --huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge.png)";
+
+    --big-icon-background-image-width: 56px;
+    --huge-icon-background-image-width: 80px;
+
+    .pixel-ratio__1_5 {
+        --big-icon-background-image:  ~"url(@{app-image-const-path}/iconsbig@1.5x.png)";
+        --huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge@1.5x.png)";
+    }
+
+    .pixel-ratio__2 {
+        --big-icon-background-image:  ~"url(@{app-image-const-path}/iconsbig@2x.png)";
+        --huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge@2x.png)";
+    }
+}
 
 .font-size-small {
     .fontsize(@font-size-small);

apps/documenteditor/main/resources/less/rightmenu.less

@@ -215,3 +215,18 @@ button:active:not(.disabled) .btn-change-shape    {background-position: -56px  -
         }
     }
 }
+
+#image-combo-wrap, #chart-combo-wrap, #shape-combo-wrap {
+    .options__icon {
+        width: 40px;
+        height: 40px;
+    }
+
+    .item-icon-box {
+        width: 50px;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

build/sprites/Gruntfile.js

@@ -1,6 +1,7 @@
 module.exports = function (grunt, rootpathprefix) {
     const sprite_name = 'iconssmall';
     const sprite_name_big = 'iconsbig';
+    const sprite_name_huge = 'iconshuge';
 
     const helpers = {
         parselang: (name, options) => {
@@ -19,7 +20,7 @@ module.exports = function (grunt, rootpathprefix) {
     const configTemplate = opts => {
         let _editor_res_root = `${_prefix}apps/${opts.editor}/main/resources`,
             _common_res_root = `${_prefix}apps/common/main/resources`,
-            _scaled_path = `${opts.scale}/${opts.isbig ? 'big' : '.'}`;
+            _scaled_path = `${opts.scale}/${opts.extpath ? opts.extpath : '.'}`;
         return {
             src: [`${_editor_res_root}/img/toolbar/${_scaled_path}/*.png`, `${_common_res_root}/img/toolbar/${_scaled_path}/*.png`],
             dest: `${_editor_res_root}/img/${opts.scale != '1x' ? opts.spritename + '@' + opts.scale : opts.spritename}.png`,
@@ -41,7 +42,13 @@ module.exports = function (grunt, rootpathprefix) {
                 editor:'documenteditor',
                 spritename: sprite_name_big,
                 scale: '1x',
-                isbig: true
+                extpath: 'big'
+            }),
+            'word-huge-1x': configTemplate({
+                editor:'documenteditor',
+                spritename: sprite_name_huge,
+                scale: '1x',
+                extpath: 'huge'
             }),
             'word-2x': configTemplate({
                 editor:'documenteditor',
@@ -52,7 +59,13 @@ module.exports = function (grunt, rootpathprefix) {
                 editor:'documenteditor',
                 spritename: sprite_name_big,
                 scale: '2x',
-                isbig: true
+                extpath: 'big'
+            }),
+            'word-huge-2x': configTemplate({
+                editor:'documenteditor',
+                spritename: sprite_name_huge,
+                scale: '2x',
+                extpath: 'huge'
             }),
             'word1.5x': configTemplate({
                 editor:'documenteditor',
@@ -63,7 +76,13 @@ module.exports = function (grunt, rootpathprefix) {
                 editor:'documenteditor',
                 spritename: sprite_name_big,
                 scale: '1.5x',
-                isbig: true
+                extpath: 'big'
+            }),
+            'word-huge-1.5x': configTemplate({
+                editor:'documenteditor',
+                spritename: sprite_name_huge,
+                scale: '1.5x',
+                extpath: 'huge'
             }),
             'slide-1x': configTemplate({
                 editor:'presentationeditor',
@@ -74,7 +93,7 @@ module.exports = function (grunt, rootpathprefix) {
                 editor:'presentationeditor',
                 spritename: sprite_name_big,
                 scale: '1x',
-                isbig: true
+                extpath: 'big'
             }),
             'slide-2x': configTemplate({
                 editor:'presentationeditor',
@@ -85,7 +104,7 @@ module.exports = function (grunt, rootpathprefix) {
                 editor:'presentationeditor',
                 spritename: sprite_name_big,
                 scale: '2x',
-                isbig: true
+                extpath: 'big'
             }),
             'slide-1.5x': configTemplate({
                 editor:'presentationeditor',
@@ -96,7 +115,7 @@ module.exports = function (grunt, rootpathprefix) {
                 editor:'presentationeditor',
                 spritename: sprite_name_big,
                 scale: '1.5x',
-                isbig: true
+                extpath: 'big'
             }),
             'cell-1x': configTemplate({
                 editor:'spreadsheeteditor',
@@ -107,7 +126,7 @@ module.exports = function (grunt, rootpathprefix) {
                 editor:'spreadsheeteditor',
                 spritename: sprite_name_big,
                 scale: '1x',
-                isbig: true
+                extpath: 'big'
             }),
             'cell-2x': configTemplate({
                 editor:'spreadsheeteditor',
@@ -118,7 +137,7 @@ module.exports = function (grunt, rootpathprefix) {
                 editor:'spreadsheeteditor',
                 spritename: sprite_name_big,
                 scale: '2x',
-                isbig: true
+                extpath: 'big'
             }),
             'cell-1.5x': configTemplate({
                 editor:'spreadsheeteditor',
@@ -129,7 +148,7 @@ module.exports = function (grunt, rootpathprefix) {
                 editor:'spreadsheeteditor',
                 spritename: sprite_name_big,
                 scale: '1.5x',
-                isbig: true
+                extpath: 'big'
             })
         }
     });
@@ -137,7 +156,8 @@ module.exports = function (grunt, rootpathprefix) {
     // Load in `grunt-spritesmith`
     grunt.loadNpmTasks('grunt-spritesmith');
 
-    grunt.registerTask('word-icons', ['sprite:word-1x', 'sprite:word-big-1x', 'sprite:word-2x', 'sprite:word-big-2x', 'sprite:word1.5x', 'sprite:word-big-1.5x']);
+    grunt.registerTask('word-icons', ['sprite:word-1x', 'sprite:word-big-1x', 'sprite:word-huge-1x', 'sprite:word-2x', 'sprite:word-big-2x', 'sprite:word-huge-2x',
+                                        'sprite:word1.5x', 'sprite:word-big-1.5x', 'sprite:word-huge-1.5x']);
     grunt.registerTask('slide-icons', ['sprite:slide-1x', 'sprite:slide-big-1x','sprite:slide-2x', 'sprite:slide-big-2x','sprite:slide-1.5x', 'sprite:slide-big-1.5x']);
     grunt.registerTask('cell-icons', ['sprite:cell-1x', 'sprite:cell-big-1x','sprite:cell-2x', 'sprite:cell-big-2x','sprite:cell-1.5x', 'sprite:cell-big-1.5x']);